@nextlyhq/ui 0.0.2-alpha.33 → 0.0.2-alpha.35

package/dist/index.mjs

@@ -6,8 +6,8 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Root as Root$2 } from '@radix-ui/react-label';
-import { Info, Minus, Check, ChevronDown, X, ChevronRight, Circle, Search, Loader2, ChevronUp, XCircle, AlertTriangle, AlertCircle, CheckCircle2, FileQuestion, ChevronsLeft, ChevronLeft, ChevronsRight } from 'lucide-react';
-import { Content, Provider, Root, Trigger } from '@radix-ui/react-tooltip';
+import { Info, Minus, Check, ChevronDown, X, ChevronRight, Circle, Search, Loader2, ChevronUp, XCircle, AlertTriangle, AlertCircle, CheckCircle2, FileQuestion } from 'lucide-react';
+import { Portal, Content, Provider, Root, Trigger } from '@radix-ui/react-tooltip';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -43,13 +43,13 @@ var buttonVariants = cva(
         link: "text-primary border border-transparent underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-10 px-6 py-2",
-        sm: "h-9 px-4 text-[13px]",
-        md: "h-10 px-6 text-sm",
-        lg: "h-11 px-8 text-base",
-        icon: "h-10 w-10 p-0",
-        "icon-sm": "h-9 w-9 p-0",
-        "icon-lg": "h-11 w-11 p-0"
+        default: "h-[var(--nx-control-height)] px-6 py-2",
+        sm: "h-[var(--nx-control-height-md)] px-4 text-[13px]",
+        md: "h-[var(--nx-control-height)] px-6 text-sm",
+        lg: "h-[var(--nx-control-height-lg)] px-8 text-base",
+        icon: "h-[var(--nx-control-height)] w-[var(--nx-control-height)] p-0",
+        "icon-sm": "h-[var(--nx-control-height-md)] w-[var(--nx-control-height-md)] p-0",
+        "icon-lg": "h-[var(--nx-control-height-lg)] w-[var(--nx-control-height-lg)] p-0"
       }
     },
     defaultVariants: {
@@ -86,13 +86,13 @@ var Button = forwardRef(
 );
 Button.displayName = "Button";
 var inputVariants = cva(
-  "file:text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-none border border-input bg-background text-sm transition-all duration-150 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus:ring-0 focus:ring-offset-0 focus:outline-none focus:!border-primary focus-visible:!border-primary aria-invalid:border-destructive aria-invalid:focus:!border-destructive data-[invalid=true]:border-destructive data-[invalid=true]:focus:!border-destructive",
+  "file:text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-none border border-input bg-background text-sm transition-all duration-150 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus:ring-0 focus:ring-offset-0 focus:outline-none focus:border-primary! focus-visible:border-primary! aria-invalid:border-destructive aria-invalid:focus:border-destructive! data-[invalid=true]:border-destructive data-[invalid=true]:focus:border-destructive!",
   {
     variants: {
       size: {
-        sm: "h-8 px-2.5 py-2 text-sm",
-        default: "h-10 px-3 py-2.5 text-sm",
-        lg: "h-11 px-4 py-3 text-base"
+        sm: "h-[var(--nx-control-height-sm)] px-2.5 py-2 text-sm",
+        default: "h-[var(--nx-control-height)] px-3 py-2.5 text-sm",
+        lg: "h-[var(--nx-control-height-lg)] px-4 py-3 text-base"
       }
     },
     defaultVariants: {
@@ -121,8 +121,8 @@ var Textarea = forwardRef(({ className, ...props }, ref) => {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex min-h-[80px] w-full rounded-none border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground placeholder:opacity-50 transition-all duration-200 focus:!border-primary focus-visible:!border-primary focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 resize-y",
-        "aria-invalid:border-destructive aria-invalid:focus:!border-destructive",
+        "flex min-h-[80px] w-full rounded-none border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground placeholder:opacity-50 transition-all duration-200 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 resize-y",
+        "aria-invalid:border-destructive aria-invalid:focus:border-destructive!",
         className
       ),
       ref,
@@ -144,22 +144,41 @@ function Label({ className, ...props }) {
     }
   );
 }
+var PortalContext = createContext({ container: null });
+function PortalProvider({ container, children }) {
+  return /* @__PURE__ */ jsx(PortalContext.Provider, { value: { container }, children });
+}
+function usePortalContainer() {
+  const { container } = useContext(PortalContext);
+  return container ?? void 0;
+}
 var TooltipProvider = Provider;
 var Tooltip = Root;
 var TooltipTrigger = Trigger;
-var TooltipContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
-  Content,
-  {
-    ref,
-    sideOffset,
-    "data-slot": "tooltip-content",
-    className: cn(
-      "z-50 overflow-hidden rounded-none px-3 py-1.5 text-xs shadow-lg  border border-primary/5 bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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
-  }
-));
+var TooltipContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+  const portalContainer = usePortalContainer();
+  return (
+    // Portalled for the same reason as every other overlay here, plus one
+    // specific to the tooltip: the positioner measures against the nearest
+    // containing block, and it counts `container-type` as one while the
+    // browser does not. Left inline under a `@container` element, the content
+    // is offset by that element's own position. Portalling lifts it out of any
+    // such ancestor, so the two agree again.
+    /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+      Content,
+      {
+        ref,
+        sideOffset,
+        "data-slot": "tooltip-content",
+        className: cn(
+          "z-50 overflow-hidden rounded-none px-3 py-1.5 text-xs shadow-lg  border border-border bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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
+      }
+    ) })
+  );
+});
 TooltipContent.displayName = Content.displayName;
 var FormLabelWithTooltip = React6.forwardRef(
   ({
@@ -194,7 +213,7 @@ var FormLabelWithTooltip = React6.forwardRef(
           {
             side: "right",
             className: cn(
-              "max-w-[250px] text-[12px] break-words relative z-[100] shadow-md  border border-primary/5 bg-black text-white dark:bg-zinc-800 dark:text-zinc-50 px-3 py-2 rounded-none",
+              "max-w-[250px] text-[12px] break-words relative z-[100] shadow-md  border border-border bg-primary text-primary-foreground px-3 py-2 rounded-none",
               tooltipClassName
             ),
             children: description
@@ -210,12 +229,14 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary/5 text-slate-900 dark:bg-slate-800 dark:text-slate-100",
-        primary: "bg-primary/5 text-primary dark:bg-primary/20 dark:text-primary-foreground/90",
-        success: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-100",
-        warning: "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-100",
-        destructive: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-100",
-        outline: "border !border-primary/5 bg-transparent text-slate-700 dark:text-slate-300 dark:!border-primary/5"
+        // Clear, legible chip in both modes (was bg-primary/5 at ~5% opacity,
+        // which was nearly invisible on dark backgrounds).
+        default: "bg-muted text-foreground",
+        primary: "bg-primary/10 text-primary dark:bg-primary/20",
+        success: "bg-success-100 text-success-700 dark:bg-success-900 dark:text-success-100",
+        warning: "bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-100",
+        destructive: "bg-destructive-100 text-destructive-700 dark:bg-destructive-900 dark:text-destructive-100",
+        outline: "border border-border! bg-transparent text-foreground dark:text-muted-foreground dark:border-border!"
       }
     },
     defaultVariants: {
@@ -234,7 +255,7 @@ function Badge({ className, variant = "default", ...props }) {
   );
 }
 var cardVariants = cva(
-  "bg-card text-foreground rounded-none  border border-primary/5   transition-all duration-200",
+  "bg-card text-foreground rounded-none  border border-border   transition-all duration-200",
   {
     variants: {
       variant: {
@@ -271,7 +292,7 @@ var CardHeader = forwardRef(
         "data-slot": "card-header",
         className: cn(
           "flex flex-col p-4",
-          !noBorder && "border-b border-primary/5",
+          !noBorder && "border-b border-border",
           className
         ),
         ...props
@@ -344,7 +365,7 @@ var CardFooter = forwardRef(
         ref,
         "data-slot": "card-footer",
         className: cn(
-          "flex items-center px-6 py-4  border-t border-primary/5 bg-primary/5",
+          "flex items-center px-6 py-4  border-t border-border bg-primary/5",
           className
         ),
         ...props
@@ -354,14 +375,14 @@ var CardFooter = forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 var alertVariants = cva(
-  "relative flex items-start gap-3 rounded-none  border border-primary/5 p-4 text-sm   transition-colors duration-150",
+  "relative flex items-start gap-3 rounded-none  border border-border p-4 text-sm   transition-colors duration-150",
   {
     variants: {
       variant: {
-        info: "border-primary/5 bg-primary/5 text-primary dark:border-primary/30 dark:bg-primary/5 dark:text-primary-foreground/90",
-        success: "border-green-200 bg-green-50 text-green-900 dark:border-green-900 dark:bg-green-950 dark:text-green-100",
-        warning: "border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100",
-        destructive: "border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100"
+        info: "border-border bg-primary/5 text-primary dark:border-primary/30 dark:bg-primary/5 dark:text-primary-foreground/90",
+        success: "border-success-200 bg-success-50 text-success-900 border-l-4 border-l-success dark:border-success-900 dark:bg-success-950 dark:text-success-100",
+        warning: "border-warning-200 bg-warning-50 text-warning-900 border-l-4 border-l-warning dark:border-warning-900 dark:bg-warning-950 dark:text-warning-100",
+        destructive: "border-destructive-200 bg-destructive-50 text-destructive-900 border-l-4 border-l-destructive dark:border-destructive-900 dark:bg-destructive-950 dark:text-destructive-100"
       }
     },
     defaultVariants: {
@@ -457,7 +478,7 @@ var progressVariants = cva("h-full rounded-none transition-all", {
   variants: {
     variant: {
       default: "bg-primary-500",
-      success: "bg-green-500",
+      success: "bg-success-500",
       error: "bg-destructive"
     }
   },
@@ -511,7 +532,22 @@ var Checkbox = forwardRef(({ className, indeterminate, ...props }, ref) => /* @_
     ref,
     "data-slot": "checkbox",
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-none border border-primary/5 ring-offset-background focus:!border-primary focus-visible:!border-primary focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:!border-destructive aria-invalid:focus-visible:!border-destructive disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary transition-all duration-200",
+      // Unchecked outline uses primary/50: measured 3.95:1 on the light row and
+      // 5.32:1 on the dark one. WCAG 1.4.11 asks 3:1 of a control's boundary and
+      // the earlier values did not reach it — primary/40 came out at 2.85, close
+      // enough to look deliberate and still short. Callers must not override the
+      // border: passing `border-border` puts the divider token here, which
+      // measured 1.35:1 and 1.14:1, and a divider is meant to go unnoticed.
+      // Checked and indeterminate share the filled appearance; declaring both
+      // here keeps the control self-sufficient without host overrides.
+      //
+      // The box stays 16px and the target does not: `before` stretches an
+      // invisible 24px square from the centre, which is WCAG 2.5.8's floor.
+      // The exemption for a bare browser checkbox does not cover a styled one,
+      // and this is styled. Growing the box instead would make every dense
+      // table heavier for a rule about pointers, so the box and the thing you
+      // can hit are allowed to differ.
+      "peer relative h-4 w-4 shrink-0 rounded-none border border-primary/50 ring-offset-background before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary transition-all duration-200",
       className
     ),
     ...props,
@@ -544,7 +580,9 @@ var RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
       ref,
       "data-slot": "radio-group-item",
       className: cn(
-        "peer h-4 w-4 shrink-0 rounded-none border border-primary/5 bg-background cursor-pointer transition-all duration-150 focus:!border-primary focus-visible:!border-primary focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:!border-destructive aria-invalid:focus-visible:!border-destructive disabled:cursor-not-allowed disabled:opacity-50 hover:border-primary/30 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
+        // Unchecked outline uses primary/40 (clearly visible) instead of primary/5
+        // (~5% opacity, effectively invisible); hover strengthens above the resting state.
+        "peer h-4 w-4 shrink-0 rounded-none border border-primary/40 bg-background cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 hover:border-primary/70 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
         className
       ),
       ...props,
@@ -559,9 +597,9 @@ function Switch({ className, ...props }) {
     {
       "data-slot": "switch",
       className: cn(
-        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-none  border border-primary/5 transition-all outline-none focus-visible:border-primary aria-invalid:border-destructive aria-invalid:focus-visible:!border-destructive disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[state=checked]:bg-primary data-[state=checked]:!border-primary",
-        "data-[state=unchecked]:bg-input data-[state=unchecked]:border-primary/5 dark:data-[state=unchecked]:bg-input/80",
+        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-none  border border-border transition-all outline-none focus-visible:border-primary aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-primary data-[state=checked]:border-primary!",
+        "data-[state=unchecked]:bg-input data-[state=unchecked]:border-border dark:data-[state=unchecked]:bg-input/80",
         className
       ),
       ...props,
@@ -606,7 +644,7 @@ var AccordionTrigger = forwardRef(
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-150" })
+        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-150 will-change-transform" })
       ]
     }
   ) })
@@ -618,7 +656,7 @@ var AccordionContent = forwardRef(
     {
       ref,
       "data-slot": "accordion-content",
-      className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className: "overflow-hidden text-sm transition-all will-change-[height] transform-[translateZ(0)] data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
     }
@@ -727,7 +765,7 @@ var TabsTrigger = forwardRef(
       ref,
       "data-slot": "tabs-trigger",
       className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:!border-b-primary data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
         className
       ),
       ...props
@@ -750,14 +788,6 @@ var TabsContent = forwardRef(
   )
 );
 TabsContent.displayName = Content$1.displayName;
-var PortalContext = createContext({ container: null });
-function PortalProvider({ container, children }) {
-  return /* @__PURE__ */ jsx(PortalContext.Provider, { value: { container }, children });
-}
-function usePortalContainer() {
-  const { container } = useContext(PortalContext);
-  return container ?? void 0;
-}
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
@@ -771,7 +801,7 @@ var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffse
       sideOffset,
       "data-slot": "popover-content",
       className: cn(
-        "z-[100] w-72 rounded-none  border border-primary/5 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 origin-[--radix-popover-content-transform-origin]",
+        "z-[100] w-72 rounded-none  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 origin-[--radix-popover-content-transform-origin]",
         className
       ),
       ...props
@@ -820,7 +850,7 @@ var DialogContent = forwardRef(({ className, children, size, ...props }, ref) =>
         ref,
         "data-slot": "dialog-content",
         className: cn(
-          "fixed left-[50%] top-[50%] z-[51] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4  border border-primary/5 bg-background p-6 shadow-xl rounded-none duration-150 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "fixed left-[50%] top-[50%] z-[51] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4  border border-border bg-background p-6 shadow-xl rounded-none duration-150 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           dialogContentVariants({ size }),
           className
         ),
@@ -917,7 +947,7 @@ var AlertDialogContent = forwardRef(({ className, ...props }, ref) => {
       {
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-[51] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  border border-primary/5 bg-background p-6 shadow-xl rounded-none duration-150 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "fixed left-[50%] top-[50%] z-[51] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  border border-border bg-background p-6 shadow-xl rounded-none duration-150 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           className
         ),
         ...props
@@ -1005,12 +1035,14 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var menuItemBase = "cursor-pointer transition-colors data-[highlighted]:bg-muted data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none hover-unified focus:bg-primary/5 focus:text-primary data-[state=open]:bg-primary/5 data-[state=open]:text-primary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none data-[state=open]:bg-muted data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      menuItemBase,
       inset && "pl-8",
       className
     ),
@@ -1027,7 +1059,7 @@ var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-none  border border-primary/5 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-none  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 origin-[--radix-dropdown-menu-content-transform-origin]",
       className
     ),
     ...props
@@ -1042,7 +1074,7 @@ var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, ...pro
       ref,
       sideOffset,
       className: cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-none  border border-primary/5 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-none  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 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       ),
       ...props
@@ -1055,7 +1087,8 @@ var DropdownMenuItem = React6.forwardRef(({ className, inset, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none transition-colors hover-unified focus:bg-primary/5 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex select-none items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      menuItemBase,
       inset && "pl-8",
       className
     ),
@@ -1068,7 +1101,8 @@ var DropdownMenuCheckboxItem = React6.forwardRef(({ className, children, checked
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover-primary-light focus:bg-primary/5 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none",
+      menuItemBase,
       className
     ),
     checked,
@@ -1085,7 +1119,8 @@ var DropdownMenuRadioItem = React6.forwardRef(({ className, children, ...props }
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover-primary-light focus:bg-primary/5 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none",
+      menuItemBase,
       className
     ),
     ...props,
@@ -1143,13 +1178,13 @@ function SelectValue({
   return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 var selectTriggerVariants = cva(
-  "flex w-full items-center justify-between gap-2 rounded-none border border-input bg-background px-3 text-sm text-foreground cursor-pointer transition-all duration-150 focus:!border-primary focus-visible:!border-primary focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 data-[placeholder]:text-muted-foreground aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:!border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+  "flex w-full items-center justify-between gap-2 rounded-none border border-input bg-background px-3 text-sm text-foreground cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 data-[placeholder]:text-muted-foreground aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
   {
     variants: {
       size: {
-        sm: "h-8 text-sm",
-        default: "h-10 text-sm",
-        lg: "h-11 text-base"
+        sm: "h-[var(--nx-control-height-sm)] text-sm",
+        default: "h-[var(--nx-control-height)] text-sm",
+        lg: "h-[var(--nx-control-height-lg)] text-base"
       }
     },
     defaultVariants: {
@@ -1185,7 +1220,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground  border border-primary/5 shadow-none rounded-none z-9999 max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden data-[state=open]:animate-zoom-in-95 data-[state=closed]:animate-zoom-out-95 data-[side=bottom]:animate-slide-in-from-top-2 data-[side=left]:animate-slide-in-from-right-2 data-[side=right]:animate-slide-in-from-left-2 data-[side=top]:animate-slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground  border border-border shadow-none rounded-none z-9999 max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden data-[state=open]:animate-zoom-in-95 data-[state=closed]:animate-zoom-out-95 data-[side=bottom]:animate-slide-in-from-top-2 data-[side=left]:animate-slide-in-from-right-2 data-[side=right]:animate-slide-in-from-left-2 data-[side=top]:animate-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
       ),
@@ -1312,10 +1347,10 @@ var sheetVariants = cva(
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0  border-b border-primary/5 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0  border-t border-primary/5 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4  border-r border-primary/5 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4  border-l border-primary/5 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+        top: "inset-x-0 top-0  border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0  border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4  border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
       }
     },
     defaultVariants: {
@@ -1439,7 +1474,7 @@ var CommandDialog = ({ children, ...props }) => {
           "m-4 sm:m-0",
           // 16px margin on mobile, no margin on desktop
           // Visual
-          "overflow-hidden rounded-none  border border-primary/5 bg-background shadow-xl",
+          "overflow-hidden rounded-none  border border-border bg-background shadow-xl",
           // Animation
           "duration-200",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -1455,7 +1490,7 @@ var CommandDialog = ({ children, ...props }) => {
 var CommandInput = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
   "div",
   {
-    className: "flex items-center  border-b border-primary/5 px-4",
+    className: "flex items-center  border-b border-border px-4",
     "cmdk-input-wrapper": "",
     children: [
       /* @__PURE__ */ jsx(Search, { className: "mr-3 h-5 w-5 shrink-0 text-muted-foreground" }),
@@ -1574,7 +1609,7 @@ var CommandShortcut = forwardRef(
           "text-xs font-mono",
           // Visual
           "text-muted-foreground bg-primary/5",
-          "border border-primary/5 rounded-none",
+          "border border-border rounded-none",
           // Spacing
           "px-1.5 py-0.5",
           className
@@ -1617,7 +1652,7 @@ function Toaster({ theme = "system", ...props }) {
     Toaster$1,
     {
       theme,
-      className: "toaster group !bg-transparent !overflow-visible !z-[9999]",
+      className: "toaster group bg-transparent! overflow-visible! z-[9999]!",
       "data-slot": "toaster",
       toastOptions: {
         classNames: {
@@ -1632,9 +1667,9 @@ function Toaster({ theme = "system", ...props }) {
         loading: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" })
       },
       style: {
-        "--normal-bg": "hsl(var(--popover, 0 0% 100%))",
-        "--normal-text": "hsl(var(--popover-foreground, 222.2 84% 4.9%))",
-        "--normal-border": "hsl(var(--border, 214.3 31.8% 91.4%))",
+        "--normal-bg": "var(--nx-popover)",
+        "--normal-text": "var(--nx-popover-foreground)",
+        "--normal-border": "var(--nx-border)",
         "--border-radius": "0px"
       },
       ...props
@@ -1650,7 +1685,14 @@ var Table = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr] :border-b border-primary/5", className), ...props }));
+var TableHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn("[&_tr]:border-b border-border", className),
+    ...props
+  }
+));
 TableHeader.displayName = "TableHeader";
 var TableBody = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
@@ -1665,7 +1707,10 @@ var TableFooter = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "tfoot",
   {
     ref,
-    className: cn("border-t border-primary/5 font-medium [&>tr]:last:border-b-0", className),
+    className: cn(
+      "border-t border-border font-medium [&>tr]:last:border-b-0",
+      className
+    ),
     ...props
   }
 ));
@@ -1675,7 +1720,7 @@ var TableRow = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "border-b border-primary/5 transition-colors data-[state=selected]:bg-primary/5",
+      "border-b border-border transition-colors data-[state=selected]:bg-primary/5",
       className
     ),
     ...props
@@ -1734,7 +1779,7 @@ function TableSearch({
         value,
         onChange: (e) => onChange(e.target.value),
         "aria-busy": isLoading,
-        className: "h-10 w-full rounded-none  border border-primary/5 bg-background pl-10 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-all"
+        className: "h-10 w-full rounded-none  border border-border bg-background pl-10 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-all"
       }
     ),
     (value || isLoading) && /* @__PURE__ */ jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [
@@ -1772,212 +1817,6 @@ function TableEmpty({ message = "No records found" }) {
     /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: message })
   ] });
 }
-function renderPageNumbers(currentPage, totalPages, maxVisiblePages, onPageChange) {
-  const getBtnClass = (active) => `flex h-8 w-8 items-center justify-center  border-y border-primary/5  border-r border-primary/5 text-xs z-10 -ml-px transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${active ? "!bg-primary !text-primary-foreground !border-primary z-20" : "!bg-background !border-primary/5 hover-muted disabled:opacity-50"}`;
-  if (totalPages <= maxVisiblePages) {
-    return Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => onPageChange(i),
-        "aria-label": `Go to page ${i + 1}`,
-        "aria-current": currentPage === i ? "page" : void 0,
-        className: getBtnClass(currentPage === i),
-        children: i + 1
-      },
-      `page-${i}`
-    ));
-  }
-  const pages = [];
-  const startPage = Math.max(0, currentPage - Math.floor(maxVisiblePages / 2));
-  const endPage = Math.min(totalPages - 1, startPage + maxVisiblePages - 1);
-  if (startPage > 0) {
-    pages.push(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onPageChange(0),
-          "aria-label": "Go to page 1",
-          className: getBtnClass(currentPage === 0),
-          children: "1"
-        },
-        "page-0"
-      )
-    );
-    if (startPage > 1) {
-      pages.push(
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "flex h-8 w-8 items-center justify-center  border-y border-primary/5  border-r border-primary/5 !border-primary/5 !bg-background text-muted-foreground text-xs -ml-px",
-            "aria-hidden": "true",
-            children: "..."
-          },
-          "ellipsis-start"
-        )
-      );
-    }
-  }
-  for (let i = startPage; i <= endPage; i++) {
-    pages.push(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onPageChange(i),
-          "aria-label": `Go to page ${i + 1}`,
-          "aria-current": currentPage === i ? "page" : void 0,
-          className: getBtnClass(currentPage === i),
-          children: i + 1
-        },
-        i
-      )
-    );
-  }
-  if (endPage < totalPages - 1) {
-    if (endPage < totalPages - 2) {
-      pages.push(
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "flex h-8 w-8 items-center justify-center  border-y border-primary/5  border-r border-primary/5 !border-primary/5 !bg-background text-muted-foreground text-xs -ml-px",
-            "aria-hidden": "true",
-            children: "..."
-          },
-          "ellipsis-end"
-        )
-      );
-    }
-    pages.push(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onPageChange(totalPages - 1),
-          "aria-label": `Go to page ${totalPages}`,
-          className: getBtnClass(currentPage === totalPages - 1),
-          children: totalPages
-        },
-        totalPages - 1
-      )
-    );
-  }
-  return pages;
-}
-function TablePagination({
-  meta,
-  onPageChange,
-  onPageSizeChange,
-  config,
-  isLoading = false
-}) {
-  const {
-    showPageSizeSelector = true,
-    pageSizeOptions = [10, 20, 30, 50],
-    maxVisiblePages = 5
-  } = config || {};
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row w-full items-center justify-between gap-4 text-xs sm:text-sm text-muted-foreground p-4 border-t border-primary/5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap order-2 sm:order-1", children: [
-      "Showing ",
-      (meta.page - 1) * meta.limit + 1,
-      "-",
-      Math.min(meta.page * meta.limit, meta.total),
-      " of ",
-      meta.total,
-      " entries"
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 order-1 sm:order-2", children: [
-      showPageSizeSelector && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline-block", children: "Rows per page" }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              id: "pageSize",
-              value: meta.limit,
-              onChange: (e) => {
-                const newPageSize = Number(e.target.value);
-                onPageSizeChange(newPageSize);
-              },
-              className: "h-8 w-[70px] appearance-none rounded-none  border border-primary/5 bg-background px-2 py-1 text-sm font-medium focus-visible:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 hover-muted cursor-pointer",
-              disabled: isLoading,
-              children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground", children: /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: "h-3 w-3",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M19 9l-7 7-7-7"
-                }
-              )
-            }
-          ) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center -space-x-px", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onPageChange(0),
-            disabled: meta.page === 0 || isLoading,
-            className: "hidden sm:flex h-8 w-8 items-center justify-center rounded-none  border border-primary/5 bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
-            "aria-label": "First page",
-            children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onPageChange(meta.page - 1),
-            disabled: meta.page === 0 || isLoading,
-            className: "flex h-8 w-8 items-center justify-center rounded-none sm:rounded-none  border border-primary/5 bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
-            "aria-label": "Previous page",
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "flex", children: renderPageNumbers(
-          meta.page,
-          meta.totalPages,
-          maxVisiblePages,
-          onPageChange
-        ) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onPageChange(meta.page + 1),
-            disabled: meta.page >= meta.totalPages - 1 || isLoading,
-            className: "flex h-8 w-8 items-center justify-center rounded-none sm:rounded-none  border-y border-primary/5  border-x border-primary/5 sm :border-r border-primary/5 bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
-            "aria-label": "Next page",
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onPageChange(meta.totalPages - 1),
-            disabled: meta.page >= meta.totalPages - 1 || isLoading,
-            className: "hidden sm:flex h-8 w-8 items-center justify-center rounded-none  border border-primary/5 bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
-            "aria-label": "Last page",
-            children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap hidden sm:block", children: [
-        "Page ",
-        meta.page + 1,
-        " of ",
-        meta.totalPages
-      ] })
-    ] })
-  ] });
-}
 var GrayBar = ({ className }) => /* @__PURE__ */ jsx(Skeleton, { className });
 var TableSkeleton = ({
   columns = 5,
@@ -1988,7 +1827,7 @@ var TableSkeleton = ({
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "border-0 rounded-none shadow-none", children: /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columns }).map((_, colIdx) => /* @__PURE__ */ jsx(TableHead, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-[70%] max-w-[180px]" }) : /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, `skeleton-header-${colIdx}`)) }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsx(TableRow, { className: "border-b border-primary/5", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsx(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsx(TableRow, { className: "border-b border-border", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsx(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(Skeleton, { className: "w-9 rounded-none shrink-0" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 flex-1", children: [
           /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[120px]" }),
@@ -1996,7 +1835,7 @@ var TableSkeleton = ({
         ] })
       ] }) : /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, colIdx)) }, rowIdx)) })
     ] }) }),
