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

package/dist/index.cjs

@@ -73,13 +73,13 @@ var buttonVariants = classVarianceAuthority.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: {
@@ -116,13 +116,13 @@ var Button = React6.forwardRef(
 );
 Button.displayName = "Button";
 var inputVariants = classVarianceAuthority.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: {
@@ -151,8 +151,8 @@ var Textarea = React6.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,
@@ -174,22 +174,41 @@ function Label({ className, ...props }) {
     }
   );
 }
+var PortalContext = React6.createContext({ container: null });
+function PortalProvider({ container, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value: { container }, children });
+}
+function usePortalContainer() {
+  const { container } = React6.useContext(PortalContext);
+  return container ?? void 0;
+}
 var TooltipProvider = reactTooltip.Provider;
 var Tooltip = reactTooltip.Root;
 var TooltipTrigger = reactTooltip.Trigger;
-var TooltipContent = React6.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  reactTooltip.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 = React6.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__ */ jsxRuntime.jsx(reactTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactTooltip.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 = reactTooltip.Content.displayName;
 var FormLabelWithTooltip = React6__namespace.forwardRef(
   ({
@@ -224,7 +243,7 @@ var FormLabelWithTooltip = React6__namespace.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
@@ -240,12 +259,14 @@ var badgeVariants = classVarianceAuthority.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: {
@@ -264,7 +285,7 @@ function Badge({ className, variant = "default", ...props }) {
   );
 }
 var cardVariants = classVarianceAuthority.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: {
@@ -301,7 +322,7 @@ var CardHeader = React6.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
@@ -374,7 +395,7 @@ var CardFooter = React6.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
@@ -384,14 +405,14 @@ var CardFooter = React6.forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 var alertVariants = classVarianceAuthority.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: {
@@ -487,7 +508,7 @@ var progressVariants = classVarianceAuthority.cva("h-full rounded-none transitio
   variants: {
     variant: {
       default: "bg-primary-500",
-      success: "bg-green-500",
+      success: "bg-success-500",
       error: "bg-destructive"
     }
   },
@@ -541,7 +562,22 @@ var Checkbox = React6.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,
@@ -574,7 +610,9 @@ var RadioGroupItem = React6.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,
@@ -589,9 +627,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,
@@ -636,7 +674,7 @@ var AccordionTrigger = React6.forwardRef(
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-150" })
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-150 will-change-transform" })
       ]
     }
   ) })
@@ -648,7 +686,7 @@ var AccordionContent = React6.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__ */ jsxRuntime.jsx("div", { className: cn("pb-4 pt-0", className), children })
     }
@@ -757,7 +795,7 @@ var TabsTrigger = React6.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
@@ -780,14 +818,6 @@ var TabsContent = React6.forwardRef(
   )
 );
 TabsContent.displayName = reactTabs.Content.displayName;
-var PortalContext = React6.createContext({ container: null });
-function PortalProvider({ container, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value: { container }, children });
-}
-function usePortalContainer() {
-  const { container } = React6.useContext(PortalContext);
-  return container ?? void 0;
-}
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
@@ -801,7 +831,7 @@ var PopoverContent = React6__namespace.forwardRef(({ className, align = "center"
       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
@@ -850,7 +880,7 @@ var DialogContent = React6.forwardRef(({ className, children, size, ...props },
         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
         ),
@@ -947,7 +977,7 @@ var AlertDialogContent = React6.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
@@ -1035,12 +1065,14 @@ var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.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__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.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
     ),
@@ -1057,7 +1089,7 @@ var DropdownMenuSubContent = React6__namespace.forwardRef(({ className, ...props
   {
     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
@@ -1072,7 +1104,7 @@ var DropdownMenuContent = React6__namespace.forwardRef(({ className, sideOffset
       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
@@ -1085,7 +1117,8 @@ var DropdownMenuItem = React6__namespace.forwardRef(({ className, inset, ...prop
   {
     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
     ),
@@ -1098,7 +1131,8 @@ var DropdownMenuCheckboxItem = React6__namespace.forwardRef(({ className, childr
   {
     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,
@@ -1115,7 +1149,8 @@ var DropdownMenuRadioItem = React6__namespace.forwardRef(({ className, children,
   {
     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,
@@ -1173,13 +1208,13 @@ function SelectValue({
   return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { "data-slot": "select-value", ...props });
 }
 var selectTriggerVariants = classVarianceAuthority.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: {
@@ -1215,7 +1250,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
       ),
@@ -1342,10 +1377,10 @@ var sheetVariants = classVarianceAuthority.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: {
@@ -1469,7 +1504,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",
@@ -1485,7 +1520,7 @@ var CommandDialog = ({ children, ...props }) => {
 var CommandInput = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-3 h-5 w-5 shrink-0 text-muted-foreground" }),
@@ -1604,7 +1639,7 @@ var CommandShortcut = React6.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
@@ -1647,7 +1682,7 @@ function Toaster({ theme = "system", ...props }) {
     sonner.Toaster,
     {
       theme,
-      className: "toaster group !bg-transparent !overflow-visible !z-[9999]",
+      className: "toaster group bg-transparent! overflow-visible! z-[9999]!",
       "data-slot": "toaster",
       toastOptions: {
         classNames: {
@@ -1662,9 +1697,9 @@ function Toaster({ theme = "system", ...props }) {
         loading: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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
@@ -1680,7 +1715,14 @@ var Table = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr] :border-b border-primary/5", className), ...props }));
+var TableHeader = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "thead",
+  {
+    ref,
+    className: cn("[&_tr]:border-b border-border", className),
+    ...props
+  }
+));
 TableHeader.displayName = "TableHeader";
 var TableBody = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
@@ -1695,7 +1737,10 @@ var TableFooter = React6__namespace.forwardRef(({ className, ...props }, ref) =>
   "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
   }
 ));
@@ -1705,7 +1750,7 @@ var TableRow = React6__namespace.forwardRef(({ className, ...props }, ref) => /*
   {
     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
@@ -1764,7 +1809,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__ */ jsxRuntime.jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [
@@ -1802,212 +1847,6 @@ function TableEmpty({ message = "No records found" }) {
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap hidden sm:inline-block", children: "Rows per page" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              className: "h-3 w-3",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M19 9l-7 7-7-7"
-                }
-              )
-            }
-          ) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center -space-x-px", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: renderPageNumbers(
-          meta.page,
-          meta.totalPages,
-          maxVisiblePages,
-          onPageChange
-        ) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "whitespace-nowrap hidden sm:block", children: [
-        "Page ",
-        meta.page + 1,
-        " of ",
-        meta.totalPages
-      ] })
-    ] })
-  ] });
-}
 var GrayBar = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className });
 var TableSkeleton = ({
   columns = 5,
@@ -2018,7 +1857,7 @@ var TableSkeleton = ({
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-0 rounded-none shadow-none", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: Array.from({ length: columns }).map((_, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsxRuntime.jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-4 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxRuntime.jsx(GrayBar, { className: "h-4 w-[70%] max-w-[180px]" }) : /* @__PURE__ */ jsxRuntime.jsx(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, `skeleton-header-${colIdx}`)) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "border-b border-primary/5", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsxRuntime.jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-8 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "border-b border-border", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsxRuntime.jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-8 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-9 rounded-none shrink-0" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-[120px]" }),
@@ -2026,7 +1865,7 @@ var TableSkeleton = ({
         ] })
       ] }) : /* @__PURE__ */ jsxRuntime.jsx(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, colIdx)) }, rowIdx)) })
     ] }) }),
