luxtable 0.3.4 → 0.3.6

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/components/lux-table/lux-table.tsx
-import * as React7 from "react";
+import * as React10 from "react";
 import {
-  flexRender,
+  flexRender as flexRender2,
   getCoreRowModel,
   useReactTable,
   getPaginationRowModel,
@@ -34,7 +34,7 @@ var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "thead",
   {
     ref,
-    className: cn("[&_tr]:border-b [&_tr]:border-slate-200 dark:[&_tr]:border-slate-800", className),
+    className: cn("[&_tr]:border-b [&_tr]:border-[hsl(var(--lux-table-header-border))]", className),
     ...props
   }
 ));
@@ -53,7 +53,7 @@ var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     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",
+      "border-t border-[hsl(var(--lux-table-footer-border))] bg-[hsl(var(--lux-table-footer-background))] text-[hsl(var(--lux-table-footer-foreground))] font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
@@ -65,9 +65,9 @@ var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   {
     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",
+      "border-b border-[hsl(var(--lux-table-row-border))] transition-colors",
+      "hover:bg-[hsl(var(--lux-table-row-hover))]",
+      "data-[state=selected]:bg-[hsl(var(--lux-table-row-selected))]",
       className
     ),
     ...props
@@ -80,7 +80,7 @@ var TableHead = React.forwardRef(({ className, children, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "h-10 px-4 text-left align-middle font-medium text-slate-500 dark:text-slate-400",
+        "h-10 px-4 text-left align-middle font-medium text-[hsl(var(--lux-table-header-foreground))]",
         "[&:has([role=checkbox])]:pr-0",
         "group",
         // Enable group-hover for action buttons
@@ -97,9 +97,15 @@ var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+      "p-4 align-middle text-[hsl(var(--lux-table-cell-foreground))] [&:has([role=checkbox])]:pr-0",
+      "[&>*]:text-[hsl(var(--lux-table-cell-foreground))]",
+      "[&_*]:text-[hsl(var(--lux-table-cell-foreground))]",
       className
     ),
+    style: {
+      color: "hsl(var(--lux-table-cell-foreground))",
+      ...props.style
+    },
     ...props
   }
 ));
@@ -108,7 +114,7 @@ var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "caption",
   {
     ref,
-    className: cn("mt-4 text-sm text-slate-500 dark:text-slate-400", className),
+    className: cn("mt-4 text-sm text-[hsl(var(--lux-table-cell-muted))]", className),
     ...props
   }
 ));
@@ -119,16 +125,16 @@ 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" });
+    return /* @__PURE__ */ jsx2(ChevronsUpDown, { className: "h-4 w-4 text-slate-400/60 dark:text-slate-600" });
   }
   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-md bg-gradient-to-br from-emerald-500/15 to-teal-500/15 dark:from-emerald-400/20 dark:to-teal-400/20 p-0.5 ring-1 ring-emerald-500/20 dark:ring-emerald-400/25", children: /* @__PURE__ */ jsx2(ChevronUp, { className: "h-3.5 w-3.5 text-emerald-600 dark:text-emerald-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 }) });
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center rounded-md bg-gradient-to-br from-emerald-500/15 to-teal-500/15 dark:from-emerald-400/20 dark:to-teal-400/20 p-0.5 ring-1 ring-emerald-500/20 dark:ring-emerald-400/25", children: /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400", strokeWidth: 2.5 }) });
 }
 
 // src/components/lux-table/column-filter.tsx
-import * as React4 from "react";
+import * as React6 from "react";
 
 // src/components/ui/input.tsx
 import * as React2 from "react";
