@fayz-ai/ui 0.37.0 → 0.38.0

package/dist/{chunk-5MXNQ6HZ.js → chunk-4LNSCAM4.js}

@@ -1,6 +1,6 @@
 import { PageViewBar } from './chunk-7SEWMFO3.js';
 import { cn, Button } from './chunk-FKYFYGAS.js';
-import * as React2 from 'react';
+import * as React4 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { ChevronRight, Check, Circle, Minus, ChevronDown, ArrowDown, ArrowUp, ArrowUpDown, ListFilter, X, Calendar, RefreshCw } from 'lucide-react';
@@ -8,7 +8,7 @@ import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@
 import { useTranslation } from '@fayz-ai/core';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -20,7 +20,7 @@ var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -29,7 +29,7 @@ var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -41,7 +41,7 @@ var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -50,9 +50,9 @@ var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
+var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -67,7 +67,7 @@ var DropdownGroup = DropdownMenuPrimitive.Group;
 var DropdownPortal = DropdownMenuPrimitive.Portal;
 var DropdownSub = DropdownMenuPrimitive.Sub;
 var DropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -84,7 +84,7 @@ var DropdownSubTrigger = React2.forwardRef(({ className, inset, children, ...pro
   }
 ));
 DropdownSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownSubContent = React2.forwardRef(({ className, ...props }, ref) => (
+var DropdownSubContent = React4.forwardRef(({ className, ...props }, ref) => (
   // Portaled, like DropdownContent. Without it the submenu renders inside the
   // parent panel's DOM — and that panel is `overflow-hidden`, so the submenu
   // was clipped to its box: a flyout you could open and never reach.
@@ -101,7 +101,7 @@ var DropdownSubContent = React2.forwardRef(({ className, ...props }, ref) => (
   ) })
 ));
 DropdownSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -114,7 +114,7 @@ var DropdownContent = React2.forwardRef(({ className, sideOffset = 4, ...props }
   }
 ) }));
 DropdownContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownItem = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -127,7 +127,7 @@ var DropdownItem = React2.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 DropdownItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownCheckboxItem = React4.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -144,7 +144,7 @@ var DropdownCheckboxItem = React2.forwardRef(({ className, children, checked, ..
   }
 ));
 DropdownCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownRadioItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -160,7 +160,7 @@ var DropdownRadioItem = React2.forwardRef(({ className, children, ...props }, re
   }
 ));
 DropdownRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownLabel = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -173,7 +173,7 @@ var DropdownLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 DropdownLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -201,7 +201,7 @@ var COLOR_CLASSES = {
   warning: "border-warning bg-warning text-white",
   destructive: "border-destructive bg-destructive text-destructive-foreground"
 };
