pxengine 0.1.57 → 0.1.59

package/dist/index.cjs

@@ -428,9 +428,11 @@ var TextAtom = ({
     label: "var(--gray400)"
   };
   const Component2 = variant === "small" || variant === "muted" || variant === "label" ? "p" : variant;
+  const hasPxBg = style && "--px-bg-color" in style;
   const wrapperStyles = {
     color: `var(--px-text-color, ${defaultColors[variant] ?? "inherit"})`,
     ...backgroundColor && { backgroundColor },
+    ...hasPxBg && { backgroundColor: "var(--px-bg-color, transparent)" },
     ...style
   };
   if (markdown) {
@@ -24893,14 +24895,20 @@ var IconAtom = ({
     console.warn(`[IconAtom] Icon "${icon}" not found in lucide-react.`);
     return null;
   }
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const resolvedColor = hasPxVars ? void 0 : color;
+  const resolvedStyle = {
+    ...hasPxVars && { color: "var(--px-text-color, currentColor)" },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     IconComponent,
     {
       size,
-      color,
+      color: resolvedColor,
       strokeWidth,
-      className: cn("shrink-0", textColor, className),
-      style
+      className: cn("shrink-0", !hasPxVars && textColor, className),
+      style: resolvedStyle
     }
   );
 };
@@ -24935,6 +24943,14 @@ var ButtonAtom = ({
   };
   const customClass = variantMap[variant] || "";
   const shadcnVariant = ["purple", "gradient"].includes(variant) ? "default" : variant;
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const mergedStyle = {
+    ...style,
+    ...hasPxVars ? {
+      backgroundColor: "var(--px-accent-color)",
+      color: "var(--px-accent-fg)"
+    } : {}
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Button,
     {
@@ -24943,7 +24959,8 @@ var ButtonAtom = ({
       disabled: disabled || isLoading,
       onClick: handleClick,
       className: cn("rounded-full font-semibold", customClass, className),
-      style,
+      style: mergedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
         label
@@ -25072,6 +25089,15 @@ var CardAtom = ({
   style,
   renderComponent
 }) => {
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const mergedStyle = {
+    ...style,
+    ...hasPxVars ? {
+      backgroundColor: "var(--px-bg-color)",
+      borderColor: "var(--px-border-color)",
+      color: "var(--px-text-color)"
+    } : {}
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Card,
     {
@@ -25079,13 +25105,14 @@ var CardAtom = ({
         "rounded-[32px] border border-border/50 bg-card/80 text-card-foreground shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden backdrop-blur-xl ring-1 ring-border/5",
         className
       ),
-      style,
+      style: mergedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: [
         (title || description) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardHeader, { children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-xl font-bold text-gray900", children: title }),
           description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardDescription, { children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardContent, { className: "space-y-4", children: children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.default.Fragment, { children: renderComponent(child, index) }, child.id || `card-content-${index}`)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardContent, { className: "space-y-4", children: (children || []).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.default.Fragment, { children: renderComponent(child, index) }, child.id || `card-content-${index}`)) }),
         footer && footer.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardFooter, { className: "bg-gray50/50 border-t border-gray200 flex flex-wrap gap-2 pt-6", children: footer.map((footerChild, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.default.Fragment, { children: renderComponent(footerChild, index) }, footerChild.id || `card-footer-${index}`)) })
       ]
     }
@@ -25434,8 +25461,9 @@ var InputAtom = ({
   const alignmentClass = getAlignmentClass(style?.textAlign);
   const alignedContainerClass = cn(containerClass, alignmentClass);
   const { textAlign, ...remainingStyle } = style || {};
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   const labelBaseStyle = {
-    color: labelColor,
+    color: hasPxVars ? "var(--px-label-color, inherit)" : labelColor,
     backgroundColor: "transparent",
     background: "none"
   };
@@ -25455,6 +25483,14 @@ var InputAtom = ({
     );
   };
   const renderInput = () => {
+    const inputStyle = {
+      ...hasPxVars && {
+        color: "var(--px-text-color, inherit)",
+        backgroundColor: "var(--px-bg-color, transparent)",
+        borderColor: "var(--px-border-color, hsl(var(--border)))"
+      },
+      ...remainingStyle
+    };
     const commonProps = {
       placeholder,
       value: defaultValue,
@@ -25465,7 +25501,7 @@ var InputAtom = ({
         "rounded-xl border-border bg-transparent focus:ring-primary shadow-none",
         className
       ),
-      style: remainingStyle
+      style: inputStyle
     };
     switch (inputType) {
       case "textarea":
@@ -25585,7 +25621,6 @@ var InputAtom = ({
         );
     }
   };
-  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: alignedContainerClass, style: remainingStyle, "data-px-styled": hasPxVars ? "" : void 0, children: [
     inputType !== "checkbox" && inputType !== "switch" && renderLabel(),
     renderInput()
@@ -25701,9 +25736,22 @@ var AvatarAtom = ({
   className,
   style
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Avatar, { className: cn("h-10 w-10", className), style, children: [
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const fallbackStyle = hasPxVars ? {
+    backgroundColor: "var(--px-bg-color, var(--purple50))",
+    color: "var(--px-text-color, var(--purple100))",
+    borderColor: "var(--px-border-color, transparent)"
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Avatar, { className: cn("h-10 w-10", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: [
     src && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AvatarImage, { src, alt }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AvatarFallback, { className: "bg-purple50 text-purple600 font-bold uppercase", children: fallback })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      AvatarFallback,
+      {
+        className: cn("font-bold uppercase", !hasPxVars && "bg-purple50 text-purple600"),
+        style: fallbackStyle,
+        children: fallback
+      }
+    )
   ] });
 };
 
@@ -25871,7 +25919,20 @@ var ProgressAtom = ({
   style
 }) => {
   const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("w-full py-2", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Progress, { value, className: "h-2 bg-gray-100" }) });
+  const progressStyle = hasPxVars ? {
+    backgroundColor: "var(--px-track-color)"
+  } : {};
+  const wrapperStyle = {
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("w-full py-2", className), style: wrapperStyle, "data-px-styled": hasPxVars ? "" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    Progress,
+    {
+      value,
+      className: "h-2 bg-gray-100",
+      style: progressStyle
+    }
+  ) });
 };
 
 // src/components/ui/skeleton.tsx
@@ -25981,12 +26042,22 @@ var AlertAtom = ({
   };
   const customClass = variantMap[variant] || "";
   const shadcnVariant = ["warning", "info", "success"].includes(variant) ? "default" : variant;
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const mergedStyle = {
+    ...style,
+    ...hasPxVars ? {
+      color: "var(--px-text-color)",
+      backgroundColor: "var(--px-bg-color)",
+      borderColor: "var(--px-border-color)"
+    } : {}
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     Alert,
     {
       variant: shadcnVariant,
       className: cn("rounded-2xl", customClass, className),
-      style,
+      style: mergedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon3, { className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AlertTitle, { className: "font-bold", children: title }),
@@ -26022,13 +26093,20 @@ Separator2.displayName = SeparatorPrimitive.Root.displayName;
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var SeparatorAtom = ({
   orientation = "horizontal",
-  className
+  className,
+  style
 }) => {
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const resolvedStyle = {
+    ...hasPxVars && { backgroundColor: "var(--px-bg-color)" },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Separator2,
     {
       orientation,
-      className: cn("bg-gray-100", className)
+      className: cn("bg-gray-100", className),
+      style: resolvedStyle
     }
   );
 };
@@ -26149,11 +26227,11 @@ var TableAtom = ({
         borderColor
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Table3, { children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableRow, { style: { backgroundColor: headerBgColor }, children: safeHeaders.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           TableHead,
           {
             className: "text-xs font-bold uppercase tracking-widest px-6 py-4",
-            style: { color: headerTextColor },
+            style: { color: headerTextColor, backgroundColor: headerBgColor },
             children: header
           },
           i
@@ -31774,16 +31852,28 @@ var import_jsx_runtime56 = require("react/jsx-runtime");
 var CalendarAtom = ({
   mode = "single",
   selectedDate,
-  className
+  className,
+  style
 }) => {
   const date = selectedDate ? new Date(selectedDate) : void 0;
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const wrapperStyle = {
+    ...hasPxVars && {
+      backgroundColor: "var(--px-bg-color, transparent)",
+      borderColor: "var(--px-border-color, hsl(var(--border) / 0.5))",
+      color: "var(--px-text-color, inherit)"
+    },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       className: cn(
-        "p-4 bg-background/80 backdrop-blur-xl rounded-[28px] border border-border/50 shadow-[0_20px_50px_rgba(0,0,0,0.1)] inline-block transition-all hover:shadow-[0_20px_60px_rgba(0,0,0,0.15)] ring-1 ring-border/5",
+        "p-4 backdrop-blur-xl rounded-[28px] border shadow-[0_20px_50px_rgba(0,0,0,0.1)] inline-block transition-all hover:shadow-[0_20px_60px_rgba(0,0,0,0.15)] ring-1 ring-border/5",
+        !hasPxVars && "bg-background/80 border-border/50",
         className
       ),
+      style: wrapperStyle,
       children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Calendar2, { mode, selected: date, className: "rounded-xl" })
     }
   );
@@ -33395,6 +33485,7 @@ var ChartAtom = ({
   // Chart color customization props
   seriesColors
 }) => {
+  const safeData = Array.isArray(data) ? data : [];
   const buildConfigWithColors = (baseConfig) => {
     if (!seriesColors) return baseConfig;
     const coloredConfig = {};
@@ -33411,7 +33502,7 @@ var ChartAtom = ({
   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,
@@ -33437,7 +33528,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,
@@ -33463,7 +33554,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,
@@ -33495,12 +33586,12 @@ var ChartAtom = ({
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             import_recharts.Pie,
             {
-              data,
+              data: safeData,
               dataKey: YAxisKey || "value",
               nameKey: XAxisKey || "name",
               innerRadius: 60,
               strokeWidth: 5,
-              children: data.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              children: safeData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 import_recharts.Cell,
                 {
                   fill: seriesColors?.[index] || `var(--color-${Object.keys(safeConfig)[index] || "default"})`
@@ -33511,7 +33602,7 @@ var ChartAtom = ({
           )
         ] });
       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 }),
@@ -33529,7 +33620,7 @@ var ChartAtom = ({
         return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
           import_recharts.RadialBarChart,
           {
-            data,
+            data: safeData,
             innerRadius: 30,
             outerRadius: 110,
             barSize: 10,
@@ -33557,12 +33648,25 @@ var ChartAtom = ({
         return null;
     }
   };
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const wrapperStyle = {
+    ...hasPxVars && {
+      color: "var(--px-text-color, inherit)",
+      backgroundColor: "var(--px-bg-color, transparent)",
+      borderColor: "var(--px-border-color, transparent)",
+      borderWidth: hasPxVars ? "1px" : void 0,
+      borderStyle: hasPxVars ? "solid" : void 0,
+      borderRadius: "1rem",
+      padding: "0.75rem"
+    },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     ChartContainer,
     {
       config: safeConfig,
       className: cn("min-h-[200px] w-full", className),
-      style,
+      style: wrapperStyle,
       children: renderChart()
     }
   );
@@ -33605,7 +33709,8 @@ var import_react52 = __toESM(require("react"), 1);
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var RatingAtom = ({ value, max: max2 = 5, readonly = false, className, style, onChange }) => {
   const [hoverValue, setHoverValue] = import_react52.default.useState(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: cn("flex items-center gap-1", className), style, children: Array.from({ length: max2 }, (_, i) => {
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: cn("flex items-center gap-1", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: Array.from({ length: max2 }, (_, i) => {
     const starValue = i + 1;
     const isActive = (hoverValue ?? value) >= starValue;
     return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
@@ -33613,9 +33718,13 @@ var RatingAtom = ({ value, max: max2 = 5, readonly = false, className, style, on
       {
         className: cn(
           "h-5 w-5 transition-colors",
-          isActive ? "fill-yellow-400 text-yellow-400" : "text-gray-300",
+          !hasPxVars && (isActive ? "fill-yellow-400 text-yellow-400" : "text-gray-300"),
           !readonly && "cursor-pointer hover:scale-110"
         ),
+        style: hasPxVars ? {
+          color: isActive ? "var(--px-accent-color, #facc15)" : "var(--px-track-color, #d1d5db)",
+          fill: isActive ? "var(--px-accent-color, #facc15)" : "transparent"
+        } : void 0,
         onClick: () => !readonly && onChange?.(starValue),
         onMouseEnter: () => !readonly && setHoverValue(starValue),
         onMouseLeave: () => !readonly && setHoverValue(null)
@@ -34606,9 +34715,16 @@ var import_jsx_runtime97 = require("react/jsx-runtime");
 var StatsGrid = ({
   items,
   stats,
-  className
+  className,
+  style
 }) => {
   const displayItems = items || stats || [];
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const cardStyle = hasPxVars ? {
+    backgroundColor: "var(--px-bg-color, var(--card-background, white))",
+    borderColor: "var(--px-border-color, var(--border-color, #e5e7eb))"
+  } : void 0;
+  const textColor = hasPxVars ? "var(--px-text-color, inherit)" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     "div",
     {
@@ -34616,6 +34732,7 @@ var StatsGrid = ({
         "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
         className
       ),
+      style,
       children: displayItems?.map((item, index) => {
         const Icon3 = item.icon ? lucide_react_exports[item.icon] : null;
         const trendColor = item.trendDirection === "up" ? "text-emerald-600 dark:text-emerald-400" : item.trendDirection === "down" ? "text-rose-600 dark:text-rose-400" : "text-muted-foreground";
@@ -34623,7 +34740,11 @@ var StatsGrid = ({
         return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           Card,
           {
-            className: "bg-[var(--card-background,theme(colors.white))] dark:bg-[var(--card-background,theme(colors.zinc.900))] border-[var(--border-color,theme(colors.gray.200))] backdrop-blur-sm shadow-sm hover:shadow-md transition-all duration-300 rounded-[24px] overflow-hidden",
+            className: cn(
+              "backdrop-blur-sm shadow-sm hover:shadow-md transition-all duration-300 rounded-[24px] overflow-hidden",
+              !hasPxVars && "bg-[var(--card-background,theme(colors.white))] dark:bg-[var(--card-background,theme(colors.zinc.900))] border-[var(--border-color,theme(colors.gray.200))]"
+            ),
+            style: cardStyle,
             children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(CardContent, { className: "p-5 flex flex-col gap-1.5", children: [
               /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
@@ -34633,10 +34754,17 @@ var StatsGrid = ({
                     type: "text",
                     content: item.label,
                     variant: "small",
-                    className: "text-muted-foreground font-medium tracking-wide uppercase text-[10px]"
+                    className: cn(!hasPxVars && "text-muted-foreground", "font-medium tracking-wide uppercase text-[10px]"),
+                    style: textColor ? { color: textColor } : void 0
                   }
                 ),
-                Icon3 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Icon3, { className: "w-4 h-4 text-[var(--primary-color,theme(colors.purple.500))]" })
+                Icon3 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                  Icon3,
+                  {
+                    className: cn("w-4 h-4", !hasPxVars && "text-[var(--primary-color,theme(colors.purple.500))]"),
+                    style: textColor ? { color: textColor } : void 0
+                  }
+                )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-baseline gap-3", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
@@ -34647,9 +34775,11 @@ var StatsGrid = ({
                     content: String(item.value),
                     variant: "h3",
                     className: cn(
-                      "font-bold text-[var(--foreground)] tracking-tight leading-tight",
+                      "font-bold tracking-tight leading-tight",
+                      !hasPxVars && "text-[var(--foreground)]",
                       String(item.value).length > 20 ? "text-base" : String(item.value).length > 12 ? "text-lg" : "text-xl"
-                    )
+                    ),
+                    style: textColor ? { color: textColor } : void 0
                   }
                 ),
                 item.trend && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
@@ -34814,16 +34944,26 @@ var FilterBar = ({ filters, showSearch = true, className, onFilterToggle, onSear
 // src/molecules/generic/FileUpload/FileUpload.tsx
 var import_react57 = __toESM(require("react"), 1);
 var import_jsx_runtime101 = require("react/jsx-runtime");
-var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
+var FileUpload = ({ title, accept, multiple, className, style, onFilesSelected }) => {
   const [isDragging, setIsDragging] = import_react57.default.useState(false);
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const wrapperStyle = {
+    ...hasPxVars && {
+      borderColor: isDragging ? "var(--px-accent-color)" : "var(--px-border-color)",
+      backgroundColor: isDragging ? void 0 : "var(--px-bg-color, transparent)"
+    },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
     "div",
     {
       className: cn(
         "relative flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-3xl transition-all",
-        isDragging ? "border-purple-500 bg-purple-50" : "border-purple-100 bg-white",
+        !hasPxVars && (isDragging ? "border-purple-500 bg-purple-50" : "border-purple-100 bg-white"),
         className
       ),
+      style: wrapperStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       onDragOver: (e) => {
         e.preventDefault();
         setIsDragging(true);
@@ -34837,8 +34977,22 @@ var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-12 h-12 bg-purple-100 rounded-2xl flex items-center justify-center mb-4 text-purple-600", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Upload, { className: "w-6 h-6" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("h4", { className: "font-bold text-gray-900 mb-1", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+          "div",
+          {
+            className: cn("w-12 h-12 rounded-2xl flex items-center justify-center mb-4", !hasPxVars && "bg-purple-100 text-purple-600"),
+            style: hasPxVars ? { backgroundColor: "var(--px-accent-color)", color: "var(--px-accent-fg, white)", opacity: 0.15 } : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Upload, { className: "w-6 h-6", style: hasPxVars ? { color: "var(--px-accent-color)", opacity: 1 } : void 0 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+          "h4",
+          {
+            className: cn("font-bold mb-1", !hasPxVars && "text-gray-900"),
+            style: hasPxVars ? { color: "var(--px-text-color, inherit)" } : void 0,
+            children: title
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "text-sm text-muted-foreground mb-6", children: "Drag and drop or click to browse" }),
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           "input",
@@ -34854,7 +35008,8 @@ var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
           Button,
           {
             variant: "outline",
-            className: "rounded-full border-purple-200 text-purple-700 hover:bg-purple-50",
+            className: cn("rounded-full", !hasPxVars && "border-purple-200 text-purple-700 hover:bg-purple-50"),
+            style: hasPxVars ? { borderColor: "var(--px-accent-color)", color: "var(--px-accent-color)" } : void 0,
             children: "Select Files"
           }
         )