-    !hideFooter && /* @__PURE__ */ jsx("div", { className: "table-footer  border-t border-primary/5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-4 p-4", children: [
+    !hideFooter && /* @__PURE__ */ jsx("div", { className: "table-footer  border-t border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-4 p-4", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-sm", children: /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-[120px]" }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2017,232 +1856,55 @@ var TableSkeleton = ({
   if (hideWrapper) {
     return content;
   }
-  return /* @__PURE__ */ jsx("div", { className: "table-wrapper rounded-none  border border-primary/5 bg-card overflow-hidden", children: content });
+  return /* @__PURE__ */ jsx("div", { className: "table-wrapper rounded-none  border border-border bg-card overflow-hidden", children: content });
 };
 TableSkeleton.displayName = "TableSkeleton";
-function ResponsiveTableInner({
-  data,
-  columns,
-  onRowClick,
-  renderMobileCard,
-  className,
-  emptyMessage = "No results found.",
-  ariaLabel,
-  tableWrapperClassName,
-  footer
-}, ref) {
-  const visibleMobileColumns = React6.useMemo(
-    () => columns.filter((col) => !col.hideOnMobile),
-    [columns]
-  );
-  const primaryColumn = React6.useMemo(() => {
-    return visibleMobileColumns.find(
-      (col) => col.key !== "select" && col.key !== "actions"
-    ) || visibleMobileColumns[0];
-  }, [visibleMobileColumns]);
-  const secondaryColumns = React6.useMemo(
-    () => visibleMobileColumns.filter((col) => col.key !== primaryColumn?.key),
-    [visibleMobileColumns, primaryColumn]
-  );
-  React6.useEffect(() => {
-    const isDev = typeof globalThis !== "undefined" && globalThis.process && globalThis.process.env?.NODE_ENV === "development";
-    if (isDev && visibleMobileColumns.length === 0) {
-      console.warn(
-        "ResponsiveTable: All columns are hidden on mobile (hideOnMobile: true). Consider showing at least one column for better mobile UX. Users will see empty card borders on mobile devices."
-      );
-    }
-  }, [visibleMobileColumns.length]);
-  const handleItemClick = React6.useCallback(
-    (item, e) => {
-      if (!onRowClick) return;
-      if (e) {
-        const target = e.target;
-        if (target.closest('[role="checkbox"]') || target.closest("button") || target.closest("a") || target.closest('[role^="menuitem"]') || target.closest("[data-actions]")) {
-          return;
-        }
-      }
-      onRowClick(item);
-    },
-    [onRowClick]
-  );
-  const handleCardKeyDown = React6.useCallback(
-    (item) => (e) => {
-      if (onRowClick && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault();
-        handleItemClick(item, e);
-      }
-    },
-    [handleItemClick, onRowClick]
-  );
-  if (data.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "p-8 text-center",
-          className
-        ),
-        children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 md:hidden", children: data.map((item) => {
-      const primaryValue = primaryColumn ? String(item[primaryColumn.key]) : String(item.id);
-      if (renderMobileCard) {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: (e) => handleItemClick(item, e),
-            role: onRowClick ? "button" : void 0,
-            tabIndex: onRowClick ? 0 : void 0,
-            onKeyDown: onRowClick ? handleCardKeyDown(item) : void 0,
-            className: onRowClick ? "cursor-pointer" : void 0,
-            "aria-label": onRowClick ? `View details for ${primaryValue}` : void 0,
-            children: renderMobileCard(item, visibleMobileColumns)
-          },
-          item.id
-        );
-      }
-      return /* @__PURE__ */ jsxs(
-        Card,
-        {
-          variant: onRowClick ? "interactive" : "default",
-          className: cn(
-            onRowClick && "cursor-pointer",
-            "transition-all duration-150"
-          ),
-          onClick: (e) => handleItemClick(item, e),
-          role: onRowClick ? "button" : void 0,
-          tabIndex: onRowClick ? 0 : void 0,
-          onKeyDown: onRowClick ? handleCardKeyDown(item) : void 0,
-          "aria-label": onRowClick ? `View details for ${primaryValue}` : void 0,
-          children: [
-            primaryColumn ? /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: primaryColumn.render ? primaryColumn.render(item[primaryColumn.key], item) : String(item[primaryColumn.key]) }) }) : null,
-            secondaryColumns.length > 0 && /* @__PURE__ */ jsx(CardContent, { className: "pb-3", children: /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-2", children: secondaryColumns.map((column) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-start justify-between gap-4 text-sm",
-                children: [
-                  !column.hideLabelOnMobile && /* @__PURE__ */ jsxs("dt", { className: "text-muted-foreground min-w-[80px] shrink-0", children: [
-                    column.label,
-                    ":"
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "dd",
-                    {
-                      className: cn(
-                        "font-medium flex-1",
-                        !column.hideLabelOnMobile ? "text-right" : "text-left"
-                      ),
-                      children: column.render ? column.render(item[column.key], item) : String(item[column.key])
-                    }
-                  )
-                ]
-              },
-              String(column.key)
-            )) }) })
-          ]
-        },
-        item.id
-      );
-    }) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "table-wrapper hidden md:block overflow-hidden rounded-none  border border-primary/5",
-          tableWrapperClassName
-        ),
-        children: /* @__PURE__ */ jsxs(Table, { "aria-label": ariaLabel || "Data table", children: [
-          /* @__PURE__ */ jsx(TableHeader, { className: "bg-[hsl(var(--table-header-bg))]", children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(
-            TableHead,
-            {
-              className: column.headerClassName,
-              children: column.label
-            },
-            String(column.key)
-          )) }) }),
-          /* @__PURE__ */ jsx(TableBody, { children: data.map((item) => {
-            const primaryValue = primaryColumn ? String(item[primaryColumn.key]) : String(item.id);
-            return /* @__PURE__ */ jsx(
-              TableRow,
-              {
-                className: cn(
-                  "hover-unified-table-row",
-                  onRowClick && "cursor-pointer"
-                ),
-                onClick: (e) => handleItemClick(item, e),
-                role: onRowClick ? "button" : void 0,
-                tabIndex: onRowClick ? 0 : void 0,
-                onKeyDown: onRowClick ? handleCardKeyDown(item) : void 0,
-                "aria-label": onRowClick ? `View details for ${primaryValue}` : void 0,
-                children: columns.map((column) => /* @__PURE__ */ jsx(
-                  TableCell,
-                  {
-                    className: column.cellClassName,
-                    children: column.render ? column.render(item[column.key], item) : String(item[column.key])
-                  },
-                  String(column.key)
-                ))
-              },
-              item.id
-            );
-          }) })
-        ] })
-      }
-    ),
-    footer && /* @__PURE__ */ jsx("div", { className: "table-footer border-t border-primary/5 bg-[hsl(var(--table-header-bg))]", children: footer })
-  ] });
-}
-var ResponsiveTable = React6.forwardRef(ResponsiveTableInner);
 
 // src/tailwind-preset.ts
 var uiPreset = {
   theme: {
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: "var(--nx-border)",
+        input: "var(--nx-input)",
+        ring: "var(--nx-ring)",
+        background: "var(--nx-background)",
+        foreground: "var(--nx-foreground)",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
+          DEFAULT: "var(--nx-primary)",
+          foreground: "var(--nx-primary-foreground)"
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
+          DEFAULT: "var(--nx-secondary)",
+          foreground: "var(--nx-secondary-foreground)"
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
+          DEFAULT: "var(--nx-destructive)",
+          foreground: "var(--nx-destructive-foreground)"
         },
         success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))"
