@moontra/moonui-pro 2.3.0 → 2.3.2

package/dist/index.mjs

@@ -52243,8 +52243,8 @@ function DataTable({
       onExport(dataToExport);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-pro-datatable-container", className), style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar", style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
         searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
@@ -52274,11 +52274,11 @@ function DataTable({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "moonui-pro-datatable-wrapper rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "moonui-pro-datatable", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsx("thead", { className: "moonui-data-table-header", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "moonui-data-table-row border-b", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
         "th",
         {
-          className: "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
+          className: "moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground",
           children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
             "div",
             {
@@ -52296,7 +52296,7 @@ function DataTable({
         },
         header.id
       )) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isPaginationLoading ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isPaginationLoading ? /* @__PURE__ */ jsx(
         motion.tr,
         {
           initial: { opacity: 0 },
@@ -52328,7 +52328,7 @@ function DataTable({
               row.getIsSelected() && "bg-muted",
               isExpanded && "border-b-0"
             ),
-            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
           },
           row.id
         );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/data-table/index.tsx

@@ -207,9 +207,9 @@ export function DataTable<TData, TValue>({
   }
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("moonui-pro-datatable-container", className)} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
       {/* Toolbar */}
-      <div className="flex items-center justify-between">
+      <div className="moonui-pro-datatable-toolbar" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <div className="flex items-center space-x-2">
           {searchable && (
             <div className="relative">
@@ -247,15 +247,15 @@ export function DataTable<TData, TValue>({
       </div>
 
       {/* Table */}
-      <div className="rounded-md border">
-        <table className="w-full">
-          <thead>
+      <div className="moonui-pro-datatable-wrapper rounded-md border overflow-hidden">
+        <table className="moonui-pro-datatable" style={{ width: '100%' }}>
+          <thead className="moonui-data-table-header">
             {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className="border-b">
+              <tr key={headerGroup.id} className="moonui-data-table-row border-b">
                 {headerGroup.headers.map((header) => (
                   <th
                     key={header.id}
-                    className="h-12 px-4 text-left align-middle font-medium text-muted-foreground"
+                    className="moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground"
                   >
                     {header.isPlaceholder ? null : (
                       <div
@@ -284,7 +284,7 @@ export function DataTable<TData, TValue>({
               </tr>
             ))}
           </thead>
-          <tbody>
+          <tbody className="moonui-data-table-body">
             <AnimatePresence mode="wait">
               {isPaginationLoading ? (
                 <motion.tr
@@ -324,7 +324,7 @@ export function DataTable<TData, TValue>({
                       )}
                     >
                       {row.getVisibleCells().map((cell) => (
-                        <td key={cell.id} className="p-4 align-middle">
+                        <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
                           {flexRender(cell.column.columnDef.cell, cell.getContext())}
                         </td>
                       ))}