ivt 0.5.5 → 0.5.7

package/dist/data-table/index.mjs

@@ -1,45 +1,45 @@
 import * as React$1 from 'react';
 import React__default, { forwardRef, createElement } from 'react';
-import { c as cn } from '../chunks/utils-DbWlhojh.mjs';
-import { C as ChevronDown } from '../chunks/chevron-down-GNWj-PsJ.mjs';
-import { C as Check } from '../chunks/check-C2JQIEoK.mjs';
-import { P as Popover, a as PopoverTrigger, b as PopoverContent } from '../chunks/popover-BGTLw9yg.mjs';
-import { B as Button } from '../chunks/button-BOgyLhzN.mjs';
-import { C as Command, b as CommandInput, c as CommandList, d as CommandEmpty, e as CommandGroup, f as CommandItem, S as Search } from '../chunks/command-DgZmCZLh.mjs';
-import { I as Input } from '../chunks/input-BK_g0H-A.mjs';
-import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from '../chunks/select-B9KImN17.mjs';
-import { C as ChevronLeft } from '../chunks/chevron-left-Ciw_Gg5L.mjs';
-import { C as ChevronRight } from '../chunks/chevron-right-bGT4BvYz.mjs';
-import { c as PaginationItem, f as PaginationEllipsis } from '../chunks/pagination-Cotft18P.mjs';
-import { S as Skeleton } from '../chunks/skeleton-DJUPQDI3.mjs';
-import { e as TableRow, f as TableCell, T as Table, a as TableHeader, d as TableHead, b as TableBody } from '../chunks/table-CPHEPhht.mjs';
-import { c as createLucideIcon } from '../chunks/createLucideIcon-CHz-fHlL.mjs';
-import { S as Sortable, b as SortableItem } from '../chunks/sortable-BbcW1b3f.mjs';
-import '../chunks/bundle-mjs-CWQvHGtg.mjs';
-import '../chunks/index-CJmlDCYz.mjs';
-import '../chunks/index-Dmxf1tuE.mjs';
-import '../chunks/index-DEO2kkpO.mjs';
-import 'react/jsx-runtime';
-import '../chunks/index-DsKPgtIv.mjs';
-import '../chunks/index-Cu3VwLIM.mjs';
-import 'react-dom';
+import { c as cn } from '../chunks/utils-Cbs-uxBq.mjs';
+import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from '../chunks/select-DZFrWKa9.mjs';
+import { C as ChevronLeft } from '../chunks/chevron-left-Dr2znK-e.mjs';
+import { C as ChevronRight } from '../chunks/chevron-right-DmVvAueL.mjs';
+import { c as PaginationItem, f as PaginationEllipsis } from '../chunks/pagination-D7L2vbck.mjs';
+import { B as Button } from '../chunks/button-BtNSgexc.mjs';
+import { S as Skeleton } from '../chunks/skeleton-CAkZfLJU.mjs';
+import { e as TableRow, f as TableCell, T as Table, a as TableHeader, d as TableHead, b as TableBody } from '../chunks/table-DtYzDvg1.mjs';
+import { c as createLucideIcon } from '../chunks/createLucideIcon-PuoJamGs.mjs';
+import { S as Sortable, b as SortableItem } from '../chunks/sortable-CqaoTR3I.mjs';
+import { S as Search, C as Command, b as CommandInput, c as CommandList, d as CommandEmpty, f as CommandItem, e as CommandGroup } from '../chunks/command-EU3dDbf_.mjs';
+import { I as Input } from '../chunks/input-C3fkPeG_.mjs';
+import { C as ChevronDown } from '../chunks/chevron-down-DPe3wUSx.mjs';
+import { P as Popover, a as PopoverTrigger, b as PopoverContent } from '../chunks/popover-C1aNGeey.mjs';
+import { C as Check } from '../chunks/check-TyRJdtqa.mjs';
+import '../chunks/bundle-mjs-CwF_jj9z.mjs';
+import '@radix-ui/react-select';
+import '../chunks/ellipsis-D5nNS0KK.mjs';
 import '@radix-ui/react-slot';