+          DEFAULT: "var(--nx-success)",
+          foreground: "var(--nx-success-foreground)"
         },
         warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))"
+          DEFAULT: "var(--nx-warning)",
+          foreground: "var(--nx-warning-foreground)"
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
+          DEFAULT: "var(--nx-muted)",
+          foreground: "var(--nx-muted-foreground)"
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
+          DEFAULT: "var(--nx-accent)",
+          foreground: "var(--nx-accent-foreground)"
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
+          DEFAULT: "var(--nx-popover)",
+          foreground: "var(--nx-popover-foreground)"
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
+          DEFAULT: "var(--nx-card)",
+          foreground: "var(--nx-card-foreground)"
         }
       },
       borderRadius: {
@@ -2269,6 +1931,6 @@ var uiPreset = {
 };
 var tailwind_preset_default = uiPreset;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormLabelWithTooltip, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, RadioGroup, RadioGroupItem, ResponsiveTable, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, TableError, TableFooter, TableHead, TableHeader, TableLoading, TablePagination, TableRow, TableSearch, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, tailwind_preset_default as uiPreset, usePortalContainer };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormLabelWithTooltip, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, TableError, TableFooter, TableHead, TableHeader, TableLoading, TableRow, TableSearch, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, tailwind_preset_default as uiPreset, usePortalContainer };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map