luxtable 0.2.1 → 0.2.3

package/dist/index.mjs

@@ -1,12 +1,15 @@
-// src/components/LuxTable.tsx
+// src/components/lux-table/lux-table.tsx
+import * as React7 from "react";
 import {
   flexRender,
   getCoreRowModel,
   useReactTable,
   getPaginationRowModel,
   getSortedRowModel,
-  getFilteredRowModel
+  getFilteredRowModel,
+  getFacetedUniqueValues
 } from "@tanstack/react-table";
+import { CheckCircle2 } from "lucide-react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -15,73 +18,1561 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/components/LuxTable.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/table/table.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn("[&_tr]:border-b [&_tr]:border-slate-200 dark:[&_tr]:border-slate-800", className),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t border-slate-200 dark:border-slate-800 bg-slate-100/50 dark:bg-slate-800/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b border-slate-200 dark:border-slate-800 transition-colors",
+      "hover:bg-slate-100/50 dark:hover:bg-slate-800/50",
+      "data-[state=selected]:bg-slate-100 dark:data-[state=selected]:bg-slate-800",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-10 px-4 text-left align-middle font-medium text-slate-500 dark:text-slate-400",
+        "[&:has([role=checkbox])]:pr-0",
+        "group",
+        // Enable group-hover for action buttons
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-slate-500 dark:text-slate-400", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+// src/components/table/sort-icon.tsx
+import { ChevronsUpDown, ChevronUp, ChevronDown } from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SortIcon({ direction }) {
+  if (!direction) {
+    return /* @__PURE__ */ jsx2(ChevronsUpDown, { className: "h-4 w-4 text-slate-400 dark:text-slate-500" });
+  }
+  if (direction === "asc") {
+    return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center rounded bg-blue-100 dark:bg-blue-900/50 p-0.5", children: /* @__PURE__ */ jsx2(ChevronUp, { className: "h-3.5 w-3.5 text-blue-600 dark:text-blue-400", strokeWidth: 2.5 }) });
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center rounded bg-blue-100 dark:bg-blue-900/50 p-0.5", children: /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-blue-600 dark:text-blue-400", strokeWidth: 2.5 }) });
+}
+
+// src/components/lux-table/column-filter.tsx
+import * as React4 from "react";
+
+// src/components/ui/input.tsx
+import * as React2 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = React2.forwardRef(({ className, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      type,
+      className: cn(
+        "flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-slate-950 placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:file:text-slate-50 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Input.displayName = "Input";
+
+// src/components/ui/select.tsx
+import * as React3 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown as ChevronDown2, ChevronUp as ChevronUp2 } from "lucide-react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-slate-700 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx4(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx4(ChevronDown2, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx4(ChevronUp2, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx4(ChevronDown2, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx4(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-50",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx4(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx4(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx4(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx4("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx4(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx4(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx4(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/lux-table/column-filter.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ColumnFilter({ column }) {
+  const columnFilterValue = column.getFilterValue();
+  const filterVariant = column.columnDef.meta?.filterVariant ?? "text";
+  const sortedUniqueValues = React4.useMemo(() => {
+    if (filterVariant !== "select") return [];
+    const values = /* @__PURE__ */ new Set();
+    column.getFacetedUniqueValues().forEach((_, key) => {
+      if (key !== null && key !== void 0) {
+        values.add(String(key));
+      }
+    });
+    return Array.from(values).sort();
+  }, [column, filterVariant]);
+  if (filterVariant === "select") {
+    return /* @__PURE__ */ jsxs2(
+      Select,
+      {
+        value: columnFilterValue ?? "",
+        onValueChange: (value) => column.setFilterValue(value === "__all__" ? void 0 : value),
+        children: [
+          /* @__PURE__ */ jsx5(
+            SelectTrigger,
+            {
+              className: cn(
+                "h-8 text-xs",
+                "border-slate-200 dark:border-slate-700",
+                "bg-white dark:bg-slate-900",
+                "text-slate-900 dark:text-slate-100"
+              ),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx5(SelectValue, { placeholder: "All" })
+            }
+          ),
+          /* @__PURE__ */ jsxs2(SelectContent, { children: [
+            /* @__PURE__ */ jsx5(SelectItem, { value: "__all__", children: "All" }),
+            sortedUniqueValues.map((value) => /* @__PURE__ */ jsx5(SelectItem, { value, children: value }, value))
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    Input,
+    {
+      type: "text",
+      value: columnFilterValue ?? "",
+      onChange: (e) => column.setFilterValue(e.target.value || void 0),
+      placeholder: "Filter...",
+      className: cn(
+        "h-8 text-xs",
+        "border-slate-200 dark:border-slate-700",
+        "bg-white dark:bg-slate-900",
+        "text-slate-900 dark:text-slate-100",
+        "placeholder:text-slate-400 dark:placeholder:text-slate-500"
+      ),
+      onClick: (e) => e.stopPropagation()
+    }
+  );
+}
+
+// src/components/lux-table/pagination.tsx
+import {
+  ChevronsLeft,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsRight
+} from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function PaginationButton({ onClick, disabled, title, children }) {
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium",
+        "h-9 w-9",
+        "border border-slate-200 dark:border-slate-800",
+        "bg-white dark:bg-slate-950",
+        "hover:bg-slate-100 dark:hover:bg-slate-800",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "transition-colors"
+      ),
+      onClick,
+      disabled,
+      title,
+      children
+    }
+  );
+}
+function PageNumberButton({ pageNum, isActive, onClick }) {
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium",
+        "h-9 w-9",
+        "transition-colors",
+        isActive ? "bg-blue-600 text-white border border-blue-600" : "border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 hover:bg-slate-100 dark:hover:bg-slate-800"
+      ),
+      children: pageNum + 1
+    }
+  );
+}
+function TablePagination({ table }) {
+  const currentPage = table.getState().pagination.pageIndex;
+  const totalPages = table.getPageCount();
+  const pageSize = table.getState().pagination.pageSize;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const startRow = currentPage * pageSize + 1;
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
+  const getPageNumbers = () => {
+    const pages = [];
+    if (totalPages <= 7) {
+      for (let i = 0; i < totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(0);
+      if (currentPage > 3) {
+        pages.push("...");
+      }
+      for (let i = Math.max(1, currentPage - 1); i <= Math.min(totalPages - 2, currentPage + 1); i++) {
+        pages.push(i);
+      }
+      if (currentPage < totalPages - 4) {
+        pages.push("...");
+      }
+      pages.push(totalPages - 1);
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 px-2 py-3", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
+        /* @__PURE__ */ jsx6("span", { className: "font-medium text-slate-700 dark:text-slate-300", children: startRow }),
+        "-",
+        /* @__PURE__ */ jsx6("span", { className: "font-medium text-slate-700 dark:text-slate-300", children: endRow }),
+        " ",
+        "of",
+        " ",
+        /* @__PURE__ */ jsx6("span", { className: "font-medium text-slate-700 dark:text-slate-300", children: totalRows }),
+        " ",
+        "records shown"
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6("span", { className: "text-sm text-slate-500 dark:text-slate-400", children: "Rows per page:" }),
+        /* @__PURE__ */ jsx6(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => {
+              table.setPageSize(Number(e.target.value));
+            },
+            className: cn(
+              "h-9 rounded-md border border-slate-200 dark:border-slate-800",
+              "bg-white dark:bg-slate-950",
+              "px-3 py-1 text-sm",
+              "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1",
+              "cursor-pointer"
+            ),
+            children: [10, 20, 30, 50, 100].map((size) => /* @__PURE__ */ jsx6("option", { value: size, children: size }, size))
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx6(
+        PaginationButton,
+        {
+          onClick: () => table.setPageIndex(0),
+          disabled: !table.getCanPreviousPage(),
+          title: "First page",
+          children: /* @__PURE__ */ jsx6(ChevronsLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        PaginationButton,
+        {
+          onClick: () => table.previousPage(),
+          disabled: !table.getCanPreviousPage(),
+          title: "Previous page",
+          children: /* @__PURE__ */ jsx6(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-1", children: getPageNumbers().map((page, idx) => {
+        if (page === "...") {
+          return /* @__PURE__ */ jsx6("span", { className: "px-2 text-slate-400", children: "..." }, `ellipsis-${idx}`);
+        }
+        const pageNum = page;
+        return /* @__PURE__ */ jsx6(
+          PageNumberButton,
+          {
+            pageNum,
+            isActive: pageNum === currentPage,
+            onClick: () => table.setPageIndex(pageNum)
+          },
+          pageNum
+        );
+      }) }),
+      /* @__PURE__ */ jsx6(
+        PaginationButton,
+        {
+          onClick: () => table.nextPage(),
+          disabled: !table.getCanNextPage(),
+          title: "Next page",
+          children: /* @__PURE__ */ jsx6(ChevronRight, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        PaginationButton,
+        {
+          onClick: () => table.setPageIndex(table.getPageCount() - 1),
+          disabled: !table.getCanNextPage(),
+          title: "Last page",
+          children: /* @__PURE__ */ jsx6(ChevronsRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/lux-table/table-toolbar.tsx
+import * as React6 from "react";
+import {
+  Search,
+  Filter,
+  FilterX,
+  Columns3,
+  Eye,
+  EyeOff,
+  RotateCcw,
+  ChevronDown as ChevronDown3
+} from "lucide-react";
+
+// src/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/dropdown-menu.tsx
+import * as React5 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check as Check2, ChevronRight as ChevronRight2, Circle } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuSubTrigger = React5.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx8(ChevronRight2, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx8(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React5.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React5.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx8("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(Check2, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx8("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React5.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/components/lux-table/table-toolbar.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function TableToolbar({
+  table,
+  showFiltering = true,
+  onFilteringToggle,
+  filteringEnabled = false,
+  showGlobalSearch = true,
+  showColumnVisibility = true,
+  className
+}) {
+  const [globalFilter, setGlobalFilter] = React6.useState("");
+  const hidableColumns = table.getAllColumns().filter((column) => column.getCanHide() && column.id !== "__selection__");
+  const hiddenColumns = hidableColumns.filter((column) => !column.getIsVisible());
+  const handleGlobalSearch = React6.useCallback(
+    (value) => {
+      setGlobalFilter(value);
+      table.setGlobalFilter(value);
+    },
+    [table]
+  );
+  const handleResetVisibility = React6.useCallback(() => {
+    table.resetColumnVisibility();
+  }, [table]);
+  const handleShowAllColumns = React6.useCallback(() => {
+    hidableColumns.forEach((column) => {
+      column.toggleVisibility(true);
+    });
+  }, [hidableColumns]);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center gap-2 p-3 rounded-lg border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50",
+        className
+      ),
+      children: [
+        showGlobalSearch && /* @__PURE__ */ jsxs5("div", { className: "relative flex-1 min-w-[200px] max-w-sm", children: [
+          /* @__PURE__ */ jsx9(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }),
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search in all columns...",
+              value: globalFilter,
+              onChange: (e) => handleGlobalSearch(e.target.value),
+              className: cn(
+                "w-full h-9 pl-9 pr-3 rounded-md border border-slate-200 dark:border-slate-700",
+                "bg-white dark:bg-slate-950 text-sm text-slate-900 dark:text-slate-100",
+                "placeholder:text-slate-400 dark:placeholder:text-slate-500",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500",
+                "transition-colors"
+              )
+            }
+          ),
+          globalFilter && /* @__PURE__ */ jsx9(
+            "button",
+            {
+              onClick: () => handleGlobalSearch(""),
+              className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors",
+              children: /* @__PURE__ */ jsx9(FilterX, { className: "h-3 w-3 text-slate-400" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 ml-auto", children: [
+          showFiltering && onFilteringToggle && /* @__PURE__ */ jsx9(
+            Button,
+            {
+              variant: filteringEnabled ? "default" : "outline",
+              size: "sm",
+              onClick: () => onFilteringToggle(!filteringEnabled),
+              className: "gap-2",
+              children: filteringEnabled ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+                /* @__PURE__ */ jsx9(FilterX, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx9("span", { className: "hidden sm:inline", children: "Hide Filters" })
+              ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+                /* @__PURE__ */ jsx9(Filter, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx9("span", { className: "hidden sm:inline", children: "Show Filters" })
+              ] })
+            }
+          ),
+          showColumnVisibility && /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx9(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(Button, { variant: "outline", size: "sm", className: "gap-2", children: [
+              /* @__PURE__ */ jsx9(Columns3, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx9("span", { className: "hidden sm:inline", children: "Columns" }),
+              hiddenColumns.length > 0 && /* @__PURE__ */ jsx9("span", { className: "ml-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-[10px] font-medium text-white", children: hiddenColumns.length }),
+              /* @__PURE__ */ jsx9(ChevronDown3, { className: "h-3 w-3 opacity-50" })
+            ] }) }),
+            /* @__PURE__ */ jsxs5(DropdownMenuContent, { align: "end", className: "w-56", children: [
+              /* @__PURE__ */ jsxs5(DropdownMenuLabel, { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx9(Columns3, { className: "h-4 w-4" }),
+                "Toggle Columns"
+              ] }),
+              /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [
+                /* @__PURE__ */ jsxs5(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleShowAllColumns,
+                    disabled: hiddenColumns.length === 0,
+                    className: "h-7 flex-1 text-xs",
+                    children: [
+                      /* @__PURE__ */ jsx9(Eye, { className: "mr-1 h-3 w-3" }),
+                      "Show All"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs5(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleResetVisibility,
+                    className: "h-7 flex-1 text-xs",
+                    children: [
+                      /* @__PURE__ */ jsx9(RotateCcw, { className: "mr-1 h-3 w-3" }),
+                      "Reset"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsx9("div", { className: "max-h-[300px] overflow-y-auto", children: hidableColumns.map((column) => {
+                const columnDef = column.columnDef;
+                const headerText = typeof columnDef.header === "string" ? columnDef.header : column.id;
+                return /* @__PURE__ */ jsx9(
+                  DropdownMenuCheckboxItem,
+                  {
+                    checked: column.getIsVisible(),
+                    onCheckedChange: (value) => column.toggleVisibility(!!value),
+                    className: "capitalize",
+                    children: /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-2", children: [
+                      column.getIsVisible() ? /* @__PURE__ */ jsx9(Eye, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx9(EyeOff, { className: "h-3.5 w-3.5 text-slate-400" }),
+                      headerText
+                    ] })
+                  },
+                  column.id
+                );
+              }) }),
+              hiddenColumns.length > 0 && /* @__PURE__ */ jsxs5(Fragment, { children: [
+                /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxs5("div", { className: "px-2 py-1.5 text-xs text-slate-500 dark:text-slate-400", children: [
+                  hiddenColumns.length,
+                  " column(s) hidden"
+                ] })
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// 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";
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx10(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none",
+          children: /* @__PURE__ */ jsx10(CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/lux-table/lux-table.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function createSelectionColumn() {
+  return {
+    id: "__selection__",
+    header: ({ table }) => /* @__PURE__ */ jsx11(
+      Checkbox,
+      {
+        checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+        onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+        "aria-label": "Select all rows"
+      }
+    ),
+    cell: ({ row }) => /* @__PURE__ */ jsx11(
+      Checkbox,
+      {
+        checked: row.getIsSelected(),
+        disabled: !row.getCanSelect(),
+        onCheckedChange: (value) => row.toggleSelected(!!value),
+        "aria-label": "Select row"
+      }
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false
+  };
+}
 function LuxTable({
   columns,
   data,
   className,
-  options
+  options,
+  sorting: controlledSorting,
+  onSortingChange,
+  rowSelection: controlledRowSelection,
+  onRowSelectionChange,
+  onSelectedRowsChange,
+  getRowId
 }) {
+  const [internalSorting, setInternalSorting] = React7.useState([]);
+  const [columnFilters, setColumnFilters] = React7.useState([]);
+  const [globalFilter, setGlobalFilter] = React7.useState("");
+  const [filteringVisible, setFilteringVisible] = React7.useState(options?.filtering ?? false);
+  const [internalRowSelection, setInternalRowSelection] = React7.useState({});
+  const isControlledSorting = controlledSorting !== void 0;
+  const sorting = isControlledSorting ? controlledSorting : internalSorting;
+  const isControlledRowSelection = controlledRowSelection !== void 0;
+  const rowSelection = isControlledRowSelection ? controlledRowSelection : internalRowSelection;
+  const selectionMode = options?.selection ?? "none";
+  const showCheckbox = options?.showSelectionCheckbox ?? selectionMode !== "none";
+  const enableRowSelection = selectionMode !== "none";
+  const enableMultiRowSelection = selectionMode === "multiple";
+  const tableColumns = React7.useMemo(() => {
+    if (showCheckbox && enableRowSelection) {
+      return [createSelectionColumn(), ...columns];
+    }
+    return columns;
+  }, [columns, showCheckbox, enableRowSelection]);
+  const handleRowSelectionChange = React7.useCallback(
+    (updater) => {
+      const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+      if (isControlledRowSelection && onRowSelectionChange) {
+        onRowSelectionChange(newSelection);
+      } else {
+        setInternalRowSelection(newSelection);
+      }
+    },
+    [isControlledRowSelection, onRowSelectionChange, rowSelection]
+  );
   const table = useReactTable({
     data,
-    columns,
+    columns: tableColumns,
+    state: {
+      sorting,
+      columnFilters,
+      rowSelection,
+      globalFilter
+    },
+    onGlobalFilterChange: setGlobalFilter,
+    onSortingChange: (updater) => {
+      const newSorting = typeof updater === "function" ? updater(sorting) : updater;
+      if (isControlledSorting && onSortingChange) {
+        onSortingChange(newSorting);
+      } else {
+        setInternalSorting(newSorting);
+      }
+    },
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: handleRowSelectionChange,
+    enableRowSelection,
+    enableMultiRowSelection,
+    getRowId: getRowId ?? ((row, index) => {
+      if (typeof row === "object" && row !== null && "id" in row) {
+        return String(row.id);
+      }
+      return String(index);
+    }),
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: options?.pagination ? getPaginationRowModel() : void 0,
     getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel()
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    initialState: {
+      pagination: {
+        pageSize: options?.pageSize ?? 10
+      }
+    }
   });
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-4", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full caption-bottom text-sm text-left", children: [
-      /* @__PURE__ */ jsx("thead", { className: "[&_tr]:border-b [&_tr]:border-slate-200 dark:[&_tr]:border-slate-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "border-b transition-colors hover:bg-slate-100/50 dark:hover:bg-slate-800/50 data-[state=selected]:bg-slate-100 dark:data-[state=selected]:bg-slate-800", children: headerGroup.headers.map((header) => {
-        return /* @__PURE__ */ jsx(
-          "th",
-          {
-            className: "h-10 px-4 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 dark:text-slate-400",
-            children: header.isPlaceholder ? null : flexRender(
-              header.column.columnDef.header,
-              header.getContext()
-            )
-          },
-          header.id
-        );
-      }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
-        "tr",
+  React7.useEffect(() => {
+    if (onSelectedRowsChange) {
+      const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
+      onSelectedRowsChange(selectedRows);
+    }
+  }, [rowSelection, onSelectedRowsChange, table]);
+  const visibleColumnCount = tableColumns.length;
+  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(
+      TableToolbar,
+      {
+        table,
+        showFiltering: options?.filtering !== void 0,
+        filteringEnabled: filteringVisible,
+        onFilteringToggle: setFilteringVisible,
+        showGlobalSearch,
+        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 }),
+        " rows selected",
+        table.getFilteredRowModel().rows.length > 0 && /* @__PURE__ */ jsxs6("span", { className: "text-blue-500 dark:text-blue-400", children: [
+          " / ",
+          table.getFilteredRowModel().rows.length,
+          " total"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleRowSelectionChange({}),
+          className: "ml-auto text-xs hover:text-blue-900 dark:hover:text-blue-100 underline underline-offset-2",
+          children: "Clear selection"
+        }
+      )
+    ] }),
+    /* @__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) => {
+          const isSelectionColumn = header.id === "__selection__";
+          return /* @__PURE__ */ jsx11(
+            TableHead,
+            {
+              style: isSelectionColumn ? { width: 40, padding: "0 12px" } : void 0,
+              children: header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            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) => {
+          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}`);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx11(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx11(
+        TableRow,
         {
           "data-state": row.getIsSelected() && "selected",
-          className: "border-b border-slate-200 dark:border-slate-800 transition-colors hover:bg-slate-100/50 dark:hover:bg-slate-800/50",
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "p-4 align-middle [&:has([role=checkbox])]:pr-0", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          className: cn(
+            enableRowSelection && "cursor-pointer",
+            row.getIsSelected() && "bg-blue-50/50 dark:bg-blue-950/30"
+          ),
+          onClick: enableRowSelection && !showCheckbox ? () => {
+            if (selectionMode === "single") {
+              handleRowSelectionChange({ [row.id]: true });
+            } else {
+              row.toggleSelected();
+            }
+          } : void 0,
+          children: row.getVisibleCells().map((cell) => {
+            const isSelectionColumn = cell.column.id === "__selection__";
+            return /* @__PURE__ */ jsx11(
+              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())
+              },
+              cell.id
+            );
+          })
         },
         row.id
-      )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
-    ] }) }) }),
-    options?.pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end space-x-2 py-4", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "px-3 py-1 border rounded text-sm disabled:opacity-50",
-          onClick: () => table.previousPage(),
-          disabled: !table.getCanPreviousPage(),
-          children: "Previous"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
+      )) : /* @__PURE__ */ jsx11(TableRow, { children: /* @__PURE__ */ jsx11(TableCell, { colSpan: visibleColumnCount, className: "h-24 text-center", children: "No results." }) }) })
+    ] }) }),
+    options?.pagination && /* @__PURE__ */ jsx11(TablePagination, { table })
+  ] });
+}
+
+// src/components/lux-table/column-header.tsx
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronsUpDown as ChevronsUpDown2,
+  EyeOff as EyeOff2,
+  MoreVertical,
+  X
+} from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } 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 }) });
+  }
+  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(
+        Button,
         {
-          className: "px-3 py-1 border rounded text-sm disabled:opacity-50",
-          onClick: () => table.nextPage(),
-          disabled: !table.getCanNextPage(),
-          children: "Next"
+          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",
+          children: [
+            /* @__PURE__ */ jsx12(MoreVertical, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx12("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" }),
+          "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" }),
+          "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" }),
+            "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" }),
+          "Hide column"
+        ] })
+      ] })
     ] })
   ] });
 }
 
+// src/components/cell-renderers/status-cell.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var defaultStatusColors = {
+  Active: {
+    bg: "bg-green-100",
+    text: "text-green-800",
+    darkBg: "dark:bg-green-900",
+    darkText: "dark:text-green-300"
+  },
+  Inactive: {
+    bg: "bg-red-100",
+    text: "text-red-800",
+    darkBg: "dark:bg-red-900",
+    darkText: "dark:text-red-300"
+  },
+  Pending: {
+    bg: "bg-yellow-100",
+    text: "text-yellow-800",
+    darkBg: "dark:bg-yellow-900",
+    darkText: "dark:text-yellow-300"
+  },
+  Completed: {
+    bg: "bg-blue-100",
+    text: "text-blue-800",
+    darkBg: "dark:bg-blue-900",
+    darkText: "dark:text-blue-300"
+  },
+  Cancelled: {
+    bg: "bg-gray-100",
+    text: "text-gray-800",
+    darkBg: "dark:bg-gray-900",
+    darkText: "dark:text-gray-300"
+  }
+};
+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 });
+  }
+  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 });
+}
+
+// src/components/cell-renderers/progress-cell.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function ProgressCell({
+  value,
+  barColor = "bg-blue-600",
+  bgColor = "bg-gray-200 dark:bg-gray-700",
+  showLabel = false,
+  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(
+      "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: [
+      value,
+      "%"
+    ] })
+  ] });
+}
+
+// src/components/cell-renderers/boolean-cell.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function BooleanCell({
+  value,
+  trueLabel = "Yes",
+  falseLabel = "No",
+  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 });
+}
+
+// src/components/cell-renderers/date-cell.tsx
+import { jsx as jsx16 } 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: "-" });
+  }
+  let formatted;
+  switch (format) {
+    case "long":
+      formatted = date.toLocaleDateString(locale, {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      });
+      break;
+    case "relative": {
+      const now = /* @__PURE__ */ new Date();
+      const diffMs = now.getTime() - date.getTime();
+      const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+      if (diffDays === 0) formatted = "Today";
+      else if (diffDays === 1) formatted = "Yesterday";
+      else if (diffDays < 7) formatted = `${diffDays} days ago`;
+      else formatted = date.toLocaleDateString(locale);
+      break;
+    }
+    default:
+      formatted = date.toLocaleDateString(locale);
+  }
+  return /* @__PURE__ */ jsx16("span", { children: formatted });
+}
+
+// src/components/cell-renderers/currency-cell.tsx
+import { jsx as jsx17 } 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 });
+}
+
+// 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";
+function CopyableCell({
+  value,
+  feedbackDuration = 2e3,
+  onCopy,
+  className,
+  tooltip = "Click to copy",
+  alwaysShowIcon = false
+}) {
+  const [copied, setCopied] = React8.useState(false);
+  const [isHovered, setIsHovered] = React8.useState(false);
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    const textToCopy = String(value);
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      setCopied(true);
+      onCopy?.(textToCopy);
+      setTimeout(() => {
+        setCopied(false);
+      }, feedbackDuration);
+    } catch (err) {
+      console.error("Copy error:", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      title: tooltip,
+      className: `
+                group inline-flex items-center gap-2 
+                px-2 py-1 -mx-2 -my-1
+                rounded-md
+                transition-all duration-200
+                hover:bg-slate-100 dark:hover:bg-slate-800
+                focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+                cursor-pointer
+                ${className || ""}
+            `,
+      children: [
+        /* @__PURE__ */ jsx18("span", { className: "select-none", children: value }),
+        /* @__PURE__ */ jsx18(
+          "span",
+          {
+            className: `
+                    inline-flex items-center justify-center
+                    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" })
+          }
+        )
+      ]
+    }
+  );
+}
+function createCopyableCell(value, options) {
+  return /* @__PURE__ */ jsx18(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";
+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(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+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";
+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(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-50",
+      className
+    ),
+    ...props
+  }
+) }));
+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";
+var Separator3 = React11.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx21(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-slate-200 dark:bg-slate-800",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+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";
+var toTitleCase = (str) => {
+  return str.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
+};
+function createColumnHelper() {
+  const helper = tanstackCreateColumnHelper();
+  return {
+    /**
+     * Simple accessor - if cell is not provided, value is rendered automatically
+     */
+    accessor: (accessor, column) => {
+      const headerContent = column?.header;
+      const finalColumn = {
+        ...column,
+        // enableSorting is true by default
+        enableSorting: column?.enableSorting !== false,
+        // 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(
+          LuxDataTableColumnHeader,
+          {
+            column: colParam,
+            title: typeof headerContent === "string" ? headerContent : toTitleCase(accessor)
+          }
+        ),
+        // If cell is not defined, show value directly
+        cell: column?.cell || ((info) => {
+          const value = info.getValue();
+          if (value === null || value === void 0) {
+            return "-";
+          }
+          return String(value);
+        })
+      };
+      return helper.accessor(accessor, finalColumn);
+    },
+    /**
+     * Display column (for actions etc.)
+     */
+    display: (column) => {
+      return helper.display(column);
+    },
+    /**
+     * Action column - specialized display column for row actions
+     * Disables sorting by default
+     */
+    action: (column) => {
+      return helper.display({
+        id: "actions",
+        header: "",
+        enableSorting: false,
+        enableHiding: false,
+        ...column
+      });
+    },
+    /**
+     * Create all columns automatically - Table directly from JSON
+     * Just specifying headers is enough, cell is rendered automatically
+     */
+    auto: (columns) => {
+      return columns.map((col) => {
+        return helper.accessor(col.accessor, {
+          header: ({ column }) => /* @__PURE__ */ jsx22(LuxDataTableColumnHeader, { column, title: col.header }),
+          cell: col.cell || ((info) => {
+            const value = info.getValue();
+            if (value === null || value === void 0) return "-";
+            return String(value);
+          })
+        });
+      });
+    }
+  };
+}
+function createColumnsFromData(data, options) {
+  if (!data || data.length === 0) return [];
+  const helper = tanstackCreateColumnHelper();
+  const firstRow = data[0];
+  let keys = Object.keys(firstRow);
+  if (options?.include) {
+    keys = keys.filter((k) => options.include?.includes(k));
+  }
+  if (options?.exclude) {
+    keys = keys.filter((k) => !options.exclude?.includes(k));
+  }
+  return keys.map((key) => {
+    const headerText = options?.headers?.[key] || toTitleCase(key);
+    const cellRenderer = options?.cells?.[key];
+    return helper.accessor(key, {
+      header: ({ column }) => /* @__PURE__ */ jsx22(LuxDataTableColumnHeader, { column, title: headerText }),
+      cell: cellRenderer || ((info) => {
+        const value = info.getValue();
+        if (value === null || value === void 0) return "-";
+        return String(value);
+      })
+    });
+  });
+}
+
 // src/index.ts
-export * from "@tanstack/react-table";
+import {
+  flexRender as flexRender2,
+  getCoreRowModel as getCoreRowModel2,
+  getPaginationRowModel as getPaginationRowModel2,
+  getSortedRowModel as getSortedRowModel2,
+  getFilteredRowModel as getFilteredRowModel2
+} from "@tanstack/react-table";
 export {
+  BooleanCell,
+  Button,
+  Checkbox,
+  ColumnFilter,
+  CopyableCell,
+  CurrencyCell,
+  DateCell,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  Input,
+  Label3 as Label,
+  LuxDataTableColumnHeader,
   LuxTable,
-  cn
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  ProgressCell,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Separator3 as Separator,
+  SortIcon,
+  StatusCell,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TablePagination,
+  TableRow,
+  TableToolbar,
+  buttonVariants,
+  cn,
+  createColumnHelper,
+  createColumnsFromData,
+  createCopyableCell,
+  defaultStatusColors,
+  flexRender2 as flexRender,
+  getCoreRowModel2 as getCoreRowModel,
+  getFilteredRowModel2 as getFilteredRowModel,
+  getPaginationRowModel2 as getPaginationRowModel,
+  getSortedRowModel2 as getSortedRowModel
 };