@caffeinebounce/ui 0.62.2 → 0.63.0

package/dist/chunk-RM7ACPTM.mjs

@@ -0,0 +1,2601 @@
+"use client";
+import { buildSpreadsheetWorkbookXml, downloadExcelXml } from './chunk-OIJ7XMDV.mjs';
+import { Label } from './chunk-KHCC5UKW.mjs';
+import { dataTableTopperButtonProps, dataTableTopperResponsiveClasses, dataTableTopperOpenStateClasses, dataTableTopperIconClasses } from './chunk-PFHOXDSW.mjs';
+import { TableRow, TableCell, Table, TableHeader, TableHead, TableBody, TableFooter } from './chunk-APFEP5B7.mjs';
+import { Skeleton, useDebouncedCallback } from './chunk-UT36VNVZ.mjs';
+import { Badge } from './chunk-ULANYJ7Y.mjs';
+import { Calendar, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from './chunk-ORBH4IBC.mjs';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-RODSGPBB.mjs';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-5THF4YP6.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup } from './chunk-6BUBNZPG.mjs';
+import { Button } from './chunk-VBD4Q5LL.mjs';
+import { Separator } from './chunk-ZKUIUE7W.mjs';
+import { SizedSpinner } from './chunk-N5BHXWR3.mjs';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuCheckboxItem } from './chunk-OFQLWSUR.mjs';
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-YKZEKJMZ.mjs';
+import { Input } from './chunk-STEP6C4C.mjs';
+import { cn } from './chunk-IMKLN273.mjs';
+import { Download, FileText, FileSpreadsheet, Search, X, ChevronDown, LayoutGrid, Star, Check, Trash2, Save, Plus, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ChevronUp, ChevronsUpDown, EyeOff, XCircle, CalendarIcon, PlusCircle, Settings2, MoreHorizontal } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React12 from 'react';
+import { cva } from 'class-variance-authority';
+import { formatDate } from '@caffeinebounce/shared-utils';
+import { flexRender, useReactTable, getFacetedMinMaxValues, getFacetedUniqueValues, getFacetedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel } from '@tanstack/react-table';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { createParser } from 'nuqs/server';
+import { z } from 'zod';
+import { useQueryState, parseAsInteger, parseAsArrayOf, parseAsString, useQueryStates } from 'nuqs';
+
+function DataTableAddButton({
+  label = "Add",
+  icon,
+  responsiveLabel = true,
+  className,
+  children,
+  ...props
+}) {
+  const fontSizeClass = "text-xs";
+  const iconElement = icon ?? /* @__PURE__ */ jsx(Plus, { className: "size-4" });
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ...dataTableTopperButtonProps,
+      className: cn(
+        fontSizeClass,
+        responsiveLabel ? dataTableTopperResponsiveClasses : "px-2 w-auto",
+        className
+      ),
+      ...props,
+      children: [
+        iconElement,
+        responsiveLabel ? /* @__PURE__ */ jsx("span", { className: "hidden @min-[450px]:inline", children: children ?? label }) : /* @__PURE__ */ jsx("span", { children: children ?? label })
+      ]
+    }
+  );
+}
+function escapeCsvField(value) {
+  if (value.includes(",") || value.includes('"') || value.includes("\n") || value.includes("\r")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function formatCsvValue(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "boolean") {
+    return value ? "Yes" : "No";
+  }
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function serializeTableExport({
+  table,
+  visibleColumnsOnly = true,
+  selectedRowsOnly = false,
+  customHeaders = {},
+  excludeColumns = [],
+  formatters = {}
+}) {
+  const allColumns = visibleColumnsOnly ? table.getVisibleLeafColumns() : table.getAllLeafColumns();
+  const columns = allColumns.filter((col) => {
+    const colId = col.id;
+    if (["select", "selection", "actions", "_actions"].includes(colId)) {
+      return false;
+    }
+    return !excludeColumns.includes(colId);
+  });
+  const tableRows = selectedRowsOnly ? table.getFilteredSelectedRowModel().rows : table.getFilteredRowModel().rows;
+  return {
+    headers: columns.map((col) => customHeaders[col.id] ?? col.id),
+    rows: tableRows.map(
+      (row) => columns.map((col) => {
+        const cellValue = row.getValue(col.id);
+        const formatter = formatters[col.id];
+        return formatter ? formatter(cellValue) : formatCsvValue(cellValue);
+      })
+    )
+  };
+}
+function exportToCsv({
+  table,
+  filename = "export",
+  visibleColumnsOnly = true,
+  selectedRowsOnly = false,
+  customHeaders = {},
+  excludeColumns = [],
+  formatters = {}
+}) {
+  const { headers, rows } = serializeTableExport({
+    table,
+    visibleColumnsOnly,
+    selectedRowsOnly,
+    customHeaders,
+    excludeColumns,
+    formatters
+  });
+  const csvContent = [
+    headers.map(escapeCsvField).join(","),
+    ...rows.map((row) => row.map(escapeCsvField).join(","))
+  ].join("\n");
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.setAttribute("href", url);
+  link.setAttribute("download", `${filename}.csv`);
+  link.style.visibility = "hidden";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+function exportToExcel({
+  table,
+  filename = "export",
+  visibleColumnsOnly = true,
+  selectedRowsOnly = false,
+  customHeaders = {},
+  excludeColumns = [],
+  formatters = {}
+}) {
+  const { headers, rows } = serializeTableExport({
+    table,
+    visibleColumnsOnly,
+    selectedRowsOnly,
+    customHeaders,
+    excludeColumns,
+    formatters
+  });
+  const sheetRows = [
+    headers.map((header) => ({ value: header, style: "header" })),
+    ...rows.map(
+      (row) => row.map((cell) => {
+        const trimmed = cell.trim();
+        const isNumericPattern = trimmed !== "" && /^-?\d+(\.\d+)?$/.test(trimmed);
+        const hasLeadingZero = /^0\d+$/.test(trimmed) || /^-0\d+$/.test(trimmed);
+        const numValue = Number(trimmed);
+        const isNumber = isNumericPattern && !hasLeadingZero && !Number.isNaN(numValue);
+        if (isNumber) {
+          return {
+            value: numValue,
+            type: "Number",
+            style: "number"
+          };
+        }
+        return { value: cell, style: "text" };
+      })
+    )
+  ];
+  const xmlContent = buildSpreadsheetWorkbookXml({
+    worksheetName: "Data",
+    rows: sheetRows
+  });
+  downloadExcelXml(xmlContent, filename);
+}
+function DataTableExportButton({
+  table,
+  onExportCsv,
+  onExportExcel,
+  onExport,
+  // deprecated, maps to CSV
+  filename = "export",
+  label = "Export",
+  disabled = false,
+  selectedRowsOnly = false,
+  excludeColumns = [],
+  customHeaders = {},
+  formatters = {}
+}) {
+  const fontSizeClass = "text-xs";
+  const [isExporting, setIsExporting] = React12.useState(false);
+  const [exportingFormat, setExportingFormat] = React12.useState(null);
+  const handleExport = React12.useCallback(
+    async (format) => {
+      if (disabled) return;
+      setIsExporting(true);
+      setExportingFormat(format);
+      try {
+        if (table) {
+          if (format === "csv") {
+            exportToCsv({
+              table,
+              filename,
+              selectedRowsOnly,
+              excludeColumns,
+              customHeaders,
+              formatters
+            });
+          } else {
+            exportToExcel({
+              table,
+              filename,
+              selectedRowsOnly,
+              excludeColumns,
+              customHeaders,
+              formatters
+            });
+          }
+        } else {
+          if (format === "csv") {
+            await (onExportCsv ?? onExport)?.();
+          } else {
+            await onExportExcel?.();
+          }
+        }
+      } finally {
+        setIsExporting(false);
+        setExportingFormat(null);
+      }
+    },
+    [
+      table,
+      onExportCsv,
+      onExportExcel,
+      onExport,
+      filename,
+      selectedRowsOnly,
+      excludeColumns,
+      customHeaders,
+      formatters,
+      disabled
+    ]
+  );
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...dataTableTopperButtonProps,
+          disabled: isExporting || disabled,
+          "aria-label": label,
+          className: dataTableTopperOpenStateClasses,
+          children: isExporting ? /* @__PURE__ */ jsx(SizedSpinner, { className: "size-4" }) : /* @__PURE__ */ jsx(Download, { className: "size-4" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { className: fontSizeClass, children: label })
+    ] }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuLabel,
+        {
+          className: cn("font-normal text-muted-foreground", fontSizeClass),
+          children: "Export Data"
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => handleExport("csv"),
+          disabled: isExporting,
+          className: cn("gap-2", fontSizeClass),
+          children: [
+            /* @__PURE__ */ jsx(FileText, { className: dataTableTopperIconClasses }),
+            /* @__PURE__ */ jsx("span", { children: "CSV" }),
+            exportingFormat === "csv" && /* @__PURE__ */ jsx(SizedSpinner, { className: "size-3 ml-auto" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => handleExport("excel"),
+          disabled: isExporting,
+          className: cn("gap-2", fontSizeClass),
+          children: [
+            /* @__PURE__ */ jsx(FileSpreadsheet, { className: dataTableTopperIconClasses }),
+            /* @__PURE__ */ jsx("span", { children: "Excel" }),
+            exportingFormat === "excel" && /* @__PURE__ */ jsx(SizedSpinner, { className: "size-3 ml-auto" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var iconButtonVariants = cva(
+  "inline-flex items-center justify-center rounded-box transition-colors duration-200 cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "text-muted-foreground hover:text-foreground hover:bg-accent",
+        ghost: "text-muted-foreground/50 hover:text-foreground hover:bg-transparent",
+        delete: "text-muted-foreground/50 hover:text-destructive hover:bg-transparent",
+        edit: "text-muted-foreground/50 hover:text-foreground hover:bg-transparent",
+        destructive: "text-muted-foreground/50 hover:text-destructive hover:bg-transparent",
+        success: "text-muted-foreground/50 hover:text-green-600 hover:bg-transparent",
+        successActive: "text-green-600 hover:text-muted-foreground/60 hover:bg-transparent"
+      },
+      size: {
+        default: "h-8 w-8 [&_svg]:size-4",
+        sm: "h-6 w-6 [&_svg]:size-3.5",
+        xs: "h-5 w-5 [&_svg]:size-3",
+        lg: "h-10 w-10 [&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function IconButton({ className, variant, size, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "icon-button",
+      className: cn(iconButtonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function useIsDesktop() {
+  const [isDesktop, setIsDesktop] = React12.useState(false);
+  React12.useEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 768px)");
+    setIsDesktop(mediaQuery.matches);
+    const handler = (e) => setIsDesktop(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+  return isDesktop;
+}
+function ActionsDropdown({
+  actions,
+  fontSizeClass,
+  density
+}) {
+  const isCompact = density === "compact";
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        variant: "ghost",
+        size: isCompact ? "xs" : "sm",
+        className: "data-[state=open]:bg-muted",
+        children: [
+          /* @__PURE__ */ jsx(MoreHorizontal, { className: isCompact ? "size-3.5" : "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-40", children: actions.map((action, index) => /* @__PURE__ */ jsxs("div", { children: [
+      action.separatorBefore && index > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: action.onClick,
+          disabled: action.disabled,
+          className: cn(
+            fontSizeClass,
+            action.destructive && "hover:text-destructive hover:bg-destructive/10",
+            action.success && "hover:text-success hover:bg-success/10",
+            action.successActive && "text-green-600 hover:text-muted-foreground hover:bg-accent"
+          ),
+          children: [
+            action.icon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mr-2",
+                  action.destructive && "group-hover:text-destructive",
+                  action.success && "group-hover:text-success",
+                  action.successActive && "text-green-600 group-hover:text-muted-foreground"
+                ),
+                children: action.icon
+              }
+            ),
+            action.label
+          ]
+        }
+      )
+    ] }, action.label)) })
+  ] });
+}
+function ActionsInline({
+  actions,
+  fontSizeClass,
+  density
+}) {
+  const isCompact = density === "compact";
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center", isCompact ? "gap-0.5" : "gap-1"), children: actions.map((action) => {
+    const variant = action.destructive ? "delete" : action.successActive ? "successActive" : action.success ? "success" : "ghost";
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        IconButton,
+        {
+          variant,
+          size: isCompact ? "xs" : "default",
+          onClick: action.onClick,
+          disabled: action.disabled,
+          children: [
+            action.icon,
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: action.label })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { className: fontSizeClass, children: action.label })
+    ] }, action.label);
+  }) });
+}
+function DataTableRowActions({
+  actions,
+  mode = "dropdown"
+}) {
+  const fontSizeClass = "text-xs";
+  const density = "comfy";
+  const isDesktop = useIsDesktop();
+  if (actions.length === 0) return null;
+  if (mode === "dropdown") {
+    return /* @__PURE__ */ jsx(
+      ActionsDropdown,
+      {
+        actions,
+        fontSizeClass,
+        density
+      }
+    );
+  }
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsx(
+      ActionsInline,
+      {
+        actions,
+        fontSizeClass,
+        density
+      }
+    );
+  }
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx(
+      ActionsInline,
+      {
+        actions,
+        fontSizeClass,
+        density
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ActionsDropdown,
+    {
+      actions,
+      fontSizeClass,
+      density
+    }
+  );
+}
+function DataTableSearch({
+  searchValue = "",
+  searchPlaceholder = "Search...",
+  onSearchChange,
+  className
+}) {
+  const fontSizeClass = "text-xs";
+  const [isExpanded, setIsExpanded] = React12.useState(false);
+  const inputRef = React12.useRef(null);
+  React12.useEffect(() => {
+    if (searchValue && !isExpanded) {
+      setIsExpanded(true);
+    }
+  }, [searchValue, isExpanded]);
+  React12.useEffect(() => {
+    if (isExpanded && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isExpanded]);
+  const handleBlur = () => {
+    if (!searchValue) {
+      setIsExpanded(false);
+    }
+  };
+  const handleClear = () => {
+    onSearchChange?.("");
+    setIsExpanded(false);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("relative flex items-center", className), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center rounded-md border border-transparent transition-all duration-200 ease-out",
+        isExpanded ? "w-48 border-input bg-background" : "w-8 cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => !isExpanded && setIsExpanded(true),
+            className: cn(
+              "flex items-center justify-center shrink-0 transition-colors rounded-md",
+              dataTableTopperIconClasses,
+              isExpanded ? "size-8 cursor-default" : "size-8"
+            ),
+            "aria-label": isExpanded ? void 0 : "Search",
+            children: /* @__PURE__ */ jsx(Search, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            placeholder: searchPlaceholder,
+            value: searchValue,
+            onChange: (e) => onSearchChange?.(e.target.value),
+            onBlur: handleBlur,
+            className: cn(
+              "h-8 bg-transparent outline-none placeholder:text-muted-foreground transition-all duration-200",
+              fontSizeClass,
+              isExpanded ? "w-full pr-7 opacity-100" : "w-0 opacity-0"
+            )
+          }
+        ),
+        isExpanded && searchValue && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            className: "absolute right-1.5 flex items-center justify-center size-5 rounded-sm hover:bg-accent/50",
+            "aria-label": "Clear search",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5 text-muted-foreground" })
+          }
+        )
+      ]
+    }
+  ) });
+}
+var summaryOptions = {
+  text: [
+    { value: "none", label: "None" },
+    { value: "count", label: "Count" },
+    { value: "count_unique", label: "Count unique" },
+    { value: "percent_empty", label: "% Empty" },
+    { value: "percent_filled", label: "% Filled" }
+  ],
+  number: [
+    { value: "none", label: "None" },
+    { value: "count", label: "Count" },
+    { value: "sum", label: "Sum" },
+    { value: "average", label: "Average" },
+    { value: "median", label: "Median" },
+    { value: "min", label: "Min" },
+    { value: "max", label: "Max" },
+    { value: "range", label: "Range" },
+    { value: "percent_empty", label: "% Empty" },
+    { value: "percent_filled", label: "% Filled" }
+  ],
+  boolean: [
+    { value: "none", label: "None" },
+    { value: "count", label: "Count" },
+    { value: "percent_empty", label: "% Empty" },
+    { value: "percent_filled", label: "% Filled" }
+  ],
+  date: [
+    { value: "none", label: "None" },
+    { value: "count", label: "Count" },
+    { value: "min", label: "Earliest" },
+    { value: "max", label: "Latest" },
+    { value: "range", label: "Date range" },
+    { value: "percent_empty", label: "% Empty" },
+    { value: "percent_filled", label: "% Filled" }
+  ]
+};
+function calculateSummary(column, allData, type, dataType) {
+  if (type === "none") return "";
+  const accessor = column.accessorFn;
+  if (!accessor) return "";
+  const allValues = allData.map((row) => accessor(row, 0)).filter((v) => v !== null && v !== void 0 && v !== "");
+  const totalCount = allData.length;
+  const filledCount = allValues.length;
+  const emptyCount = totalCount - filledCount;
+  switch (type) {
+    case "count":
+      return `Count: ${filledCount.toLocaleString()}`;
+    case "count_unique": {
+      const uniqueValues = new Set(allValues.map((v) => String(v)));
+      return `Unique: ${uniqueValues.size.toLocaleString()}`;
+    }
+    case "percent_empty":
+      return totalCount > 0 ? `Empty: ${(emptyCount / totalCount * 100).toFixed(1)}%` : "Empty: 0%";
+    case "percent_filled":
+      return totalCount > 0 ? `Filled: ${(filledCount / totalCount * 100).toFixed(1)}%` : "Filled: 0%";
+    case "sum":
+    case "average":
+    case "median":
+    case "min":
+    case "max":
+    case "range": {
+      if (dataType === "number") {
+        const numericValues = allValues.map((v) => Number(v)).filter((n) => !Number.isNaN(n));
+        if (numericValues.length === 0) return "\u2014";
+        switch (type) {
+          case "sum": {
+            const sum = numericValues.reduce((a, b) => a + b, 0);
+            return `Sum: ${formatNumber(sum)}`;
+          }
+          case "average": {
+            const avg = numericValues.reduce((a, b) => a + b, 0) / numericValues.length;
+            return `Avg: ${formatNumber(avg)}`;
+          }
+          case "median": {
+            const sorted = [...numericValues].sort((a, b) => a - b);
+            const mid = Math.floor(sorted.length / 2);
+            const median = sorted.length % 2 !== 0 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+            return `Median: ${formatNumber(median)}`;
+          }
+          case "min":
+            return `Min: ${formatNumber(Math.min(...numericValues))}`;
+          case "max":
+            return `Max: ${formatNumber(Math.max(...numericValues))}`;
+          case "range": {
+            const min = Math.min(...numericValues);
+            const max = Math.max(...numericValues);
+            return `${formatNumber(min)} \u2013 ${formatNumber(max)}`;
+          }
+        }
+      }
+      if (dataType === "date") {
+        const dateValues = allValues.map((v) => {
+          const d = v instanceof Date ? v : new Date(String(v));
+          return d.getTime();
+        }).filter((t) => !Number.isNaN(t));
+        if (dateValues.length === 0) return "\u2014";
+        switch (type) {
+          case "min":
+            return formatDate(new Date(Math.min(...dateValues)));
+          case "max":
+            return formatDate(new Date(Math.max(...dateValues)));
+          case "range": {
+            const min = new Date(Math.min(...dateValues));
+            const max = new Date(Math.max(...dateValues));
+            return `${formatDate(min)} \u2013 ${formatDate(max)}`;
+          }
+          default:
+            return "\u2014";
+        }
+      }
+      return "\u2014";
+    }
+    default:
+      return "";
+  }
+}
+function formatNumber(n) {
+  if (Number.isInteger(n)) {
+    return n.toLocaleString();
+  }
+  return n.toLocaleString(void 0, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+}
+function DataTableSummary({
+  table,
+  allData,
+  summaryConfig,
+  onSummaryChange,
+  getColumnDataType,
+  gutterWidth = 0,
+  className
+}) {
+  const visibleColumns = table.getVisibleLeafColumns().filter((col) => col.id !== "select" && col.id !== "actions");
+  const [hoveredColumnId, setHoveredColumnId] = React12.useState(
+    null
+  );
+  const detectDataType = React12.useCallback(
+    (columnId) => {
+      if (getColumnDataType) return getColumnDataType(columnId);
+      const column = table.getColumn(columnId);
+      if (!column) return "text";
+      const meta = column.columnDef.meta;
+      if (meta?.filterType === "number") return "number";
+      if (meta?.filterType === "boolean") return "boolean";
+      const accessor = column.accessorFn;
+      if (!accessor) return "text";
+      for (const row of allData) {
+        const value = accessor(row, 0);
+        if (value === null || value === void 0) continue;
+        if (typeof value === "number") return "number";
+        if (typeof value === "boolean") return "boolean";
+        if (value instanceof Date) return "date";
+        if (typeof value === "string" && !Number.isNaN(Date.parse(value))) {
+          const parsed = new Date(value);
+          if (parsed.getFullYear() > 1900 && parsed.getFullYear() < 2100) {
+            return "date";
+          }
+        }
+        break;
+      }
+      return "text";
+    },
+    [getColumnDataType, table, allData]
+  );
+  return /* @__PURE__ */ jsxs(
+    TableRow,
+    {
+      className: cn("hover:bg-transparent border-0 bg-transparent", className),
+      children: [
+        gutterWidth > 0 && /* @__PURE__ */ jsx(TableCell, { className: "p-0 border-0", style: { width: gutterWidth } }),
+        visibleColumns.map((column, index) => {
+          const columnId = column.id;
+          const dataType = detectDataType(columnId);
+          const currentType = summaryConfig[columnId] ?? "none";
+          const options = summaryOptions[dataType] ?? summaryOptions.text;
+          const summaryValue = calculateSummary(
+            column,
+            allData,
+            currentType,
+            dataType
+          );
+          const isHovered = hoveredColumnId === columnId;
+          const isLastColumn = index === visibleColumns.length - 1;
+          const isFirstColumn = index === 0;
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: cn(
+                "p-0 border-0",
+                isLastColumn && "rounded-br-md",
+                isFirstColumn && "rounded-bl-md"
+              ),
+              style: { width: column.getSize(), minWidth: column.getSize() },
+              children: /* @__PURE__ */ jsx(
+                SummaryCell,
+                {
+                  columnId,
+                  column,
+                  currentType,
+                  summaryValue,
+                  options,
+                  isHovered,
+                  onSummaryChange,
+                  onMouseEnter: () => setHoveredColumnId(columnId),
+                  onMouseLeave: () => setHoveredColumnId(null)
+                }
+              )
+            },
+            columnId
+          );
+        })
+      ]
+    }
+  );
+}
+function SummaryCell({
+  columnId,
+  currentType,
+  summaryValue,
+  options,
+  isHovered,
+  onSummaryChange,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const [isOpen, setIsOpen] = React12.useState(false);
+  const showCalculate = currentType === "none" && (isHovered || isOpen);
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Hover state for visual feedback only
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center min-w-0",
+          "px-2 py-1"
+        ),
+        onMouseEnter,
+        onMouseLeave,
+        role: "presentation",
+        children: /* @__PURE__ */ jsxs(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "group flex items-center gap-1 text-xs transition-colors rounded px-1 py-0.5 -mx-1 focus:outline-none focus-visible:outline-none",
+                currentType === "none" ? "text-muted-foreground/50 hover:text-muted-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: [
+                currentType === "none" ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "italic transition-opacity",
+                      showCalculate ? "opacity-100" : "opacity-0"
+                    ),
+                    children: "Calculate"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "truncate italic pr-1", children: summaryValue }),
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    className: cn(
+                      "size-3 shrink-0 transition-opacity",
+                      currentType !== "none" ? "opacity-0 group-hover:opacity-50" : "opacity-0"
+                    )
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-40", children: options.map((option) => /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onClick: () => onSummaryChange(columnId, option.value),
+              className: cn(
+                "text-xs",
+                currentType === option.value && "bg-accent"
+              ),
+              children: option.label
+            },
+            option.value
+          )) })
+        ] })
+      }
+    )
+  );
+}
+function DataTableTopper({
+  tabs,
+  activeTab,
+  onTabChange,
+  gutterWidth = 0,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        // Container context for responsive layout based on available width
+        "@container w-full min-w-0 shrink-0",
+        // Visual styling
+        "border-b border-border/40 pb-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-0.5", children: [
+          gutterWidth > 0 && /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: gutterWidth } }),
+          tabs && tabs.length > 0 && /* @__PURE__ */ jsx("div", { className: "block @min-[450px]:hidden", children: /* @__PURE__ */ jsxs(Select, { value: activeTab, onValueChange: onTabChange, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 w-[100px] text-xs", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select tab" }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: tabs.map((tab) => /* @__PURE__ */ jsx(SelectItem, { value: tab.id, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              tab.label,
+              tab.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: tab.count })
+            ] }) }, tab.id)) })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "items-center gap-0.5 overflow-x-auto no-scrollbar",
+                tabs && tabs.length > 0 ? "hidden @min-[450px]:flex" : "flex"
+              ),
+              children: tabs?.map((tab) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onTabChange?.(tab.id),
+                  className: cn(
+                    "relative flex items-center gap-1.5 px-2 py-1 text-sm transition-colors rounded-md whitespace-nowrap",
+                    activeTab === tab.id ? "text-foreground font-medium" : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                  ),
+                  children: [
+                    tab.label,
+                    tab.count !== void 0 && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-xs tabular-nums",
+                          activeTab === tab.id ? "text-muted-foreground" : "text-muted-foreground/60"
+                        ),
+                        children: tab.count
+                      }
+                    ),
+                    activeTab === tab.id && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-2 right-2 h-0.5 bg-foreground rounded-full" })
+                  ]
+                },
+                tab.id
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children })
+      ] })
+    }
+  );
+}
+function hasUnsavedChanges(currentState, activeView) {
+  if (!activeView) return false;
+  const visA = JSON.stringify(currentState.columnVisibility ?? {});
+  const visB = JSON.stringify(activeView.columnVisibility ?? {});
+  if (visA !== visB) return true;
+  const filtA = JSON.stringify(currentState.filters ?? []);
+  const filtB = JSON.stringify(activeView.filters ?? []);
+  if (filtA !== filtB) return true;
+  const sortA = JSON.stringify(currentState.sorting ?? []);
+  const sortB = JSON.stringify(activeView.sorting ?? []);
+  if (sortA !== sortB) return true;
+  const orderA = JSON.stringify(currentState.columnOrder ?? []);
+  const orderB = JSON.stringify(activeView.columnOrder ?? []);
+  if (orderA !== orderB) return true;
+  const wrapA = JSON.stringify(currentState.columnWrapping ?? {});
+  const wrapB = JSON.stringify(activeView.columnWrapping ?? {});
+  if (wrapA !== wrapB) return true;
+  const rowA = JSON.stringify(currentState.rowOrder ?? []);
+  const rowB = JSON.stringify(activeView.rowOrder ?? []);
+  if (rowA !== rowB) return true;
+  return false;
+}
+function DataTableViews({
+  views,
+  activeViewId,
+  currentState,
+  onSelectView,
+  onSaveView,
+  onUpdateView,
+  onDeleteView,
+  onSetDefaultView,
+  className
+}) {
+  const fontSizeClass = "text-xs";
+  const [saveDialogOpen, setSaveDialogOpen] = React12.useState(false);
+  const [newViewName, setNewViewName] = React12.useState("");
+  const [setAsDefault, setSetAsDefault] = React12.useState(false);
+  const [nameError, setNameError] = React12.useState(null);
+  const activeView = views.find((v) => v.id === activeViewId);
+  views.find((v) => v.isDefault);
+  const hasChanges = hasUnsavedChanges(currentState, activeView);
+  const checkDuplicateName = (name) => {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      setNameError(null);
+      return;
+    }
+    const isDuplicate = views.some(
+      (v) => v.name.toLowerCase() === trimmedName.toLowerCase()
+    );
+    setNameError(isDuplicate ? "A view with this name already exists" : null);
+  };
+  const handleSaveNewView = () => {
+    if (!newViewName.trim()) return;
+    const trimmedName = newViewName.trim();
+    const isDuplicate = views.some(
+      (v) => v.name.toLowerCase() === trimmedName.toLowerCase()
+    );
+    if (isDuplicate) {
+      setNameError("A view with this name already exists");
+      return;
+    }
+    if (onSaveView) {
+      onSaveView({
+        name: trimmedName,
+        columnVisibility: currentState.columnVisibility,
+        columnOrder: currentState.columnOrder,
+        filters: currentState.filters,
+        sorting: currentState.sorting,
+        isDefault: setAsDefault
+      });
+    }
+    setNewViewName("");
+    setSetAsDefault(false);
+    setNameError(null);
+    setSaveDialogOpen(false);
+  };
+  const handleUpdateCurrentView = () => {
+    if (!activeViewId || !onUpdateView) return;
+    onUpdateView(activeViewId, {
+      columnVisibility: currentState.columnVisibility,
+      columnOrder: currentState.columnOrder,
+      filters: currentState.filters,
+      sorting: currentState.sorting,
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          ...dataTableTopperButtonProps,
+          className: cn(
+            fontSizeClass,
+            dataTableTopperOpenStateClasses,
+            dataTableTopperResponsiveClasses
+          ),
+          children: [
+            /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden @min-[450px]:inline", children: activeView?.name ?? "Default View" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-56", children: [
+        views.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          views.map((view) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "group relative flex items-center",
+              children: [
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    onClick: () => onSelectView(view),
+                    className: cn(
+                      "flex-1 flex items-center justify-between pr-16",
+                      fontSizeClass
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                        view.isDefault && /* @__PURE__ */ jsx(Star, { className: "size-3 fill-yellow-400 text-yellow-400" }),
+                        /* @__PURE__ */ jsx("span", { children: view.name })
+                      ] }),
+                      activeViewId === view.id && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "absolute right-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+                  !view.isDefault && onSetDefaultView && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onSetDefaultView(view.id);
+                      },
+                      className: "p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground",
+                      title: "Set as default",
+                      children: /* @__PURE__ */ jsx(Star, { className: "size-3" })
+                    }
+                  ),
+                  views.length > 1 && onDeleteView && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onDeleteView(view.id);
+                      },
+                      className: "p-1 rounded hover:bg-accent text-muted-foreground hover:text-destructive",
+                      title: "Delete view",
+                      children: /* @__PURE__ */ jsx(Trash2, { className: "size-3" })
+                    }
+                  )
+                ] })
+              ]
+            },
+            view.id
+          )),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+        ] }) : null,
+        onUpdateView && hasChanges && activeView && /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: handleUpdateCurrentView,
+            className: fontSizeClass,
+            children: [
+              /* @__PURE__ */ jsx(Save, { className: "mr-2 size-3.5" }),
+              "Save changes"
+            ]
+          }
+        ),
+        onSaveView && /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: () => setSaveDialogOpen(true),
+            className: fontSizeClass,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "mr-2 size-3.5" }),
+              "Save as new view"
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: saveDialogOpen,
+        onOpenChange: (open) => {
+          setSaveDialogOpen(open);
+          if (!open) {
+            setNewViewName("");
+            setSetAsDefault(false);
+            setNameError(null);
+          }
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: "Save View" }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: "Save your current table configuration as a reusable view." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "view-name", children: "View name" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "view-name",
+                  placeholder: "e.g., Active Users, Recent Signups",
+                  value: newViewName,
+                  onChange: (e) => {
+                    setNewViewName(e.target.value);
+                    checkDuplicateName(e.target.value);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") handleSaveNewView();
+                  },
+                  className: nameError ? "border-destructive" : "",
+                  autoFocus: true
+                }
+              ),
+              nameError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: nameError })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  id: "set-default",
+                  checked: setAsDefault,
+                  onChange: (e) => setSetAsDefault(e.target.checked),
+                  className: "size-4 rounded border-muted-foreground/30"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: "set-default",
+                  className: "text-sm font-normal cursor-pointer",
+                  children: "Set as default view"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setSaveDialogOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleSaveNewView,
+                disabled: !newViewName.trim() || !!nameError,
+                children: "Save View"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/blocks/table/config.ts
+var dataTableConfig = {
+  textOperators: [
+    { label: "Contains", value: "iLike" },
+    { label: "Does not contain", value: "notILike" },
+    { label: "Is", value: "eq" },
+    { label: "Is not", value: "ne" },
+    { label: "Is empty", value: "isEmpty" },
+    { label: "Is not empty", value: "isNotEmpty" }
+  ],
+  numericOperators: [
+    { label: "Is", value: "eq" },
+    { label: "Is not", value: "ne" },
+    { label: "Is less than", value: "lt" },
+    { label: "Is less than or equal to", value: "lte" },
+    { label: "Is greater than", value: "gt" },
+    { label: "Is greater than or equal to", value: "gte" },
+    { label: "Is between", value: "isBetween" },
+    { label: "Is empty", value: "isEmpty" },
+    { label: "Is not empty", value: "isNotEmpty" }
+  ],
+  dateOperators: [
+    { label: "Is", value: "eq" },
+    { label: "Is not", value: "ne" },
+    { label: "Is before", value: "lt" },
+    { label: "Is after", value: "gt" },
+    { label: "Is on or before", value: "lte" },
+    { label: "Is on or after", value: "gte" },
+    { label: "Is between", value: "isBetween" },
+    { label: "Is relative to today", value: "isRelativeToToday" },
+    { label: "Is empty", value: "isEmpty" },
+    { label: "Is not empty", value: "isNotEmpty" }
+  ],
+  selectOperators: [
+    { label: "Is", value: "eq" },
+    { label: "Is not", value: "ne" },
+    { label: "Is empty", value: "isEmpty" },
+    { label: "Is not empty", value: "isNotEmpty" }
+  ],
+  multiSelectOperators: [
+    { label: "Has any of", value: "inArray" },
+    { label: "Has none of", value: "notInArray" },
+    { label: "Is empty", value: "isEmpty" },
+    { label: "Is not empty", value: "isNotEmpty" }
+  ],
+  booleanOperators: [
+    { label: "Is", value: "eq" },
+    { label: "Is not", value: "ne" }
+  ],
+  sortOrders: [
+    { label: "Asc", value: "asc" },
+    { label: "Desc", value: "desc" }
+  ],
+  filterVariants: [
+    "text",
+    "number",
+    "range",
+    "date",
+    "dateRange",
+    "boolean",
+    "select",
+    "multiSelect"
+  ],
+  operators: [
+    "iLike",
+    "notILike",
+    "eq",
+    "ne",
+    "inArray",
+    "notInArray",
+    "isEmpty",
+    "isNotEmpty",
+    "lt",
+    "lte",
+    "gt",
+    "gte",
+    "isBetween",
+    "isRelativeToToday"
+  ],
+  joinOperators: ["and", "or"]
+};
+function DataTablePagination({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 whitespace-nowrap text-muted-foreground text-sm", children: [
+          table.getFilteredSelectedRowModel().rows.length,
+          " of",
+          " ",
+          table.getFilteredRowModel().rows.length,
+          " row(s) selected."
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "whitespace-nowrap font-medium text-sm", children: "Rows per page" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: `${table.getState().pagination.pageSize}`,
+                onValueChange: (value) => {
+                  table.setPageSize(Number(value));
+                },
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-18 data-size:h-8", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }),
+                  /* @__PURE__ */ jsx(SelectContent, { side: "top", children: /* @__PURE__ */ jsx(SelectGroup, { children: pageSizeOptions.map((pageSize) => /* @__PURE__ */ jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) }) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center font-medium text-sm", children: [
+            "Page ",
+            table.getState().pagination.pageIndex + 1,
+            " of",
+            " ",
+            table.getPageCount()
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Go to first page",
+                variant: "outline",
+                size: "icon",
+                className: "hidden size-8 lg:flex",
+                onClick: () => table.setPageIndex(0),
+                disabled: !table.getCanPreviousPage(),
+                children: /* @__PURE__ */ jsx(ChevronsLeft, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Go to previous page",
+                variant: "outline",
+                size: "icon",
+                className: "size-8",
+                onClick: () => table.previousPage(),
+                disabled: !table.getCanPreviousPage(),
+                children: /* @__PURE__ */ jsx(ChevronLeft, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Go to next page",
+                variant: "outline",
+                size: "icon",
+                className: "size-8",
+                onClick: () => table.nextPage(),
+                disabled: !table.getCanNextPage(),
+                children: /* @__PURE__ */ jsx(ChevronRight, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Go to last page",
+                variant: "outline",
+                size: "icon",
+                className: "hidden size-8 lg:flex",
+                onClick: () => table.setPageIndex(table.getPageCount() - 1),
+                disabled: !table.getCanNextPage(),
+                children: /* @__PURE__ */ jsx(ChevronsRight, {})
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/blocks/table/lib/data-table.ts
+function getColumnPinningStyle({
+  column,
+  withBorder = false
+}) {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+  return {
+    boxShadow: withBorder ? isLastLeftPinnedColumn ? "-4px 0 4px -4px var(--border) inset" : isFirstRightPinnedColumn ? "4px 0 4px -4px var(--border) inset" : void 0 : void 0,
+    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    opacity: isPinned ? 0.97 : 1,
+    position: isPinned ? "sticky" : "relative",
+    background: isPinned ? "var(--background)" : "var(--background)",
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : void 0
+  };
+}
+function getFilterOperators(filterVariant) {
+  const operatorMap = {
+    text: dataTableConfig.textOperators,
+    number: dataTableConfig.numericOperators,
+    range: dataTableConfig.numericOperators,
+    date: dataTableConfig.dateOperators,
+    dateRange: dataTableConfig.dateOperators,
+    boolean: dataTableConfig.booleanOperators,
+    select: dataTableConfig.selectOperators,
+    multiSelect: dataTableConfig.multiSelectOperators
+  };
+  return operatorMap[filterVariant] ?? dataTableConfig.textOperators;
+}
+function getDefaultFilterOperator(filterVariant) {
+  const operators = getFilterOperators(filterVariant);
+  return operators[0]?.value ?? (filterVariant === "text" ? "iLike" : "eq");
+}
+function getValidFilters(filters) {
+  return filters.filter(
+    (filter) => filter.operator === "isEmpty" || filter.operator === "isNotEmpty" || (Array.isArray(filter.value) ? filter.value.length > 0 : filter.value !== "" && filter.value !== null && filter.value !== void 0)
+  );
+}
+function DataTable({
+  table,
+  actionBar,
+  footer,
+  onRowClick,
+  getRowClassName,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex w-full flex-col gap-2.5 overflow-auto", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              colSpan: header.colSpan,
+              style: {
+                ...getColumnPinningStyle({ column: header.column })
+              },
+              children: header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          )) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+            TableRow,
+            {
+              "data-state": row.getIsSelected() && "selected",
+              className: cn(
+                onRowClick && "cursor-pointer",
+                getRowClassName?.(row)
+              ),
+              onClick: onRowClick ? () => onRowClick(row) : void 0,
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  style: {
+                    ...getColumnPinningStyle({ column: cell.column })
+                  },
+                  children: flexRender(
+                    cell.column.columnDef.cell,
+                    cell.getContext()
+                  )
+                },
+                cell.id
+              ))
+            },
+            row.id
+          )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              colSpan: table.getAllColumns().length,
+              className: "h-24 text-center",
+              children: "No results."
+            }
+          ) }) }),
+          footer ? /* @__PURE__ */ jsx(TableFooter, { children: footer }) : null
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", children: [
+          /* @__PURE__ */ jsx(DataTablePagination, { table }),
+          actionBar && table.getFilteredSelectedRowModel().rows.length > 0 && actionBar
+        ] })
+      ]
+    }
+  );
+}
+function DataTableColumnHeader({
+  column,
+  label,
+  className,
+  ...props
+}) {
+  if (!column.getCanSort() && !column.getCanHide()) {
+    return /* @__PURE__ */ jsx("div", { className: cn(className), children: label });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenuTrigger,
+      {
+        className: cn(
+          "-ml-1.5 flex h-8 items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-accent focus:outline-none focus:ring-1 focus:ring-ring data-[state=open]:bg-accent [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          label,
+          column.getCanSort() && (column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ChevronDown, {}) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ChevronUp, {}) : /* @__PURE__ */ jsx(ChevronsUpDown, {}))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-28", children: [
+      column.getCanSort() && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenuCheckboxItem,
+          {
+            className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
+            checked: column.getIsSorted() === "asc",
+            onClick: () => column.toggleSorting(false),
+            children: [
+              /* @__PURE__ */ jsx(ChevronUp, {}),
+              "Asc"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          DropdownMenuCheckboxItem,
+          {
+            className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
+            checked: column.getIsSorted() === "desc",
+            onClick: () => column.toggleSorting(true),
+            children: [
+              /* @__PURE__ */ jsx(ChevronDown, {}),
+              "Desc"
+            ]
+          }
+        ),
+        column.getIsSorted() && /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            className: "pl-2 [&_svg]:text-muted-foreground",
+            onClick: () => column.clearSorting(),
+            children: [
+              /* @__PURE__ */ jsx(X, {}),
+              "Reset"
+            ]
+          }
+        )
+      ] }),
+      column.getCanHide() && /* @__PURE__ */ jsxs(
+        DropdownMenuCheckboxItem,
+        {
+          className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
+          checked: !column.getIsVisible(),
+          onClick: () => column.toggleVisibility(false),
+          children: [
+            /* @__PURE__ */ jsx(EyeOff, {}),
+            "Hide"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/blocks/table/lib/format.ts
+function formatDate2(date, opts = {}) {
+  if (!date) return "";
+  try {
+    return new Intl.DateTimeFormat("en-US", {
+      month: opts.month ?? "long",
+      day: opts.day ?? "numeric",
+      year: opts.year ?? "numeric",
+      ...opts
+    }).format(new Date(date));
+  } catch (_err) {
+    return "";
+  }
+}
+function getIsDateRange(value) {
+  return value && typeof value === "object" && !Array.isArray(value);
+}
+function parseAsDate(timestamp) {
+  if (!timestamp) return void 0;
+  const numericTimestamp = typeof timestamp === "string" ? Number(timestamp) : timestamp;
+  const date = new Date(numericTimestamp);
+  return !Number.isNaN(date.getTime()) ? date : void 0;
+}
+function parseColumnFilterValue(value) {
+  if (value === null || value === void 0) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => {
+      if (typeof item === "number" || typeof item === "string") {
+        return item;
+      }
+      return void 0;
+    });
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return [value];
+  }
+  return [];
+}
+function DataTableDateFilter({
+  column,
+  title,
+  multiple
+}) {
+  const columnFilterValue = column.getFilterValue();
+  const selectedDates = React12.useMemo(() => {
+    if (!columnFilterValue) {
+      return multiple ? { from: void 0, to: void 0 } : [];
+    }
+    if (multiple) {
+      const timestamps2 = parseColumnFilterValue(columnFilterValue);
+      return {
+        from: parseAsDate(timestamps2[0]),
+        to: parseAsDate(timestamps2[1])
+      };
+    }
+    const timestamps = parseColumnFilterValue(columnFilterValue);
+    const date = parseAsDate(timestamps[0]);
+    return date ? [date] : [];
+  }, [columnFilterValue, multiple]);
+  const onSelect = React12.useCallback(
+    (date) => {
+      if (!date) {
+        column.setFilterValue(void 0);
+        return;
+      }
+      if (multiple && !("getTime" in date)) {
+        const from = date.from?.getTime();
+        const to = date.to?.getTime();
+        column.setFilterValue(from || to ? [from, to] : void 0);
+      } else if (!multiple && "getTime" in date) {
+        column.setFilterValue(date.getTime());
+      }
+    },
+    [column, multiple]
+  );
+  const onReset = React12.useCallback(
+    (event) => {
+      event.stopPropagation();
+      column.setFilterValue(void 0);
+    },
+    [column]
+  );
+  const hasValue = React12.useMemo(() => {
+    if (multiple) {
+      if (!getIsDateRange(selectedDates)) return false;
+      return selectedDates.from || selectedDates.to;
+    }
+    if (!Array.isArray(selectedDates)) return false;
+    return selectedDates.length > 0;
+  }, [multiple, selectedDates]);
+  const formatDateRange = React12.useCallback((range) => {
+    if (!range.from && !range.to) return "";
+    if (range.from && range.to) {
+      return `${formatDate2(range.from)} - ${formatDate2(range.to)}`;
+    }
+    return formatDate2(range.from ?? range.to);
+  }, []);
+  const label = React12.useMemo(() => {
+    if (multiple) {
+      if (!getIsDateRange(selectedDates)) return null;
+      const hasSelectedDates = selectedDates.from || selectedDates.to;
+      const dateText2 = hasSelectedDates ? formatDateRange(selectedDates) : "Select date range";
+      return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { children: title }),
+        hasSelectedDates && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Separator,
+            {
+              orientation: "vertical",
+              className: "mx-0.5 data-[orientation=vertical]:h-4"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: dateText2 })
+        ] })
+      ] });
+    }
+    if (getIsDateRange(selectedDates)) return null;
+    const hasSelectedDate = selectedDates.length > 0;
+    const dateText = hasSelectedDate ? formatDate2(selectedDates[0]) : "Select date";
+    return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { children: title }),
+      hasSelectedDate && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Separator,
+          {
+            orientation: "vertical",
+            className: "mx-0.5 data-[orientation=vertical]:h-4"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: dateText })
+      ] })
+    ] });
+  }, [selectedDates, multiple, formatDateRange, title]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "border-dashed font-normal", children: [
+      hasValue ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          "aria-label": `Clear ${title} filter`,
+          tabIndex: 0,
+          onClick: onReset,
+          className: "rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          children: /* @__PURE__ */ jsx(XCircle, {})
+        }
+      ) : /* @__PURE__ */ jsx(CalendarIcon, {}),
+      label
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: multiple ? /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        autoFocus: true,
+        captionLayout: "dropdown",
+        mode: "range",
+        selected: getIsDateRange(selectedDates) ? selectedDates : { from: void 0, to: void 0 },
+        onSelect
+      }
+    ) : /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        captionLayout: "dropdown",
+        mode: "single",
+        selected: !getIsDateRange(selectedDates) ? selectedDates[0] : void 0,
+        onSelect
+      }
+    ) })
+  ] });
+}
+function DataTableFacetedFilter({
+  column,
+  title,
+  options,
+  multiple
+}) {
+  const [open, setOpen] = React12.useState(false);
+  const columnFilterValue = column?.getFilterValue();
+  const selectedValues = new Set(
+    Array.isArray(columnFilterValue) ? columnFilterValue : []
+  );
+  const onItemSelect = React12.useCallback(
+    (option, isSelected) => {
+      if (!column) return;
+      if (multiple) {
+        const newSelectedValues = new Set(selectedValues);
+        if (isSelected) {
+          newSelectedValues.delete(option.value);
+        } else {
+          newSelectedValues.add(option.value);
+        }
+        const filterValues = Array.from(newSelectedValues);
+        column.setFilterValue(filterValues.length ? filterValues : void 0);
+      } else {
+        column.setFilterValue(isSelected ? void 0 : [option.value]);
+        setOpen(false);
+      }
+    },
+    [column, multiple, selectedValues]
+  );
+  const onReset = React12.useCallback(
+    (event) => {
+      event?.stopPropagation();
+      column?.setFilterValue(void 0);
+    },
+    [column]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "border-dashed font-normal", children: [
+      selectedValues?.size > 0 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          "aria-label": `Clear ${title} filter`,
+          tabIndex: 0,
+          className: "rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          onClick: onReset,
+          children: /* @__PURE__ */ jsx(XCircle, {})
+        }
+      ) : /* @__PURE__ */ jsx(PlusCircle, {}),
+      title,
+      selectedValues?.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Separator,
+          {
+            orientation: "vertical",
+            className: "mx-0.5 data-[orientation=vertical]:h-4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal lg:hidden",
+            children: selectedValues.size
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-1 lg:flex", children: selectedValues.size > 2 ? /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal",
+            children: [
+              selectedValues.size,
+              " selected"
+            ]
+          }
+        ) : options.filter((option) => selectedValues.has(option.value)).map((option) => /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal",
+            children: option.label
+          },
+          option.value
+        )) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-50 p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: title }),
+      /* @__PURE__ */ jsxs(CommandList, { className: "max-h-full", children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+        /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", children: options.map((option) => {
+          const isSelected = selectedValues.has(option.value);
+          return /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              className: "[&>svg:last-child]:hidden",
+              onSelect: () => onItemSelect(option, isSelected),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex size-4 items-center justify-center rounded-sm border border-primary",
+                      isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    ),
+                    children: /* @__PURE__ */ jsx(Check, {})
+                  }
+                ),
+                option.icon && /* @__PURE__ */ jsx(option.icon, {}),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                option.count && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-xs", children: option.count })
+              ]
+            },
+            option.value
+          );
+        }) }),
+        selectedValues.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CommandSeparator, {}),
+          /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              onSelect: () => onReset(),
+              className: "justify-center text-center",
+              children: "Clear filters"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function DataTableSkeleton({
+  columnCount,
+  rowCount = 10,
+  filterCount = 0,
+  cellWidths = ["auto"],
+  withViewOptions = true,
+  withPagination = true,
+  shrinkZero = false,
+  className,
+  ...props
+}) {
+  const cozyCellWidths = Array.from(
+    { length: columnCount },
+    (_, index) => cellWidths[index % cellWidths.length] ?? "auto"
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex w-full flex-col gap-2.5 overflow-auto", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2 overflow-auto p-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-2", children: filterCount > 0 ? Array.from({ length: filterCount }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-18 border-dashed" }, i)) : null }),
+          withViewOptions ? /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto hidden h-7 w-18 lg:flex" }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: Array.from({ length: 1 }).map((_, i) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, j) => /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              style: {
+                width: cozyCellWidths[j],
+                minWidth: shrinkZero ? cozyCellWidths[j] : "auto"
+              },
+              children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" })
+            },
+            j
+          )) }, i)) }),
+          /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, i) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, j) => /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              style: {
+                width: cozyCellWidths[j],
+                minWidth: shrinkZero ? cozyCellWidths[j] : "auto"
+              },
+              children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" })
+            },
+            j
+          )) }, i)) })
+        ] }) }),
+        withPagination ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-4 overflow-auto p-1 sm:gap-8", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-40 shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 sm:gap-6 lg:gap-8", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-24" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-18" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center font-medium text-sm", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-20" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "hidden size-7 lg:block" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "size-7" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "size-7" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "hidden size-7 lg:block" })
+            ] })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React12.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+function getIsValidRange(value) {
+  return Array.isArray(value) && value.length === 2 && typeof value[0] === "number" && typeof value[1] === "number";
+}
+function parseValuesAsNumbers(value) {
+  if (Array.isArray(value) && value.length === 2 && value.every(
+    (v) => (typeof v === "string" || typeof v === "number") && !Number.isNaN(v)
+  )) {
+    return [Number(value[0]), Number(value[1])];
+  }
+  return void 0;
+}
+function DataTableSliderFilter({
+  column,
+  title
+}) {
+  const id = React12.useId();
+  const columnFilterValue = parseValuesAsNumbers(column.getFilterValue());
+  const defaultRange = column.columnDef.meta?.range;
+  const unit = column.columnDef.meta?.unit;
+  const { min, max, step } = React12.useMemo(() => {
+    let minValue = 0;
+    let maxValue = 100;
+    if (defaultRange && getIsValidRange(defaultRange)) {
+      [minValue, maxValue] = defaultRange;
+    } else {
+      const values = column.getFacetedMinMaxValues();
+      if (values && Array.isArray(values) && values.length === 2) {
+        const [facetMinValue, facetMaxValue] = values;
+        if (typeof facetMinValue === "number" && typeof facetMaxValue === "number") {
+          minValue = facetMinValue;
+          maxValue = facetMaxValue;
+        }
+      }
+    }
+    const rangeSize = maxValue - minValue;
+    const step2 = rangeSize <= 20 ? 1 : rangeSize <= 100 ? Math.ceil(rangeSize / 20) : Math.ceil(rangeSize / 50);
+    return { min: minValue, max: maxValue, step: step2 };
+  }, [column, defaultRange]);
+  const range = React12.useMemo(() => {
+    return columnFilterValue ?? [min, max];
+  }, [columnFilterValue, min, max]);
+  const formatValue = React12.useCallback((value) => {
+    return value.toLocaleString(void 0, { maximumFractionDigits: 0 });
+  }, []);
+  const onFromInputChange = React12.useCallback(
+    (event) => {
+      const numValue = Number(event.target.value);
+      if (!Number.isNaN(numValue) && numValue >= min && numValue <= range[1]) {
+        column.setFilterValue([numValue, range[1]]);
+      }
+    },
+    [column, min, range]
+  );
+  const onToInputChange = React12.useCallback(
+    (event) => {
+      const numValue = Number(event.target.value);
+      if (!Number.isNaN(numValue) && numValue <= max && numValue >= range[0]) {
+        column.setFilterValue([range[0], numValue]);
+      }
+    },
+    [column, max, range]
+  );
+  const onSliderValueChange = React12.useCallback(
+    (value) => {
+      if (Array.isArray(value) && value.length === 2) {
+        column.setFilterValue(value);
+      }
+    },
+    [column]
+  );
+  const onReset = React12.useCallback(
+    (event) => {
+      if (event.target instanceof HTMLDivElement) {
+        event.stopPropagation();
+      }
+      column.setFilterValue(void 0);
+    },
+    [column]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "border-dashed font-normal", children: [
+      columnFilterValue ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          "aria-label": `Clear ${title} filter`,
+          tabIndex: 0,
+          className: "rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          onClick: onReset,
+          children: /* @__PURE__ */ jsx(XCircle, {})
+        }
+      ) : /* @__PURE__ */ jsx(PlusCircle, {}),
+      /* @__PURE__ */ jsx("span", { children: title }),
+      columnFilterValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Separator,
+          {
+            orientation: "vertical",
+            className: "mx-0.5 data-[orientation=vertical]:h-4"
+          }
+        ),
+        formatValue(columnFilterValue[0]),
+        " -",
+        " ",
+        formatValue(columnFilterValue[1]),
+        unit ? ` ${unit}` : ""
+      ] }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "flex w-auto flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: title }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-from`, className: "sr-only", children: "From" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `${id}-from`,
+                type: "number",
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                inputMode: "numeric",
+                pattern: "[0-9]*",
+                placeholder: min.toString(),
+                min,
+                max,
+                value: range[0]?.toString(),
+                onChange: onFromInputChange,
+                className: cn("h-8 w-24", unit && "pr-8")
+              }
+            ),
+            unit && /* @__PURE__ */ jsx("span", { className: "absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm", children: unit })
+          ] }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-to`, className: "sr-only", children: "to" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `${id}-to`,
+                type: "number",
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                inputMode: "numeric",
+                pattern: "[0-9]*",
+                placeholder: max.toString(),
+                min,
+                max,
+                value: range[1]?.toString(),
+                onChange: onToInputChange,
+                className: cn("h-8 w-24", unit && "pr-8")
+              }
+            ),
+            unit && /* @__PURE__ */ jsx("span", { className: "absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm", children: unit })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-slider`, className: "sr-only", children: [
+          title,
+          " slider"
+        ] }),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            id: `${id}-slider`,
+            min,
+            max,
+            step,
+            value: range,
+            onValueChange: onSliderValueChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": `Clear ${title} filter`,
+          variant: "outline",
+          onClick: onReset,
+          children: "Clear"
+        }
+      )
+    ] })
+  ] });
+}
+function DataTableViewOptions({
+  table,
+  disabled,
+  className,
+  ...props
+}) {
+  const columns = React12.useMemo(
+    () => table.getAllColumns().filter(
+      (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
+    ),
+    [table]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-label": "Toggle columns",
+        role: "combobox",
+        variant: "outline",
+        className: "ml-auto hidden h-8 font-normal lg:flex",
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Settings2, { className: "text-muted-foreground" }),
+          "View"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: cn("w-44 p-0", className), ...props, children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search columns..." }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: "No columns found." }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column) => /* @__PURE__ */ jsx(
+          CommandItem,
+          {
+            "data-checked": column.getIsVisible(),
+            onSelect: () => column.toggleVisibility(!column.getIsVisible()),
+            children: /* @__PURE__ */ jsx("span", { className: "truncate", children: column.columnDef.meta?.label ?? column.id })
+          },
+          column.id
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+function DataTableToolbar({
+  table,
+  children,
+  className,
+  ...props
+}) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+  const columns = React12.useMemo(
+    () => table.getAllColumns().filter((column) => column.getCanFilter()),
+    [table]
+  );
+  const onReset = React12.useCallback(() => {
+    table.resetColumnFilters();
+  }, [table]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-orientation": "horizontal",
+      className: cn(
+        "flex w-full items-start justify-between gap-2 p-1",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
+          columns.map((column) => /* @__PURE__ */ jsx(DataTableToolbarFilter, { column }, column.id)),
+          isFiltered && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "aria-label": "Reset filters",
+              variant: "outline",
+              className: "border-dashed",
+              onClick: onReset,
+              children: [
+                /* @__PURE__ */ jsx(X, {}),
+                "Reset"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          children,
+          /* @__PURE__ */ jsx(DataTableViewOptions, { table, align: "end" })
+        ] })
+      ]
+    }
+  );
+}
+function DataTableToolbarFilter({
+  column
+}) {
+  {
+    const columnMeta = column.columnDef.meta;
+    const onFilterRender = React12.useCallback(() => {
+      if (!columnMeta?.variant) return null;
+      switch (columnMeta.variant) {
+        case "text":
+          return /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: columnMeta.placeholder ?? columnMeta.label,
+              value: column.getFilterValue() ?? "",
+              onChange: (event) => column.setFilterValue(event.target.value),
+              className: "h-8 w-40 lg:w-56"
+            }
+          );
+        case "number":
+          return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                inputMode: "numeric",
+                placeholder: columnMeta.placeholder ?? columnMeta.label,
+                value: column.getFilterValue() ?? "",
+                onChange: (event) => column.setFilterValue(event.target.value),
+                className: cn("h-8 w-[120px]", columnMeta.unit && "pr-8")
+              }
+            ),
+            columnMeta.unit && /* @__PURE__ */ jsx("span", { className: "absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm", children: columnMeta.unit })
+          ] });
+        case "range":
+          return /* @__PURE__ */ jsx(
+            DataTableSliderFilter,
+            {
+              column,
+              title: columnMeta.label ?? column.id
+            }
+          );
+        case "date":
+        case "dateRange":
+          return /* @__PURE__ */ jsx(
+            DataTableDateFilter,
+            {
+              column,
+              title: columnMeta.label ?? column.id,
+              multiple: columnMeta.variant === "dateRange"
+            }
+          );
+        case "select":
+        case "multiSelect":
+          return /* @__PURE__ */ jsx(
+            DataTableFacetedFilter,
+            {
+              column,
+              title: columnMeta.label ?? column.id,
+              options: columnMeta.options ?? [],
+              multiple: columnMeta.variant === "multiSelect"
+            }
+          );
+        default:
+          return null;
+      }
+    }, [column, columnMeta]);
+    return onFilterRender();
+  }
+}
+var sortingItemSchema = z.object({
+  id: z.string(),
+  desc: z.boolean()
+});
+var getSortingStateParser = (columnIds) => {
+  const validKeys = columnIds ? columnIds instanceof Set ? columnIds : new Set(columnIds) : null;
+  return createParser({
+    parse: (value) => {
+      try {
+        const parsed = JSON.parse(value);
+        const result = z.array(sortingItemSchema).safeParse(parsed);
+        if (!result.success) return null;
+        if (validKeys && result.data.some((item) => !validKeys.has(item.id))) {
+          return null;
+        }
+        return result.data;
+      } catch {
+        return null;
+      }
+    },
+    serialize: (value) => JSON.stringify(value),
+    eq: (a, b) => a.length === b.length && a.every(
+      (item, index) => item.id === b[index]?.id && item.desc === b[index]?.desc
+    )
+  });
+};
+var filterItemSchema = z.object({
+  id: z.string(),
+  value: z.union([z.string(), z.array(z.string())]),
+  variant: z.enum(dataTableConfig.filterVariants),
+  operator: z.enum(dataTableConfig.operators),
+  filterId: z.string()
+});
+var getFiltersStateParser = (columnIds) => {
+  const validKeys = columnIds ? columnIds instanceof Set ? columnIds : new Set(columnIds) : null;
+  return createParser({
+    parse: (value) => {
+      try {
+        const parsed = JSON.parse(value);
+        const result = z.array(filterItemSchema).safeParse(parsed);
+        if (!result.success) return null;
+        if (validKeys && result.data.some((item) => !validKeys.has(item.id))) {
+          return null;
+        }
+        return result.data;
+      } catch {
+        return null;
+      }
+    },
+    serialize: (value) => JSON.stringify(value),
+    eq: (a, b) => a.length === b.length && a.every(
+      (filter, index) => filter.id === b[index]?.id && filter.value === b[index]?.value && filter.variant === b[index]?.variant && filter.operator === b[index]?.operator
+    )
+  });
+};
+var PAGE_KEY = "page";
+var PER_PAGE_KEY = "perPage";
+var SORT_KEY = "sort";
+var FILTERS_KEY = "filters";
+var JOIN_OPERATOR_KEY = "joinOperator";
+var ARRAY_SEPARATOR = ",";
+var DEBOUNCE_MS = 300;
+var THROTTLE_MS = 50;
+function useDataTable(props) {
+  const {
+    columns,
+    pageCount = -1,
+    initialState,
+    queryKeys,
+    history = "replace",
+    debounceMs = DEBOUNCE_MS,
+    throttleMs = THROTTLE_MS,
+    clearOnDefault = false,
+    enableAdvancedFilter = false,
+    scroll = false,
+    shallow = true,
+    startTransition,
+    ...tableProps
+  } = props;
+  const pageKey = queryKeys?.page ?? PAGE_KEY;
+  const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;
+  const sortKey = queryKeys?.sort ?? SORT_KEY;
+  const filtersKey = queryKeys?.filters ?? FILTERS_KEY;
+  const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;
+  const queryStateOptions = React12.useMemo(
+    () => ({
+      history,
+      scroll,
+      shallow,
+      throttleMs,
+      debounceMs,
+      clearOnDefault,
+      startTransition
+    }),
+    [
+      history,
+      scroll,
+      shallow,
+      throttleMs,
+      debounceMs,
+      clearOnDefault,
+      startTransition
+    ]
+  );
+  const [rowSelection, setRowSelection] = React12.useState(
+    initialState?.rowSelection ?? {}
+  );
+  const [columnVisibility, setColumnVisibility] = React12.useState(initialState?.columnVisibility ?? {});
+  const [page, setPage] = useQueryState(
+    pageKey,
+    parseAsInteger.withOptions(queryStateOptions).withDefault(1)
+  );
+  const [perPage, setPerPage] = useQueryState(
+    perPageKey,
+    parseAsInteger.withOptions(queryStateOptions).withDefault(initialState?.pagination?.pageSize ?? 10)
+  );
+  const pagination = React12.useMemo(() => {
+    return {
+      pageIndex: page - 1,
+      // zero-based index -> one-based index
+      pageSize: perPage
+    };
+  }, [page, perPage]);
+  const onPaginationChange = React12.useCallback(
+    (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        const newPagination = updaterOrValue(pagination);
+        void setPage(newPagination.pageIndex + 1);
+        void setPerPage(newPagination.pageSize);
+      } else {
+        void setPage(updaterOrValue.pageIndex + 1);
+        void setPerPage(updaterOrValue.pageSize);
+      }
+    },
+    [pagination, setPage, setPerPage]
+  );
+  const columnIds = React12.useMemo(() => {
+    return new Set(
+      columns.map((column) => column.id).filter(Boolean)
+    );
+  }, [columns]);
+  const [sorting, setSorting] = useQueryState(
+    sortKey,
+    getSortingStateParser(columnIds).withOptions(queryStateOptions).withDefault(initialState?.sorting ?? [])
+  );
+  const onSortingChange = React12.useCallback(
+    (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        const newSorting = updaterOrValue(sorting);
+        setSorting(newSorting);
+      } else {
+        setSorting(updaterOrValue);
+      }
+    },
+    [sorting, setSorting]
+  );
+  const filterableColumns = React12.useMemo(() => {
+    if (enableAdvancedFilter) return [];
+    return columns.filter((column) => column.enableColumnFilter);
+  }, [columns, enableAdvancedFilter]);
+  const filterParsers = React12.useMemo(() => {
+    if (enableAdvancedFilter) return {};
+    return filterableColumns.reduce((acc, column) => {
+      if (column.meta?.options) {
+        acc[column.id ?? ""] = parseAsArrayOf(
+          parseAsString,
+          ARRAY_SEPARATOR
+        ).withOptions(queryStateOptions);
+      } else {
+        acc[column.id ?? ""] = parseAsString.withOptions(queryStateOptions);
+      }
+      return acc;
+    }, {});
+  }, [filterableColumns, queryStateOptions, enableAdvancedFilter]);
+  const [filterValues, setFilterValues] = useQueryStates(filterParsers);
+  const debouncedSetFilterValues = useDebouncedCallback(
+    (values) => {
+      void setPage(1);
+      void setFilterValues(values);
+    },
+    debounceMs
+  );
+  const initialColumnFilters = React12.useMemo(() => {
+    if (enableAdvancedFilter) return [];
+    return Object.entries(filterValues).reduce(
+      (filters, [key, value]) => {
+        if (value !== null) {
+          const processedValue = Array.isArray(value) ? value : typeof value === "string" && /[^a-zA-Z0-9]/.test(value) ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean) : [value];
+          filters.push({
+            id: key,
+            value: processedValue
+          });
+        }
+        return filters;
+      },
+      []
+    );
+  }, [filterValues, enableAdvancedFilter]);
+  const [columnFilters, setColumnFilters] = React12.useState(initialColumnFilters);
+  const onColumnFiltersChange = React12.useCallback(
+    (updaterOrValue) => {
+      if (enableAdvancedFilter) return;
+      setColumnFilters((prev) => {
+        const next = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+        const filterUpdates = next.reduce((acc, filter) => {
+          if (filterableColumns.find((column) => column.id === filter.id)) {
+            acc[filter.id] = filter.value;
+          }
+          return acc;
+        }, {});
+        for (const prevFilter of prev) {
+          if (!next.some((filter) => filter.id === prevFilter.id)) {
+            filterUpdates[prevFilter.id] = null;
+          }
+        }
+        debouncedSetFilterValues(filterUpdates);
+        return next;
+      });
+    },
+    [debouncedSetFilterValues, filterableColumns, enableAdvancedFilter]
+  );
+  const table = useReactTable({
+    ...tableProps,
+    columns,
+    initialState,
+    pageCount,
+    state: {
+      pagination,
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters
+    },
+    defaultColumn: {
+      ...tableProps.defaultColumn,
+      enableColumnFilter: false
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange,
+    onSortingChange,
+    onColumnFiltersChange,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues(),
+    manualPagination: true,
+    manualSorting: true,
+    manualFiltering: true,
+    meta: {
+      ...tableProps.meta,
+      queryKeys: {
+        page: pageKey,
+        perPage: perPageKey,
+        sort: sortKey,
+        filters: filtersKey,
+        joinOperator: joinOperatorKey
+      }
+    }
+  });
+  return React12.useMemo(
+    () => ({ table, shallow, debounceMs, throttleMs }),
+    [table, shallow, debounceMs, throttleMs]
+  );
+}
+
+export { DataTable, DataTableAddButton, DataTableColumnHeader, DataTableDateFilter, DataTableExportButton, DataTableFacetedFilter, DataTablePagination, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableSliderFilter, DataTableSummary, DataTableToolbar, DataTableTopper, DataTableViewOptions, DataTableViews, IconButton, Slider, dataTableConfig, exportToCsv, exportToExcel, getColumnPinningStyle, getDefaultFilterOperator, getFilterOperators, getFiltersStateParser, getSortingStateParser, getValidFilters, iconButtonVariants, useDataTable };