pxengine 0.1.58 → 0.1.59

package/dist/index.d.cts

@@ -1548,7 +1548,9 @@ declare const BreadcrumbAtom: React__default.FC<BreadcrumbAtomType>;
 
 declare const SpinnerAtom: React__default.FC<SpinnerAtomType>;
 
-declare const CalendarAtom: React__default.FC<CalendarAtomType>;
+declare const CalendarAtom: React__default.FC<CalendarAtomType & {
+    style?: React__default.CSSProperties;
+}>;
 
 declare const PaginationAtom: React__default.FC<PaginationAtomType>;
 
@@ -1957,6 +1959,7 @@ declare const FormCard: React__default.NamedExoticComponent<FormCardProps>;
  */
 declare const StatsGrid: React__default.FC<StatsGridMolecule & {
     stats?: any[];
+    style?: React__default.CSSProperties;
 }>;
 
 /**
@@ -1988,6 +1991,7 @@ declare const FilterBar: React__default.FC<FilterBarMolecule & {
  */
 declare const FileUpload: React__default.FC<FileUploadMolecule & {
     onFilesSelected?: (files: File[]) => void;
+    style?: React__default.CSSProperties;
 }>;
 
 /**

package/dist/index.d.ts

@@ -1548,7 +1548,9 @@ declare const BreadcrumbAtom: React__default.FC<BreadcrumbAtomType>;
 
 declare const SpinnerAtom: React__default.FC<SpinnerAtomType>;
 
-declare const CalendarAtom: React__default.FC<CalendarAtomType>;
+declare const CalendarAtom: React__default.FC<CalendarAtomType & {
+    style?: React__default.CSSProperties;
+}>;
 
 declare const PaginationAtom: React__default.FC<PaginationAtomType>;
 
@@ -1957,6 +1959,7 @@ declare const FormCard: React__default.NamedExoticComponent<FormCardProps>;
  */
 declare const StatsGrid: React__default.FC<StatsGridMolecule & {
     stats?: any[];
+    style?: React__default.CSSProperties;
 }>;
 
 /**
@@ -1988,6 +1991,7 @@ declare const FilterBar: React__default.FC<FilterBarMolecule & {
  */
 declare const FileUpload: React__default.FC<FileUploadMolecule & {
     onFilesSelected?: (files: File[]) => void;
+    style?: React__default.CSSProperties;
 }>;
 
 /**

package/dist/index.mjs

@@ -105,9 +105,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) {
@@ -24570,14 +24572,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__ */ jsx3(
     IconComponent,
     {
       size,
-      color,
+      color: resolvedColor,
       strokeWidth,
-      className: cn("shrink-0", textColor, className),
-      style
+      className: cn("shrink-0", !hasPxVars && textColor, className),
+      style: resolvedStyle
     }
   );
 };
