@dynostack/react-grid 0.1.0

package/dist/index.js

@@ -0,0 +1,2671 @@
+import { createContext, useState, useRef, useEffect, useMemo, useContext } from 'react';
+import { useReactTable, getPaginationRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { Trash2Icon, XIcon, SearchIcon, RefreshCwIcon, ColumnsIcon, DownloadIcon, FileTextIcon, FileSpreadsheetIcon, PlusIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PinOffIcon, PinIcon, EyeOffIcon, FilterIcon, CheckIcon, MoreHorizontalIcon, ChevronDownIcon, GripVerticalIcon, Loader2Icon, MinusIcon, CopyIcon, PencilIcon, EyeIcon, ChevronUpIcon } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot, Separator as Separator$1, Popover as Popover$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, Select as Select$1 } from 'radix-ui';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Checkbox$1.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer inline-flex size-4 shrink-0 items-center justify-center rounded-[5px] border border-input bg-background shadow-xs outline-none transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Checkbox$1.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current",
+          children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" })
+        }
+      )
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 data-[size^=icon]:hover:bg-primary/10 data-[size^=icon]:hover:text-primary data-[size^=icon]:hover:[&_svg]:text-primary data-[size^=icon]:aria-expanded:bg-primary/10 data-[size^=icon]:aria-expanded:text-primary data-[size^=icon]:aria-expanded:border data-[size^=icon]:aria-expanded:border-primary/30",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs font-medium whitespace-nowrap transition-colors [&_svg]:pointer-events-none [&_svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary/10 text-primary [a&]:hover:bg-primary/20",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive/10 text-destructive [a&]:hover:bg-destructive/20",
+        success: "border-transparent bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 [a&]:hover:bg-emerald-500/20",
+        warning: "border-transparent bg-amber-500/15 text-amber-700 dark:text-amber-400 [a&]:hover:bg-amber-500/25",
+        outline: "border-border text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator$1.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenu$1.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      align,
+      className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!", className),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 6,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/export.ts
+function escapeCsv(value) {
+  if (value === null || value === void 0) return "";
+  const s = String(value);
+  if (/[",\n\r]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
+  return s;
+}
+function escapeHtml(value) {
+  if (value === null || value === void 0) return "";
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function getExportRows(table) {
+  const visible = table.getVisibleLeafColumns().filter((c) => {
+    if (c.id === "__select" || c.id === "__expand" || c.id === "__actions")
+      return false;
+    return c.columnDef.meta?.exportable !== false;
+  });
+  const headers = visible.map(
+    (c) => c.columnDef.meta?.label ?? (typeof c.columnDef.header === "string" ? c.columnDef.header : c.id)
+  );
+  const selected = table.getSelectedRowModel().rows;
+  const rows = selected.length > 0 ? selected : table.getFilteredRowModel().rows;
+  const data = rows.map(
+    (row) => visible.map((col) => {
+      const value = row.getValue(col.id);
+      if (value instanceof Date) return value.toISOString().slice(0, 10);
+      if (typeof value === "object" && value !== null) return JSON.stringify(value);
+      return value;
+    })
+  );
+  return { headers, data };
+}
+function triggerDownload(content, mime, filename) {
+  const bom = "\uFEFF";
+  const blob = new Blob([bom + content], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 100);
+}
+function exportToCsv(table, fileName = "export") {
+  const { headers, data } = getExportRows(table);
+  const lines = [headers.map(escapeCsv).join(","), ...data.map((r) => r.map(escapeCsv).join(","))];
+  triggerDownload(lines.join("\r\n"), "text/csv;charset=utf-8;", `${fileName}.csv`);
+}
+function exportToExcel(table, fileName = "export") {
+  const { headers, data } = getExportRows(table);
+  const headerHtml = headers.map((h) => `<th style="background:#f4f4f5;text-align:left;padding:6px 10px;border:1px solid #d4d4d8">${escapeHtml(h)}</th>`).join("");
+  const bodyHtml = data.map(
+    (row) => `<tr>${row.map((c) => `<td style="padding:6px 10px;border:1px solid #d4d4d8">${escapeHtml(c)}</td>`).join("")}</tr>`
+  ).join("");
+  const html = `<!DOCTYPE html><html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="utf-8"/><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Sheet1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>${`<thead><tr>${headerHtml}</tr></thead><tbody>${bodyHtml}</tbody>`}</table></body></html>`;
+  triggerDownload(html, "application/vnd.ms-excel;charset=utf-8;", `${fileName}.xls`);
+}
+var TOOLBAR_DEFAULT_LABELS = {
+  search: "Search...",
+  addRow: "Add row",
+  delete: "Delete",
+  clear: "Clear",
+  selected: "selected",
+  refresh: "Refresh",
+  columns: "Columns",
+  export: "Export",
+  csv: "CSV",
+  excel: "Excel",
+  total: "Total"
+};
+function DataTableToolbar({
+  table,
+  totalRecords,
+  isFetching,
+  onRefresh,
+  onAddRow,
+  onBulkDelete,
+  exportFileName = "export",
+  globalFilter,
+  onGlobalFilterChange,
+  toolbarSlot,
+  features,
+  labels: labelsProp
+}) {
+  const labels = {
+    ...TOOLBAR_DEFAULT_LABELS,
+    ...labelsProp
+  };
+  const showSearch = features?.search ?? true;
+  const showColumnVisibility = features?.columnVisibility ?? true;
+  const showExport = features?.export ?? true;
+  const [searchOpen, setSearchOpen] = useState(Boolean(globalFilter));
+  const searchInputRef = useRef(null);
+  const selectedRows = table.getSelectedRowModel().rows;
+  const selectedCount = selectedRows.length;
+  const hideableColumns = table.getAllLeafColumns().filter((c) => c.getCanHide());
+  const visibleCount = hideableColumns.filter((c) => c.getIsVisible()).length;
+  useEffect(() => {
+    if (globalFilter) setSearchOpen(true);
+  }, [globalFilter]);
+  useEffect(() => {
+    if (searchOpen) searchInputRef.current?.focus();
+  }, [searchOpen]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b p-2", children: [
+    toolbarSlot,
+    selectedCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Badge,
+        {
+          variant: "secondary",
+          className: "flex h-8 items-center gap-1 rounded-md px-2 text-xs",
+          children: [
+            selectedCount,
+            " ",
+            labels.selected
+          ]
+        }
+      ),
+      onBulkDelete && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "destructive",
+          size: "sm",
+          className: "h-8",
+          onClick: () => onBulkDelete(selectedRows.map((r) => r.original)),
+          children: [
+            /* @__PURE__ */ jsx(Trash2Icon, {}),
+            " ",
+            labels.delete
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-8",
+          onClick: () => table.resetRowSelection(),
+          children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            " ",
+            labels.clear
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 !h-6 !self-center" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex h-8 items-center gap-1", children: [
+      showSearch && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "relative h-8 overflow-hidden transition-[width] duration-200 ease-out",
+            searchOpen ? "w-56" : "w-8"
+          ),
+          children: searchOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 opacity-60" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: searchInputRef,
+                placeholder: labels.search,
+                value: globalFilter,
+                onChange: (e) => onGlobalFilterChange(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Escape" && !globalFilter) setSearchOpen(false);
+                },
+                onBlur: () => {
+                  if (!globalFilter) setSearchOpen(false);
+                },
+                className: "h-8 w-56 border-input bg-transparent pl-7 pr-7 shadow-none focus-visible:bg-transparent focus-visible:ring-0"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => {
+                  if (globalFilter) {
+                    onGlobalFilterChange("");
+                    searchInputRef.current?.focus();
+                    return;
+                  }
+                  setSearchOpen(false);
+                },
+                className: "absolute top-1/2 right-1.5 -translate-y-1/2 rounded p-0.5 hover:bg-muted",
+                "aria-label": globalFilter ? "Clear search" : "Close search",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon-sm",
+              onClick: () => setSearchOpen(true),
+              "aria-label": "Open search",
+              children: /* @__PURE__ */ jsx(SearchIcon, {})
+            }
+          )
+        }
+      ),
+      onRefresh && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: onRefresh,
+          disabled: isFetching,
+          "aria-label": labels.refresh,
+          children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: isFetching ? "animate-spin" : void 0 })
+        }
+      ),
+      showColumnVisibility && /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ jsx(ColumnsIcon, {}),
+          " ",
+          labels.columns,
+          /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "ml-1", children: [
+            visibleCount,
+            "/",
+            hideableColumns.length
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-56 p-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: "Toggle columns" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "hover:text-foreground",
+                onClick: () => table.resetColumnVisibility(),
+                children: "Reset"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex max-h-72 flex-col gap-0.5 overflow-auto", children: hideableColumns.map((col) => /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-sm hover:bg-accent",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: col.getIsVisible(),
+                    onCheckedChange: (c) => col.toggleVisibility(!!c)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "capitalize", children: col.columnDef.meta?.label ?? (typeof col.columnDef.header === "string" ? col.columnDef.header : col.id) })
+              ]
+            },
+            col.id
+          )) })
+        ] })
+      ] }),
+      showExport && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ jsx(DownloadIcon, {}),
+          " ",
+          labels.export
+        ] }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: selectedCount > 0 ? `${labels.export} ${selectedCount} ${labels.selected}` : `${labels.export} all rows` }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onSelect: () => exportToCsv(table, exportFileName),
+              children: [
+                /* @__PURE__ */ jsx(FileTextIcon, {}),
+                " ",
+                labels.csv
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onSelect: () => exportToExcel(table, exportFileName),
+              children: [
+                /* @__PURE__ */ jsx(FileSpreadsheetIcon, {}),
+                " ",
+                labels.excel
+              ]
+            }
+          )
+        ] })
+      ] }),
+      onAddRow && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onAddRow, children: [
+        /* @__PURE__ */ jsx(PlusIcon, {}),
+        " ",
+        labels.addRow
+      ] }),
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 !h-6 !self-center" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1.5 rounded-md border bg-muted/40 px-2 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labels.total }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums", children: new Intl.NumberFormat().format(totalRecords) })
+      ] })
+    ] })
+  ] });
+}
+function Select(props) {
+  return /* @__PURE__ */ jsx(Select$1.Root, { "data-slot": "select", ...props });
+}
+function SelectValue(props) {
+  return /* @__PURE__ */ jsx(Select$1.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-background px-2.5 text-sm whitespace-nowrap shadow-xs outline-none transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "opacity-60" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Select$1.Content,
+    {
+      "data-slot": "select-content",
+      position,
+      className: cn(
+        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border bg-popover text-popover-foreground shadow-md data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          Select$1.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }) }) }),
+        /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-3.5" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5" })
+    }
+  );
+}
+function getPageRange(current, total) {
+  const pages = [];
+  if (total <= 7) {
+    for (let i = 0; i < total; i++) pages.push(i);
+    return pages;
+  }
+  pages.push(0);
+  if (current > 3) pages.push("\u2026");
+  const start = Math.max(1, current - 1);
+  const end = Math.min(total - 2, current + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (current < total - 4) pages.push("\u2026");
+  pages.push(total - 1);
+  return pages;
+}
+function DataTablePagination({
+  table,
+  pageSizeOptions = [10, 25, 50, 100]
+}) {
+  const pageIndex = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const pageCount = table.getPageCount();
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const fromRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+  const toRow = Math.min(totalRows, (pageIndex + 1) * pageSize);
+  const selected = table.getSelectedRowModel().rows.length;
+  const range = getPageRange(pageIndex, pageCount);
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-2 border-t p-2 text-xs md:grid-cols-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground md:justify-self-start", children: [
+      selected > 0 ? /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: selected }),
+        " ",
+        "selected \xB7",
+        " "
+      ] }) : null,
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Showing",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: fromRow }),
+        "\u2013",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: toRow }),
+        " of",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: new Intl.NumberFormat().format(totalRows) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:justify-self-center", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => table.setPageIndex(0),
+          disabled: !table.getCanPreviousPage(),
+          "aria-label": "First page",
+          children: /* @__PURE__ */ jsx(ChevronsLeftIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => table.previousPage(),
+          disabled: !table.getCanPreviousPage(),
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+        }
+      ),
+      range.map(
+        (p, idx) => p === "\u2026" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-muted-foreground", children: "\u2026" }, `e-${idx}`) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => table.setPageIndex(p),
+            className: cn(
+              "h-7 min-w-7 rounded-md border border-transparent px-2 text-xs font-medium transition-colors hover:bg-accent",
+              p === pageIndex ? "border-border bg-primary/10 text-primary" : "text-muted-foreground"
+            ),
+            children: p + 1
+          },
+          p
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => table.nextPage(),
+          disabled: !table.getCanNextPage(),
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => table.setPageIndex(pageCount - 1),
+          disabled: !table.getCanNextPage(),
+          "aria-label": "Last page",
+          children: /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground md:justify-self-end", children: [
+      /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: String(pageSize),
+          onValueChange: (v) => table.setPageSize(Number(v)),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "h-7 w-16", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt), children: opt }, opt)) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var TEXT_OPS = [
+  { v: "contains", l: "Contains" },
+  { v: "notContains", l: "Does not contain" },
+  { v: "equals", l: "Equals" },
+  { v: "notEqual", l: "Does not equal" },
+  { v: "startsWith", l: "Starts with" },
+  { v: "endsWith", l: "Ends with" },
+  { v: "blank", l: "Blank" },
+  { v: "notBlank", l: "Not blank" }
+];
+var NUMBER_OPS = [
+  { v: "equals", l: "Equals" },
+  { v: "notEqual", l: "Does not equal" },
+  { v: "lessThan", l: "Less than" },
+  { v: "lessThanOrEqual", l: "Less than or equal" },
+  { v: "greaterThan", l: "Greater than" },
+  { v: "greaterThanOrEqual", l: "Greater than or equal" },
+  { v: "inRange", l: "In range" },
+  { v: "blank", l: "Blank" },
+  { v: "notBlank", l: "Not blank" }
+];
+var DATE_OPS = [
+  { v: "equals", l: "Equals" },
+  { v: "notEqual", l: "Does not equal" },
+  { v: "before", l: "Before" },
+  { v: "after", l: "After" },
+  { v: "inRange", l: "In range" },
+  { v: "blank", l: "Blank" },
+  { v: "notBlank", l: "Not blank" }
+];
+function isUnary(op) {
+  return op === "blank" || op === "notBlank";
+}
+function isRange(op) {
+  return op === "inRange";
+}
+function evalText(op, cell, q) {
+  const c = (cell ?? "").toString().toLowerCase();
+  const v = (q ?? "").toString().toLowerCase();
+  switch (op) {
+    case "contains":
+      return v === "" ? true : c.includes(v);
+    case "notContains":
+      return v === "" ? true : !c.includes(v);
+    case "equals":
+      return c === v;
+    case "notEqual":
+      return c !== v;
+    case "startsWith":
+      return c.startsWith(v);
+    case "endsWith":
+      return c.endsWith(v);
+    case "blank":
+      return c === "";
+    case "notBlank":
+      return c !== "";
+  }
+}
+function evalNumber(op, cell, a, b) {
+  const n = cell == null || cell === "" ? null : Number(cell);
+  switch (op) {
+    case "blank":
+      return n === null;
+    case "notBlank":
+      return n !== null;
+  }
+  if (n === null || Number.isNaN(n)) return false;
+  if (a == null) return true;
+  switch (op) {
+    case "equals":
+      return n === a;
+    case "notEqual":
+      return n !== a;
+    case "lessThan":
+      return n < a;
+    case "lessThanOrEqual":
+      return n <= a;
+    case "greaterThan":
+      return n > a;
+    case "greaterThanOrEqual":
+      return n >= a;
+    case "inRange":
+      if (b == null) return n >= a;
+      return n >= a && n <= b;
+  }
+  return true;
+}
+function evalDate(op, cell, a, b) {
+  const c = cell ? String(cell) : "";
+  switch (op) {
+    case "blank":
+      return c === "";
+    case "notBlank":
+      return c !== "";
+  }
+  if (!c) return false;
+  if (!a) return true;
+  switch (op) {
+    case "equals":
+      return c === a;
+    case "notEqual":
+      return c !== a;
+    case "before":
+      return c < a;
+    case "after":
+      return c > a;
+    case "inRange":
+      if (!b) return c >= a;
+      return c >= a && c <= b;
+  }
+  return true;
+}
+function combineResults(a, b, mode) {
+  if (mode === "OR") return a || b;
+  return a && b;
+}
+function isAdvActive(f) {
+  if (!f?.c1) return false;
+  const c1 = f.c1;
+  if (isUnary(c1.op)) return true;
+  if (c1.v == null || c1.v === "") {
+    if (!f.c2) return false;
+    const c2 = f.c2;
+    if (isUnary(c2.op)) return true;
+    return c2.v != null && c2.v !== "";
+  }
+  return true;
+}
+var textFilterFn = (row, columnId, value) => {
+  const f = value;
+  if (!isAdvActive(f)) return true;
+  const cell = row.getValue(columnId);
+  const c1 = f.c1;
+  const aActive = isUnary(c1.op) || c1.v != null && c1.v !== "";
+  const aRes = aActive ? evalText(c1.op, cell, c1.v) : true;
+  if (!f.c2) return aRes;
+  const c2 = f.c2;
+  const bActive = isUnary(c2.op) || c2.v != null && c2.v !== "";
+  if (!bActive) return aRes;
+  const bRes = evalText(c2.op, cell, c2.v);
+  if (!aActive) return bRes;
+  return combineResults(aRes, bRes, f.combine);
+};
+var numberFilterFn = (row, columnId, value) => {
+  const f = value;
+  if (!isAdvActive(f)) return true;
+  const cell = row.getValue(columnId);
+  const c1 = f.c1;
+  const aActive = isUnary(c1.op) || c1.v != null;
+  const aRes = aActive ? evalNumber(c1.op, cell, c1.v, c1.v2) : true;
+  if (!f.c2) return aRes;
+  const c2 = f.c2;
+  const bActive = isUnary(c2.op) || c2.v != null;
+  if (!bActive) return aRes;
+  const bRes = evalNumber(c2.op, cell, c2.v, c2.v2);
+  if (!aActive) return bRes;
+  return combineResults(aRes, bRes, f.combine);
+};
+var dateFilterFn = (row, columnId, value) => {
+  const f = value;
+  if (!isAdvActive(f)) return true;
+  const cell = row.getValue(columnId);
+  const c1 = f.c1;
+  const aActive = isUnary(c1.op) || c1.v != null && c1.v !== "";
+  const aRes = aActive ? evalDate(c1.op, cell, c1.v, c1.v2) : true;
+  if (!f.c2) return aRes;
+  const c2 = f.c2;
+  const bActive = isUnary(c2.op) || c2.v != null && c2.v !== "";
+  if (!bActive) return aRes;
+  const bRes = evalDate(c2.op, cell, c2.v, c2.v2);
+  if (!aActive) return bRes;
+  return combineResults(aRes, bRes, f.combine);
+};
+var setFilterFn = (row, columnId, value) => {
+  const f = value;
+  if (!f || !Array.isArray(f.selected)) return true;
+  if (f.selected.length === 0) return false;
+  const cell = row.getValue(columnId);
+  if (Array.isArray(cell)) {
+    return cell.some((c) => f.selected.includes(String(c)));
+  }
+  return f.selected.includes(String(cell ?? ""));
+};
+var booleanFilterFn = (row, columnId, value) => {
+  if (value === void 0 || value === null || value === "") return true;
+  const cell = row.getValue(columnId);
+  return Boolean(cell) === Boolean(value);
+};
+function isFilterActive(filterType, value) {
+  if (value === void 0 || value === null || value === "") return false;
+  if (filterType === "multi-select" || filterType === "select") {
+    const f = value;
+    return Array.isArray(f.selected);
+  }
+  if (filterType === "text" || filterType === "number" || filterType === "date") {
+    return isAdvActive(value);
+  }
+  if (filterType === "boolean") return value !== void 0;
+  return true;
+}
+function ColumnFilterPanel(props) {
+  const filterType = props.column.columnDef.meta?.filterType;
+  switch (filterType) {
+    case "text":
+      return /* @__PURE__ */ jsx(TextFilterPanel, { ...props });
+    case "number":
+      return /* @__PURE__ */ jsx(NumberFilterPanel, { ...props });
+    case "date":
+      return /* @__PURE__ */ jsx(DateFilterPanel, { ...props });
+    case "select":
+    case "multi-select":
+      return /* @__PURE__ */ jsx(SetFilterPanel, { ...props });
+    case "boolean":
+      return /* @__PURE__ */ jsx(BooleanFilterPanel, { ...props });
+    default:
+      return null;
+  }
+}
+function OpSelect({
+  ops,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:border-ring",
+      children: ops.map((o) => /* @__PURE__ */ jsx("option", { value: o.v, children: o.l }, o.v))
+    }
+  );
+}
+function CombineToggle({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "inline-flex h-7 overflow-hidden rounded-md border bg-muted/30 text-[11px]", children: ["AND", "OR"].map((m) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "px-2 transition-colors hover:bg-muted",
+        value === m && "bg-primary/10 text-primary"
+      ),
+      onClick: () => onChange(m),
+      children: m
+    },
+    m
+  )) });
+}
+function FooterBar({
+  onApply,
+  onClear,
+  onClose,
+  applyDisabled,
+  clearDisabled
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "xs",
+        variant: "ghost",
+        onClick: onClear,
+        disabled: clearDisabled,
+        children: "Clear"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", onClick: onClose, children: "Close" }),
+      onApply && /* @__PURE__ */ jsx(Button, { size: "xs", onClick: onApply, disabled: applyDisabled, children: "Apply" })
+    ] })
+  ] });
+}
+function TextFilterPanel({
+  column,
+  onClose
+}) {
+  const value = column.getFilterValue();
+  const [draft, setDraft] = useState(
+    value ?? { c1: { op: "contains", v: "" } }
+  );
+  useEffect(() => {
+    setDraft(value ?? { c1: { op: "contains", v: "" } });
+  }, [value]);
+  const apply = () => {
+    column.setFilterValue(
+      isAdvActive(draft) ? draft : void 0
+    );
+    onClose();
+  };
+  const clear = () => {
+    column.setFilterValue(void 0);
+    setDraft({ c1: { op: "contains", v: "" } });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      ConditionRow,
+      {
+        ops: TEXT_OPS,
+        c: draft.c1,
+        onChange: (c1) => setDraft((d) => ({ ...d, c1 })),
+        renderInput: (c, set) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            autoFocus: true,
+            className: "h-8 text-sm",
+            placeholder: "Value",
+            value: c.v ?? "",
+            onChange: (e) => set({ ...c, v: e.target.value }),
+            onKeyDown: (e) => e.key === "Enter" && apply()
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      SecondCondition,
+      {
+        draft,
+        setDraft,
+        ops: TEXT_OPS,
+        renderInput: (c, set) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: "h-8 text-sm",
+            placeholder: "Value",
+            value: c.v ?? "",
+            onChange: (e) => set({ ...c, v: e.target.value }),
+            onKeyDown: (e) => e.key === "Enter" && apply()
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(FooterBar, { onApply: apply, onClear: clear, onClose, clearDisabled: !value })
+  ] });
+}
+function NumberFilterPanel({
+  column,
+  onClose
+}) {
+  const value = column.getFilterValue();
+  const [draft, setDraft] = useState(
+    value ?? { c1: { op: "equals" } }
+  );
+  useEffect(() => {
+    setDraft(value ?? { c1: { op: "equals" } });
+  }, [value]);
+  const apply = () => {
+    column.setFilterValue(
+      isAdvActive(draft) ? draft : void 0
+    );
+    onClose();
+  };
+  const clear = () => {
+    column.setFilterValue(void 0);
+    setDraft({ c1: { op: "equals" } });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      ConditionRow,
+      {
+        ops: NUMBER_OPS,
+        c: draft.c1,
+        onChange: (c1) => setDraft((d) => ({ ...d, c1 })),
+        renderInput: (c, set) => isRange(c.op) ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              autoFocus: true,
+              type: "number",
+              className: "h-8 text-sm",
+              placeholder: "From",
+              value: c.v ?? "",
+              onChange: (e) => set({
+                ...c,
+                v: e.target.value === "" ? void 0 : Number(e.target.value)
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              className: "h-8 text-sm",
+              placeholder: "To",
+              value: c.v2 ?? "",
+              onChange: (e) => set({
+                ...c,
+                v2: e.target.value === "" ? void 0 : Number(e.target.value)
+              })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          Input,
+          {
+            autoFocus: true,
+            type: "number",
+            className: "h-8 text-sm",
+            placeholder: "Value",
+            value: c.v ?? "",
+            onChange: (e) => set({
+              ...c,
+              v: e.target.value === "" ? void 0 : Number(e.target.value)
+            }),
+            onKeyDown: (e) => e.key === "Enter" && apply()
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      SecondCondition,
+      {
+        draft,
+        setDraft,
+        ops: NUMBER_OPS,
+        renderInput: (c, set) => isRange(c.op) ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              className: "h-8 text-sm",
+              placeholder: "From",
+              value: c.v ?? "",
+              onChange: (e) => set({
+                ...c,
+                v: e.target.value === "" ? void 0 : Number(e.target.value)
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              className: "h-8 text-sm",
+              placeholder: "To",
+              value: c.v2 ?? "",
+              onChange: (e) => set({
+                ...c,
+                v2: e.target.value === "" ? void 0 : Number(e.target.value)
+              })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            className: "h-8 text-sm",
+            placeholder: "Value",
+            value: c.v ?? "",
+            onChange: (e) => set({
+              ...c,
+              v: e.target.value === "" ? void 0 : Number(e.target.value)
+            })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(FooterBar, { onApply: apply, onClear: clear, onClose, clearDisabled: !value })
+  ] });
+}
+function DateFilterPanel({
+  column,
+  onClose
+}) {
+  const value = column.getFilterValue();
+  const [draft, setDraft] = useState(
+    value ?? { c1: { op: "equals" } }
+  );
+  useEffect(() => {
+    setDraft(value ?? { c1: { op: "equals" } });
+  }, [value]);
+  const apply = () => {
+    column.setFilterValue(
+      isAdvActive(draft) ? draft : void 0
+    );
+    onClose();
+  };
+  const clear = () => {
+    column.setFilterValue(void 0);
+    setDraft({ c1: { op: "equals" } });
+  };
+  const renderInput = (c, set) => isRange(c.op) ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "date",
+        className: "h-8 text-sm",
+        value: c.v ?? "",
+        onChange: (e) => set({ ...c, v: e.target.value || void 0 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "date",
+        className: "h-8 text-sm",
+        value: c.v2 ?? "",
+        onChange: (e) => set({ ...c, v2: e.target.value || void 0 })
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx(
+    Input,
+    {
+      type: "date",
+      className: "h-8 text-sm",
+      value: c.v ?? "",
+      onChange: (e) => set({ ...c, v: e.target.value || void 0 })
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      ConditionRow,
+      {
+        ops: DATE_OPS,
+        c: draft.c1,
+        onChange: (c1) => setDraft((d) => ({ ...d, c1 })),
+        renderInput
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(
+      SecondCondition,
+      {
+        draft,
+        setDraft,
+        ops: DATE_OPS,
+        renderInput
+      }
+    ),
+    /* @__PURE__ */ jsx(FooterBar, { onApply: apply, onClear: clear, onClose, clearDisabled: !value })
+  ] });
+}
+function SetFilterPanel({
+  column,
+  onClose
+}) {
+  const value = column.getFilterValue();
+  const meta = column.columnDef.meta;
+  const declared = meta?.selectOptions ?? [];
+  const options = useMemo(() => {
+    if (declared.length) return declared;
+    const rows = column.getFacetedRowModel?.().rows ?? [];
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const r of rows) {
+      const v = r.getValue(column.id);
+      const arr = Array.isArray(v) ? v : [v];
+      for (const item of arr) {
+        const k = item == null ? "" : String(item);
+        if (!seen.has(k)) {
+          seen.add(k);
+          out.push({ value: k, label: k === "" ? "(Blank)" : k });
+        }
+      }
+    }
+    return out.sort((a, b) => a.label.localeCompare(b.label));
+  }, [declared, column]);
+  const [search, setSearch] = useState("");
+  const [draft, setDraft] = useState(() => {
+    if (value && Array.isArray(value.selected)) return value.selected;
+    return options.map((o) => o.value);
+  });
+  useEffect(() => {
+    if (!value) setDraft(options.map((o) => o.value));
+    else if (Array.isArray(value.selected)) setDraft(value.selected);
+  }, [value, options]);
+  const visible = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, search]);
+  const visibleAllSelected = visible.length > 0 && visible.every((o) => draft.includes(o.value));
+  const visibleSomeSelected = visible.some((o) => draft.includes(o.value));
+  const toggleAll = (checked) => {
+    const visibleVals = visible.map((o) => o.value);
+    if (checked) {
+      const set = /* @__PURE__ */ new Set([...draft, ...visibleVals]);
+      setDraft(Array.from(set));
+    } else {
+      setDraft(draft.filter((v) => !visibleVals.includes(v)));
+    }
+  };
+  const toggle = (v) => {
+    setDraft((d) => d.includes(v) ? d.filter((x) => x !== v) : [...d, v]);
+  };
+  const apply = () => {
+    if (draft.length === options.length) {
+      column.setFilterValue(void 0);
+    } else {
+      column.setFilterValue({ selected: draft });
+    }
+    onClose();
+  };
+  const clear = () => {
+    column.setFilterValue(void 0);
+    setDraft(options.map((o) => o.value));
+    setSearch("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 opacity-60" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          placeholder: "Search...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          className: "h-8 pl-7 pr-7 text-sm"
+        }
+      ),
+      search && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSearch(""),
+          className: "absolute top-1/2 right-1.5 -translate-y-1/2 rounded p-0.5 hover:bg-muted",
+          "aria-label": "Clear search",
+          children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 rounded px-1 py-1 text-sm hover:bg-accent", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: visibleAllSelected ? true : visibleSomeSelected ? "indeterminate" : false,
+          onCheckedChange: (c) => toggleAll(!!c)
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium", children: [
+        "Select all ",
+        search ? "(filtered)" : ""
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[10px] text-muted-foreground", children: [
+        draft.length,
+        "/",
+        options.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex max-h-60 flex-col gap-0.5 overflow-auto pr-0.5", children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-3 text-xs text-muted-foreground", children: "No matches" }) : visible.map((o) => {
+      const checked = draft.includes(o.value);
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex cursor-pointer items-center gap-2 rounded px-1 py-1 text-sm hover:bg-accent",
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked,
+                onCheckedChange: () => toggle(o.value)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: o.label })
+          ]
+        },
+        o.value
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      FooterBar,
+      {
+        onApply: apply,
+        onClear: clear,
+        onClose,
+        clearDisabled: !value
+      }
+    )
+  ] });
+}
+function BooleanFilterPanel({
+  column,
+  onClose
+}) {
+  const value = column.getFilterValue();
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: [
+    { v: void 0, l: "All" },
+    { v: true, l: "True" },
+    { v: false, l: "False" }
+  ].map((o) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        column.setFilterValue(o.v);
+        onClose();
+      },
+      className: cn(
+        "rounded px-2 py-1 text-left text-sm hover:bg-accent",
+        value === o.v && "bg-accent text-accent-foreground"
+      ),
+      children: o.l
+    },
+    String(o.l)
+  )) });
+}
+function ConditionRow({
+  ops,
+  c,
+  onChange,
+  renderInput
+}) {
+  const showInput = !isUnary(c.op);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(OpSelect, { ops, value: c.op, onChange: (op) => onChange({ ...c, op }) }),
+    showInput && renderInput(c, onChange)
+  ] });
+}
+function SecondCondition({
+  draft,
+  setDraft,
+  ops,
+  renderInput
+}) {
+  const enabled = !!draft.c2;
+  const c2 = draft.c2;
+  const combine = draft.combine ?? "AND";
+  if (!enabled) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setDraft((d) => ({
+          ...d,
+          combine: d.combine ?? "AND",
+          c2: { op: ops[0].v }
+        })),
+        className: "self-start text-[11px] font-medium text-primary hover:underline",
+        children: "+ Add condition"
+      }
+    );
+  }
+  const setC2 = (n) => setDraft((d) => ({ ...d, c2: n }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(
+        CombineToggle,
+        {
+          value: combine,
+          onChange: (combine2) => setDraft((d) => ({ ...d, combine: combine2 }))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setDraft((d) => ({ ...d, combine: void 0, c2: void 0 })),
+          className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+          "aria-label": "Remove second condition",
+          children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConditionRow,
+      {
+        ops,
+        c: c2,
+        onChange: setC2,
+        renderInput
+      }
+    )
+  ] });
+}
+function DataTableColumnHeader({
+  column,
+  title
+}) {
+  const filterType = column.columnDef.meta?.filterType;
+  const canSort = column.getCanSort();
+  const canFilter = column.getCanFilter() && !!filterType;
+  const canHide = column.getCanHide();
+  const canPin = column.getCanPin();
+  const sorted = column.getIsSorted();
+  const isPinned = column.getIsPinned();
+  const filterValue = column.getFilterValue();
+  const isFiltered = isFilterActive(filterType, filterValue);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1", children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "xs",
+          className: "-ml-2 h-7 px-1.5 text-xs font-medium data-[state=open]:bg-accent",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: title }),
+            canSort ? sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { className: "opacity-70" }) : sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { className: "opacity-70" }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "opacity-50" }) : null
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-44", children: [
+        canSort && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => column.toggleSorting(false), children: [
+            /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+            " Ascending"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => column.toggleSorting(true), children: [
+            /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+            " Descending"
+          ] }),
+          sorted && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => column.clearSorting(), children: [
+            /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}),
+            " Clear sort"
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+        ] }),
+        canPin && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Pin column" }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onSelect: () => column.pin(isPinned === "left" ? false : "left"),
+              children: [
+                isPinned === "left" ? /* @__PURE__ */ jsx(PinOffIcon, {}) : /* @__PURE__ */ jsx(PinIcon, {}),
+                " ",
+                isPinned === "left" ? "Unpin from left" : "Pin to left"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onSelect: () => column.pin(isPinned === "right" ? false : "right"),
+              children: [
+                isPinned === "right" ? /* @__PURE__ */ jsx(PinOffIcon, {}) : /* @__PURE__ */ jsx(PinIcon, {}),
+                " ",
+                isPinned === "right" ? "Unpin from right" : "Pin to right"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+        ] }),
+        canHide && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => column.toggleVisibility(false), children: [
+          /* @__PURE__ */ jsx(EyeOffIcon, {}),
+          " Hide column"
+        ] })
+      ] })
+    ] }),
+    canFilter && /* @__PURE__ */ jsx(ColumnFilter, { column, isFiltered })
+  ] });
+}
+function ColumnFilter({
+  column,
+  isFiltered
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-xs",
+        className: cn(
+          "size-6",
+          isFiltered && "bg-primary/10 text-primary"
+        ),
+        "aria-label": "Filter column",
+        children: /* @__PURE__ */ jsx(FilterIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-72 p-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Filter" }),
+        isFiltered && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: "Active" })
+      ] }),
+      /* @__PURE__ */ jsx(ColumnFilterPanel, { column, onClose: () => setOpen(false) })
+    ] })
+  ] });
+}
+var builtinIcons = {
+  view: /* @__PURE__ */ jsx(EyeIcon, {}),
+  edit: /* @__PURE__ */ jsx(PencilIcon, {}),
+  duplicate: /* @__PURE__ */ jsx(CopyIcon, {}),
+  delete: /* @__PURE__ */ jsx(Trash2Icon, {})
+};
+var builtinLabels = {
+  view: "View",
+  edit: "Edit",
+  duplicate: "Duplicate",
+  delete: "Delete"
+};
+function DataTableRowActions({
+  row,
+  actions = ["view", "edit", "duplicate", "delete"],
+  customActions = [],
+  onAction,
+  isEditing,
+  onSaveEdit,
+  onCancelEdit
+}) {
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!menuRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon-xs",
+          variant: "ghost",
+          onClick: onSaveEdit,
+          "aria-label": "Save row",
+          className: "text-emerald-600 hover:text-emerald-600",
+          children: /* @__PURE__ */ jsx(CheckIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon-xs",
+          variant: "ghost",
+          onClick: onCancelEdit,
+          "aria-label": "Cancel edit",
+          children: /* @__PURE__ */ jsx(XIcon, {})
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "relative flex justify-end", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-xs",
+        "aria-label": "Open row actions",
+        "aria-expanded": open,
+        onClick: () => setOpen((value) => !value),
+        children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {})
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute top-7 right-0 z-50 w-40 rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: [
+      actions.map((a) => /* @__PURE__ */ jsxs(
+        RowActionButton,
+        {
+          danger: a === "delete",
+          onClick: () => {
+            setOpen(false);
+            onAction?.(a, row);
+          },
+          children: [
+            builtinIcons[a],
+            " ",
+            builtinLabels[a]
+          ]
+        },
+        a
+      )),
+      customActions.length > 0 && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "-mx-1 my-1 h-px bg-border" }),
+      customActions.filter((c) => c.show ? c.show(row) : true).map((c) => /* @__PURE__ */ jsxs(
+        RowActionButton,
+        {
+          danger: c.danger,
+          onClick: () => {
+            setOpen(false);
+            onAction?.(c.id, row);
+          },
+          children: [
+            c.icon,
+            " ",
+            c.label
+          ]
+        },
+        c.id
+      ))
+    ] })
+  ] });
+}
+function RowActionButton({
+  children,
+  danger,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent",
+        danger && "text-destructive hover:bg-destructive/10 hover:text-destructive"
+      ),
+      children
+    }
+  );
+}
+function EditableCell({
+  getValue,
+  column,
+  row,
+  isEditing,
+  autoOpen,
+  onCommit,
+  onCancel,
+  onStartEdit
+}) {
+  const meta = column.columnDef.meta;
+  const editor = meta?.editor ?? "text";
+  const align = meta?.align ?? "left";
+  const initial = getValue();
+  const [local, setLocal] = useState(initial);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setLocal(initial);
+  }, [initial, isEditing]);
+  useEffect(() => {
+    if (isEditing && inputRef.current) inputRef.current.focus();
+  }, [isEditing]);
+  const isEditable = (() => {
+    const flag = meta?.isEditable;
+    if (flag === void 0) return true;
+    if (typeof flag === "function") return flag(row.original);
+    return flag;
+  })();
+  if (!isEditing) {
+    const display = renderDisplay(initial, editor, meta);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex h-7 items-center gap-1.5 rounded px-1.5 text-sm",
+          isEditable && "cursor-text outline-1 outline-transparent transition-colors hover:bg-muted/60 hover:outline-border",
+          align === "right" && "justify-end",
+          align === "center" && "justify-center"
+        ),
+        onDoubleClick: () => isEditable && onStartEdit(),
+        title: isEditable ? "Double-click to edit" : void 0,
+        children: display
+      }
+    );
+  }
+  const commit = (value) => onCommit(value);
+  const handleKey = (e) => {
+    if (e.key === "Enter") commit(local);
+    else if (e.key === "Escape") onCancel();
+  };
+  if (editor === "select") {
+    const opts = meta?.selectOptions ?? [];
+    if (!autoOpen) {
+      return /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: String(local ?? ""),
+          onChange: (e) => {
+            setLocal(e.target.value);
+            commit(e.target.value);
+          },
+          className: cn(
+            "h-7 w-full rounded-md border border-input bg-background px-1.5 text-xs outline-none focus-visible:border-ring",
+            align === "right" && "text-right",
+            align === "center" && "text-center"
+          ),
+          children: opts.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        defaultOpen: autoOpen,
+        value: String(local ?? ""),
+        onValueChange: (v) => commit(v),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "h-7 w-full text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: opts.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
+        ]
+      }
+    );
+  }
+  if (editor === "checkbox" || editor === "switch") {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-7 items-center justify-center", children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: !!local,
+        onCheckedChange: (c) => commit(!!c),
+        autoFocus: true
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: inputRef,
+      type: editor === "number" || editor === "currency" ? "number" : editor === "date" ? "date" : "text",
+      value: local == null ? "" : String(local),
+      onChange: (e) => {
+        if (editor === "number" || editor === "currency") {
+          setLocal(e.target.value === "" ? null : Number(e.target.value));
+        } else {
+          setLocal(e.target.value);
+        }
+      },
+      onBlur: () => commit(local),
+      onKeyDown: handleKey,
+      className: cn(
+        "h-7 px-1.5 text-sm",
+        align === "right" && "text-right",
+        align === "center" && "text-center"
+      )
+    }
+  );
+}
+function renderDisplay(value, editor, meta) {
+  if (value === null || value === void 0 || value === "") {
+    return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "\u2014" });
+  }
+  if (editor === "currency") {
+    const n = typeof value === "number" ? value : Number(value);
+    return Number.isFinite(n) ? new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 2
+    }).format(n) : String(value);
+  }
+  if (editor === "number") {
+    const n = typeof value === "number" ? value : Number(value);
+    return Number.isFinite(n) ? new Intl.NumberFormat().format(n) : String(value);
+  }
+  if (editor === "checkbox" || editor === "switch") {
+    return /* @__PURE__ */ jsx(Checkbox, { checked: !!value, disabled: true, "aria-label": "value" });
+  }
+  if (editor === "select") {
+    const opt = meta?.selectOptions?.find((o) => o.value === value);
+    const label = opt?.label ?? String(value);
+    if (meta?.badgeMap) {
+      const variant = meta.badgeMap[String(value)] ?? "default";
+      return /* @__PURE__ */ jsx(Badge, { variant, children: label });
+    }
+    return label;
+  }
+  if (editor === "date") {
+    if (value instanceof Date) return value.toLocaleDateString();
+    return String(value);
+  }
+  return String(value);
+}
+
+// src/theme.ts
+var TOKEN_TO_VAR = {
+  background: "--background",
+  foreground: "--foreground",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  popover: "--popover",
+  popoverForeground: "--popover-foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  secondary: "--secondary",
+  secondaryForeground: "--secondary-foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  accent: "--accent",
+  accentForeground: "--accent-foreground",
+  destructive: "--destructive",
+  destructiveForeground: "--destructive-foreground",
+  border: "--border",
+  input: "--input",
+  ring: "--ring",
+  radius: "--radius",
+  fontFamily: "--font-family"
+};
+function themeToStyle(theme) {
+  if (!theme) return {};
+  const out = {};
+  for (const [k, v] of Object.entries(theme)) {
+    if (v == null) continue;
+    const cssVar = TOKEN_TO_VAR[k];
+    if (cssVar) out[cssVar] = v;
+  }
+  return out;
+}
+var themePresets = {
+  light: {
+    background: "oklch(1 0 0)",
+    foreground: "oklch(0.145 0 0)",
+    card: "oklch(1 0 0)",
+    cardForeground: "oklch(0.145 0 0)",
+    primary: "oklch(0.205 0 0)",
+    primaryForeground: "oklch(0.985 0 0)",
+    border: "oklch(0.922 0 0)"
+  },
+  dark: {
+    background: "oklch(0.145 0 0)",
+    foreground: "oklch(0.985 0 0)",
+    card: "oklch(0.205 0 0)",
+    cardForeground: "oklch(0.985 0 0)",
+    primary: "oklch(0.985 0 0)",
+    primaryForeground: "oklch(0.205 0 0)",
+    border: "oklch(0.269 0 0)"
+  },
+  emerald: {
+    primary: "oklch(0.66 0.15 162)",
+    primaryForeground: "oklch(1 0 0)",
+    accent: "oklch(0.94 0.04 162)",
+    accentForeground: "oklch(0.3 0.1 162)",
+    ring: "oklch(0.66 0.15 162 / 0.5)"
+  },
+  violet: {
+    primary: "oklch(0.55 0.22 285)",
+    primaryForeground: "oklch(1 0 0)",
+    accent: "oklch(0.94 0.04 285)",
+    accentForeground: "oklch(0.3 0.12 285)",
+    ring: "oklch(0.55 0.22 285 / 0.5)"
+  },
+  amber: {
+    primary: "oklch(0.7 0.18 65)",
+    primaryForeground: "oklch(0.2 0 0)",
+    accent: "oklch(0.94 0.05 65)",
+    accentForeground: "oklch(0.3 0.12 65)",
+    ring: "oklch(0.7 0.18 65 / 0.5)"
+  }
+};
+function getPinningStyles(column) {
+  const isPinned = column.getIsPinned();
+  if (!isPinned) return {};
+  const isLast = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirst = isPinned === "right" && column.getIsFirstColumn("right");
+  return {
+    position: "sticky",
+    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    zIndex: 1,
+    boxShadow: isLast ? "1px 0 0 0 var(--border)" : isFirst ? "-1px 0 0 0 var(--border)" : void 0
+  };
+}
+var DataTableEditingContext = createContext(
+  null
+);
+function useEditingContext() {
+  const ctx = useContext(DataTableEditingContext);
+  if (!ctx) throw new Error("DataTable editing context missing");
+  return ctx;
+}
+function EditableCellHost(ctx) {
+  const {
+    editingCell,
+    editingRowId,
+    setEditingCell,
+    setRowDraft,
+    onCellEdit
+  } = useEditingContext();
+  const colId = ctx.column.id;
+  const rowId = ctx.row.id;
+  const isCellEdit = editingCell?.rowId === rowId && editingCell.colId === colId;
+  const isRowEdit = editingRowId === rowId;
+  const isEditing = isCellEdit || isRowEdit;
+  return /* @__PURE__ */ jsx(
+    EditableCell,
+    {
+      ...ctx,
+      isEditing,
+      autoOpen: isCellEdit,
+      onStartEdit: () => setEditingCell({ rowId, colId }),
+      onCancel: () => {
+        if (isCellEdit) setEditingCell(null);
+      },
+      onCommit: (value) => {
+        if (isRowEdit) {
+          setRowDraft((d) => ({
+            ...d,
+            [rowId]: {
+              ...d[rowId],
+              [colId]: value
+            }
+          }));
+          return;
+        }
+        setEditingCell(null);
+        if (value !== ctx.getValue()) {
+          onCellEdit?.(ctx.row.original, colId, value);
+        }
+      }
+    }
+  );
+}
+function ActionsCellHost({ row }) {
+  const {
+    editingRowId,
+    setEditingRowId,
+    rowDraft,
+    setRowDraft,
+    rowActions,
+    customRowActions,
+    onRowAction,
+    onRowSave
+  } = useEditingContext();
+  const rowId = row.id;
+  const isRowEdit = editingRowId === rowId;
+  return /* @__PURE__ */ jsx(
+    DataTableRowActions,
+    {
+      row: row.original,
+      actions: rowActions,
+      customActions: customRowActions,
+      isEditing: isRowEdit,
+      onSaveEdit: () => {
+        onRowSave?.(row.original, rowDraft[rowId] ?? {});
+        setRowDraft((d) => {
+          const { [rowId]: _, ...rest } = d;
+          return rest;
+        });
+        setEditingRowId(null);
+      },
+      onCancelEdit: () => {
+        setRowDraft((d) => {
+          const { [rowId]: _, ...rest } = d;
+          return rest;
+        });
+        setEditingRowId(null);
+      },
+      onAction: (a) => {
+        if (a === "edit") {
+          setEditingRowId(rowId);
+          return;
+        }
+        onRowAction?.(a, row.original);
+      }
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  search: "Search...",
+  addRow: "Add row",
+  delete: "Delete",
+  clear: "Clear",
+  selected: "selected",
+  refresh: "Refresh",
+  columns: "Columns",
+  export: "Export",
+  csv: "CSV",
+  excel: "Excel",
+  total: "Total",
+  noData: "No data.",
+  noResults: "No rows match the current filters.",
+  refreshing: "Refreshing",
+  rowsPerPage: "Rows per page",
+  page: "Page",
+  of: "of"
+};
+var DENSITY_CLASS = {
+  compact: "[&_tbody_td]:py-0.5 [&_tbody_td]:text-xs",
+  default: "",
+  comfortable: "[&_tbody_td]:py-2"
+};
+function DataTable({
+  data,
+  columns,
+  isLoading,
+  isFetching,
+  onRefresh,
+  totalRecords,
+  exportFileName,
+  enableSelection = true,
+  renderSubRow,
+  getSubRows,
+  rowActions = ["view", "edit", "duplicate", "delete"],
+  customRowActions,
+  onRowAction,
+  onCellEdit,
+  onRowSave,
+  onAddRow,
+  onBulkDelete,
+  initialPageSize = 10,
+  pageSizeOptions,
+  initialColumnPinning,
+  initialColumnVisibility,
+  globalFilter: globalFilterProp,
+  onGlobalFilterChange,
+  className,
+  toolbarSlot,
+  features,
+  labels: labelsProp,
+  density = "default",
+  theme
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const f = {
+    search: features?.search ?? true,
+    refresh: features?.refresh ?? !!onRefresh,
+    columnVisibility: features?.columnVisibility ?? true,
+    export: features?.export ?? true,
+    addRow: features?.addRow ?? !!onAddRow,
+    pagination: features?.pagination ?? true,
+    sorting: features?.sorting ?? true,
+    filtering: features?.filtering ?? true,
+    resizing: features?.resizing ?? true,
+    reordering: features?.reordering ?? true,
+    pinning: features?.pinning ?? true
+  };
+  const themeStyle = themeToStyle(theme);
+  const [sorting, setSorting] = useState([]);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [internalGlobalFilter, setInternalGlobalFilter] = useState("");
+  const isControlledFilter = globalFilterProp !== void 0;
+  const globalFilter = isControlledFilter ? globalFilterProp : internalGlobalFilter;
+  const setGlobalFilter = (v) => {
+    if (isControlledFilter) onGlobalFilterChange?.(v);
+    else setInternalGlobalFilter(v);
+  };
+  const [columnVisibility, setColumnVisibility] = useState(
+    initialColumnVisibility ?? {}
+  );
+  const [columnPinning, setColumnPinning] = useState(
+    () => {
+      const base = initialColumnPinning ?? { left: [], right: [] };
+      const left = [...base.left ?? []];
+      const right = [...base.right ?? []];
+      const hasExpandColumn = !!(renderSubRow || getSubRows);
+      if (hasExpandColumn && left.includes("__select") && !left.includes("__expand")) {
+        const idx = left.indexOf("__select");
+        left.splice(idx + 1, 0, "__expand");
+      }
+      return { left, right };
+    }
+  );
+  const [columnSizing, setColumnSizing] = useState({});
+  const [rowSelection, setRowSelection] = useState({});
+  const [expanded, setExpanded] = useState({});
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: initialPageSize
+  });
+  const [editingCell, setEditingCell] = useState(null);
+  const [editingRowId, setEditingRowId] = useState(null);
+  const [rowDraft, setRowDraft] = useState({});
+  const [extraRows, setExtraRows] = useState([]);
+  const mergedData = useMemo(
+    () => extraRows.length ? [...extraRows, ...data] : data,
+    [extraRows, data]
+  );
+  const augmentedColumns = useMemo(() => {
+    const wrap = (col) => {
+      const meta = col.meta;
+      const hasEditor = !!meta?.editor;
+      const id = col.id ?? col.accessorKey;
+      const original = col.cell;
+      const headerLabel = meta?.label ?? (typeof col.header === "string" ? col.header : id ?? "");
+      const defaultFilterFn = (() => {
+        switch (meta?.filterType) {
+          case "text":
+            return textFilterFn;
+          case "number":
+            return numberFilterFn;
+          case "date":
+            return dateFilterFn;
+          case "select":
+          case "multi-select":
+            return setFilterFn;
+          case "boolean":
+            return booleanFilterFn;
+          default:
+            return void 0;
+        }
+      })();
+      return {
+        ...col,
+        filterFn: col.filterFn ?? defaultFilterFn,
+        header: typeof col.header === "function" ? col.header : (ctx) => /* @__PURE__ */ jsx(
+          DataTableColumnHeader,
+          {
+            column: ctx.column,
+            title: headerLabel
+          }
+        ),
+        cell: hasEditor ? EditableCellHost : original
+      };
+    };
+    const built = columns.map(wrap);
+    if (renderSubRow || getSubRows) {
+      built.unshift({
+        id: "__expand",
+        size: 32,
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        header: () => null,
+        cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: row.getToggleExpandedHandler(),
+            className: "flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
+            "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+            children: row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
+          }
+        ) : null
+      });
+    }
+    if (enableSelection) {
+      built.unshift({
+        id: "__select",
+        size: 36,
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        header: ({ table: table2 }) => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center px-1", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: table2.getIsAllPageRowsSelected() ? true : table2.getIsSomePageRowsSelected() ? "indeterminate" : false,
+            onCheckedChange: (c) => table2.toggleAllPageRowsSelected(!!c),
+            "aria-label": "Select all rows on this page"
+          }
+        ) }),
+        cell: ({ row }) => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center px-1", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: row.getIsSelected(),
+            onCheckedChange: (c) => row.toggleSelected(!!c),
+            "aria-label": "Select row"
+          }
+        ) })
+      });
+    }
+    if (rowActions.length || customRowActions?.length) {
+      built.push({
+        id: "__actions",
+        size: 56,
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        header: () => /* @__PURE__ */ jsx("div", { className: "text-right text-xs", children: "Actions" }),
+        cell: ActionsCellHost
+      });
+    }
+    return built;
+  }, [
+    columns,
+    enableSelection,
+    renderSubRow,
+    getSubRows,
+    rowActions.length,
+    customRowActions?.length
+  ]);
+  const [columnOrder, setColumnOrder] = useState(
+    () => augmentedColumns.map((c) => c.id ?? c.accessorKey ?? "")
+  );
+  useEffect(() => {
+    const next = augmentedColumns.map(
+      (c) => c.id ?? c.accessorKey ?? ""
+    );
+    setColumnOrder((prev) => {
+      const existing = prev.filter((id) => next.includes(id));
+      const added = next.filter((id) => !prev.includes(id));
+      const final = [...existing, ...added];
+      return final.length === prev.length && final.every((v, i) => prev[i] === v) ? prev : final;
+    });
+  }, [augmentedColumns]);
+  const table = useReactTable({
+    data: mergedData,
+    columns: augmentedColumns,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      columnVisibility,
+      columnPinning,
+      columnSizing,
+      columnOrder,
+      rowSelection,
+      expanded,
+      pagination
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnPinningChange: setColumnPinning,
+    onColumnSizingChange: setColumnSizing,
+    onColumnOrderChange: setColumnOrder,
+    onRowSelectionChange: setRowSelection,
+    onExpandedChange: setExpanded,
+    onPaginationChange: setPagination,
+    enableSorting: f.sorting,
+    enableColumnFilters: f.filtering,
+    enableColumnResizing: f.resizing,
+    columnResizeMode: "onChange",
+    enableRowSelection: true,
+    enableExpanding: !!(renderSubRow || getSubRows),
+    enablePinning: f.pinning,
+    getRowId: (row) => String(row.id),
+    getSubRows,
+    getRowCanExpand: (row) => {
+      if (renderSubRow) return true;
+      const subs = getSubRows?.(row.original);
+      return !!subs && subs.length > 0;
+    },
+    globalFilterFn: (row, _columnId, value) => {
+      const q = String(value ?? "").toLowerCase().trim();
+      if (!q) return true;
+      return row.getAllCells().some((cell) => {
+        const v = cell.getValue();
+        return v != null && String(v).toLowerCase().includes(q);
+      });
+    },
+    filterFns: {
+      // attached via columnDef.filterFn below where needed
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getPaginationRowModel: getPaginationRowModel()
+  });
+  const dragState = useRef({ src: null });
+  const onHeaderDragStart = (id, e) => {
+    dragState.current.src = id;
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", id);
+  };
+  const onHeaderDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  };
+  const onHeaderDrop = (targetId) => {
+    const src = dragState.current.src;
+    dragState.current.src = null;
+    if (!src || src === targetId) return;
+    setColumnOrder((order) => {
+      const next = [...order];
+      const from = next.indexOf(src);
+      const to = next.indexOf(targetId);
+      if (from === -1 || to === -1) return order;
+      next.splice(from, 1);
+      next.splice(to, 0, src);
+      return next;
+    });
+  };
+  const handleAddRow = onAddRow ? () => {
+    const draft = onAddRow();
+    const tempId = `__new_${Date.now()}`;
+    const newRow = { id: tempId, ...draft };
+    setExtraRows((r) => [newRow, ...r]);
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+    setEditingRowId(tempId);
+  } : void 0;
+  const rows = table.getRowModel().rows;
+  const visibleLeafCount = table.getVisibleLeafColumns().length;
+  const editingContextValue = useMemo(
+    () => ({
+      editingCell,
+      editingRowId,
+      rowDraft,
+      setEditingCell,
+      setEditingRowId,
+      setRowDraft,
+      rowActions,
+      customRowActions,
+      onRowAction,
+      onCellEdit,
+      onRowSave
+    }),
+    [
+      editingCell,
+      editingRowId,
+      rowDraft,
+      rowActions,
+      customRowActions,
+      onRowAction,
+      onCellEdit,
+      onRowSave
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    DataTableEditingContext.Provider,
+    {
+      value: editingContextValue,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm",
+            DENSITY_CLASS[density],
+            className
+          ),
+          style: themeStyle,
+          children: [
+            /* @__PURE__ */ jsx(
+              DataTableToolbar,
+              {
+                table,
+                totalRecords: totalRecords ?? mergedData.length,
+                isFetching,
+                onRefresh: f.refresh ? onRefresh : void 0,
+                onAddRow: f.addRow ? handleAddRow : void 0,
+                onBulkDelete,
+                exportFileName,
+                globalFilter,
+                onGlobalFilterChange: (v) => {
+                  setGlobalFilter(v);
+                  table.setPageIndex(0);
+                },
+                toolbarSlot,
+                features: f,
+                labels
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-auto", children: [
+              /* @__PURE__ */ jsxs(
+                "table",
+                {
+                  className: "w-full caption-bottom text-sm",
+                  style: {
+                    width: table.getCenterTotalSize() ? void 0 : "100%",
+                    minWidth: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/70", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: hg.headers.map((header) => {
+                      const meta = header.column.columnDef.meta;
+                      const isUtility = header.column.id === "__select" || header.column.id === "__expand" || header.column.id === "__actions";
+                      const isPinned = !!header.column.getIsPinned();
+                      return /* @__PURE__ */ jsxs(
+                        "th",
+                        {
+                          colSpan: header.colSpan,
+                          style: {
+                            width: header.getSize(),
+                            ...getPinningStyles(header.column),
+                            ...isPinned ? { zIndex: 2 } : {}
+                          },
+                          className: cn(
+                            "group/th relative h-9 px-2 text-left align-middle text-xs font-medium text-muted-foreground",
+                            isPinned && "bg-card",
+                            meta?.headerClassName
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                              !isUtility && f.reordering && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  draggable: true,
+                                  onDragStart: (e) => onHeaderDragStart(header.column.id, e),
+                                  onDragOver: onHeaderDragOver,
+                                  onDrop: () => onHeaderDrop(header.column.id),
+                                  className: "-ml-1 cursor-grab rounded p-0.5 text-muted-foreground/40 opacity-0 transition group-hover/th:opacity-100 hover:bg-muted hover:text-foreground active:cursor-grabbing",
+                                  title: "Drag to reorder",
+                                  children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-3" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
+                            ] }),
+                            header.column.getCanResize() && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                onMouseDown: header.getResizeHandler(),
+                                onTouchStart: header.getResizeHandler(),
+                                onDoubleClick: () => header.column.resetSize(),
+                                className: cn(
+                                  "absolute top-0 right-0 h-full w-1 cursor-col-resize touch-none select-none bg-transparent transition-colors hover:bg-primary/40",
+                                  header.column.getIsResizing() && "bg-primary"
+                                )
+                              }
+                            )
+                          ]
+                        },
+                        header.id
+                      );
+                    }) }, hg.id)) }),
+                    /* @__PURE__ */ jsx("tbody", { children: isLoading ? renderSkeleton(visibleLeafCount, pagination.pageSize) : rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        colSpan: visibleLeafCount,
+                        className: "h-32 text-center text-sm text-muted-foreground",
+                        children: globalFilter || columnFilters.length ? labels.noResults : labels.noData
+                      }
+                    ) }) : rows.map((row) => /* @__PURE__ */ jsx(
+                      DataTableRow,
+                      {
+                        row,
+                        renderSubRow,
+                        isRowEditing: editingRowId === row.id
+                      },
+                      row.id
+                    )) })
+                  ]
+                }
+              ),
+              isFetching && !isLoading && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute top-1.5 right-2 flex items-center gap-1.5 rounded-md bg-background/80 px-2 py-1 text-xs text-muted-foreground shadow-sm backdrop-blur", children: [
+                /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 animate-spin" }),
+                " ",
+                labels.refreshing
+              ] })
+            ] }),
+            f.pagination && /* @__PURE__ */ jsx(DataTablePagination, { table, pageSizeOptions })
+          ]
+        }
+      )
+    }
+  );
+}
+function DataTableRow({
+  row,
+  renderSubRow,
+  isRowEditing
+}) {
+  const expanded = row.getIsExpanded();
+  const isSelected = row.getIsSelected();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "tr",
+      {
+        "data-state": isSelected ? "selected" : void 0,
+        className: cn(
+          "group/row border-b transition-colors hover:bg-muted/40 data-[state=selected]:bg-primary/5",
+          isRowEditing && "bg-amber-500/5",
+          row.depth > 0 && "bg-muted/20"
+        ),
+        children: row.getVisibleCells().map((cell) => {
+          const meta = cell.column.columnDef.meta;
+          const isPinned = !!cell.column.getIsPinned();
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              style: {
+                width: cell.column.getSize(),
+                ...getPinningStyles(cell.column)
+              },
+              className: cn(
+                "px-2 py-1 align-middle text-sm",
+                isPinned && "bg-card group-hover/row:bg-[color-mix(in_oklab,var(--card),var(--muted)_40%)] group-data-[state=selected]/row:bg-[color-mix(in_oklab,var(--card),var(--primary)_5%)]",
+                isPinned && isRowEditing && "bg-[color-mix(in_oklab,var(--card),#f59e0b_5%)]",
+                meta?.cellClassName
+              ),
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          );
+        })
+      }
+    ),
+    expanded && renderSubRow && /* @__PURE__ */ jsx("tr", { className: "border-b bg-muted/30", children: /* @__PURE__ */ jsx("td", { colSpan: row.getVisibleCells().length, className: "p-3", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border bg-background p-3 shadow-inner", children: renderSubRow(row.original) }) }) })
+  ] });
+}
+function renderSkeleton(cols, rows) {
+  return Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: Array.from({ length: cols }).map((__, c) => /* @__PURE__ */ jsx("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, c)) }, r));
+}
+
+export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map