@moontra/moonui-pro 2.3.0 → 2.3.1

package/dist/index.mjs

@@ -52153,6 +52153,9 @@ function FileUpload({
     ] })
   ] });
 }
+
+// src/components/data-table/data-table.css
+styleInject(".moonui-data-table-container {\n}\n.moonui-data-table-wrapper {\n}\n.moonui-data-table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.moonui-data-table-header {\n}\n.moonui-data-table-body {\n}\n.moonui-data-table-row {\n}\n.moonui-data-table-th {\n}\n.moonui-data-table-td {\n}\n.moonui-data-table-toolbar {\n}\n.moonui-data-table-container * {\n  box-sizing: border-box;\n}\n.moonui-data-table-container table {\n  margin: 0;\n  padding: 0;\n}\n.moonui-data-table-container th,\n.moonui-data-table-container td {\n  margin: 0;\n}\n");
 function DataTable({
   columns,
   data,
@@ -52243,8 +52246,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-data-table-container space-y-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "moonui-data-table-toolbar flex items-center justify-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 +52277,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-data-table-wrapper rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "moonui-data-table w-full", 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 +52299,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 +52331,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.1",
   "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/data-table.css

@@ -0,0 +1,54 @@
+/* MoonUI DataTable Component Styles */
+.moonui-data-table-container {
+  /* Container specific styles */
+}
+
+.moonui-data-table-wrapper {
+  /* Wrapper specific styles */
+}
+
+.moonui-data-table {
+  /* Table specific styles */
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.moonui-data-table-header {
+  /* Header specific styles */
+}
+
+.moonui-data-table-body {
+  /* Body specific styles */
+}
+
+.moonui-data-table-row {
+  /* Row specific styles */
+}
+
+.moonui-data-table-th {
+  /* Table header cell specific styles */
+}
+
+.moonui-data-table-td {
+  /* Table data cell specific styles */
+}
+
+.moonui-data-table-toolbar {
+  /* Toolbar specific styles */
+}
+
+/* Prevent style leakage */
+.moonui-data-table-container * {
+  box-sizing: border-box;
+}
+
+/* Ensure DataTable styles don't affect global styles */
+.moonui-data-table-container table {
+  margin: 0;
+  padding: 0;
+}
+
+.moonui-data-table-container th,
+.moonui-data-table-container td {
+  margin: 0;
+}

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

@@ -1,6 +1,7 @@
 "use client"
 
 import React from 'react'
+import './data-table.css'
 import {
   useReactTable,
   getCoreRowModel,
@@ -207,9 +208,9 @@ export function DataTable<TData, TValue>({
   }
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("moonui-data-table-container space-y-4", className)}>
       {/* Toolbar */}
-      <div className="flex items-center justify-between">
+      <div className="moonui-data-table-toolbar flex items-center justify-between">
         <div className="flex items-center space-x-2">
           {searchable && (
             <div className="relative">
@@ -247,15 +248,15 @@ export function DataTable<TData, TValue>({
       </div>
 
       {/* Table */}
-      <div className="rounded-md border">
-        <table className="w-full">
-          <thead>
+      <div className="moonui-data-table-wrapper rounded-md border overflow-hidden">
+        <table className="moonui-data-table w-full">
+          <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 +285,7 @@ export function DataTable<TData, TValue>({
               </tr>
             ))}
           </thead>
-          <tbody>
+          <tbody className="moonui-data-table-body">
             <AnimatePresence mode="wait">
               {isPaginationLoading ? (
                 <motion.tr
@@ -324,7 +325,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>
                       ))}