luxtable 0.3.3 → 0.3.5

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/components/lux-table/lux-table.tsx
 import * as React7 from "react";
 import {
-  flexRender,
+  flexRender as flexRender2,
   getCoreRowModel,
   useReactTable,
   getPaginationRowModel,
@@ -840,15 +840,51 @@ function TableToolbar({
   );
 }
 
+// src/components/lux-table/sortable-header.tsx
+import { flexRender } from "@tanstack/react-table";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function SortableHeader({
+  header,
+  showSortIndex = false
+}) {
+  const column = header.column;
+  const canSort = column.getCanSort();
+  const isSorted = column.getIsSorted();
+  const sortIndex = column.getSortIndex();
+  const headerContent = header.isPlaceholder ? null : flexRender(column.columnDef.header, header.getContext());
+  if (!canSort) {
+    return /* @__PURE__ */ jsx10(Fragment2, { children: headerContent });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex items-center gap-1.5 w-full text-left font-medium group",
+        "hover:text-slate-900 dark:hover:text-slate-100",
+        "transition-colors duration-150",
+        "-ml-2 px-2 py-1 rounded-md",
+        "hover:bg-slate-100 dark:hover:bg-slate-800",
+        isSorted && "text-blue-600 dark:text-blue-400"
+      ),
+      onClick: header.column.getToggleSortingHandler(),
+      children: [
+        headerContent,
+        showSortIndex && isSorted && sortIndex > 0 && /* @__PURE__ */ jsx10("span", { className: "ml-0.5 text-[10px] font-bold text-blue-500 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/50 rounded-full w-4 h-4 flex items-center justify-center", children: sortIndex + 1 })
+      ]
+    }
+  );
+}
+
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -857,12 +893,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "grid place-content-center text-current transition-none",
-          children: /* @__PURE__ */ jsx10(CheckIcon, { className: "size-3.5" })
+          children: /* @__PURE__ */ jsx11(CheckIcon, { className: "size-3.5" })
         }
       )
     }