-import '../chunks/index-Dvmx4xV6.mjs';
-import '../chunks/Combination-D2wzO_UG.mjs';
-import '../chunks/tslib.es6-BqS_Tuh7.mjs';
-import '../chunks/index-DbTcqBW_.mjs';
-import '../chunks/index-CeGdyziS.mjs';
-import '../chunks/index-Bfr3QSR6.mjs';
-import '../chunks/index-D1-1o3ca.mjs';
-import '../chunks/index-BbX-6yhg.mjs';
-import '../chunks/index-eKeyN0nu.mjs';
-import '../chunks/index-B9X_JCGT.mjs';
 import 'class-variance-authority';
-import '../chunks/index-tRp8REyd.mjs';
-import '../chunks/dialog-eFe5WShu.mjs';
-import '../chunks/x-BvNSIFOu.mjs';
-import '@radix-ui/react-select';
-import '../chunks/ellipsis-CVES-umj.mjs';
+import 'react-dom';
+import '../chunks/index-CjsV2E2h.mjs';
+import '../chunks/index-C1gfRtpW.mjs';
+import '../chunks/index-BdP_9M8C.mjs';
+import '../chunks/index-BmNJQBZT.mjs';
+import 'react/jsx-runtime';
+import '../chunks/index-CWjsfCPV.mjs';
+import '../chunks/index-CZgLnzan.mjs';
+import '../chunks/index-CY7rSsKT.mjs';
+import '../chunks/index-CBE_CuM0.mjs';
+import '../chunks/index-DH87EZ4W.mjs';
+import '../chunks/index-BRYOOGYt.mjs';
+import '../chunks/index-DRuAMnOw.mjs';
+import '../chunks/tslib.es6-SGuOiL7t.mjs';
+import '../chunks/index-B2rYWtDF.mjs';
+import '../chunks/index-KLdt0FXh.mjs';
+import '../chunks/dialog-BMq_EiaM.mjs';
+import '../chunks/x-dyn358tn.mjs';
+import '../chunks/index-C9_8aC95.mjs';
+import '../chunks/index-t0_4qi-T.mjs';
 
 const __iconNode$1 = [
     [
@@ -77,51 +77,6 @@ const __iconNode = [
 ];
 const ArrowUp = createLucideIcon("ArrowUp", __iconNode);
 
-function DataTableViewOptions({ table, transformColumnName, disabled }) {
-    const triggerRef = React$1.useRef(null);
-    return /*#__PURE__*/ React$1.createElement(Popover, {
-        modal: true
-    }, /*#__PURE__*/ React$1.createElement(PopoverTrigger, {
-        asChild: true
-    }, /*#__PURE__*/ React$1.createElement(Button, {
-        ref: triggerRef,
-        "aria-label": "Toggle columns",
-        variant: "outline",
-        className: "text-muted-foreground hover:text-muted-foreground w-full max-w-[12.5rem] items-center justify-between bg-inherit px-3 py-2 hover:bg-inherit",
-        disabled: disabled
-    }, "Colunas", /*#__PURE__*/ React$1.createElement(ChevronDown, {
-        className: "h-4 w-4"
-    }))), /*#__PURE__*/ React$1.createElement(PopoverContent, {
-        align: "end",
-        className: "w-44 p-0",
-        onCloseAutoFocus: ()=>triggerRef.current?.focus()
-    }, /*#__PURE__*/ React$1.createElement(Command, null, /*#__PURE__*/ React$1.createElement(CommandInput, {
-        placeholder: "Pesquisar colunas..."
-    }), /*#__PURE__*/ React$1.createElement(CommandList, null, /*#__PURE__*/ React$1.createElement(CommandEmpty, null, "Nenhuma coluna encontrada."), /*#__PURE__*/ React$1.createElement(CommandGroup, null, table.getAllColumns().filter((column)=>typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column)=>{
-        return /*#__PURE__*/ React$1.createElement(CommandItem, {
-            key: column.id,
-            onSelect: ()=>column.toggleVisibility(!column.getIsVisible())
-        }, /*#__PURE__*/ React$1.createElement("span", {
-            className: "truncate"
-        }, transformColumnName ? transformColumnName(column.id) : column.id), /*#__PURE__*/ React$1.createElement(Check, {
-            className: cn("ml-auto size-4 shrink-0", column.getIsVisible() ? "opacity-100" : "opacity-0")
-        }));
-    }))))));
-}
-
-function DataTableSearch({ table, keySearch, placeholder }) {
-    return /*#__PURE__*/ React.createElement("div", {
-        className: "relative w-full max-w-sm"
-    }, /*#__PURE__*/ React.createElement(Search, {
-        className: "text-muted-foreground absolute top-3 left-3 h-4 w-4"
-    }), /*#__PURE__*/ React.createElement(Input, {
-        placeholder: placeholder,
-        value: table.getColumn(keySearch)?.getFilterValue() ?? "",
-        onChange: (event)=>table.getColumn(keySearch)?.setFilterValue(event.target.value),
-        className: "w-full pl-8 xl:w-80"
-    }));
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
@@ -254,10 +209,10 @@ function DataTablePagination({ table, pageSizeOptions = [
         placeholder: `Mostrar ${table.getState().pagination.pageSize || pageSize}`
     })), /*#__PURE__*/ React__default.createElement(SelectContent, null, rowCount && (rowCount === 0 || rowCount < pageSize) ? /*#__PURE__*/ React__default.createElement(SelectItem, {
         value: String(pageSize)
-    }, "Mostrar ", pageSize) : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, pageSizeOptions.map((pageSize)=>/*#__PURE__*/ React__default.createElement(SelectItem, {
+    }, "Mostrar ", pageSize) : pageSizeOptions.map((pageSize)=>/*#__PURE__*/ React__default.createElement(SelectItem, {
             key: pageSize,
             value: String(pageSize)
-        }, "Mostrar ", pageSize))))), /*#__PURE__*/ React__default.createElement("div", {
+        }, "Mostrar ", pageSize)))), /*#__PURE__*/ React__default.createElement("div", {
         className: "flex flex-wrap gap-2 gap-y-4"
     }, /*#__PURE__*/ React__default.createElement(Button, {
         variant: "ghost",
@@ -424,125 +379,49 @@ const DataTableMainFrame = ({ table, columns, isLoadingTable, loadingContent, se
     }));
 };
 
-function DataTableSkeleton(props) {
-    const { columnCount, rowCount = 10, searchableColumnCount = 0, filterableColumnCount = 0, showViewOptions = true, cellWidths = [
-        "auto"
-    ], withPagination = true, shrinkZero = false, className, ...skeletonProps } = props;
-    return /*#__PURE__*/ React__default.createElement("div", {
-        className: cn("w-full space-y-2.5 overflow-auto", className),
-        ...skeletonProps
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: "flex w-full items-center justify-between space-x-2 overflow-auto p-1"
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: "flex flex-1 items-center space-x-2"
-    }, searchableColumnCount > 0 ? Array.from({
-        length: searchableColumnCount
-    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(Skeleton, {
-            key: `${String(i)}`,
-            className: "h-7 w-40 lg:w-60"
-        })) : null, filterableColumnCount > 0 ? Array.from({
-        length: filterableColumnCount
-    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(Skeleton, {
-            key: `${String(i)}`,
-            className: "h-7 w-[4.5rem] border-dashed"
-        })) : null), showViewOptions ? /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "ml-auto hidden h-7 w-[4.5rem] lg:flex"
-    }) : null), /*#__PURE__*/ React__default.createElement("div", {
-        className: "rounded-md border"
-    }, /*#__PURE__*/ React__default.createElement(Table, null, /*#__PURE__*/ React__default.createElement(TableHeader, null, Array.from({
-        length: 1
-    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(TableRow, {
-            key: `${String(i)}`,
-            className: "hover:bg-transparent"
-        }, Array.from({
-            length: columnCount
-        }).map((_, j)=>/*#__PURE__*/ React__default.createElement(TableHead, {
-                key: `${String(j)}`,
-                style: {
-                    width: cellWidths[j],
-                    minWidth: shrinkZero ? cellWidths[j] : "auto"
-                }
-            }, /*#__PURE__*/ React__default.createElement(Skeleton, {
-                className: "h-6 w-full"
-            })))))), /*#__PURE__*/ React__default.createElement(TableBody, null, Array.from({
-        length: rowCount
-    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(TableRow, {
-            key: `${String(i)}`,
-            className: "hover:bg-transparent"
-        }, Array.from({
-            length: columnCount
-        }).map((_, j)=>/*#__PURE__*/ React__default.createElement(TableCell, {
-                key: `${String(j)}`,
-                style: {
-                    width: cellWidths[j],
-                    minWidth: shrinkZero ? cellWidths[j] : "auto"
-                }
-            }, /*#__PURE__*/ React__default.createElement(Skeleton, {
-                className: "h-6 w-full"
-            })))))))), withPagination ? /*#__PURE__*/ React__default.createElement("div", {
-        className: "flex w-full items-center justify-between gap-4 overflow-auto p-1 sm:gap-8"
-    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "h-7 w-40 shrink-0"
-    }), /*#__PURE__*/ React__default.createElement("div", {
-        className: "flex items-center gap-4 sm:gap-6 lg:gap-8"
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: "flex items-center space-x-2"
-    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "h-7 w-24"
-    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "h-7 w-[4.5rem]"
-    })), /*#__PURE__*/ React__default.createElement("div", {
-        className: "flex items-center justify-center text-sm font-medium"
-    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "h-7 w-20"
-    })), /*#__PURE__*/ React__default.createElement("div", {
-        className: "flex items-center space-x-2"
-    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "hidden size-7 lg:block"
-    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "size-7"
-    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "size-7"
-    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
-        className: "hidden size-7 lg:block"
-    })))) : null);
+// Utils para manipular árvores de forma imutável
+/** biome-ignore-all lint/suspicious/noExplicitAny: <any> */ // Encontra um item e retorna caminho + referência
+function findItemPath(tree, id, path = []) {
+    for(let i = 0; i < tree.length; i++){
+        const node = tree[i];
+        // Encontrou o item
+        if (node.id === id) {
+            return {
+                path: [
+                    ...path,
+                    i
+                ],
+                node
+            };
+        }
+        // Recursão em subRows
+        if (Array.isArray(node.subRows) && node.subRows.length > 0) {
+            const result = findItemPath(node.subRows, id, [
+                ...path,
+                i,
+                "subRows"
+            ]);
+            if (result) return result;
+        }
+    }
+    return null;
 }
