pxengine 0.1.56 → 0.1.58

package/dist/index.d.cts

@@ -326,6 +326,12 @@ interface TableAtomType extends BaseAtom {
     type: "table";
     headers: string[];
     rows: any[][];
+    headerTextColor?: string;
+    headerBgColor?: string;
+    rowTextColor?: string;
+    rowBgColor?: string;
+    hoverBgColor?: string;
+    borderColor?: string;
 }
 interface CarouselAtomType extends BaseAtom {
     type: "carousel";
@@ -492,6 +498,7 @@ interface ChartAtomType extends BaseAtom {
     showTooltip?: boolean;
     showLegend?: boolean;
     stacked?: boolean;
+    seriesColors?: string[];
 }
 type UIAtom = ButtonAtomType | InputAtomType | ToggleAtomType | TextAtomType | LayoutAtomType | CardAtomType | TabsAtomType | AccordionAtomType | SeparatorAtomType | ScrollAreaAtomType | AspectRatioAtomType | CollapsibleAtomType | AvatarAtomType | BadgeAtomType | ProgressAtomType | TableAtomType | CarouselAtomType | AlertAtomType | TooltipAtomType | PopoverAtomType | DialogAtomType | SheetAtomType | AlertDialogAtomType | SkeletonAtomType | SpinnerAtomType | BreadcrumbAtomType | CalendarAtomType | PaginationAtomType | CommandAtomType | FormInputAtomType | FormSelectAtomType | FormTextareaAtomType | CheckboxAtomType | SwitchAtomType | LabelAtomType | SliderAtomType | RadioGroupAtomType | RadioAtomType | DropdownMenuAtomType | ContextMenuAtomType | DrawerAtomType | InputOTPAtomType | KbdAtomType | ResizableAtomType | RatingAtomType | TimelineAtomType | VideoAtomType | ChartAtomType | IconAtomType | ArrowToggleAtomType;
 

package/dist/index.d.ts

@@ -326,6 +326,12 @@ interface TableAtomType extends BaseAtom {
     type: "table";
     headers: string[];
     rows: any[][];
+    headerTextColor?: string;
+    headerBgColor?: string;
+    rowTextColor?: string;
+    rowBgColor?: string;
+    hoverBgColor?: string;
+    borderColor?: string;
 }
 interface CarouselAtomType extends BaseAtom {
     type: "carousel";
@@ -492,6 +498,7 @@ interface ChartAtomType extends BaseAtom {
     showTooltip?: boolean;
     showLegend?: boolean;
     stacked?: boolean;
+    seriesColors?: string[];
 }
 type UIAtom = ButtonAtomType | InputAtomType | ToggleAtomType | TextAtomType | LayoutAtomType | CardAtomType | TabsAtomType | AccordionAtomType | SeparatorAtomType | ScrollAreaAtomType | AspectRatioAtomType | CollapsibleAtomType | AvatarAtomType | BadgeAtomType | ProgressAtomType | TableAtomType | CarouselAtomType | AlertAtomType | TooltipAtomType | PopoverAtomType | DialogAtomType | SheetAtomType | AlertDialogAtomType | SkeletonAtomType | SpinnerAtomType | BreadcrumbAtomType | CalendarAtomType | PaginationAtomType | CommandAtomType | FormInputAtomType | FormSelectAtomType | FormTextareaAtomType | CheckboxAtomType | SwitchAtomType | LabelAtomType | SliderAtomType | RadioGroupAtomType | RadioAtomType | DropdownMenuAtomType | ContextMenuAtomType | DrawerAtomType | InputOTPAtomType | KbdAtomType | ResizableAtomType | RatingAtomType | TimelineAtomType | VideoAtomType | ChartAtomType | IconAtomType | ArrowToggleAtomType;
 

package/dist/index.mjs

@@ -25794,33 +25794,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__ */ jsx35(
+      "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__ */ jsx35(
     "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__ */ jsxs12(Table3, { children: [
-        /* @__PURE__ */ jsx35(TableHeader, { className: "bg-gray-50/50", children: /* @__PURE__ */ jsx35(TableRow, { children: headers.map((header, i) => /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx35(TableHeader, { style: { backgroundColor: headerBgColor }, children: /* @__PURE__ */ jsx35(TableRow, { children: safeHeaders.map((header, i) => /* @__PURE__ */ jsx35(
           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__ */ jsx35(TableBody, { children: rows.map((row, i) => /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx35(TableBody, { children: safeRows.map((row, i) => /* @__PURE__ */ jsx35(
           TableRow,
           {
-            className: "hover:bg-purple-50/30 transition-colors border-gray-50",
-            children: row.map((cell, j) => /* @__PURE__ */ jsx35(
+            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__ */ jsx35(
               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
@@ -33040,6 +33069,7 @@ import {
   AreaChart,
   Pie,
   PieChart,
+  Cell,
   Radar as Radar2,
   RadarChart,
   RadialBar,
@@ -33060,13 +33090,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__ */ jsxs50(BarChart, { data, children: [
+        return /* @__PURE__ */ jsxs50(BarChart, { data: safeData, children: [
           /* @__PURE__ */ jsx85(CartesianGrid, { vertical: false }),
           /* @__PURE__ */ jsx85(
             XAxis,
@@ -33092,7 +33137,7 @@ var ChartAtom = ({
           ))
         ] });
       case "line":
-        return /* @__PURE__ */ jsxs50(LineChart, { data, children: [
+        return /* @__PURE__ */ jsxs50(LineChart, { data: safeData, children: [
           /* @__PURE__ */ jsx85(CartesianGrid, { vertical: false }),
           /* @__PURE__ */ jsx85(
             XAxis,
@@ -33118,7 +33163,7 @@ var ChartAtom = ({
           ))
         ] });
       case "area":
-        return /* @__PURE__ */ jsxs50(AreaChart, { data, children: [
+        return /* @__PURE__ */ jsxs50(AreaChart, { data: safeData, children: [
           /* @__PURE__ */ jsx85(CartesianGrid, { vertical: false }),
           /* @__PURE__ */ jsx85(
             XAxis,
@@ -33150,16 +33195,23 @@ var ChartAtom = ({
           /* @__PURE__ */ jsx85(
             Pie,
             {
-              data,
+              data: safeData,
               dataKey: YAxisKey || "value",
               nameKey: XAxisKey || "name",
               innerRadius: 60,
-              strokeWidth: 5
+              strokeWidth: 5,
+              children: safeData.map((_, index) => /* @__PURE__ */ jsx85(
+                Cell,
+                {
+                  fill: seriesColors?.[index] || `var(--color-${Object.keys(safeConfig)[index] || "default"})`
+                },
+                `cell-${index}`
+              ))
             }
           )
         ] });
       case "radar":
-        return /* @__PURE__ */ jsxs50(RadarChart, { data, children: [
+        return /* @__PURE__ */ jsxs50(RadarChart, { data: safeData, children: [
           showTooltip && /* @__PURE__ */ jsx85(ChartTooltip, { cursor: false, content: /* @__PURE__ */ jsx85(ChartTooltipContent, {}) }),
           /* @__PURE__ */ jsx85(PolarGrid, {}),
           /* @__PURE__ */ jsx85(PolarAngleAxis, { dataKey: XAxisKey }),
@@ -33177,7 +33229,7 @@ var ChartAtom = ({
         return /* @__PURE__ */ jsxs50(
           RadialBarChart,
           {
-            data,
+            data: safeData,
             innerRadius: 30,
             outerRadius: 110,
             barSize: 10,
@@ -33189,7 +33241,15 @@ var ChartAtom = ({
                   content: /* @__PURE__ */ jsx85(ChartTooltipContent, { hideLabel: true, nameKey: XAxisKey })
                 }
               ),
-              /* @__PURE__ */ jsx85(RadialBar, { dataKey: YAxisKey || "value", background: true })
+              Object.keys(safeConfig).map((key, idx) => /* @__PURE__ */ jsx85(
+                RadialBar,
+                {
+                  dataKey: key,
+                  fill: seriesColors?.[idx] || `var(--color-${key})`,
+                  background: true
+                },
+                key
+              ))
             ]
           }
         );