@@ -870,11 +906,11 @@ function Checkbox({
 }
 
 // src/components/lux-table/lux-table.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function createSelectionColumn() {
   return {
     id: "__selection__",
-    header: ({ table }) => /* @__PURE__ */ jsx11(
+    header: ({ table }) => /* @__PURE__ */ jsx12(
       Checkbox,
       {
         checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
@@ -882,7 +918,7 @@ function createSelectionColumn() {
         "aria-label": "Select all rows"
       }
     ),
-    cell: ({ row }) => /* @__PURE__ */ jsx11(
+    cell: ({ row }) => /* @__PURE__ */ jsx12(
       Checkbox,
       {
         checked: row.getIsSelected(),
@@ -938,9 +974,17 @@ function LuxTable({
     },
     [isControlledRowSelection, onRowSelectionChange, rowSelection]
   );
+  const enableSorting = options?.sorting !== false;
+  const enableMultiSort = options?.multiSort !== false;
   const table = useReactTable({
     data,
     columns: tableColumns,
+    enableSorting,
+    enableMultiSort,
+    // Shift+Click for multi-sort (default behavior)
+    isMultiSortEvent: (e) => e.shiftKey,
+    // Max columns for multi-sort (undefined = unlimited)
+    maxMultiSortColCount: options?.maxMultiSortColCount,
     state: {
       sorting,
       columnFilters,
@@ -987,8 +1031,8 @@ function LuxTable({
   const showToolbar = options?.showToolbar ?? false;
   const showGlobalSearch = options?.showGlobalSearch ?? true;
   const showColumnVisibility = options?.showColumnVisibility ?? true;
-  return /* @__PURE__ */ jsxs6("div", { className: cn("w-full space-y-4", className), children: [
-    showToolbar && /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs7("div", { className: cn("w-full space-y-4", className), children: [
+    showToolbar && /* @__PURE__ */ jsx12(
       TableToolbar,
       {
         table,
@@ -999,18 +1043,18 @@ function LuxTable({
         showColumnVisibility
       }
     ),
-    enableRowSelection && Object.keys(rowSelection).length > 0 && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 px-4 py-2 text-sm bg-blue-50 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300 rounded-lg border border-blue-200 dark:border-blue-800", children: [
-      /* @__PURE__ */ jsx11(CheckCircle2, { className: "w-4 h-4" }),
-      /* @__PURE__ */ jsxs6("span", { children: [
-        /* @__PURE__ */ jsx11("strong", { children: Object.keys(rowSelection).length }),
+    enableRowSelection && Object.keys(rowSelection).length > 0 && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-4 py-2 text-sm bg-blue-50 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300 rounded-lg border border-blue-200 dark:border-blue-800", children: [
+      /* @__PURE__ */ jsx12(CheckCircle2, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxs7("span", { children: [
+        /* @__PURE__ */ jsx12("strong", { children: Object.keys(rowSelection).length }),
         " rows selected",
-        table.getFilteredRowModel().rows.length > 0 && /* @__PURE__ */ jsxs6("span", { className: "text-blue-500 dark:text-blue-400", children: [
+        table.getFilteredRowModel().rows.length > 0 && /* @__PURE__ */ jsxs7("span", { className: "text-blue-500 dark:text-blue-400", children: [
           " / ",
           table.getFilteredRowModel().rows.length,
           " total"
         ] })
       ] }),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -1020,28 +1064,34 @@ function LuxTable({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-hidden", children: /* @__PURE__ */ jsxs6(Table, { children: [
-      /* @__PURE__ */ jsxs6(TableHeader, { children: [
-        table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx11(TableRow, { children: headerGroup.headers.map((header) => {
+    /* @__PURE__ */ jsx12("div", { className: "rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-hidden", children: /* @__PURE__ */ jsxs7(Table, { children: [
+      /* @__PURE__ */ jsxs7(TableHeader, { children: [
+        table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(TableRow, { children: headerGroup.headers.map((header) => {
           const isSelectionColumn = header.id === "__selection__";
-          return /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx12(
             TableHead,
             {
               style: isSelectionColumn ? { width: 40, padding: "0 12px" } : void 0,
-              children: header.isPlaceholder ? null : flexRender(
+              children: header.isPlaceholder ? null : isSelectionColumn ? flexRender2(
                 header.column.columnDef.header,
                 header.getContext()
+              ) : /* @__PURE__ */ jsx12(
+                SortableHeader,
+                {
+                  header,
+                  showSortIndex: enableMultiSort && sorting.length > 1
+                }
               )
             },
             header.id
           );
         }) }, headerGroup.id)),
-        filteringVisible && /* @__PURE__ */ jsx11(TableRow, { className: "bg-slate-50/50 dark:bg-slate-900/50", children: table.getHeaderGroups()[0]?.headers.map((header) => {
+        filteringVisible && /* @__PURE__ */ jsx12(TableRow, { className: "bg-slate-50/50 dark:bg-slate-900/50", children: table.getHeaderGroups()[0]?.headers.map((header) => {
           const isSelectionColumn = header.id === "__selection__";
-          return /* @__PURE__ */ jsx11(TableHead, { className: "py-2", children: !isSelectionColumn && header.column.getCanFilter() ? /* @__PURE__ */ jsx11(ColumnFilter, { column: header.column }) : null }, `filter-${header.id}`);
+          return /* @__PURE__ */ jsx12(TableHead, { className: "py-2", children: !isSelectionColumn && header.column.getCanFilter() ? /* @__PURE__ */ jsx12(ColumnFilter, { column: header.column }) : null }, `filter-${header.id}`);
         }) })
       ] }),
-      /* @__PURE__ */ jsx11(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx12(
         TableRow,
         {
           "data-state": row.getIsSelected() && "selected",
@@ -1058,21 +1108,21 @@ function LuxTable({
           } : void 0,
           children: row.getVisibleCells().map((cell) => {
             const isSelectionColumn = cell.column.id === "__selection__";
-            return /* @__PURE__ */ jsx11(
+            return /* @__PURE__ */ jsx12(
               TableCell,
               {
                 style: isSelectionColumn ? { width: 40, padding: "0 12px" } : void 0,
                 onClick: isSelectionColumn ? (e) => e.stopPropagation() : void 0,
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                children: flexRender2(cell.column.columnDef.cell, cell.getContext())
               },
               cell.id
             );
           })
         },
         row.id
-      )) : /* @__PURE__ */ jsx11(TableRow, { children: /* @__PURE__ */ jsx11(TableCell, { colSpan: visibleColumnCount, className: "h-24 text-center", children: "No results." }) }) })
+      )) : /* @__PURE__ */ jsx12(TableRow, { children: /* @__PURE__ */ jsx12(TableCell, { colSpan: visibleColumnCount, className: "h-24 text-center", children: "No results." }) }) })
     ] }) }),
-    options?.pagination && /* @__PURE__ */ jsx11(TablePagination, { table })
+    options?.pagination && /* @__PURE__ */ jsx12(TablePagination, { table })
   ] });
 }
 
@@ -1080,67 +1130,81 @@ function LuxTable({
 import {
   ArrowDown,
   ArrowUp,
-  ChevronsUpDown as ChevronsUpDown2,
+  ArrowUpDown,
   EyeOff as EyeOff2,
   MoreVertical,
   X
 } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function LuxDataTableColumnHeader({
   column,
   title,
   className
 }) {
   const isSorted = column.getIsSorted();
-  if (!column.getCanSort()) {
-    return /* @__PURE__ */ jsx12("div", { className: cn("flex items-center justify-between", className), children: /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-muted-foreground", children: title }) });
+  const canSort = column.getCanSort();
+  const SortIndicator = () => {
+    if (isSorted === "desc") {
+      return /* @__PURE__ */ jsx13(ArrowDown, { className: "h-4 w-4 text-blue-600 dark:text-blue-400" });
+    }
+    if (isSorted === "asc") {
+      return /* @__PURE__ */ jsx13(ArrowUp, { className: "h-4 w-4 text-blue-600 dark:text-blue-400" });
+    }
+    if (canSort) {
+      return /* @__PURE__ */ jsx13(ArrowUpDown, { className: "h-4 w-4 text-slate-400 dark:text-slate-500" });
+    }
+    return null;
+  };
+  if (!canSort) {
+    return /* @__PURE__ */ jsx13("span", { className: cn("text-sm font-medium", className), children: title });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: cn("flex items-center justify-between gap-1", className), children: [
-    /* @__PURE__ */ jsxs7(
-      Button,
-      {
-        variant: "ghost",
-        size: "sm",
-        className: "-ml-3 h-8 hover:bg-accent",
-        onClick: () => column.toggleSorting(isSorted === "asc"),
-        children: [
-          /* @__PURE__ */ jsx12("span", { children: title }),
-          isSorted === "desc" ? /* @__PURE__ */ jsx12(ArrowDown, { className: "ml-1.5 h-4 w-4 text-primary" }) : isSorted === "asc" ? /* @__PURE__ */ jsx12(ArrowUp, { className: "ml-1.5 h-4 w-4 text-primary" }) : /* @__PURE__ */ jsx12(ChevronsUpDown2, { className: "ml-1.5 h-4 w-4 text-muted-foreground/50" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx12(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx13(SortIndicator, {}),
+    /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium", children: title }),
+    /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx13(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
         Button,
         {
           variant: "ghost",
           size: "icon",
-          className: "h-6 w-6 opacity-0 group-hover:opacity-100 hover:opacity-100 focus:opacity-100 data-[state=open]:opacity-100 transition-opacity",
+          className: "h-6 w-6 ml-auto opacity-0 group-hover:opacity-100 hover:opacity-100 focus:opacity-100 data-[state=open]:opacity-100 transition-opacity",
           children: [
-            /* @__PURE__ */ jsx12(MoreVertical, { className: "h-3.5 w-3.5" }),
-            /* @__PURE__ */ jsx12("span", { className: "sr-only", children: "Column actions" })
+            /* @__PURE__ */ jsx13(MoreVertical, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Column actions" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", children: [
-        /* @__PURE__ */ jsxs7(DropdownMenuItem, { onClick: () => column.toggleSorting(false), children: [
-          /* @__PURE__ */ jsx12(ArrowUp, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+      /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleSorting(false);
+        }, children: [
+          /* @__PURE__ */ jsx13(ArrowUp, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
           "Sort Ascending"
         ] }),
-        /* @__PURE__ */ jsxs7(DropdownMenuItem, { onClick: () => column.toggleSorting(true), children: [
-          /* @__PURE__ */ jsx12(ArrowDown, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+        /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleSorting(true);
+        }, children: [
+          /* @__PURE__ */ jsx13(ArrowDown, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
           "Sort Descending"
         ] }),
-        isSorted && /* @__PURE__ */ jsxs7(Fragment2, { children: [
-          /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxs7(DropdownMenuItem, { onClick: () => column.clearSorting(), children: [
-            /* @__PURE__ */ jsx12(X, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+        isSorted && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx13(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: (e) => {
+            e.stopPropagation();
+            column.clearSorting();
+          }, children: [
+            /* @__PURE__ */ jsx13(X, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
             "Clear sorting"
           ] })
         ] }),
-        /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs7(DropdownMenuItem, { onClick: () => column.toggleVisibility(false), children: [
-          /* @__PURE__ */ jsx12(EyeOff2, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+        /* @__PURE__ */ jsx13(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleVisibility(false);
+        }, children: [
+          /* @__PURE__ */ jsx13(EyeOff2, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
           "Hide column"
         ] })
       ] })
@@ -1149,7 +1213,7 @@ function LuxDataTableColumnHeader({
 }
 
 // src/components/cell-renderers/status-cell.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var defaultStatusColors = {
   Active: {
     bg: "bg-green-100",
@@ -1186,14 +1250,14 @@ function StatusCell({ value, colors, className }) {
   const mergedColors = { ...defaultStatusColors, ...colors };
   const colorConfig = mergedColors[value];
   if (!colorConfig) {
-    return /* @__PURE__ */ jsx13("span", { className: `px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 ${className || ""}`, children: value });
+    return /* @__PURE__ */ jsx14("span", { className: `px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 ${className || ""}`, children: value });
   }
   const { bg, text, darkBg, darkText } = colorConfig;
-  return /* @__PURE__ */ jsx13("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${bg} ${text} ${darkBg || ""} ${darkText || ""} ${className || ""}`, children: value });
+  return /* @__PURE__ */ jsx14("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${bg} ${text} ${darkBg || ""} ${darkText || ""} ${className || ""}`, children: value });
 }
 
 // src/components/cell-renderers/progress-cell.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function ProgressCell({
   value,
   barColor = "bg-blue-600",
@@ -1202,15 +1266,15 @@ function ProgressCell({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs8("div", { className: `flex items-center gap-2 ${className || ""}`, children: [
-    /* @__PURE__ */ jsx14("div", { className: `w-full rounded-full h-2.5 ${bgColor}`, children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-2 ${className || ""}`, children: [
+    /* @__PURE__ */ jsx15("div", { className: `w-full rounded-full h-2.5 ${bgColor}`, children: /* @__PURE__ */ jsx15(
       "div",
       {
         className: `${barColor} h-2.5 rounded-full transition-all`,
         style: { width: `${clampedValue}%` }
       }
     ) }),
-    showLabel && /* @__PURE__ */ jsxs8("span", { className: "text-xs text-gray-500 dark:text-gray-400 w-8", children: [
+    showLabel && /* @__PURE__ */ jsxs9("span", { className: "text-xs text-gray-500 dark:text-gray-400 w-8", children: [
       value,
       "%"
     ] })
@@ -1218,7 +1282,7 @@ function ProgressCell({
 }
 
 // src/components/cell-renderers/boolean-cell.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function BooleanCell({
   value,
   trueLabel = "Yes",
@@ -1226,15 +1290,15 @@ function BooleanCell({
   trueColor = "text-green-600 dark:text-green-400",
   falseColor = "text-red-600 dark:text-red-400"
 }) {
-  return /* @__PURE__ */ jsx15("span", { className: `font-medium ${value ? trueColor : falseColor}`, children: value ? trueLabel : falseLabel });
+  return /* @__PURE__ */ jsx16("span", { className: `font-medium ${value ? trueColor : falseColor}`, children: value ? trueLabel : falseLabel });
 }
 
 // src/components/cell-renderers/date-cell.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function DateCell({ value, format = "short", locale = "en-US" }) {
   const date = typeof value === "string" ? new Date(value) : value;
   if (isNaN(date.getTime())) {
-    return /* @__PURE__ */ jsx16("span", { className: "text-gray-400", children: "-" });
+    return /* @__PURE__ */ jsx17("span", { className: "text-gray-400", children: "-" });
   }
   let formatted;
   switch (format) {
@@ -1258,23 +1322,23 @@ function DateCell({ value, format = "short", locale = "en-US" }) {
     default:
       formatted = date.toLocaleDateString(locale);
   }
-  return /* @__PURE__ */ jsx16("span", { children: formatted });
+  return /* @__PURE__ */ jsx17("span", { children: formatted });
 }
 
 // src/components/cell-renderers/currency-cell.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function CurrencyCell({ value, currency = "TRY", locale = "tr-TR" }) {
   const formatted = new Intl.NumberFormat(locale, {
     style: "currency",
     currency
   }).format(value);
-  return /* @__PURE__ */ jsx17("span", { className: "font-medium", children: formatted });
+  return /* @__PURE__ */ jsx18("span", { className: "font-medium", children: formatted });
 }
 
 // src/components/cell-renderers/copyable-cell.tsx
 import * as React8 from "react";
 import { Copy, Check as Check3 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function CopyableCell({
   value,
   feedbackDuration = 2e3,
@@ -1299,7 +1363,7 @@ function CopyableCell({
       console.error("Copy error:", err);
     }
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "button",
     {
       type: "button",
@@ -1318,8 +1382,8 @@ function CopyableCell({
                 ${className || ""}
             `,
       children: [
-        /* @__PURE__ */ jsx18("span", { className: "select-none", children: value }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("span", { className: "select-none", children: value }),
+        /* @__PURE__ */ jsx19(
           "span",
           {
             className: `
@@ -1327,7 +1391,7 @@ function CopyableCell({
                     transition-all duration-200
                     ${alwaysShowIcon || isHovered || copied ? "opacity-100" : "opacity-0"}
                 `,
-            children: copied ? /* @__PURE__ */ jsx18(Check3, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400" }) : /* @__PURE__ */ jsx18(Copy, { className: "h-3.5 w-3.5 text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300" })
+            children: copied ? /* @__PURE__ */ jsx19(Check3, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400" }) : /* @__PURE__ */ jsx19(Copy, { className: "h-3.5 w-3.5 text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300" })
           }
         )
       ]
@@ -1335,18 +1399,18 @@ function CopyableCell({
   );
 }
 function createCopyableCell(value, options) {
-  return /* @__PURE__ */ jsx18(CopyableCell, { value, ...options });
+  return /* @__PURE__ */ jsx19(CopyableCell, { value, ...options });
 }
 
 // src/components/ui/label.tsx
 import * as React9 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var labelVariants = cva2(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label3 = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var Label3 = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
   LabelPrimitive.Root,
   {
     ref,
@@ -1359,11 +1423,11 @@ Label3.displayName = LabelPrimitive.Root.displayName;
 // src/components/ui/popover.tsx
 import * as React10 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx20(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx20(
+var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx21(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1381,9 +1445,9 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 // src/components/ui/separator.tsx
 import * as React11 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Separator3 = React11.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx21(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx22(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -1402,7 +1466,7 @@ Separator3.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/lib/column-helper.tsx
 import { createColumnHelper as tanstackCreateColumnHelper } from "@tanstack/react-table";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var toTitleCase = (str) => {
   return str.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
 };
@@ -1421,7 +1485,7 @@ function createColumnHelper() {
         // Pass meta information (filterVariant etc.)
         meta: column?.meta,
         // Use LuxDataTableColumnHeader if header is string or undefined
-        header: typeof headerContent === "function" ? headerContent : ({ column: colParam }) => /* @__PURE__ */ jsx22(
+        header: typeof headerContent === "function" ? headerContent : ({ column: colParam }) => /* @__PURE__ */ jsx23(
           LuxDataTableColumnHeader,
           {
             column: colParam,
@@ -1465,7 +1529,7 @@ function createColumnHelper() {
     auto: (columns) => {
       return columns.map((col) => {
         return helper.accessor(col.accessor, {
-          header: ({ column }) => /* @__PURE__ */ jsx22(LuxDataTableColumnHeader, { column, title: col.header }),
+          header: ({ column }) => /* @__PURE__ */ jsx23(LuxDataTableColumnHeader, { column, title: col.header }),
           cell: col.cell || ((info) => {
             const value = info.getValue();
             if (value === null || value === void 0) return "-";
@@ -1491,7 +1555,7 @@ function createColumnsFromData(data, options) {
     const headerText = options?.headers?.[key] || toTitleCase(key);
     const cellRenderer = options?.cells?.[key];
     return helper.accessor(key, {
-      header: ({ column }) => /* @__PURE__ */ jsx22(LuxDataTableColumnHeader, { column, title: headerText }),
+      header: ({ column }) => /* @__PURE__ */ jsx23(LuxDataTableColumnHeader, { column, title: headerText }),
       cell: cellRenderer || ((info) => {
         const value = info.getValue();
         if (value === null || value === void 0) return "-";
@@ -1503,7 +1567,7 @@ function createColumnsFromData(data, options) {
 
 // src/index.ts
 import {
-  flexRender as flexRender2,
+  flexRender as flexRender3,
   getCoreRowModel as getCoreRowModel2,
   getPaginationRowModel as getPaginationRowModel2,
   getSortedRowModel as getSortedRowModel2,
@@ -1570,7 +1634,7 @@ export {
   createColumnsFromData,
   createCopyableCell,
   defaultStatusColors,
-  flexRender2 as flexRender,
+  flexRender3 as flexRender,
   getCoreRowModel2 as getCoreRowModel,
   getFilteredRowModel2 as getFilteredRowModel,
   getPaginationRowModel2 as getPaginationRowModel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxtable",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "private": false,
   "description": "Enterprise-Grade Data Management. Minimalist Aesthetics.",
   "keywords": [
@@ -18,7 +18,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/luxtable/luxtable.git"
+    "url": "https://github.com/Huseyin-altun/luxtable.git"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -35,6 +35,7 @@
     "dist",
     "registry",
     "README.md",
+    "USAGE.md",
     "EXAMPLE.md"
   ],
   "publishConfig": {

package/registry/lux-table-cell-renderers.json

@@ -13,6 +13,7 @@
     "table",
     "data-display"
   ],
+  "docs": "# LuxTable Cell Renderers\n\nPre-built cell renderers for common data types.\n\n## Available Renderers\n\n### StatusCell\nDisplays status badges with customizable colors.\n\n```tsx\nimport { StatusCell } from 'luxtable';\n\n<StatusCell \n  value=\"active\" \n  colorMap={{\n    'active': '#10b981',\n    'inactive': '#ef4444',\n    'pending': '#f59e0b'\n  }}\n  labelMap={{\n    'active': 'Active',\n    'inactive': 'Inactive',\n    'pending': 'Pending'\n  }}\n/>\n```\n\n### ProgressCell\nDisplays progress bars with percentage.\n\n```tsx\nimport { ProgressCell } from 'luxtable';\n\n<ProgressCell value={75} showLabel={true} />\n```\n\n### DateCell\nFormats date values with locale support.\n\n```tsx\nimport { DateCell } from 'luxtable';\n\n<DateCell value=\"2024-01-15\" format=\"long\" locale=\"en-US\" />\n```\n\n### CopyableCell\nText with copy-to-clipboard functionality.\n\n```tsx\nimport { CopyableCell } from 'luxtable';\n\n<CopyableCell value=\"TASK-001\" />\n```\n\n### CurrencyCell\nFormats currency values.\n\n```tsx\nimport { CurrencyCell } from 'luxtable';\n\n<CurrencyCell value={1234.56} currency=\"USD\" locale=\"en-US\" />\n```\n\n### BooleanCell\nDisplays boolean values as icons or text.\n\n```tsx\nimport { BooleanCell } from 'luxtable';\n\n<BooleanCell value={true} />\n```\n",
   "files": [
     {
       "path": "components/cell-renderers/status-cell.tsx",

package/registry/lux-table-column-helper.json

@@ -15,6 +15,7 @@
     "table",
     "utility"
   ],
+  "docs": "# LuxTable Column Helper\n\nType-safe column definition helper for TanStack Table.\n\n## Usage\n\n```tsx\nimport { createColumnHelper } from 'luxtable';\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n}\n\nconst columnHelper = createColumnHelper<User>();\n\nconst columns = [\n  // Accessor column - display data from a field\n  columnHelper.accessor('name', {\n    header: 'Name',\n    cell: (info) => info.getValue(),\n  }),\n\n  // Accessor with custom cell renderer\n  columnHelper.accessor('email', {\n    header: 'Email',\n    cell: (info) => <a href={`mailto:${info.getValue()}`}>{info.getValue()}</a>,\n  }),\n\n  // Display column - for custom content like actions\n  columnHelper.display({\n    id: 'actions',\n    header: 'Actions',\n    cell: ({ row }) => (\n      <div className=\"flex gap-2\">\n        <button onClick={() => handleEdit(row.original)}>Edit</button>\n        <button onClick={() => handleDelete(row.original.id)}>Delete</button>\n      </div>\n    ),\n  }),\n];\n```\n\n## Column Options\n\n- `header` - Column header text or render function\n- `cell` - Cell render function\n- `size` - Column width in pixels\n- `enableSorting` - Enable/disable sorting (default: true)\n- `enableHiding` - Enable/disable column hiding (default: true)\n- `meta` - Custom metadata (e.g., filterVariant: 'select')\n",
   "files": [
     {
       "path": "lib/column-helper.tsx",

package/registry/lux-table.json

@@ -22,7 +22,7 @@
     "table",
     "data-display"
   ],
-  "docs": "Visit https://luxtable.dev/docs for full documentation and examples.",
+  "docs": "# LuxTable - Enterprise Data Table\n\n## Installation\n\n```bash\nnpm install luxtable\n# or\npnpm add luxtable\n```\n\n## Quick Start (Vite + React + TypeScript)\n\n### 1. Configure TailwindCSS\n\nAdd to your `tailwind.config.js`:\n```js\ncontent: [\n  \"./node_modules/luxtable/**/*.{js,ts,jsx,tsx}\",\n]\n```\n\n### 2. Add CSS Variables\n\nAdd to your `index.css`:\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n  --primary: 222.2 47.4% 11.2%;\n  --primary-foreground: 210 40% 98%;\n  --muted: 210 40% 96.1%;\n  --muted-foreground: 215.4 16.3% 46.9%;\n  --border: 214.3 31.8% 91.4%;\n  --radius: 0.5rem;\n}\n```\n\n### 3. Basic Usage\n\n```tsx\nimport { LuxTable, createColumnHelper } from 'luxtable';\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  status: 'Active' | 'Inactive';\n}\n\nconst data: User[] = [\n  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },\n  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },\n];\n\nconst columnHelper = createColumnHelper<User>();\n\nconst columns = [\n  columnHelper.accessor('name', { header: 'Name' }),\n  columnHelper.accessor('email', { header: 'Email' }),\n  columnHelper.accessor('status', { header: 'Status' }),\n];\n\nfunction App() {\n  return (\n    <LuxTable\n      data={data}\n      columns={columns}\n      options={{\n        pagination: true,\n        sorting: true,\n        filtering: true,\n        showToolbar: true,\n        selection: 'multiple',\n      }}\n    />\n  );\n}\n```\n\n## Features\n\n- ✅ Sorting (single & multi-column)\n- ✅ Pagination with page size options\n- ✅ Column filtering (text & select)\n- ✅ Global search\n- ✅ Row selection (single & multiple)\n- ✅ Column visibility toggle\n- ✅ Dark mode support\n- ✅ TypeScript support\n- ✅ TanStack Table v8\n\n## Cell Renderers\n\n```tsx\nimport { StatusCell, DateCell, ProgressCell, CopyableCell } from 'luxtable';\n\n// Use in column definitions\ncolumnHelper.accessor('status', {\n  header: 'Status',\n  cell: (info) => <StatusCell value={info.getValue()} />\n});\n```\n\n## Links\n\n- Documentation: https://luxtable.dev/docs\n- GitHub: https://github.com/luxtable/luxtable\n- npm: https://www.npmjs.com/package/luxtable\n",
   "files": [
     {
       "path": "components/lux-table/lux-table.tsx",