-
-function DataTableStatus({ table, uniqueStatusValues, renderStatusMessage, className }) {
-    const triggerRef = React__default.useRef(null);
-    const currentFilter = table.getColumn("status")?.getFilterValue();
-    return /*#__PURE__*/ React__default.createElement(Popover, {
-        modal: true
-    }, /*#__PURE__*/ React__default.createElement(PopoverTrigger, {
-        asChild: true
-    }, /*#__PURE__*/ React__default.createElement(Button, {
-        ref: triggerRef,
-        "aria-label": "Filtre por status",
-        variant: "outline",
-        className: cn("border-input text-muted-foreground ring-offset-background placeholder:text-muted-foreground hover:text-muted-foreground focus:ring-ring flex h-10 w-full max-w-60 items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm hover:bg-inherit focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", className)
-    }, currentFilter ? renderStatusMessage(currentFilter) : "Todos os status", /*#__PURE__*/ React__default.createElement(ChevronDown, {
-        className: "h-4 w-4"
-    }))), /*#__PURE__*/ React__default.createElement(PopoverContent, {
-        align: "end",
-        className: "w-44 p-0",
-        onCloseAutoFocus: ()=>triggerRef.current?.focus()
-    }, /*#__PURE__*/ React__default.createElement(Command, null, /*#__PURE__*/ React__default.createElement(CommandInput, {
-        placeholder: "Pesquisar status..."
-    }), /*#__PURE__*/ React__default.createElement(CommandList, null, /*#__PURE__*/ React__default.createElement(CommandEmpty, null, "Nenhum status encontrado."), /*#__PURE__*/ React__default.createElement(CommandItem, {
-        key: "all",
-        onSelect: ()=>table.getColumn("status")?.setFilterValue(undefined)
-    }, /*#__PURE__*/ React__default.createElement("span", {
-        className: "truncate"
-    }, "Todos os status")), uniqueStatusValues.map((item)=>{
-        if (!item) return null;
-        const statusMessage = renderStatusMessage(item);
-        return /*#__PURE__*/ React__default.createElement(CommandItem, {
-            key: `${String(item)}`,
-            onSelect: ()=>table.getColumn("status")?.setFilterValue(item)
-        }, /*#__PURE__*/ React__default.createElement("span", {
-            className: "truncate"
-        }, statusMessage));
-    })))));
+function removeAtPath(tree, path) {
+    let ref = tree;
+    for(let i = 0; i < path.length - 1; i++){
+        ref = ref[path[i]];
+    }
+    const index = path[path.length - 1];
+    const removed = ref.splice(index, 1)[0];
+    return removed;
+}
+function insertAtPath(tree, path, item) {
+    let ref = tree;
+    for(let i = 0; i < path.length - 1; i++){
+        ref = ref[path[i]];
+    }
+    const index = path[path.length - 1];
+    ref.splice(index, 0, item);
 }
 
 const getRowKey = (row, rowKey)=>{
@@ -559,14 +438,16 @@ const getRowKey = (row, rowKey)=>{
     }
     return row[rowKey];
 };
-const DataTableMainFrameSortable = ({ table, columns, isLoadingTable, loadingContent, setQueryParams, dataLabel, actionColumns = [], data, messageEmpty = /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, "Sem resultados"), onDataChange, rowKey, dividingColumnKey, pageSizeOptions, className, scrollMaxHeightClass = "sm:max-h-[calc(100vh-300px)]", isScrollable = false, fixedHeader = false, showPagination = true, renderTooltip, infoExtraLabel })=>{
+const DataTableMainFrameSortable = ({ table, columns, isLoadingTable, loadingContent, setQueryParams, dataLabel, actionColumns = [], data, messageEmpty = /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, "Sem resultados"), onDataChange, rowKey, dividingColumnKey, pageSizeOptions, className, scrollMaxHeightClass = "sm:max-h-[calc(100vh-300px)]", isScrollable = false, fixedHeader = false, showPagination = true, renderTooltip, infoExtraLabel, sortableValue: propValue, sortableOnValueChange: propOnValueChange, sortableOnDragStart: propOnDragStart, sortableOnDragEnd: propOnDragEnd })=>{
     const currentPage = Number(table.getState().pagination.pageIndex).toString();
     const pageSize = Number(table.getState().pagination.pageSize).toString();
     const sorting = table.getState().sorting;
     const [newData, setNewData] = React__default.useState(data);
     const handleValueChange = (updatedData)=>{
         setNewData(updatedData);
-        onDataChange?.(updatedData);
+        if (onDataChange) {
+            onDataChange(updatedData);
+        }
     };
     React__default.useEffect(()=>{
         setNewData(data);
@@ -620,7 +501,7 @@ const DataTableMainFrameSortable = ({ table, columns, isLoadingTable, loadingCon
             const key = getRowKey(rowData, rowKey);
             const rowContent = row.getVisibleCells().map((cell)=>/*#__PURE__*/ React__default.createElement(TableCell, {
                     key: cell.id,
-                    className: cn("p-2 py-1", dividingColumnKey?.includes(cell.column.id) && "border-r")
+                    className: cn("p-2 py-1", dividingColumnKey?.includes(cell.column.id) && "border-r", cell.column.columnDef.meta?.className)
                 }, flexRender(cell.column.columnDef.cell, cell.getContext())));
             const baseRow = /*#__PURE__*/ React__default.createElement(TableRow, {
                 "data-state": row.getIsSelected() && "selected",
@@ -634,13 +515,80 @@ const DataTableMainFrameSortable = ({ table, columns, isLoadingTable, loadingCon
             }, wrappedRow);
         });
     };
-    const shouldForceMinHeight = table.getRowModel().rows.length > 1 || isLoadingTable;
-    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Sortable, {
-        value: newData.map((item)=>({
+    const [activeId, setActiveId] = React__default.useState(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <useMemo>
+    const siblings = React__default.useMemo(()=>{
+        if (!activeId) return table.getRowModel().rows.map((row)=>({
+                ...row.original,
+                id: getRowKey(row.original, rowKey)
+            }));
+        const activeRow = table.getRowModel().rows.find((row)=>getRowKey(row.original, rowKey) === activeId);
+        if (!activeRow) return [];
+        const parentId = activeRow.parentId;
+        return table.getRowModel().rows.filter((row)=>row.parentId === parentId).map((row)=>({
+                ...row.original,
+                id: getRowKey(row.original, rowKey)
+            }));
+    }, [
+        activeId,
+        table.getRowModel().rows,
+        rowKey
+    ]);
+    const internalHandleDragStart = (event)=>{
+        setActiveId(event.active.id);
+    };
+    const internalHandleDragEnd = (event)=>{
+        setActiveId(null);
+        const { active, over } = event;
+        if (!active || !over) return;
+        const sourceId = active.id;
+        const targetId = over.id;
+        if (sourceId === targetId) return;
+        const tree = newData.map((item)=>({
                 ...item,
                 id: getRowKey(item, rowKey)
-            })),
-        onValueChange: handleValueChange
+            }));
+        const source = findItemPath(tree, sourceId);
+        const target = findItemPath(tree, targetId);
+        if (!source || !target) return;
+        // -----------------------------
+        // 🔒 1. TRAVAR MOVIMENTAÇÃO ENTRE NÍVEIS DIFERENTES
+        // -----------------------------
+        const sourcePath = source.path;
+        const targetPath = target.path;
+        // Pega o "caminho do pai" (remove o último índice, que é o índice do item em si)
+        const sourceParentPath = sourcePath.slice(0, -1);
+        const targetParentPath = targetPath.slice(0, -1);
+        // Compara se os arrays são iguais (mesmo tamanho e mesmos valores)
+        const isSameParent = sourceParentPath.length === targetParentPath.length && sourceParentPath.every((val, index)=>val === targetParentPath[index]);
+        if (!isSameParent) {
+            return;
+        }
+        // -----------------------------
+        // 🔄 2. MOVIMENTO PERMITIDO → REORDENAR
+        // -----------------------------
+        const removedItem = removeAtPath(tree, sourcePath);
+        const destPath = [
+            ...targetPath
+        ];
+        destPath[destPath.length - 1] = targetPath[targetPath.length - 1];
+        insertAtPath(tree, destPath, removedItem);
+        handleValueChange(tree);
+    };
+    const shouldForceMinHeight = table.getRowModel().rows.length > 1 || isLoadingTable;
+    const finalValue = propValue ?? table.getRowModel().rows.map((row)=>({
+            ...row.original,
+            id: getRowKey(row.original, rowKey)
+        }));
+    const finalOnValueChange = propOnValueChange ?? handleValueChange;
+    const finalOnDragStart = propOnDragStart ?? internalHandleDragStart;
+    const finalOnDragEnd = propOnDragEnd ?? internalHandleDragEnd;
+    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Sortable, {
+        value: finalValue,
+        contextItems: siblings,
+        onValueChange: finalOnValueChange,
+        onDragStart: finalOnDragStart,
+        onDragEnd: finalOnDragEnd
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: cn("bg-background mx-1 h-full w-full rounded-md border whitespace-nowrap", className)
     }, /*#__PURE__*/ React__default.createElement("div", {
@@ -657,9 +605,9 @@ const DataTableMainFrameSortable = ({ table, columns, isLoadingTable, loadingCon
                 ...actionColumns
             ].includes(id);
             return /*#__PURE__*/ React__default.createElement(TableHead, {
-                className: dividingColumnKey?.includes(id) ? "border-r" : "",
+                className: cn(dividingColumnKey?.includes(id) ? "border-r" : "", header.column.columnDef.meta?.className),
                 key: header.id
-            }, header.isPlaceholder ? null : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", {
+            }, header.isPlaceholder ? null : /*#__PURE__*/ React__default.createElement("div", {
                 className: !isActionsColumn && header.column.getCanSort() ? "flex w-fit items-center justify-start cursor-pointer gap-1 font-medium" : "",
                 onClick: !isActionsColumn ? header.column.getToggleSortingHandler() : undefined
             }, flexRender(header.column.columnDef.header, header.getContext()), (!isActionsColumn && header.column.getCanSort() && ({
@@ -674,7 +622,7 @@ const DataTableMainFrameSortable = ({ table, columns, isLoadingTable, loadingCon
                 })
             })[header.column.getIsSorted()]) ?? /*#__PURE__*/ React__default.createElement(ArrowDown, {
                 className: "h-3.5 w-3.5"
-            }))));
+            })));
         }));
     })), /*#__PURE__*/ React__default.createElement(TableBody, null, renderTableBodyContent()))))), isScrollable || !showPagination ? null : isLoadingTable ? /*#__PURE__*/ React__default.createElement(DataTablePaginationSkeleton, null) : /*#__PURE__*/ React__default.createElement(DataTablePagination, {
         table: table,
@@ -684,5 +632,171 @@ const DataTableMainFrameSortable = ({ table, columns, isLoadingTable, loadingCon
     }));
 };
 