-    !hideFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-footer  border-t border-primary/5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2 py-4 p-4", children: [
+    !hideFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-footer  border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2 py-4 p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(GrayBar, { className: "h-4 w-[120px]" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2047,232 +1886,55 @@ var TableSkeleton = ({
   if (hideWrapper) {
     return content;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-wrapper rounded-none  border border-primary/5 bg-card overflow-hidden", children: content });
+  return /* @__PURE__ */ jsxRuntime.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__namespace.useMemo(
-    () => columns.filter((col) => !col.hideOnMobile),
-    [columns]
-  );
-  const primaryColumn = React6__namespace.useMemo(() => {
-    return visibleMobileColumns.find(
-      (col) => col.key !== "select" && col.key !== "actions"
-    ) || visibleMobileColumns[0];
-  }, [visibleMobileColumns]);
-  const secondaryColumns = React6__namespace.useMemo(
-    () => visibleMobileColumns.filter((col) => col.key !== primaryColumn?.key),
-    [visibleMobileColumns, primaryColumn]
-  );
-  React6__namespace.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__namespace.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__namespace.useCallback(
-    (item) => (e) => {
-      if (onRowClick && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault();
-        handleItemClick(item, e);
-      }
-    },
-    [handleItemClick, onRowClick]
-  );
-  if (data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "p-8 text-center",
-          className
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: primaryColumn.render ? primaryColumn.render(item[primaryColumn.key], item) : String(item[primaryColumn.key]) }) }) : null,
-            secondaryColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-2", children: secondaryColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex items-start justify-between gap-4 text-sm",
-                children: [
-                  !column.hideLabelOnMobile && /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "text-muted-foreground min-w-[80px] shrink-0", children: [
-                    column.label,
-                    ":"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "table-wrapper hidden md:block overflow-hidden rounded-none  border border-primary/5",
-          tableWrapperClassName
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { "aria-label": ariaLabel || "Data table", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: "bg-[hsl(var(--table-header-bg))]", children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-            TableHead,
-            {
-              className: column.headerClassName,
-              children: column.label
-            },
-            String(column.key)
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: data.map((item) => {
-            const primaryValue = primaryColumn ? String(item[primaryColumn.key]) : String(item.id);
-            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "table-footer border-t border-primary/5 bg-[hsl(var(--table-header-bg))]", children: footer })
-  ] });
-}
-var ResponsiveTable = React6__namespace.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: {
@@ -2382,7 +2044,6 @@ exports.PortalProvider = PortalProvider;
 exports.Progress = Progress;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
-exports.ResponsiveTable = ResponsiveTable;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -2417,7 +2078,6 @@ exports.TableFooter = TableFooter;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableLoading = TableLoading;
-exports.TablePagination = TablePagination;
 exports.TableRow = TableRow;
 exports.TableSearch = TableSearch;
 exports.TableSkeleton = TableSkeleton;