-var Checkbox = React2.forwardRef(
+var Checkbox = React4.forwardRef(
   ({ checked = false, onChange, disabled, className, color = "primary", id, indeterminate = false, ...props }, ref) => {
     const filled = checked || indeterminate;
     return /* @__PURE__ */ jsx(
@@ -242,7 +242,8 @@ function DataTable({
   selectedIds,
   onSelectedIdsChange,
   getRowId,
-  rowClassName
+  rowClassName,
+  groupBy
 }) {
   const t = useTranslation();
   const isCard = variant === "card";
@@ -252,28 +253,37 @@ function DataTable({
   const tdCls = compact ? "px-3 py-1.5 align-middle text-xs" : "px-4 py-3 align-middle";
   const tableCls = compact ? "w-full text-xs min-w-max" : "w-full text-sm min-w-max";
   const rowHoverCls = isCard ? "hover:bg-muted/30" : "hover:bg-muted/20";
-  const [sorting, setSorting] = React2.useState([]);
-  const rowId = React2.useCallback(
+  const [sorting, setSorting] = React4.useState([]);
+  const [ownCollapsed, setOwnCollapsed] = React4.useState([]);
+  const collapsedKeys = groupBy?.collapsed ?? ownCollapsed;
+  const collapsed = React4.useMemo(() => new Set(collapsedKeys), [collapsedKeys]);
+  const onCollapsedChange = groupBy?.onCollapsedChange;
+  const toggleGroup = React4.useCallback((key) => {
+    const next = collapsed.has(key) ? [...collapsed].filter((k) => k !== key) : [...collapsed, key];
+    if (onCollapsedChange) onCollapsedChange(next);
+    else setOwnCollapsed(next);
+  }, [collapsed, onCollapsedChange]);
+  const rowId = React4.useCallback(
     (row) => getRowId ? getRowId(row) : String(row.id ?? ""),
     [getRowId]
   );
-  const selected = React2.useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
-  const pageIds = React2.useMemo(() => data.map(rowId), [data, rowId]);
+  const selected = React4.useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
+  const pageIds = React4.useMemo(() => data.map(rowId), [data, rowId]);
   const selectedOnPage = pageIds.filter((id) => selected.has(id)).length;
   const allOnPageSelected = pageIds.length > 0 && selectedOnPage === pageIds.length;
-  const toggleRow = React2.useCallback((id) => {
+  const toggleRow = React4.useCallback((id) => {
     const next = new Set(selected);
     if (next.has(id)) next.delete(id);
     else next.add(id);
     onSelectedIdsChange?.([...next]);
   }, [selected, onSelectedIdsChange]);
-  const toggleAllOnPage = React2.useCallback(() => {
+  const toggleAllOnPage = React4.useCallback(() => {
     const next = new Set(selected);
     if (allOnPageSelected) pageIds.forEach((id) => next.delete(id));
     else pageIds.forEach((id) => next.add(id));
     onSelectedIdsChange?.([...next]);
   }, [selected, allOnPageSelected, pageIds, onSelectedIdsChange]);
-  const selectionColumn = React2.useMemo(() => ({
+  const selectionColumn = React4.useMemo(() => ({
     id: "__select__",
     enableSorting: false,
     header: () => /* @__PURE__ */ jsx(
@@ -300,7 +310,7 @@ function DataTable({
     // ids: turning the page with nothing selected changes no other dep, and the
     // memo would hand the header a button that ticks the previous page's rows.
   }), [allOnPageSelected, selectedOnPage, selected, rowId, toggleRow, toggleAllOnPage, t]);
-  const allColumns = React2.useMemo(
+  const allColumns = React4.useMemo(
     () => selectable ? [selectionColumn, ...columns] : columns,
     [selectable, selectionColumn, columns]
   );
@@ -312,6 +322,10 @@ function DataTable({
     onSortingChange: setSorting,
     state: { sorting }
   });
+  const [tableEl, setTableEl] = React4.useState(null);
+  const headScrollRef = React4.useRef(null);
+  const floating = useFloatingHeader(tableEl, [data, allColumns, collapsed, sorting]);
+  const groupBandBackground = "linear-gradient(hsl(var(--muted) / 0.4), hsl(var(--muted) / 0.4)), hsl(var(--card))";
   if (loading) {
     return /* @__PURE__ */ jsx("div", { className: wrapperCls, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: tableCls, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: headerCls, children: allColumns.map((_, i) => /* @__PURE__ */ jsx("th", { className: thCls, children: /* @__PURE__ */ jsx("div", { className: "h-3.5 w-20 animate-pulse rounded bg-muted" }) }, i)) }) }),
@@ -322,68 +336,204 @@ function DataTable({
   if (showEmptyBlock) {
     return /* @__PURE__ */ jsx("div", { className: wrapperCls, children: /* @__PURE__ */ jsx("div", { className: "flex min-h-64 w-full items-center justify-center px-4 py-10 text-center text-muted-foreground", children: emptyMessage }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: wrapperCls, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: tableCls, children: [
-    /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: headerCls, children: headerGroup.headers.map((header) => {
-      const sorted = header.column.getIsSorted();
-      return /* @__PURE__ */ jsx(
-        "th",
+  const headerRows = /* @__PURE__ */ jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: headerCls, children: headerGroup.headers.map((header) => {
+    const sorted = header.column.getIsSorted();
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        className: cn(thCls, header.column.id === "__select__" && "w-10 pr-0"),
+        children: header.isPlaceholder ? null : sortIndicator?.columnId === header.column.id ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", children: [
+          flexRender(header.column.columnDef.header, header.getContext()),
+          sortIndicator.dir === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" })
+        ] }) : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "flex items-center gap-1 hover:text-foreground transition-colors",
+            onClick: header.column.getToggleSortingHandler(),
+            children: [
+              flexRender(header.column.columnDef.header, header.getContext()),
+              sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 opacity-40" })
+            ]
+          }
+        ) : flexRender(header.column.columnDef.header, header.getContext())
+      },
+      header.id
+    );
+  }) }, headerGroup.id)) });
+  const renderGroupButton = (key, rows, isCollapsed) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn("flex w-full items-center gap-2 text-left font-medium text-foreground hover:bg-muted/60", compact ? "px-3 py-1.5" : "px-4 py-2"),
+      onClick: () => toggleGroup(key),
+      "aria-expanded": !isCollapsed,
+      children: [
+        isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: key ? groupBy?.renderLabel?.(key, rows.map((r) => r.original)) ?? key : groupBy?.emptyLabel ?? "\u2014" }),
+        /* @__PURE__ */ jsx("span", { className: "rounded-full bg-background px-2 py-0.5 text-[11px] font-medium tabular-nums text-muted-foreground", children: rows.length })
+      ]
+    }
+  );
+  const activeGroup = floating.activeGroup != null ? groupRows(table.getRowModel().rows, groupBy).find((g) => g?.key === floating.activeGroup) : void 0;
+  const overlayHeight = floating.headH + (activeGroup ? floating.bandH : 0);
+  return (
+    // `clip`, not `hidden`: it rounds the corners without becoming a scroll
+    // container, which would capture the sticky header.
+    /* @__PURE__ */ jsxs("div", { className: wrapperCls, style: { overflow: "clip" }, children: [
+      floating.widths.length > 0 && /* @__PURE__ */ jsxs(
+        "div",
         {
-          className: cn(thCls, header.column.id === "__select__" && "w-10 pr-0"),
-          children: header.isPlaceholder ? null : sortIndicator?.columnId === header.column.id ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", children: [
-            flexRender(header.column.columnDef.header, header.getContext()),
-            sortIndicator.dir === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" })
-          ] }) : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
-            "button",
+          className: "bg-card",
+          style: { position: "sticky", top: 0, zIndex: 10, height: overlayHeight, marginBottom: -overlayHeight, overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: headScrollRef, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsxs("table", { className: tableCls, style: { tableLayout: "fixed", width: floating.tableWidth, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx("colgroup", { children: floating.widths.map((w, i) => /* @__PURE__ */ jsx("col", { style: { width: w } }, i)) }),
+              /* @__PURE__ */ jsx("thead", { children: headerRows })
+            ] }) }),
+            activeGroup && /* @__PURE__ */ jsx("div", { className: "border-b", style: { background: groupBandBackground }, children: renderGroupButton(activeGroup.key, activeGroup.rows, collapsed.has(activeGroup.key)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", onScroll: (e) => {
+        if (headScrollRef.current) headScrollRef.current.scrollLeft = e.currentTarget.scrollLeft;
+      }, children: /* @__PURE__ */ jsxs("table", { ref: setTableEl, className: tableCls, children: [
+        /* @__PURE__ */ jsx("thead", { style: { visibility: floating.widths.length > 0 ? "hidden" : void 0 }, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: headerCls, children: headerGroup.headers.map((header) => {
+          const sorted = header.column.getIsSorted();
+          return /* @__PURE__ */ jsx(
+            "th",
             {
-              className: "flex items-center gap-1 hover:text-foreground transition-colors",
-              onClick: header.column.getToggleSortingHandler(),
-              children: [
+              className: cn(thCls, header.column.id === "__select__" && "w-10 pr-0"),
+              children: header.isPlaceholder ? null : sortIndicator?.columnId === header.column.id ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", children: [
                 flexRender(header.column.columnDef.header, header.getContext()),
-                sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 opacity-40" })
-              ]
+                sortIndicator.dir === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" })
+              ] }) : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "flex items-center gap-1 hover:text-foreground transition-colors",
+                  onClick: header.column.getToggleSortingHandler(),
+                  children: [
+                    flexRender(header.column.columnDef.header, header.getContext()),
+                    sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 opacity-40" })
+                  ]
+                }
+              ) : flexRender(header.column.columnDef.header, header.getContext())
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows?.length ? groupRows(table.getRowModel().rows, groupBy).flatMap((group) => {
+          const isCollapsed = group && collapsed.has(group.key);
+          const header = group ? /* @__PURE__ */ jsx("tr", { className: "border-b", "data-group-key": group.key, children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: allColumns.length,
+              className: "p-0",
+              style: { background: groupBandBackground },
+              children: renderGroupButton(group.key, group.rows, !!isCollapsed)
             }
-          ) : flexRender(header.column.columnDef.header, header.getContext())
-        },
-        header.id
-      );
-    }) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
-      const isSelected = selectable && selected.has(rowId(row.original));
-      return /* @__PURE__ */ jsx(
-        "tr",
-        {
-          className: cn(
-            `border-b last:border-0 transition-colors ${rowHoverCls}`,
-            onRowClick && "cursor-pointer",
-            isSelected && "bg-muted/40",
-            rowClassName?.(row.original)
-          ),
-          onClick: () => onRowClick?.(row.original),
-          "data-selected": isSelected || void 0,
-          children: row.getVisibleCells().map((cell) => {
-            const isSelectCell = cell.column.id === "__select__";
+          ) }, `__group__${group.key}`) : null;
+          const rows = isCollapsed ? [] : group?.rows ?? table.getRowModel().rows;
+          return [header, ...rows.map((row) => {
+            const isSelected = selectable && selected.has(rowId(row.original));
             return /* @__PURE__ */ jsx(
-              "td",
+              "tr",
               {
-                className: cn(tdCls, isSelectCell && "w-10 pr-0"),
-                onClick: isSelectCell ? (e) => e.stopPropagation() : void 0,
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                className: cn(
+                  `border-b last:border-0 transition-colors ${rowHoverCls}`,
+                  onRowClick && "cursor-pointer",
+                  isSelected && "bg-muted/40",
+                  rowClassName?.(row.original)
+                ),
+                onClick: () => onRowClick?.(row.original),
+                "data-selected": isSelected || void 0,
+                children: row.getVisibleCells().map((cell) => {
+                  const isSelectCell = cell.column.id === "__select__";
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: cn(tdCls, isSelectCell && "w-10 pr-0"),
+                      onClick: isSelectCell ? (e) => e.stopPropagation() : void 0,
+                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                    },
+                    cell.id
+                  );
+                })
               },
-              cell.id
+              row.id
             );
-          })
-        },
-        row.id
-      );
-    }) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: allColumns.length, className: "h-64 px-6 text-center align-middle text-muted-foreground", children: emptyMessage }) }) })
-  ] }) }) });
+          })];
+        }) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: allColumns.length, className: "h-64 px-6 text-center align-middle text-muted-foreground", children: emptyMessage }) }) })
+      ] }) })
+    ] })
+  );
+}
+function useFloatingHeader(table, deps) {
+  const [state, setState] = React4.useState({ widths: [], tableWidth: 0, headH: 0, bandH: 0, activeGroup: null });
+  const measure = React4.useCallback(() => {
+    if (!table?.tHead) return;
+    const cells = [...table.tHead.rows[0]?.cells ?? []];
+    const widths = cells.map((c) => c.getBoundingClientRect().width);
+    const tableWidth = table.getBoundingClientRect().width;
+    const headH = table.tHead.getBoundingClientRect().height;
+    const bands = [...table.querySelectorAll("tr[data-group-key]")];
+    const bandH = bands[0]?.getBoundingClientRect().height ?? 0;
+    const top = table.getBoundingClientRect().top;
+    let scrollerTop = 0;
+    for (let el = table.parentElement?.parentElement ?? null; el; el = el.parentElement) {
+      const oy = getComputedStyle(el).overflowY;
+      if ((oy === "auto" || oy === "scroll") && el.scrollHeight > el.clientHeight) {
+        scrollerTop = el.getBoundingClientRect().top;
+        break;
+      }
+    }
+    const line = Math.max(top, scrollerTop) + headH;
+    let activeGroup = null;
+    for (const band of bands) {
+      if (band.getBoundingClientRect().top < line - 0.5) activeGroup = band.dataset.groupKey ?? "";
+      else break;
+    }
+    setState((prev) => prev.tableWidth === tableWidth && prev.headH === headH && prev.bandH === bandH && prev.activeGroup === activeGroup && prev.widths.length === widths.length && prev.widths.every((w, i) => w === widths[i]) ? prev : { widths, tableWidth, headH, bandH, activeGroup });
+  }, [table]);
+  React4.useLayoutEffect(() => {
+    measure();
+  }, [measure, ...deps]);
+  React4.useEffect(() => {
+    if (!table) return;
+    let frame = 0;
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(() => {
+        frame = 0;
+        measure();
+      });
+    };
+    const observer = new ResizeObserver(schedule);
+    observer.observe(table);
+    document.addEventListener("scroll", schedule, true);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("scroll", schedule, true);
+      cancelAnimationFrame(frame);
+    };
+  }, [table, measure]);
+  return state;
+}
+function groupRows(rows, groupBy) {
+  if (!groupBy) return [null];
+  const byKey = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const key = groupBy.getKey(row.original)?.trim() ?? "";
+    const list = byKey.get(key);
+    if (list) list.push(row);
+    else byKey.set(key, [row]);
+  }
+  return [...byKey.entries()].sort(([a], [b]) => a === "" ? 1 : b === "" ? -1 : a.localeCompare(b, void 0, { sensitivity: "base" })).map(([key, list]) => ({ key, rows: list }));
 }
 var WIDE_QUERY = "(min-width: 768px)";
 function useIsWide(query = WIDE_QUERY) {
-  const [wide, setWide] = React2.useState(
+  const [wide, setWide] = React4.useState(
     () => typeof window === "undefined" ? true : window.matchMedia(query).matches
   );
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     const mq = window.matchMedia(query);
     const onChange = () => setWide(mq.matches);
     mq.addEventListener("change", onChange);
@@ -421,7 +571,7 @@ function TableSkeleton({ columns = 4, rows = 2 }) {
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React2.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React4.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -453,14 +603,14 @@ function FilterMenuRow({ active, onClick, children }) {
   );
 }
 function FilterMenu({ fields, label = "Filtros", activeCount = 0, onClear, clearLabel = "Limpar filtros", header, align = "end", className }) {
-  const [open, setOpen] = React2.useState(false);
-  const [hovered, setHoveredRaw] = React2.useState(null);
-  const [query, setQuery] = React2.useState("");
-  const setHovered = React2.useCallback((id) => {
+  const [open, setOpen] = React4.useState(false);
+  const [hovered, setHoveredRaw] = React4.useState(null);
+  const [query, setQuery] = React4.useState("");
+  const setHovered = React4.useCallback((id) => {
     setHoveredRaw(id);
     setQuery("");
   }, []);
-  const close = React2.useCallback(() => setOpen(false), []);
+  const close = React4.useCallback(() => setOpen(false), []);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (o) => {
     setOpen(o);
     if (!o) setHovered(null);
@@ -556,18 +706,18 @@ function FilterMenu({ fields, label = "Filtros", activeCount = 0, onClear, clear
     ] })
   ] });
 }
-var ToolbarSurfaceContext = React2.createContext({
+var ToolbarSurfaceContext = React4.createContext({
   surface: "bar",
   close: () => {
   }
 });
 function useToolbarSurface() {
-  return React2.useContext(ToolbarSurfaceContext).surface;
+  return React4.useContext(ToolbarSurfaceContext).surface;
 }
 function useToolbarPanelClose() {
-  return React2.useContext(ToolbarSurfaceContext).close;
+  return React4.useContext(ToolbarSurfaceContext).close;
 }
-var ToolbarButton = React2.forwardRef(function ToolbarButton2({ icon: Icon, caret = true, children, className, ...props }, ref) {
+var ToolbarButton = React4.forwardRef(function ToolbarButton2({ icon: Icon, caret = true, children, className, ...props }, ref) {
   const panel = useToolbarSurface() === "panel";
   if (panel) {
     return /* @__PURE__ */ jsxs(
@@ -611,7 +761,7 @@ var ToolbarButton = React2.forwardRef(function ToolbarButton2({ icon: Icon, care
     }
   );
 });
-var ToolbarAction = React2.forwardRef(function ToolbarAction2({ icon: Icon, caret = false, children, className, ...props }, ref) {
+var ToolbarAction = React4.forwardRef(function ToolbarAction2({ icon: Icon, caret = false, children, className, ...props }, ref) {
   const panel = useToolbarSurface() === "panel";
   if (panel) {
     return /* @__PURE__ */ jsxs(
@@ -689,8 +839,8 @@ function PageToolbar({
   className
 }) {
   const wide = useIsWide();
-  const [open, setOpen] = React2.useState(false);
-  const panelSurface = React2.useMemo(
+  const [open, setOpen] = React4.useState(false);
+  const panelSurface = React4.useMemo(
     () => ({ surface: "panel", close: () => setOpen(false) }),
     []
   );
@@ -757,5 +907,5 @@ function PageToolbar({
 }
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dropdown, DropdownCheckboxItem, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownShortcut, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, FilterMenu, FilterMenuRow, PageToolbar, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RangeControl, Skeleton, TOOLBAR_ICON_DOT, TOOLBAR_ICON_TRIGGER, TableSkeleton, ToolbarAction, ToolbarButton, WIDE_QUERY, useIsWide, useToolbarPanelClose, useToolbarSurface };
-//# sourceMappingURL=chunk-5MXNQ6HZ.js.map
-//# sourceMappingURL=chunk-5MXNQ6HZ.js.map
+//# sourceMappingURL=chunk-4LNSCAM4.js.map
+//# sourceMappingURL=chunk-4LNSCAM4.js.map