@@ -139,7 +145,7 @@ var Input = React2.forwardRef(({ className, type, ...props }, ref) => {
     {
       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",
+        "flex h-9 w-full rounded-md border border-input 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-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ref,
@@ -162,7 +168,7 @@ var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) =
   {
     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",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -204,7 +210,7 @@ var SelectContent = React3.forwardRef(({ className, children, position = "popper
   {
     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",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground 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",
       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
     ),
@@ -241,7 +247,7 @@ var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /
   {
     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",
+      "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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -256,19 +262,352 @@ var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className),
+    className: cn("-mx-1 my-1 h-px bg-border", className),
     ...props
   }
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-// src/components/lux-table/column-filter.tsx
+// src/components/ui/slider.tsx
+import * as React4 from "react";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-function ColumnFilter({ column }) {
+var Slider = React4.forwardRef(
+  ({ className, value = [0, 100], onValueChange, min = 0, max = 100, step = 1, ...props }, ref) => {
+    const [localValue, setLocalValue] = React4.useState(value);
+    React4.useEffect(() => {
+      setLocalValue(value);
+    }, [value]);
+    const handleChange = (index, newValue) => {
+      const newValues = [...localValue];
+      newValues[index] = Math.max(min, Math.min(max, newValue));
+      if (newValues.length === 2) {
+        if (index === 0 && newValues[0] > newValues[1]) {
+          newValues[0] = newValues[1];
+        } else if (index === 1 && newValues[1] < newValues[0]) {
+          newValues[1] = newValues[0];
+        }
+      }
+      setLocalValue(newValues);
+      onValueChange?.(newValues);
+    };
+    const percentage = (val) => (val - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsx5("div", { className: cn("relative flex w-full items-center", className), children: localValue.length === 2 ? (
+      // Range slider
+      /* @__PURE__ */ jsxs2("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            ref,
+            type: "range",
+            min,
+            max,
+            step,
+            value: localValue[0],
+            onChange: (e) => handleChange(0, Number(e.target.value)),
+            className: "absolute h-2 w-full appearance-none bg-transparent pointer-events-none z-10 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[hsl(var(--lux-focus-ring))] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[hsl(var(--lux-filter-background))] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-[hsl(var(--lux-focus-ring))] [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-[hsl(var(--lux-filter-background))] [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto",
+            style: { zIndex: localValue[0] > localValue[1] ? 20 : 10 },
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "range",
+            min,
+            max,
+            step,
+            value: localValue[1],
+            onChange: (e) => handleChange(1, Number(e.target.value)),
+            className: "absolute h-2 w-full appearance-none bg-transparent pointer-events-none z-10 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[hsl(var(--lux-focus-ring))] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[hsl(var(--lux-filter-background))] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-[hsl(var(--lux-focus-ring))] [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-[hsl(var(--lux-filter-background))] [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto",
+            style: { zIndex: localValue[1] > localValue[0] ? 20 : 10 }
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { className: "absolute h-2 w-full rounded-full bg-[hsl(var(--lux-filter-border))]" }),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: "absolute h-2 rounded-full bg-[hsl(var(--lux-focus-ring))]",
+            style: {
+              left: `${percentage(Math.min(localValue[0], localValue[1]))}%`,
+              width: `${percentage(Math.max(localValue[0], localValue[1])) - percentage(Math.min(localValue[0], localValue[1]))}%`
+            }
+          }
+        )
+      ] })
+    ) : (
+      // Single value slider
+      /* @__PURE__ */ jsxs2("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            ref,
+            type: "range",
+            min,
+            max,
+            step,
+            value: localValue[0],
+            onChange: (e) => handleChange(0, Number(e.target.value)),
+            className: "h-2 w-full appearance-none rounded-full bg-[hsl(var(--lux-filter-border))] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[hsl(var(--lux-focus-ring))] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[hsl(var(--lux-filter-background))] [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-[hsl(var(--lux-focus-ring))] [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-[hsl(var(--lux-filter-background))] [&::-moz-range-thumb]:cursor-pointer",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: "absolute top-0 h-2 rounded-full bg-[hsl(var(--lux-focus-ring))] pointer-events-none",
+            style: { width: `${percentage(localValue[0])}%` }
+          }
+        )
+      ] })
+    ) });
+  }
+);
+Slider.displayName = "Slider";
+
+// src/components/ui/popover.tsx
+import * as React5 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx6(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground 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",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// 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/calendar.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "border border-[hsl(var(--lux-filter-border))] rounded-md",
+          "hover:bg-[hsl(var(--lux-table-row-hover))]",
+          "inline-flex items-center justify-center"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-[hsl(var(--lux-toolbar-icon))] rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-[hsl(var(--lux-table-row-hover))]/50 [&:has([aria-selected])]:bg-[hsl(var(--lux-focus-ring))]/10 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+          "rounded-md hover:bg-[hsl(var(--lux-table-row-hover))]",
+          "inline-flex items-center justify-center"
+        ),
+        day_range_end: "day-range-end",
+        day_selected: "bg-[hsl(var(--lux-focus-ring))] text-[hsl(var(--lux-filter-background))] hover:bg-[hsl(var(--lux-focus-ring))] hover:text-[hsl(var(--lux-filter-background))] focus:bg-[hsl(var(--lux-focus-ring))] focus:text-[hsl(var(--lux-filter-background))]",
+        day_today: "bg-[hsl(var(--lux-filter-border))] text-[hsl(var(--lux-filter-foreground))]",
+        day_outside: "day-outside text-[hsl(var(--lux-toolbar-icon))] opacity-50 aria-selected:bg-[hsl(var(--lux-table-row-hover))]/50 aria-selected:text-[hsl(var(--lux-toolbar-icon))] aria-selected:opacity-30",
+        day_disabled: "text-[hsl(var(--lux-toolbar-icon))] opacity-50",
+        day_range_middle: "aria-selected:bg-[hsl(var(--lux-focus-ring))]/20 aria-selected:text-[hsl(var(--lux-filter-foreground))]",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        IconLeft: ({ ...props2 }) => /* @__PURE__ */ jsx8(ChevronLeft, { className: "h-4 w-4" }),
+        IconRight: ({ ...props2 }) => /* @__PURE__ */ jsx8(ChevronRight, { className: "h-4 w-4" })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+// src/components/lux-table/column-filter.tsx
+import { CalendarIcon, X } from "lucide-react";
+
+// src/components/cell-renderers/status-cell.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var createStatusColor = (bg, text, darkBg, darkText) => ({
+  bg,
+  text,
+  darkBg,
+  darkText
+});
+var statusColorMap = {
+  active: createStatusColor(
+    "bg-[hsl(var(--lux-status-active-bg))]",
+    "text-[hsl(var(--lux-status-active-text))]",
+    "",
+    ""
+  ),
+  inactive: createStatusColor(
+    "bg-[hsl(var(--lux-status-inactive-bg))]",
+    "text-[hsl(var(--lux-status-inactive-text))]",
+    "",
+    ""
+  ),
+  pending: createStatusColor(
+    "bg-[hsl(var(--lux-status-pending-bg))]",
+    "text-[hsl(var(--lux-status-pending-text))]",
+    "",
+    ""
+  ),
+  completed: createStatusColor(
+    "bg-[hsl(var(--lux-status-completed-bg))]",
+    "text-[hsl(var(--lux-status-completed-text))]",
+    "",
+    ""
+  ),
+  cancelled: createStatusColor(
+    "bg-[hsl(var(--lux-status-cancelled-bg))]",
+    "text-[hsl(var(--lux-status-cancelled-text))]",
+    "",
+    ""
+  )
+};
+var defaultStatusColors = {
+  // Lowercase versions
+  ...statusColorMap,
+  // Capitalized versions
+  Active: statusColorMap.active,
+  Inactive: statusColorMap.inactive,
+  Pending: statusColorMap.pending,
+  Completed: statusColorMap.completed,
+  Cancelled: statusColorMap.cancelled
+};
+function StatusCell({ value, colors, className }) {
+  const mergedColors = { ...defaultStatusColors, ...colors };
+  const normalizedValue = value.toLowerCase();
+  const capitalizedValue = value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+  const colorConfig = mergedColors[normalizedValue] || mergedColors[value] || mergedColors[capitalizedValue];
+  const displayValue = capitalizedValue;
+  if (!colorConfig) {
+    return /* @__PURE__ */ jsx9("span", { className: `px-2 py-1 rounded-full text-xs font-medium bg-[hsl(var(--lux-status-default-bg))] text-[hsl(var(--lux-status-default-text))] ${className || ""}`, children: displayValue });
+  }
+  const { bg, text } = colorConfig;
+  return /* @__PURE__ */ jsx9("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${bg} ${text} ${className || ""}`, children: displayValue });
+}
+
+// src/components/lux-table/column-filter.tsx
+import { format } from "date-fns";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+function detectFilterType(column, data) {
+  const meta = column.columnDef.meta;
+  if (meta?.filterVariant) {
+    return meta.filterVariant;
+  }
+  const columnId = column.id.toLowerCase();
+  const accessorKey = "accessorKey" in column.columnDef ? String(column.columnDef.accessorKey || "").toLowerCase() : "";
+  const datePatterns = ["date", "createdat", "updatedat", "joindate", "startdate", "enddate", "birthdate", "publishedat"];
+  if (datePatterns.some((pattern) => columnId.includes(pattern) || accessorKey.includes(pattern))) {
+    return "date";
+  }
+  const statusPatterns = ["status", "state", "stage", "phase"];
+  if (statusPatterns.some((pattern) => columnId.includes(pattern) || accessorKey.includes(pattern))) {
+    return "status";
+  }
+  const numericPatterns = ["salary", "price", "amount", "cost", "revenue", "total", "balance", "fee"];
+  if (numericPatterns.some((pattern) => columnId.includes(pattern) || accessorKey.includes(pattern))) {
+    return "slider";
+  }
+  if (data && data.length > 0) {
+    const firstValue = column.getFacetedUniqueValues().keys().next().value;
+    if (firstValue !== void 0) {
+      if (typeof firstValue === "string" && /^\d{4}-\d{2}-\d{2}/.test(firstValue)) {
+        const date = new Date(firstValue);
+        if (!isNaN(date.getTime())) {
+          return "date";
+        }
+      }
+      if (typeof firstValue === "number") {
+        return "slider";
+      }
+      const statusValues = ["active", "inactive", "pending", "completed", "cancelled", "approved", "rejected"];
+      if (typeof firstValue === "string" && statusValues.includes(firstValue.toLowerCase())) {
+        return "status";
+      }
+    }
+  }
+  return "text";
+}
+function ColumnFilter({ column, data }) {
   const columnFilterValue = column.getFilterValue();
-  const filterVariant = column.columnDef.meta?.filterVariant ?? "text";
-  const sortedUniqueValues = React4.useMemo(() => {
-    if (filterVariant !== "select") return [];
+  const filterVariant = detectFilterType(column, data);
+  const sortedUniqueValues = React6.useMemo(() => {
+    if (filterVariant !== "select" && filterVariant !== "status") return [];
     const values = /* @__PURE__ */ new Set();
     column.getFacetedUniqueValues().forEach((_, key) => {
       if (key !== null && key !== void 0) {
@@ -277,35 +616,322 @@ function ColumnFilter({ column }) {
     });
     return Array.from(values).sort();
   }, [column, filterVariant]);
+  if (filterVariant === "date") {
+    const dateRange = columnFilterValue || {};
+    const [fromDate, setFromDate] = React6.useState(
+      dateRange.from ? new Date(dateRange.from) : void 0
+    );
+    const [toDate, setToDate] = React6.useState(
+      dateRange.to ? new Date(dateRange.to) : void 0
+    );
+    const [fromOpen, setFromOpen] = React6.useState(false);
+    const [toOpen, setToOpen] = React6.useState(false);
+    React6.useEffect(() => {
+      if (columnFilterValue) {
+        const range = columnFilterValue;
+        setFromDate(range.from ? new Date(range.from) : void 0);
+        setToDate(range.to ? new Date(range.to) : void 0);
+      } else {
+        setFromDate(void 0);
+        setToDate(void 0);
+      }
+    }, [columnFilterValue]);
+    const handleFromDateChange = (date) => {
+      setFromDate(date);
+      const newRange = {
+        from: date ? format(date, "yyyy-MM-dd") : void 0,
+        to: toDate ? format(toDate, "yyyy-MM-dd") : void 0
+      };
+      column.setFilterValue(
+        newRange.from || newRange.to ? newRange : void 0
+      );
+    };
+    const handleToDateChange = (date) => {
+      setToDate(date);
+      const newRange = {
+        from: fromDate ? format(fromDate, "yyyy-MM-dd") : void 0,
+        to: date ? format(date, "yyyy-MM-dd") : void 0
+      };
+      column.setFilterValue(
+        newRange.from || newRange.to ? newRange : void 0
+      );
+    };
+    const clearDates = () => {
+      setFromDate(void 0);
+      setToDate(void 0);
+      column.setFilterValue(void 0);
+    };
+    return /* @__PURE__ */ jsxs3("div", { className: "flex gap-1 items-center", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs3(Popover, { open: fromOpen, onOpenChange: setFromOpen, children: [
+        /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: cn(
+              "h-8 text-xs w-32 justify-start text-left font-normal",
+              !fromDate && "text-[hsl(var(--lux-toolbar-input-placeholder))]",
+              "border-[hsl(var(--lux-filter-border))]",
+              "bg-[hsl(var(--lux-filter-background))]",
+              "text-[hsl(var(--lux-filter-foreground))]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx10(CalendarIcon, { className: "mr-2 h-3 w-3" }),
+              fromDate ? format(fromDate, "MMM dd, yyyy") : "From"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx10(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx10(
+          Calendar,
+          {
+            mode: "single",
+            selected: fromDate,
+            onSelect: handleFromDateChange,
+            initialFocus: true
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx10("span", { className: "text-xs text-[hsl(var(--lux-toolbar-icon))]", children: "-" }),
+      /* @__PURE__ */ jsxs3(Popover, { open: toOpen, onOpenChange: setToOpen, children: [
+        /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: cn(
+              "h-8 text-xs w-32 justify-start text-left font-normal",
+              !toDate && "text-[hsl(var(--lux-toolbar-input-placeholder))]",
+              "border-[hsl(var(--lux-filter-border))]",
+              "bg-[hsl(var(--lux-filter-background))]",
+              "text-[hsl(var(--lux-filter-foreground))]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx10(CalendarIcon, { className: "mr-2 h-3 w-3" }),
+              toDate ? format(toDate, "MMM dd, yyyy") : "To"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx10(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx10(
+          Calendar,
+          {
+            mode: "single",
+            selected: toDate,
+            onSelect: handleToDateChange,
+            initialFocus: true
+          }
+        ) })
+      ] }),
+      (fromDate || toDate) && /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: clearDates,
+          className: "h-8 w-8 p-0",
+          children: /* @__PURE__ */ jsx10(X, { className: "h-3 w-3" })
+        }
+      )
+    ] });
+  }
+  if (filterVariant === "slider") {
+    const numericValues = React6.useMemo(() => {
+      const values = [];
+      column.getFacetedUniqueValues().forEach((_, key) => {
+        if (typeof key === "number") {
+          values.push(key);
+        } else if (typeof key === "string") {
+          const num = parseFloat(key);
+          if (!isNaN(num)) {
+            values.push(num);
+          }
+        }
+      });
+      return values;
+    }, [column]);
+    const min = numericValues.length > 0 ? Math.min(...numericValues) : 0;
+    const max = numericValues.length > 0 ? Math.max(...numericValues) : 100;
+    const avg = numericValues.length > 0 ? (min + max) / 2 : 50;
+    const sliderValue = columnFilterValue || { min, max };
+    const [range, setRange] = React6.useState([
+      sliderValue.min ?? min,
+      sliderValue.max ?? max
+    ]);
+    React6.useEffect(() => {
+      if (columnFilterValue) {
+        const val = columnFilterValue;
+        setRange([val.min ?? min, val.max ?? max]);
+      } else {
+        setRange([min, max]);
+      }
+    }, [columnFilterValue, min, max]);
+    const handleSliderChange = (newRange) => {
+      setRange(newRange);
+      column.setFilterValue({ min: newRange[0], max: newRange[1] });
+    };
+    const clearSlider = () => {
+      setRange([min, max]);
+      column.setFilterValue(void 0);
+    };
+    return /* @__PURE__ */ jsxs3(Popover, { children: [
+      /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: cn(
+            "h-8 text-xs w-full justify-start",
+            "border-[hsl(var(--lux-filter-border))]",
+            "bg-[hsl(var(--lux-filter-background))]",
+            "text-[hsl(var(--lux-filter-foreground))]"
+          ),
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx10("span", { children: range[0] === min && range[1] === max ? "All" : `${Math.round(range[0])} - ${Math.round(range[1])}` })
+        }
+      ) }),
+      /* @__PURE__ */ jsx10(PopoverContent, { className: "w-64", align: "start", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between text-sm", children: [
+          /* @__PURE__ */ jsx10("span", { className: "text-[hsl(var(--lux-filter-foreground))]", children: "Range" }),
+          /* @__PURE__ */ jsxs3("span", { className: "text-[hsl(var(--lux-toolbar-icon))]", children: [
+            Math.round(range[0]),
+            " - ",
+            Math.round(range[1])
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx10(
+          Slider,
+          {
+            value: range,
+            onValueChange: handleSliderChange,
+            min,
+            max,
+            step: (max - min) / 100
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between text-xs text-[hsl(var(--lux-toolbar-icon))]", children: [
+          /* @__PURE__ */ jsxs3("span", { children: [
+            "Min: ",
+            Math.round(min)
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            "Avg: ",
+            Math.round(avg)
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            "Max: ",
+            Math.round(max)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx10(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: clearSlider,
+            className: "w-full h-7 text-xs",
+            children: "Clear"
+          }
+        )
+      ] }) })
+    ] });
+  }
+  if (filterVariant === "status") {
+    const selectedStatuses = columnFilterValue || [];
+    const [open, setOpen] = React6.useState(false);
+    const toggleStatus = (status) => {
+      const newSelection = selectedStatuses.includes(status) ? selectedStatuses.filter((s) => s !== status) : [...selectedStatuses, status];
+      column.setFilterValue(newSelection.length > 0 ? newSelection : void 0);
+    };
+    const clearStatuses = () => {
+      column.setFilterValue(void 0);
+    };
+    return /* @__PURE__ */ jsxs3(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: cn(
+            "h-8 text-xs w-full justify-start",
+            "border-[hsl(var(--lux-filter-border))]",
+            "bg-[hsl(var(--lux-filter-background))]",
+            "text-[hsl(var(--lux-filter-foreground))]"
+          ),
+          onClick: (e) => {
+            e.stopPropagation();
+            setOpen(!open);
+          },
+          children: /* @__PURE__ */ jsx10("span", { children: selectedStatuses.length === 0 ? "All Status" : `${selectedStatuses.length} selected` })
+        }
+      ) }),
+      /* @__PURE__ */ jsx10(PopoverContent, { className: "w-48", align: "start", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium text-[hsl(var(--lux-filter-foreground))]", children: "Status" }),
+          selectedStatuses.length > 0 && /* @__PURE__ */ jsx10(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: clearStatuses,
+              className: "h-6 text-xs",
+              children: "Clear"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx10("div", { className: "space-y-1.5", children: sortedUniqueValues.map((status) => /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            onClick: () => toggleStatus(status),
+            className: cn(
+              "w-full flex items-center gap-2 p-2 rounded-md text-left text-xs transition-colors",
+              selectedStatuses.includes(status) ? "bg-[hsl(var(--lux-focus-ring))]/20" : "hover:bg-[hsl(var(--lux-table-row-hover))]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx10(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedStatuses.includes(status),
+                  onChange: () => toggleStatus(status),
+                  className: "h-3 w-3"
+                }
+              ),
+              /* @__PURE__ */ jsx10(StatusCell, { value: status })
+            ]
+          },
+          status
+        )) })
+      ] }) })
+    ] });
+  }
   if (filterVariant === "select") {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       Select,
       {
         value: columnFilterValue ?? "",
         onValueChange: (value) => column.setFilterValue(value === "__all__" ? void 0 : value),
         children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx10(
             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"
+                "border-[hsl(var(--lux-filter-border))]",
+                "bg-[hsl(var(--lux-filter-background))]",
+                "text-[hsl(var(--lux-filter-foreground))]"
               ),
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx5(SelectValue, { placeholder: "All" })
+              children: /* @__PURE__ */ jsx10(SelectValue, { placeholder: "All" })
             }
           ),
