pxengine 0.1.56 → 0.1.58

package/dist/index.cjs

@@ -26117,33 +26117,62 @@ var TableAtom = ({
   headers,
   rows,
   className,
-  style
+  style,
+  headerTextColor = "#9ca3af",
+  headerBgColor = "#f9fafb",
+  rowTextColor = "#374151",
+  rowBgColor = "#ffffff",
+  hoverBgColor = "#faf5ff",
+  borderColor = "#f3f4f6"
 }) => {
+  const safeHeaders = Array.isArray(headers) ? headers : [];
+  const safeRows = Array.isArray(rows) ? rows : [];
+  if (safeHeaders.length === 0 && safeRows.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "div",
+      {
+        className: cn("rounded-2xl border overflow-hidden p-4 text-center text-sm text-muted-foreground", className),
+        style: { ...style, borderColor },
+        children: "No table data"
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       className: cn(
-        "rounded-2xl border border-gray-100 overflow-hidden bg-white",
+        "rounded-2xl border overflow-hidden",
         className
       ),
-      style,
+      style: {
+        ...style,
+        borderColor
+      },
       children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Table3, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableHeader, { className: "bg-gray-50/50", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableRow, { children: headers.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableHeader, { style: { backgroundColor: headerBgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableRow, { children: safeHeaders.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           TableHead,
           {
-            className: "text-xs font-bold text-gray-400 uppercase tracking-widest px-6 py-4",
+            className: "text-xs font-bold uppercase tracking-widest px-6 py-4",
+            style: { color: headerTextColor },
             children: header
           },
           i
         )) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableBody, { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableBody, { children: safeRows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           TableRow,
           {
-            className: "hover:bg-purple-50/30 transition-colors border-gray-50",
-            children: row.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            className: "transition-colors",
+            style: {
+              backgroundColor: rowBgColor,
+              borderColor
+            },
+            onMouseEnter: (e) => e.currentTarget.style.backgroundColor = hoverBgColor,
+            onMouseLeave: (e) => e.currentTarget.style.backgroundColor = rowBgColor,
+            children: (Array.isArray(row) ? row : []).map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               TableCell,
               {
-                className: "text-sm text-gray-700 px-6 py-4 font-medium",
+                className: "text-sm px-6 py-4 font-medium",
+                style: { color: rowTextColor },
                 children: cell
               },
               j
@@ -33362,13 +33391,28 @@ var ChartAtom = ({
   showLegend = true,
   stacked = false,
   className,
-  style
+  style,
+  // Chart color customization props
+  seriesColors
 }) => {
-  const safeConfig = config ?? {};
+  const safeData = Array.isArray(data) ? data : [];
+  const buildConfigWithColors = (baseConfig) => {
+    if (!seriesColors) return baseConfig;
+    const coloredConfig = {};
+    const seriesKeys = Object.keys(baseConfig);
+    seriesKeys.forEach((key, index) => {
+      coloredConfig[key] = {
+        ...baseConfig[key],
+        color: seriesColors[index] || baseConfig[key]?.color
+      };
+    });
+    return coloredConfig;
+  };
+  const safeConfig = config ? buildConfigWithColors(config) : {};
   const renderChart = () => {
     switch (chartType) {
       case "bar":
-        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_recharts.BarChart, { data, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_recharts.BarChart, { data: safeData, children: [
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_recharts.CartesianGrid, { vertical: false }),
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             import_recharts.XAxis,
@@ -33394,7 +33438,7 @@ var ChartAtom = ({
           ))
         ] });
       case "line":
-        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_recharts.LineChart, { data, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_recharts.LineChart, { data: safeData, children: [
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_recharts.CartesianGrid, { vertical: false }),
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             import_recharts.XAxis,
@@ -33420,7 +33464,7 @@ var ChartAtom = ({
           ))
         ] });
       case "area":
-        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_recharts.AreaChart, { data, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_recharts.AreaChart, { data: safeData, children: [
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_recharts.CartesianGrid, { vertical: false }),
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             import_recharts.XAxis,
@@ -33452,16 +33496,23 @@ var ChartAtom = ({
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             import_recharts.Pie,
             {
-              data,
+              data: safeData,
               dataKey: YAxisKey || "value",
               nameKey: XAxisKey || "name",
               innerRadius: 60,
-              strokeWidth: 5
+              strokeWidth: 5,
+              children: safeData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                import_recharts.Cell,
+                {
+                  fill: seriesColors?.[index] || `var(--color-${Object.keys(safeConfig)[index] || "default"})`
+                },
+                `cell-${index}`
+              ))
             }
           )
         ] });
       case "radar":
-        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_recharts.RadarChart, { data, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_recharts.RadarChart, { data: safeData, children: [
           showTooltip && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartTooltip, { cursor: false, content: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartTooltipContent, {}) }),
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_recharts.PolarGrid, {}),
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_recharts.PolarAngleAxis, { dataKey: XAxisKey }),
@@ -33479,7 +33530,7 @@ var ChartAtom = ({
         return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
           import_recharts.RadialBarChart,
           {
-            data,
+            data: safeData,
             innerRadius: 30,
             outerRadius: 110,
             barSize: 10,
@@ -33491,7 +33542,15 @@ var ChartAtom = ({
                   content: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChartTooltipContent, { hideLabel: true, nameKey: XAxisKey })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_recharts.RadialBar, { dataKey: YAxisKey || "value", background: true })
+              Object.keys(safeConfig).map((key, idx) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                import_recharts.RadialBar,
+                {
+                  dataKey: key,
+                  fill: seriesColors?.[idx] || `var(--color-${key})`,
+                  background: true
+                },
+                key
+              ))
             ]
           }
         );