@@ -24612,6 +24620,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__ */ jsx4(
     Button,
     {
@@ -24620,7 +24636,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__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx4(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
         label
@@ -24749,6 +24766,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__ */ jsxs2(
     Card,
     {
@@ -24756,13 +24782,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__ */ jsxs2(CardHeader, { children: [
           title && /* @__PURE__ */ jsx7(CardTitle, { className: "text-xl font-bold text-gray900", children: title }),
           description && /* @__PURE__ */ jsx7(CardDescription, { children: description })
         ] }),
-        /* @__PURE__ */ jsx7(CardContent, { className: "space-y-4", children: children.map((child, index) => /* @__PURE__ */ jsx7(React4.Fragment, { children: renderComponent(child, index) }, child.id || `card-content-${index}`)) }),
+        /* @__PURE__ */ jsx7(CardContent, { className: "space-y-4", children: (children || []).map((child, index) => /* @__PURE__ */ jsx7(React4.Fragment, { children: renderComponent(child, index) }, child.id || `card-content-${index}`)) }),
         footer && footer.length > 0 && /* @__PURE__ */ jsx7(CardFooter, { className: "bg-gray50/50 border-t border-gray200 flex flex-wrap gap-2 pt-6", children: footer.map((footerChild, index) => /* @__PURE__ */ jsx7(React4.Fragment, { children: renderComponent(footerChild, index) }, footerChild.id || `card-footer-${index}`)) })
       ]
     }
@@ -25111,8 +25138,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"
   };
@@ -25132,6 +25160,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,
@@ -25142,7 +25178,7 @@ var InputAtom = ({
         "rounded-xl border-border bg-transparent focus:ring-primary shadow-none",
         className
       ),
-      style: remainingStyle
+      style: inputStyle
     };
     switch (inputType) {
       case "textarea":
@@ -25262,7 +25298,6 @@ var InputAtom = ({
         );
     }
   };
-  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   return /* @__PURE__ */ jsxs6("div", { className: alignedContainerClass, style: remainingStyle, "data-px-styled": hasPxVars ? "" : void 0, children: [
     inputType !== "checkbox" && inputType !== "switch" && renderLabel(),
     renderInput()
@@ -25378,9 +25413,22 @@ var AvatarAtom = ({
   className,
   style
 }) => {
-  return /* @__PURE__ */ jsxs7(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__ */ jsxs7(Avatar, { className: cn("h-10 w-10", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: [
     src && /* @__PURE__ */ jsx21(AvatarImage, { src, alt }),
-    /* @__PURE__ */ jsx21(AvatarFallback, { className: "bg-purple50 text-purple600 font-bold uppercase", children: fallback })
+    /* @__PURE__ */ jsx21(
+      AvatarFallback,
+      {
+        className: cn("font-bold uppercase", !hasPxVars && "bg-purple50 text-purple600"),
+        style: fallbackStyle,
+        children: fallback
+      }
+    )
   ] });
 };
 
@@ -25548,7 +25596,20 @@ var ProgressAtom = ({
   style
 }) => {
   const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
-  return /* @__PURE__ */ jsx27("div", { className: cn("w-full py-2", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: /* @__PURE__ */ jsx27(Progress, { value, className: "h-2 bg-gray-100" }) });
+  const progressStyle = hasPxVars ? {
+    backgroundColor: "var(--px-track-color)"
+  } : {};
+  const wrapperStyle = {
+    ...style
+  };
+  return /* @__PURE__ */ jsx27("div", { className: cn("w-full py-2", className), style: wrapperStyle, "data-px-styled": hasPxVars ? "" : void 0, children: /* @__PURE__ */ jsx27(
+    Progress,
+    {
+      value,
+      className: "h-2 bg-gray-100",
+      style: progressStyle
+    }
+  ) });
 };
 
 // src/components/ui/skeleton.tsx
@@ -25658,12 +25719,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__ */ jsxs11(
     Alert,
     {
       variant: shadcnVariant,
       className: cn("rounded-2xl", customClass, className),
-      style,
+      style: mergedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: [
         /* @__PURE__ */ jsx31(Icon3, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsx31(AlertTitle, { className: "font-bold", children: title }),
@@ -25699,13 +25770,20 @@ Separator2.displayName = SeparatorPrimitive.Root.displayName;
 import { jsx as jsx33 } from "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__ */ jsx33(
     Separator2,
     {
       orientation,
-      className: cn("bg-gray-100", className)
+      className: cn("bg-gray-100", className),
+      style: resolvedStyle
     }
   );
 };
@@ -25826,11 +25904,11 @@ var TableAtom = ({
         borderColor
       },
       children: /* @__PURE__ */ jsxs12(Table3, { children: [
-        /* @__PURE__ */ jsx35(TableHeader, { style: { backgroundColor: headerBgColor }, children: /* @__PURE__ */ jsx35(TableRow, { children: safeHeaders.map((header, i) => /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx35(TableHeader, { children: /* @__PURE__ */ jsx35(TableRow, { style: { backgroundColor: headerBgColor }, children: safeHeaders.map((header, i) => /* @__PURE__ */ jsx35(
           TableHead,
           {
             className: "text-xs font-bold uppercase tracking-widest px-6 py-4",
-            style: { color: headerTextColor },
+            style: { color: headerTextColor, backgroundColor: headerBgColor },
             children: header
           },
           i
@@ -31451,16 +31529,28 @@ import { jsx as jsx56 } from "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__ */ jsx56(
     "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__ */ jsx56(Calendar2, { mode, selected: date, className: "rounded-xl" })
     }
   );
@@ -33257,12 +33347,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__ */ jsx85(
     ChartContainer,
     {
       config: safeConfig,
       className: cn("min-h-[200px] w-full", className),
-      style,
+      style: wrapperStyle,
       children: renderChart()
     }
   );
@@ -33305,7 +33408,8 @@ import React80 from "react";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var RatingAtom = ({ value, max: max2 = 5, readonly = false, className, style, onChange }) => {
   const [hoverValue, setHoverValue] = React80.useState(null);
-  return /* @__PURE__ */ jsx87("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__ */ jsx87("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__ */ jsx87(
@@ -33313,9 +33417,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)
@@ -34306,9 +34414,16 @@ import { jsx as jsx97, jsxs as jsxs57 } from "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__ */ jsx97(
     "div",
     {
@@ -34316,6 +34431,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";
@@ -34323,7 +34439,11 @@ var StatsGrid = ({
         return /* @__PURE__ */ jsx97(
           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__ */ jsxs57(CardContent, { className: "p-5 flex flex-col gap-1.5", children: [
               /* @__PURE__ */ jsxs57("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx97(
@@ -34333,10 +34453,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__ */ jsx97(Icon3, { className: "w-4 h-4 text-[var(--primary-color,theme(colors.purple.500))]" })
+                Icon3 && /* @__PURE__ */ jsx97(
+                  Icon3,
+                  {
+                    className: cn("w-4 h-4", !hasPxVars && "text-[var(--primary-color,theme(colors.purple.500))]"),
+                    style: textColor ? { color: textColor } : void 0
+                  }
+                )
               ] }),
               /* @__PURE__ */ jsxs57("div", { className: "flex items-baseline gap-3", children: [
                 /* @__PURE__ */ jsx97(
@@ -34347,9 +34474,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__ */ jsxs57(
@@ -34514,16 +34643,26 @@ var FilterBar = ({ filters, showSearch = true, className, onFilterToggle, onSear
 // src/molecules/generic/FileUpload/FileUpload.tsx
 import React88 from "react";
 import { jsx as jsx101, jsxs as jsxs61 } from "react/jsx-runtime";
-var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
+var FileUpload = ({ title, accept, multiple, className, style, onFilesSelected }) => {
   const [isDragging, setIsDragging] = React88.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__ */ jsxs61(
     "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);
@@ -34537,8 +34676,22 @@ var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
         }
       },
       children: [
-        /* @__PURE__ */ jsx101("div", { className: "w-12 h-12 bg-purple-100 rounded-2xl flex items-center justify-center mb-4 text-purple-600", children: /* @__PURE__ */ jsx101(Upload, { className: "w-6 h-6" }) }),
-        /* @__PURE__ */ jsx101("h4", { className: "font-bold text-gray-900 mb-1", children: title }),
+        /* @__PURE__ */ jsx101(
+          "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__ */ jsx101(Upload, { className: "w-6 h-6", style: hasPxVars ? { color: "var(--px-accent-color)", opacity: 1 } : void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx101(
+          "h4",
+          {
+            className: cn("font-bold mb-1", !hasPxVars && "text-gray-900"),
+            style: hasPxVars ? { color: "var(--px-text-color, inherit)" } : void 0,
+            children: title
+          }
+        ),
         /* @__PURE__ */ jsx101("p", { className: "text-sm text-muted-foreground mb-6", children: "Drag and drop or click to browse" }),
         /* @__PURE__ */ jsx101(
           "input",
@@ -34554,7 +34707,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"
           }
         )