-          /* @__PURE__ */ jsxs2(SelectContent, { children: [
-            /* @__PURE__ */ jsx5(SelectItem, { value: "__all__", children: "All" }),
-            sortedUniqueValues.map((value) => /* @__PURE__ */ jsx5(SelectItem, { value, children: value }, value))
+          /* @__PURE__ */ jsxs3(SelectContent, { children: [
+            /* @__PURE__ */ jsx10(SelectItem, { value: "__all__", children: "All" }),
+            sortedUniqueValues.map((value) => /* @__PURE__ */ jsx10(SelectItem, { value, children: value }, value))
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx10(
     Input,
     {
       type: "text",
@@ -314,10 +940,10 @@ function ColumnFilter({ column }) {
       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"
+        "border-[hsl(var(--lux-filter-border))]",
+        "bg-[hsl(var(--lux-filter-background))]",
+        "text-[hsl(var(--lux-filter-foreground))]",
+        "placeholder:text-[hsl(var(--lux-toolbar-input-placeholder))]"
       ),
       onClick: (e) => e.stopPropagation()
     }
@@ -327,13 +953,13 @@ function ColumnFilter({ column }) {
 // src/components/lux-table/pagination.tsx
 import {
   ChevronsLeft,
-  ChevronLeft,
-  ChevronRight,
+  ChevronLeft as ChevronLeft2,
+  ChevronRight as ChevronRight2,
   ChevronsRight
 } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 function PaginationButton({ onClick, disabled, title, children }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       className: cn(
@@ -341,6 +967,7 @@ function PaginationButton({ onClick, disabled, title, children }) {
         "h-9 w-9",
         "border border-slate-200 dark:border-slate-800",
         "bg-white dark:bg-slate-950",
+        "text-slate-900 dark:text-slate-100",
         "hover:bg-slate-100 dark:hover:bg-slate-800",
         "disabled:pointer-events-none disabled:opacity-50",
         "transition-colors"
@@ -353,7 +980,7 @@ function PaginationButton({ onClick, disabled, title, children }) {
   );
 }
 function PageNumberButton({ pageNum, isActive, onClick }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       onClick,
@@ -361,7 +988,7 @@ function PageNumberButton({ pageNum, isActive, onClick }) {
         "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"
+        isActive ? "bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 border border-slate-900 dark:border-slate-100" : "border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800"
       ),
       children: pageNum + 1
     }
@@ -395,22 +1022,22 @@ function TablePagination({ table }) {
     }
     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 }),
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 px-2 py-3", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "text-sm text-[hsl(var(--lux-table-cell-muted))]", children: [
+        /* @__PURE__ */ jsx11("span", { className: "font-medium text-[hsl(var(--lux-table-foreground))]", children: startRow }),
         "-",
-        /* @__PURE__ */ jsx6("span", { className: "font-medium text-slate-700 dark:text-slate-300", children: endRow }),
+        /* @__PURE__ */ jsx11("span", { className: "font-medium text-[hsl(var(--lux-table-foreground))]", children: endRow }),
         " ",
         "of",
         " ",
-        /* @__PURE__ */ jsx6("span", { className: "font-medium text-slate-700 dark:text-slate-300", children: totalRows }),
+        /* @__PURE__ */ jsx11("span", { className: "font-medium text-[hsl(var(--lux-table-foreground))]", 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(
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx11("span", { className: "text-sm text-[hsl(var(--lux-table-cell-muted))]", children: "Rows per page:" }),
+        /* @__PURE__ */ jsx11(
           "select",
           {
             value: pageSize,
@@ -420,40 +1047,40 @@ function TablePagination({ table }) {
             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",
+              "px-3 py-1 text-sm text-slate-900 dark:text-slate-100",
               "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))
+            children: [10, 20, 30, 50, 100].map((size) => /* @__PURE__ */ jsx11("option", { value: size, children: size }, size))
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx11(
         PaginationButton,
         {
           onClick: () => table.setPageIndex(0),
           disabled: !table.getCanPreviousPage(),
           title: "First page",
-          children: /* @__PURE__ */ jsx6(ChevronsLeft, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx11(ChevronsLeft, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx11(
         PaginationButton,
         {
           onClick: () => table.previousPage(),
           disabled: !table.getCanPreviousPage(),
           title: "Previous page",
-          children: /* @__PURE__ */ jsx6(ChevronLeft, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx11(ChevronLeft2, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-1", children: getPageNumbers().map((page, idx) => {
+      /* @__PURE__ */ jsx11("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}`);
+          return /* @__PURE__ */ jsx11("span", { className: "px-2 text-[hsl(var(--lux-table-cell-muted))]", children: "..." }, `ellipsis-${idx}`);
         }
         const pageNum = page;
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx11(
           PageNumberButton,
           {
             pageNum,
@@ -463,22 +1090,22 @@ function TablePagination({ table }) {
           pageNum
         );
       }) }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx11(
         PaginationButton,
         {
           onClick: () => table.nextPage(),
           disabled: !table.getCanNextPage(),
           title: "Next page",
-          children: /* @__PURE__ */ jsx6(ChevronRight, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx11(ChevronRight2, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx11(
         PaginationButton,
         {
           onClick: () => table.setPageIndex(table.getPageCount() - 1),
           disabled: !table.getCanNextPage(),
           title: "Last page",
-          children: /* @__PURE__ */ jsx6(ChevronsRight, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx11(ChevronsRight, { className: "h-4 w-4" })
         }
       )
     ] })
@@ -486,7 +1113,7 @@ function TablePagination({ table }) {
 }
 
 // src/components/lux-table/table-toolbar.tsx
-import * as React6 from "react";
+import * as React8 from "react";
 import {
   Search,
   Filter,
@@ -498,116 +1125,65 @@ import {
   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,
+// src/components/ui/dropdown-menu.tsx
+import * as React7 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check as Check2, ChevronRight as ChevronRight3, Circle } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs5 } 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 = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
+  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",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx8(ChevronRight2, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx12(ChevronRight3, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var DropdownMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   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",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground 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",
       className
     ),
     ...props
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx8(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
+var DropdownMenuContent = React7.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
   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",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground 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",
       className
     ),
     ...props
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React5.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
+var DropdownMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx12(
   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",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -615,40 +1191,40 @@ var DropdownMenuItem = React5.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React5.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs4(
+var DropdownMenuCheckboxItem = React7.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs5(
   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",
+      "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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-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" }) }) }),
+      /* @__PURE__ */ jsx12("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(Check2, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+var DropdownMenuRadioItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
   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",
+      "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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-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" }) }) }),
+      /* @__PURE__ */ jsx12("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(Circle, { className: "h-2 w-2 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React5.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
+var DropdownMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx12(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -661,11 +1237,11 @@ var DropdownMenuLabel = React5.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var DropdownMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className),
+    className: cn("-mx-1 my-1 h-px bg-border", className),
     ...props
   }
 ));
@@ -674,7 +1250,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx12(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest opacity-60", className),
@@ -685,7 +1261,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/lux-table/table-toolbar.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function TableToolbar({
   table,
   showFiltering = true,
@@ -695,35 +1271,35 @@ function TableToolbar({
   showColumnVisibility = true,
   className
 }) {
-  const [globalFilter, setGlobalFilter] = React6.useState("");
+  const [globalFilter, setGlobalFilter] = React8.useState("");
   const hidableColumns = table.getAllColumns().filter((column) => column.getCanHide() && column.id !== "__selection__");
   const hiddenColumns = hidableColumns.filter((column) => !column.getIsVisible());
-  const handleGlobalSearch = React6.useCallback(
+  const handleGlobalSearch = React8.useCallback(
     (value) => {
       setGlobalFilter(value);
       table.setGlobalFilter(value);
     },
     [table]
   );
-  const handleResetVisibility = React6.useCallback(() => {
+  const handleResetVisibility = React8.useCallback(() => {
     table.resetColumnVisibility();
   }, [table]);
-  const handleShowAllColumns = React6.useCallback(() => {
+  const handleShowAllColumns = React8.useCallback(() => {
     hidableColumns.forEach((column) => {
       column.toggleVisibility(true);
     });
   }, [hidableColumns]);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "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",
+        "flex flex-wrap items-center gap-2 p-3 rounded-lg border border-[hsl(var(--lux-toolbar-border))] bg-[hsl(var(--lux-toolbar-background))]",
         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(
+        showGlobalSearch && /* @__PURE__ */ jsxs6("div", { className: "relative flex-1 min-w-[200px] max-w-sm", children: [
+          /* @__PURE__ */ jsx13(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[hsl(var(--lux-toolbar-icon))]" }),
+          /* @__PURE__ */ jsx13(
             "input",
             {
               type: "text",
@@ -731,55 +1307,55 @@ function TableToolbar({
               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",
+                "w-full h-9 pl-9 pr-3 rounded-md border border-[hsl(var(--lux-toolbar-input-border))]",
+                "bg-[hsl(var(--lux-toolbar-input-background))] text-sm text-[hsl(var(--lux-toolbar-input-foreground))]",
+                "placeholder:text-[hsl(var(--lux-toolbar-input-placeholder))]",
+                "focus:outline-none focus:ring-2 focus:ring-[hsl(var(--lux-focus-ring))]/50 focus:border-[hsl(var(--lux-focus-ring))]",
                 "transition-colors"
               )
             }
           ),
-          globalFilter && /* @__PURE__ */ jsx9(
+          globalFilter && /* @__PURE__ */ jsx13(
             "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" })
+              className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-[hsl(var(--lux-table-row-hover))] transition-colors",
+              children: /* @__PURE__ */ jsx13(FilterX, { className: "h-3 w-3 text-[hsl(var(--lux-toolbar-icon))]" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 ml-auto", children: [
-          showFiltering && onFilteringToggle && /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 ml-auto", children: [
+          showFiltering && onFilteringToggle && /* @__PURE__ */ jsx13(
             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" })
+              className: "gap-2 bg-white dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800",
+              children: filteringEnabled ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+                /* @__PURE__ */ jsx13(FilterX, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx13("span", { className: "hidden sm:inline", children: "Hide Filters" })
+              ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+                /* @__PURE__ */ jsx13(Filter, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx13("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" })
+          showColumnVisibility && /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx13(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(Button, { variant: "outline", size: "sm", className: "gap-2 bg-white dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800", children: [
+              /* @__PURE__ */ jsx13(Columns3, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx13("span", { className: "hidden sm:inline", children: "Columns" }),
+              hiddenColumns.length > 0 && /* @__PURE__ */ jsx13("span", { className: "ml-1 flex h-5 w-5 items-center justify-center rounded-full bg-[hsl(var(--lux-focus-ring))] text-[10px] font-medium text-white", children: hiddenColumns.length }),
+              /* @__PURE__ */ jsx13(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" }),
+            /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "end", className: "w-56 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800", children: [
+              /* @__PURE__ */ jsxs6(DropdownMenuLabel, { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx13(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(
+              /* @__PURE__ */ jsx13(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [
+                /* @__PURE__ */ jsxs6(
                   Button,
                   {
                     variant: "ghost",
@@ -788,12 +1364,12 @@ function TableToolbar({
                     disabled: hiddenColumns.length === 0,
                     className: "h-7 flex-1 text-xs",
                     children: [
-                      /* @__PURE__ */ jsx9(Eye, { className: "mr-1 h-3 w-3" }),
+                      /* @__PURE__ */ jsx13(Eye, { className: "mr-1 h-3 w-3" }),
                       "Show All"
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs5(
+                /* @__PURE__ */ jsxs6(
                   Button,
                   {
                     variant: "ghost",
@@ -801,33 +1377,33 @@ function TableToolbar({
                     onClick: handleResetVisibility,
                     className: "h-7 flex-1 text-xs",
                     children: [
-                      /* @__PURE__ */ jsx9(RotateCcw, { className: "mr-1 h-3 w-3" }),
+                      /* @__PURE__ */ jsx13(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) => {
+              /* @__PURE__ */ jsx13(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsx13("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(
+                return /* @__PURE__ */ jsx13(
                   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" }),
+                    children: /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+                      column.getIsVisible() ? /* @__PURE__ */ jsx13(Eye, { className: "h-3.5 w-3.5 text-[hsl(var(--lux-status-active-bg))]" }) : /* @__PURE__ */ jsx13(EyeOff, { className: "h-3.5 w-3.5 text-[hsl(var(--lux-toolbar-icon))]" }),
                       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 > 0 && /* @__PURE__ */ jsxs6(Fragment, { children: [
+                /* @__PURE__ */ jsx13(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxs6("div", { className: "px-2 py-1.5 text-xs text-[hsl(var(--lux-table-cell-muted))]", children: [
                   hiddenColumns.length,
                   " column(s) hidden"
                 ] })
@@ -840,15 +1416,51 @@ function TableToolbar({
   );
 }
 
+// src/components/lux-table/sortable-header.tsx
+import { flexRender } from "@tanstack/react-table";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } 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__ */ jsx14(Fragment2, { children: headerContent });
+  }
+  return /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex items-center gap-1.5 w-full text-left font-medium group",
+        "hover:text-[hsl(var(--lux-table-foreground))]",
+        "transition-all duration-200",
+        "-ml-2 px-2 py-1 rounded-md",
+        "hover:bg-[hsl(var(--lux-table-row-hover))]",
+        isSorted && "text-[hsl(var(--lux-sort-sorted-text))]"
+      ),
+      onClick: header.column.getToggleSortingHandler(),
+      children: [
+        headerContent,
+        showSortIndex && isSorted && sortIndex > 0 && /* @__PURE__ */ jsx14("span", { className: "ml-0.5 text-[10px] font-bold text-[hsl(var(--lux-sort-sorted-text))] bg-[hsl(var(--lux-sort-sorted-text))]/10 rounded-full w-4 h-4 flex items-center justify-center ring-1 ring-[hsl(var(--lux-sort-sorted-text))]/20", 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 jsx15 } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx15(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -857,387 +1469,64 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx15(
         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__ */ jsx15(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,
-  sorting: controlledSorting,
-  onSortingChange,
-  rowSelection: controlledRowSelection,
-  onRowSelectionChange,
-  onSelectedRowsChange,
-  getRowId
+// src/components/cell-renderers/progress-cell.tsx
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function ProgressCell({
+  value,
+  barColor = "bg-[hsl(var(--lux-progress-bar))]",
+  bgColor = "bg-[hsl(var(--lux-progress-bg))]",
+  showLabel = false,
+  className
 }) {
-  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: 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(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    initialState: {
-      pagination: {
-        pageSize: options?.pageSize ?? 10
-      }
-    }
-  });
-  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,
+  const clampedValue = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsxs8("div", { className: `flex items-center gap-2 ${className || ""}`, children: [
+    /* @__PURE__ */ jsx16("div", { className: `w-full rounded-full h-2.5 ${bgColor}`, children: /* @__PURE__ */ jsx16(
+      "div",
       {
-        table,
-        showFiltering: options?.filtering !== void 0,
-        filteringEnabled: filteringVisible,
-        onFilteringToggle: setFilteringVisible,
-        showGlobalSearch,
-        showColumnVisibility
+        className: `${barColor} h-2.5 rounded-full transition-all`,
+        style: { width: `${clampedValue}%` }
       }
-    ),
-    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: 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__ */ jsx11(TableRow, { children: /* @__PURE__ */ jsx11(TableCell, { colSpan: visibleColumnCount, className: "h-24 text-center", children: "No results." }) }) })
-    ] }) }),
-    options?.pagination && /* @__PURE__ */ jsx11(TablePagination, { table })
+    ) }),
+    showLabel && /* @__PURE__ */ jsxs8("span", { className: "text-xs text-[hsl(var(--lux-progress-text))] w-8", children: [
+      value,
+      "%"
+    ] })
   ] });
 }
 
-// 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
+// src/components/cell-renderers/boolean-cell.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function BooleanCell({
+  value,
+  trueLabel = "Yes",
+  falseLabel = "No",
+  trueColor = "text-[hsl(var(--lux-boolean-true))]",
+  falseColor = "text-[hsl(var(--lux-boolean-false))]"
 }) {
-  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,
-        {
-          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: "-" });
+  return /* @__PURE__ */ jsx17("span", { className: `font-medium ${value ? trueColor : falseColor}`, children: value ? trueLabel : falseLabel });
+}
+
+// src/components/cell-renderers/date-cell.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function DateCell({ value, format: format2 = "short", locale = "en-US" }) {
+  const date = typeof value === "string" ? new Date(value) : value;
+  if (isNaN(date.getTime())) {
+    return /* @__PURE__ */ jsx18("span", { className: "text-[hsl(var(--lux-table-cell-muted))]", children: "-" });
   }
   let formatted;
-  switch (format) {
+  switch (format2) {
     case "long":
       formatted = date.toLocaleDateString(locale, {
         year: "numeric",
@@ -1258,23 +1547,23 @@ function DateCell({ value, format = "short", locale = "en-US" }) {
     default:
       formatted = date.toLocaleDateString(locale);
   }
-  return /* @__PURE__ */ jsx16("span", { children: formatted });
+  return /* @__PURE__ */ jsx18("span", { className: "text-[hsl(var(--lux-table-cell-foreground))]", children: formatted });
 }
 
 // src/components/cell-renderers/currency-cell.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } 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__ */ jsx19("span", { className: "font-medium text-[hsl(var(--lux-table-cell-foreground))]", children: formatted });
 }
 
 // src/components/cell-renderers/copyable-cell.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { Copy, Check as Check3 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function CopyableCell({
   value,
   feedbackDuration = 2e3,
@@ -1283,8 +1572,8 @@ function CopyableCell({
   tooltip = "Click to copy",
   alwaysShowIcon = false
 }) {
-  const [copied, setCopied] = React8.useState(false);
-  const [isHovered, setIsHovered] = React8.useState(false);
+  const [copied, setCopied] = React9.useState(false);
+  const [isHovered, setIsHovered] = React9.useState(false);
   const handleCopy = async (e) => {
     e.stopPropagation();
     const textToCopy = String(value);
@@ -1318,8 +1607,8 @@ function CopyableCell({
                 ${className || ""}
             `,
       children: [
-        /* @__PURE__ */ jsx18("span", { className: "select-none", children: value }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx20("span", { className: "select-none text-[hsl(var(--lux-table-cell-foreground))]", children: value }),
+        /* @__PURE__ */ jsx20(
           "span",
           {
             className: `
@@ -1327,7 +1616,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__ */ jsx20(Check3, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400" }) : /* @__PURE__ */ jsx20(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,74 +1624,281 @@ function CopyableCell({
   );
 }
 function createCopyableCell(value, options) {
-  return /* @__PURE__ */ jsx18(CopyableCell, { value, ...options });
+  return /* @__PURE__ */ jsx20(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
+// src/lib/cell-config.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var defaultPatterns = {
+  status: ["status", "state", "stage", "phase"],
+  date: ["date", "createdAt", "updatedAt", "joinDate", "startDate", "endDate", "birthDate", "publishedAt"],
+  currency: ["price", "amount", "salary", "cost", "revenue", "total", "balance", "fee"],
+  boolean: ["isActive", "isVerified", "isEnabled", "isDeleted", "isPublished", "isPublic"],
+  copyable: ["id", "email", "phone", "code", "token", "reference", "orderId"]
+};
+function detectFieldTypeFromName(fieldName, patterns) {
+  const name = fieldName.toLowerCase();
+  const mergedPatterns = {
+    status: [...defaultPatterns.status, ...patterns?.status || []],
+    date: [...defaultPatterns.date, ...patterns?.date || []],
+    currency: [...defaultPatterns.currency, ...patterns?.currency || []],
+    boolean: [...defaultPatterns.boolean, ...patterns?.boolean || []],
+    copyable: [...defaultPatterns.copyable, ...patterns?.copyable || []]
+  };
+  if (mergedPatterns.status.some((pattern) => name.includes(pattern.toLowerCase()))) {
+    return "status";
   }
-));
-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
+  if (mergedPatterns.date.some((pattern) => name.includes(pattern.toLowerCase()))) {
+    return "date";
   }
-) }));
-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
+  if (mergedPatterns.currency.some((pattern) => name.includes(pattern.toLowerCase()))) {
+    return "currency";
+  }
+  if (mergedPatterns.boolean.some((pattern) => name.includes(pattern.toLowerCase()))) {
+    return "boolean";
+  }
+  if (mergedPatterns.copyable.some((pattern) => name.includes(pattern.toLowerCase()))) {
+    return "copyable";
+  }
+  return null;
+}
+function detectFieldTypeFromValue(value) {
+  if (value === null || value === void 0) return null;
+  if (typeof value === "boolean") {
+    return "boolean";
+  }
+  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}/.test(value)) {
+    const date = new Date(value);
+    if (!isNaN(date.getTime())) {
+      return "date";
     }
-  )
-);
-Separator3.displayName = SeparatorPrimitive.Root.displayName;
+  }
+  if (value instanceof Date) {
+    return "date";
+  }
+  if (typeof value === "number") {
+    return null;
+  }
+  if (typeof value === "string") {
+    const lowerValue = value.toLowerCase();
+    const statusValues = ["active", "inactive", "pending", "completed", "cancelled", "approved", "rejected"];
+    if (statusValues.includes(lowerValue)) {
+      return "status";
+    }
+  }
+  return null;
+}
+function getFieldConfig(fieldName, value, config) {
+  if (config?.fields?.[fieldName]) {
+    return config.fields[fieldName];
+  }
+  if (config?.autoDetect === false) {
+    return null;
+  }
+  const nameType = detectFieldTypeFromName(fieldName, config?.patterns);
+  if (nameType) {
+    switch (nameType) {
+      case "status":
+        return { type: "status" };
+      case "date":
+        return { type: "date", format: "short" };
+      case "currency":
+        return { type: "currency", currency: "USD" };
+      case "boolean":
+        return { type: "boolean" };
+      case "copyable":
+        return { type: "copyable" };
+    }
+  }
+  const valueType = detectFieldTypeFromValue(value);
+  if (valueType) {
+    switch (valueType) {
+      case "status":
+        return { type: "status" };
+      case "date":
+        return { type: "date", format: "short" };
+      case "boolean":
+        return { type: "boolean" };
+    }
+  }
+  return null;
+}
+var defaultGlobalCellConfig = {
+  defaultStatusColors,
+  autoDetect: true,
+  patterns: defaultPatterns
+};
+function renderCell(context, fieldName, config) {
+  const value = context.getValue();
+  const fieldConfig = getFieldConfig(fieldName, value, config);
+  if (!fieldConfig) {
+    if (value === null || value === void 0) {
+      return /* @__PURE__ */ jsx21("span", { className: "text-[hsl(var(--lux-table-cell-foreground))]", children: "-" });
+    }
+    return /* @__PURE__ */ jsx21("span", { className: "text-[hsl(var(--lux-table-cell-foreground))]", children: String(value) });
+  }
+  if (fieldConfig.type === "custom") {
+    return fieldConfig.render(context);
+  }
+  if (fieldConfig.type === "status") {
+    const statusValue = String(value);
+    const colors = {
+      ...config?.defaultStatusColors,
+      ...defaultStatusColors,
+      ...fieldConfig.colors
+    };
+    return /* @__PURE__ */ jsx21(StatusCell, { value: statusValue, colors });
+  }
+  if (fieldConfig.type === "progress") {
+    return /* @__PURE__ */ jsx21(
+      ProgressCell,
+      {
+        value: Number(value),
+        barColor: fieldConfig.barColor,
+        showLabel: fieldConfig.showLabel ?? false
+      }
+    );
+  }
+  if (fieldConfig.type === "boolean") {
+    return /* @__PURE__ */ jsx21(
+      BooleanCell,
+      {
+        value: Boolean(value),
+        trueLabel: fieldConfig.trueLabel,
+        falseLabel: fieldConfig.falseLabel,
+        trueColor: fieldConfig.trueColor,
+        falseColor: fieldConfig.falseColor
+      }
+    );
+  }
+  if (fieldConfig.type === "date") {
+    return /* @__PURE__ */ jsx21(
+      DateCell,
+      {
+        value,
+        format: fieldConfig.format,
+        locale: fieldConfig.locale
+      }
+    );
+  }
+  if (fieldConfig.type === "currency") {
+    return /* @__PURE__ */ jsx21(
+      CurrencyCell,
+      {
+        value: Number(value),
+        currency: fieldConfig.currency || "USD",
+        locale: fieldConfig.locale || "en-US"
+      }
+    );
+  }
+  if (fieldConfig.type === "copyable") {
+    return /* @__PURE__ */ jsx21(
+      CopyableCell,
+      {
+        value: String(value),
+        alwaysShowIcon: fieldConfig.alwaysShowIcon,
+        tooltip: fieldConfig.tooltip,
+        onCopy: fieldConfig.onCopy
+      }
+    );
+  }
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx21("span", { className: "text-[hsl(var(--lux-table-cell-foreground))]", children: "-" });
+  }
+  return /* @__PURE__ */ jsx21("span", { className: "text-[hsl(var(--lux-table-cell-foreground))]", children: String(value) });
+}
 
 // src/lib/column-helper.tsx
 import { createColumnHelper as tanstackCreateColumnHelper } from "@tanstack/react-table";
-import { jsx as jsx22 } from "react/jsx-runtime";
+
+// src/components/lux-table/column-header.tsx
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  EyeOff as EyeOff2,
+  MoreVertical,
+  X as X2
+} from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+function LuxDataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  const isSorted = column.getIsSorted();
+  const canSort = column.getCanSort();
+  const SortIndicator = () => {
+    if (isSorted === "desc") {
+      return /* @__PURE__ */ jsx22(ArrowDown, { className: "h-4 w-4 text-[hsl(var(--lux-sort-active))]" });
+    }
+    if (isSorted === "asc") {
+      return /* @__PURE__ */ jsx22(ArrowUp, { className: "h-4 w-4 text-[hsl(var(--lux-sort-active))]" });
+    }
+    if (canSort) {
+      return /* @__PURE__ */ jsx22(ArrowUpDown, { className: "h-4 w-4 text-[hsl(var(--lux-sort-idle))]" });
+    }
+    return null;
+  };
+  if (!canSort) {
+    return /* @__PURE__ */ jsx22("span", { className: cn("text-sm font-medium", className), children: title });
+  }
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx22(SortIndicator, {}),
+    /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium", children: title }),
+    /* @__PURE__ */ jsxs10(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx22(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6 ml-auto opacity-100 focus:opacity-100 data-[state=open]:opacity-100 transition-opacity",
+          children: [
+            /* @__PURE__ */ jsx22(MoreVertical, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx22("span", { className: "sr-only", children: "Column actions" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs10(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800", children: [
+        /* @__PURE__ */ jsxs10(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleSorting(false);
+        }, children: [
+          /* @__PURE__ */ jsx22(ArrowUp, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+          "Sort Ascending"
+        ] }),
+        /* @__PURE__ */ jsxs10(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleSorting(true);
+        }, children: [
+          /* @__PURE__ */ jsx22(ArrowDown, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+          "Sort Descending"
+        ] }),
+        isSorted && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+          /* @__PURE__ */ jsx22(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs10(DropdownMenuItem, { onClick: (e) => {
+            e.stopPropagation();
+            column.clearSorting();
+          }, children: [
+            /* @__PURE__ */ jsx22(X2, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+            "Clear sorting"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx22(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs10(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleVisibility(false);
+        }, children: [
+          /* @__PURE__ */ jsx22(EyeOff2, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+          "Hide column"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/lib/column-helper.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
 var toTitleCase = (str) => {
   return str.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
 };
@@ -1418,24 +1914,21 @@ function createColumnHelper() {
         ...column,
         // enableSorting is true by default
         enableSorting: column?.enableSorting !== false,
+        // Pass size if provided
+        size: column?.size,
         // 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,
             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);
-        })
+        // Only add default cell if cell is not explicitly provided
+        // This allows LuxTable's cellConfig to work
+        ...column?.cell ? { cell: column.cell } : {}
       };
       return helper.accessor(accessor, finalColumn);
     },
@@ -1465,7 +1958,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,19 +1984,399 @@ 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 }),
-      cell: cellRenderer || ((info) => {
-        const value = info.getValue();
-        if (value === null || value === void 0) return "-";
-        return String(value);
-      })
+      header: ({ column }) => /* @__PURE__ */ jsx23(LuxDataTableColumnHeader, { column, title: headerText }),
+      // Only add cell if explicitly provided - this allows LuxTable's cellConfig to work
+      ...cellRenderer ? { cell: cellRenderer } : {}
+    });
+  });
+}
+
+// src/components/lux-table/lux-table.tsx
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+function createSelectionColumn() {
+  return {
+    id: "__selection__",
+    header: ({ table }) => /* @__PURE__ */ jsx24(
+      Checkbox,
+      {
+        checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+        onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+        "aria-label": "Select all rows"
+      }
+    ),
+    cell: ({ row }) => /* @__PURE__ */ jsx24(
+      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,
+  cellConfig,
+  sorting: controlledSorting,
+  onSortingChange,
+  rowSelection: controlledRowSelection,
+  onRowSelectionChange,
+  onSelectedRowsChange,
+  getRowId
+}) {
+  const [internalSorting, setInternalSorting] = React10.useState([]);
+  const [columnFilters, setColumnFilters] = React10.useState([]);
+  const [globalFilter, setGlobalFilter] = React10.useState("");
+  const [filteringVisible, setFilteringVisible] = React10.useState(options?.filtering ?? false);
+  const [internalRowSelection, setInternalRowSelection] = React10.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 mergedCellConfig = React10.useMemo(() => {
+    const baseConfig = defaultGlobalCellConfig;
+    if (cellConfig) {
+      return {
+        ...baseConfig,
+        ...cellConfig,
+        fields: {
+          ...cellConfig.fields
+          // User's fields override defaults
+        },
+        patterns: {
+          ...baseConfig.patterns,
+          ...cellConfig.patterns
+          // Merge patterns
+        },
+        defaultStatusColors: {
+          ...baseConfig.defaultStatusColors,
+          ...cellConfig.defaultStatusColors
+          // Merge status colors
+        }
+      };
+    }
+    return baseConfig;
+  }, [cellConfig]);
+  const autoColumns = React10.useMemo(() => {
+    if (columns) return columns;
+    if (!data || data.length === 0) return [];
+    if (typeof data[0] === "object" && data[0] !== null) {
+      const generatedColumns = createColumnsFromData(data);
+      return generatedColumns;
+    }
+    return [];
+  }, [columns, data]);
+  const dateFilterFn = React10.useCallback((row, columnId, filterValue) => {
+    if (!filterValue || !filterValue.from && !filterValue.to) return true;
+    const cellValue = row.getValue(columnId);
+    if (!cellValue) return false;
+    const cellDate = new Date(String(cellValue));
+    if (isNaN(cellDate.getTime())) return false;
+    if (filterValue.from) {
+      const fromDate = new Date(filterValue.from);
+      fromDate.setHours(0, 0, 0, 0);
+      if (cellDate < fromDate) return false;
+    }
+    if (filterValue.to) {
+      const toDate = new Date(filterValue.to);
+      toDate.setHours(23, 59, 59, 999);
+      if (cellDate > toDate) return false;
+    }
+    return true;
+  }, []);
+  const sliderFilterFn = React10.useCallback((row, columnId, filterValue) => {
+    if (!filterValue || filterValue.min === void 0 && filterValue.max === void 0) return true;
+    const cellValue = row.getValue(columnId);
+    const numValue = typeof cellValue === "number" ? cellValue : parseFloat(String(cellValue));
+    if (isNaN(numValue)) return false;
+    if (filterValue.min !== void 0 && numValue < filterValue.min) return false;
+    if (filterValue.max !== void 0 && numValue > filterValue.max) return false;
+    return true;
+  }, []);
+  const statusFilterFn = React10.useCallback((row, columnId, filterValue) => {
+    if (!filterValue || filterValue.length === 0) return true;
+    const cellValue = String(row.getValue(columnId)).toLowerCase();
+    return filterValue.some((status) => status.toLowerCase() === cellValue);
+  }, []);
+  const tableColumns = React10.useMemo(() => {
+    let processedColumns = autoColumns.map((col) => {
+      const accessorKey = "accessorKey" in col ? col.accessorKey : void 0;
+      const fieldName = accessorKey ? String(accessorKey) : "id" in col ? String(col.id) : void 0;
+      let filterFn = col.filterFn;
+      const meta = col.meta || {};
+      if (fieldName && !meta.filterVariant) {
+        const fieldNameLower = fieldName.toLowerCase();
+        const datePatterns = ["date", "createdat", "updatedat", "joindate", "startdate", "enddate", "birthdate", "publishedat"];
+        if (datePatterns.some((pattern) => fieldNameLower.includes(pattern))) {
+          meta.filterVariant = "date";
+          filterFn = dateFilterFn;
+        }
+        const statusPatterns = ["status", "state", "stage", "phase"];
+        if (statusPatterns.some((pattern) => fieldNameLower.includes(pattern))) {
+          meta.filterVariant = "status";
+          filterFn = statusFilterFn;
+        }
+        const numericPatterns = ["salary", "price", "amount", "cost", "revenue", "total", "balance", "fee"];
+        if (numericPatterns.some((pattern) => fieldNameLower.includes(pattern))) {
+          meta.filterVariant = "slider";
+          filterFn = sliderFilterFn;
+        }
+      } else if (meta.filterVariant) {
+        if (meta.filterVariant === "date" && !filterFn) {
+          filterFn = dateFilterFn;
+        } else if (meta.filterVariant === "slider" && !filterFn) {
+          filterFn = sliderFilterFn;
+        } else if (meta.filterVariant === "status" && !filterFn) {
+          filterFn = statusFilterFn;
+        }
+      }
+      if (mergedCellConfig && fieldName) {
+        const sampleValue = data && data.length > 0 ? data[0]?.[fieldName] : void 0;
+        const fieldConfig = getFieldConfig(fieldName, sampleValue, mergedCellConfig);
+        if (fieldConfig) {
+          return {
+            ...col,
+            cell: (context) => renderCell(context, fieldName, mergedCellConfig),
+            filterFn,
+            meta
+          };
+        }
+      }
+      if (col.cell || filterFn || meta.filterVariant) {
+        return {
+          ...col,
+          filterFn,
+          meta
+        };
+      }
+      return {
+        ...col,
+        filterFn,
+        meta
+      };
     });
+    if (showCheckbox && enableRowSelection) {
+      return [createSelectionColumn(), ...processedColumns];
+    }
+    return processedColumns;
+  }, [autoColumns, showCheckbox, enableRowSelection, mergedCellConfig, data, dateFilterFn, sliderFilterFn, statusFilterFn]);
+  const handleRowSelectionChange = React10.useCallback(
+    (updater) => {
+      const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+      if (isControlledRowSelection && onRowSelectionChange) {
+        onRowSelectionChange(newSelection);
+      } else {
+        setInternalRowSelection(newSelection);
+      }
+    },
+    [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,
+      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(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    initialState: {
+      pagination: {
+        pageSize: options?.pageSize ?? 10
+      }
+    }
   });
+  React10.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__ */ jsxs11("div", { className: cn("w-full space-y-4", className), children: [
+    showToolbar && /* @__PURE__ */ jsx24(
+      TableToolbar,
+      {
+        table,
+        showFiltering: options?.filtering !== void 0,
+        filteringEnabled: filteringVisible,
+        onFilteringToggle: setFilteringVisible,
+        showGlobalSearch,
+        showColumnVisibility
+      }
+    ),
+    enableRowSelection && Object.keys(rowSelection).length > 0 && /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 px-4 py-2 text-sm bg-[hsl(var(--lux-selection-info-background))] text-[hsl(var(--lux-selection-info-foreground))] rounded-lg border border-[hsl(var(--lux-selection-info-border))]", children: [
+      /* @__PURE__ */ jsx24(CheckCircle2, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxs11("span", { children: [
+        /* @__PURE__ */ jsx24("strong", { children: Object.keys(rowSelection).length }),
+        " rows selected",
+        table.getFilteredRowModel().rows.length > 0 && /* @__PURE__ */ jsxs11("span", { className: "opacity-80", children: [
+          " / ",
+          table.getFilteredRowModel().rows.length,
+          " total"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx24(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleRowSelectionChange({}),
+          className: "ml-auto text-xs hover:opacity-80 underline underline-offset-2",
+          children: "Clear selection"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "rounded-md border border-[hsl(var(--lux-table-border))] bg-[hsl(var(--lux-table-background))] overflow-hidden", children: /* @__PURE__ */ jsxs11(Table, { children: [
+      /* @__PURE__ */ jsxs11(TableHeader, { children: [
+        table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(TableRow, { children: headerGroup.headers.map((header) => {
+          const isSelectionColumn = header.id === "__selection__";
+          return /* @__PURE__ */ jsx24(
+            TableHead,
+            {
+              style: isSelectionColumn ? { width: 40, padding: "0 12px" } : void 0,
+              children: header.isPlaceholder ? null : isSelectionColumn ? flexRender2(
+                header.column.columnDef.header,
+                header.getContext()
+              ) : /* @__PURE__ */ jsx24(
+                SortableHeader,
+                {
+                  header,
+                  showSortIndex: enableMultiSort && sorting.length > 1
+                }
+              )
+            },
+            header.id
+          );
+        }) }, headerGroup.id)),
+        filteringVisible && /* @__PURE__ */ jsx24(TableRow, { className: "bg-[hsl(var(--lux-filter-background))]", children: table.getHeaderGroups()[0]?.headers.map((header) => {
+          const isSelectionColumn = header.id === "__selection__";
+          return /* @__PURE__ */ jsx24(TableHead, { className: "py-2", children: !isSelectionColumn && header.column.getCanFilter() ? /* @__PURE__ */ jsx24(ColumnFilter, { column: header.column, data }) : null }, `filter-${header.id}`);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx24(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx24(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          className: cn(
+            enableRowSelection && "cursor-pointer",
+            row.getIsSelected() && "bg-[hsl(var(--lux-selection-background))]"
+          ),
+          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__ */ jsx24(
+              TableCell,
+              {
+                style: isSelectionColumn ? { width: 40, padding: "0 12px" } : void 0,
+                onClick: isSelectionColumn ? (e) => e.stopPropagation() : void 0,
+                children: flexRender2(cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            );
+          })
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx24(TableRow, { children: /* @__PURE__ */ jsx24(TableCell, { colSpan: visibleColumnCount, className: "h-24 text-center", children: "No results." }) }) })
+    ] }) }),
+    options?.pagination && /* @__PURE__ */ jsx24(TablePagination, { table })
+  ] });
 }
 
+// src/components/ui/label.tsx
+import * as React11 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var labelVariants = cva2(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label3 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label3.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/ui/separator.tsx
+import * as React12 from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Separator3 = React12.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx26(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator3.displayName = SeparatorPrimitive.Root.displayName;
+
 // src/index.ts
 import {
-  flexRender as flexRender2,
+  flexRender as flexRender3,
   getCoreRowModel as getCoreRowModel2,
   getPaginationRowModel as getPaginationRowModel2,
   getSortedRowModel as getSortedRowModel2,
@@ -1569,10 +2442,13 @@ export {
   createColumnHelper,
   createColumnsFromData,
   createCopyableCell,
+  defaultGlobalCellConfig,
   defaultStatusColors,
-  flexRender2 as flexRender,
+  flexRender3 as flexRender,
   getCoreRowModel2 as getCoreRowModel,
+  getFieldConfig,
   getFilteredRowModel2 as getFilteredRowModel,
   getPaginationRowModel2 as getPaginationRowModel,
-  getSortedRowModel2 as getSortedRowModel
+  getSortedRowModel2 as getSortedRowModel,
+  renderCell
 };