+function DataTableSearch({ table, keySearch, placeholder }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "relative w-full max-w-sm"
+    }, /*#__PURE__*/ React.createElement(Search, {
+        className: "text-muted-foreground absolute top-3 left-3 h-4 w-4"
+    }), /*#__PURE__*/ React.createElement(Input, {
+        placeholder: placeholder,
+        value: table.getColumn(keySearch)?.getFilterValue() ?? "",
+        onChange: (event)=>table.getColumn(keySearch)?.setFilterValue(event.target.value),
+        className: "w-full pl-8 xl:w-80"
+    }));
+}
+
+function DataTableSkeleton(props) {
+    const { columnCount, rowCount = 10, searchableColumnCount = 0, filterableColumnCount = 0, showViewOptions = true, cellWidths = [
+        "auto"
+    ], withPagination = true, shrinkZero = false, className, ...skeletonProps } = props;
+    return /*#__PURE__*/ React__default.createElement("div", {
+        className: cn("w-full space-y-2.5 overflow-auto", className),
+        ...skeletonProps
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: "flex w-full items-center justify-between space-x-2 overflow-auto p-1"
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: "flex flex-1 items-center space-x-2"
+    }, searchableColumnCount > 0 ? Array.from({
+        length: searchableColumnCount
+    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(Skeleton, {
+            key: `${String(i)}`,
+            className: "h-7 w-40 lg:w-60"
+        })) : null, filterableColumnCount > 0 ? Array.from({
+        length: filterableColumnCount
+    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(Skeleton, {
+            key: `${String(i)}`,
+            className: "h-7 w-[4.5rem] border-dashed"
+        })) : null), showViewOptions ? /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "ml-auto hidden h-7 w-[4.5rem] lg:flex"
+    }) : null), /*#__PURE__*/ React__default.createElement("div", {
+        className: "rounded-md border"
+    }, /*#__PURE__*/ React__default.createElement(Table, null, /*#__PURE__*/ React__default.createElement(TableHeader, null, Array.from({
+        length: 1
+    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(TableRow, {
+            key: `${String(i)}`,
+            className: "hover:bg-transparent"
+        }, Array.from({
+            length: columnCount
+        }).map((_, j)=>/*#__PURE__*/ React__default.createElement(TableHead, {
+                key: `${String(j)}`,
+                style: {
+                    width: cellWidths[j],
+                    minWidth: shrinkZero ? cellWidths[j] : "auto"
+                }
+            }, /*#__PURE__*/ React__default.createElement(Skeleton, {
+                className: "h-6 w-full"
+            })))))), /*#__PURE__*/ React__default.createElement(TableBody, null, Array.from({
+        length: rowCount
+    }).map((_, i)=>/*#__PURE__*/ React__default.createElement(TableRow, {
+            key: `${String(i)}`,
+            className: "hover:bg-transparent"
+        }, Array.from({
+            length: columnCount
+        }).map((_, j)=>/*#__PURE__*/ React__default.createElement(TableCell, {
+                key: `${String(j)}`,
+                style: {
+                    width: cellWidths[j],
+                    minWidth: shrinkZero ? cellWidths[j] : "auto"
+                }
+            }, /*#__PURE__*/ React__default.createElement(Skeleton, {
+                className: "h-6 w-full"
+            })))))))), withPagination ? /*#__PURE__*/ React__default.createElement("div", {
+        className: "flex w-full items-center justify-between gap-4 overflow-auto p-1 sm:gap-8"
+    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "h-7 w-40 shrink-0"
+    }), /*#__PURE__*/ React__default.createElement("div", {
+        className: "flex items-center gap-4 sm:gap-6 lg:gap-8"
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: "flex items-center space-x-2"
+    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "h-7 w-24"
+    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "h-7 w-[4.5rem]"
+    })), /*#__PURE__*/ React__default.createElement("div", {
+        className: "flex items-center justify-center text-sm font-medium"
+    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "h-7 w-20"
+    })), /*#__PURE__*/ React__default.createElement("div", {
+        className: "flex items-center space-x-2"
+    }, /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "hidden size-7 lg:block"
+    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "size-7"
+    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "size-7"
+    }), /*#__PURE__*/ React__default.createElement(Skeleton, {
+        className: "hidden size-7 lg:block"
+    })))) : null);
+}
+
+function DataTableStatus({ table, uniqueStatusValues, renderStatusMessage, className }) {
+    const triggerRef = React__default.useRef(null);
+    const currentFilter = table.getColumn("status")?.getFilterValue();
+    return /*#__PURE__*/ React__default.createElement(Popover, {
+        modal: true
+    }, /*#__PURE__*/ React__default.createElement(PopoverTrigger, {
+        asChild: true
+    }, /*#__PURE__*/ React__default.createElement(Button, {
+        ref: triggerRef,
+        "aria-label": "Filtre por status",
+        variant: "outline",
+        className: cn("border-input text-muted-foreground ring-offset-background placeholder:text-muted-foreground hover:text-muted-foreground focus:ring-ring flex h-10 w-full max-w-60 items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm hover:bg-inherit focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", className)
+    }, currentFilter ? renderStatusMessage(currentFilter) : "Todos os status", /*#__PURE__*/ React__default.createElement(ChevronDown, {
+        className: "h-4 w-4"
+    }))), /*#__PURE__*/ React__default.createElement(PopoverContent, {
+        align: "end",
+        className: "w-44 p-0",
+        onCloseAutoFocus: ()=>triggerRef.current?.focus()
+    }, /*#__PURE__*/ React__default.createElement(Command, null, /*#__PURE__*/ React__default.createElement(CommandInput, {
+        placeholder: "Pesquisar status..."
+    }), /*#__PURE__*/ React__default.createElement(CommandList, null, /*#__PURE__*/ React__default.createElement(CommandEmpty, null, "Nenhum status encontrado."), /*#__PURE__*/ React__default.createElement(CommandItem, {
+        key: "all",
+        onSelect: ()=>table.getColumn("status")?.setFilterValue(undefined)
+    }, /*#__PURE__*/ React__default.createElement("span", {
+        className: "truncate"
+    }, "Todos os status")), uniqueStatusValues.map((item)=>{
+        if (!item) return null;
+        const statusMessage = renderStatusMessage(item);
+        return /*#__PURE__*/ React__default.createElement(CommandItem, {
+            key: `${String(item)}`,
+            onSelect: ()=>table.getColumn("status")?.setFilterValue(item)
+        }, /*#__PURE__*/ React__default.createElement("span", {
+            className: "truncate"
+        }, statusMessage));
+    })))));
+}
+
+function DataTableViewOptions({ table, transformColumnName, disabled }) {
+    const triggerRef = React$1.useRef(null);
+    return /*#__PURE__*/ React$1.createElement(Popover, {
+        modal: true
+    }, /*#__PURE__*/ React$1.createElement(PopoverTrigger, {
+        asChild: true
+    }, /*#__PURE__*/ React$1.createElement(Button, {
+        ref: triggerRef,
+        "aria-label": "Toggle columns",
+        variant: "outline",
+        className: "text-muted-foreground hover:text-muted-foreground w-full max-w-[12.5rem] items-center justify-between bg-inherit px-3 py-2 hover:bg-inherit",
+        disabled: disabled
+    }, "Colunas", /*#__PURE__*/ React$1.createElement(ChevronDown, {
+        className: "h-4 w-4"
+    }))), /*#__PURE__*/ React$1.createElement(PopoverContent, {
+        align: "end",
+        className: "w-44 p-0",
+        onCloseAutoFocus: ()=>triggerRef.current?.focus()
+    }, /*#__PURE__*/ React$1.createElement(Command, null, /*#__PURE__*/ React$1.createElement(CommandInput, {
+        placeholder: "Pesquisar colunas..."
+    }), /*#__PURE__*/ React$1.createElement(CommandList, null, /*#__PURE__*/ React$1.createElement(CommandEmpty, null, "Nenhuma coluna encontrada."), /*#__PURE__*/ React$1.createElement(CommandGroup, null, table.getAllColumns().filter((column)=>typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column)=>{
+        return /*#__PURE__*/ React$1.createElement(CommandItem, {
+            key: column.id,
+            onSelect: ()=>column.toggleVisibility(!column.getIsVisible())
+        }, /*#__PURE__*/ React$1.createElement("span", {
+            className: "truncate"
+        }, transformColumnName ? transformColumnName(column.id) : column.id), /*#__PURE__*/ React$1.createElement(Check, {
+            className: cn("ml-auto size-4 shrink-0", column.getIsVisible() ? "opacity-100" : "opacity-0")
+        }));
+    }))))));
+}
+
 export { DataTableMainFrame, DataTableMainFrameSortable, DataTablePagination, DataTablePaginationSkeleton, DataTableRowSkeleton, DataTableSearch, DataTableSkeleton, DataTableStatus, DataTableViewOptions };
 //# sourceMappingURL=index.mjs.map