pxengine 0.1.11 → 0.1.13

package/dist/index.cjs

@@ -31808,7 +31808,8 @@ var import_jsx_runtime41 = require("react/jsx-runtime");
 var TextAtom = ({
   content,
   variant = "p",
-  className
+  className,
+  style
 }) => {
   const baseStyles = {
     h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray900",
@@ -31821,7 +31822,7 @@ var TextAtom = ({
     label: "text-[10px] font-bold text-gray400 uppercase tracking-widest pl-1"
   };
   const Component2 = variant === "small" || variant === "muted" || variant === "label" ? "p" : variant;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Component2, { className: cn(baseStyles[variant], className), children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Component2, { className: cn(baseStyles[variant], className), style, children: content });
 };
 
 // src/atoms/ButtonAtom.tsx
@@ -31834,7 +31835,8 @@ var ButtonAtom = ({
   disabled = false,
   isLoading = false,
   onAction,
-  className
+  className,
+  style
 }) => {
   const handleClick = (e) => {
     e.preventDefault();
@@ -31857,6 +31859,7 @@ var ButtonAtom = ({
       disabled: disabled || isLoading,
       onClick: handleClick,
       className: cn("rounded-full font-semibold", customClass, className),
+      style,
       children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
         label
@@ -31901,6 +31904,7 @@ var CardAtom = ({
   children,
   footer,
   className,
+  style,
   renderComponent
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
@@ -31910,6 +31914,7 @@ 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,
       children: [
         (title || description) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(CardHeader, { children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CardTitle, { className: "text-xl font-bold text-gray900", children: title }),
@@ -31933,7 +31938,8 @@ var InputAtom = ({
   disabled,
   options,
   config,
-  className
+  className,
+  style
 }) => {
   const containerClass = cn("flex flex-col gap-2 w-full", className);
   const renderLabel = () => {
@@ -31945,82 +31951,116 @@ var InputAtom = ({
     ] });
   };
   const renderInput = () => {
+    const commonProps = {
+      placeholder,
+      value: defaultValue,
+      disabled,
+      required,
+      readOnly: true,
+      className: cn(
+        "rounded-xl border-border bg-background focus:ring-primary shadow-sm",
+        className
+      ),
+      style
+    };
     switch (inputType) {
       case "textarea":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          Textarea,
-          {
-            className: "rounded-xl border-border bg-background focus:ring-primary shadow-sm",
-            placeholder,
-            defaultValue,
-            disabled,
-            rows: config?.rows || 3
-          }
-        );
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Textarea, { ...commonProps, rows: config?.rows || 3 });
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Select, { defaultValue, disabled, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectTrigger, { className: "rounded-xl border-border bg-background shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectValue, { placeholder: placeholder || "Select option" }) }),
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Select, { value: defaultValue, disabled, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            SelectTrigger,
+            {
+              className: cn(
+                "rounded-xl border-border bg-background shadow-sm",
+                className
+              ),
+              style,
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectValue, { placeholder: placeholder || "Select option" })
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectContent, { className: "rounded-xl border-border shadow-xl", children: options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
         ] });
       case "slider":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "pt-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "pt-2 pb-1", style, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           Slider,
           {
-            defaultValue: [defaultValue || config?.min || 0],
+            value: [defaultValue || config?.min || 0],
             max: config?.max || 100,
             min: config?.min || 0,
             step: config?.step || 1,
             disabled,
-            className: "py-4"
+            className: cn("py-4", className)
           }
         ) });
       case "checkbox":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center space-x-3 py-1.5 px-0.5 group cursor-pointer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            Checkbox,
-            {
-              id: label,
-              defaultChecked: defaultValue,
-              disabled,
-              className: "rounded-[6px] border-border data-[state=checked]:bg-primary shadow-sm"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            "label",
-            {
-              htmlFor: label,
-              className: "text-sm font-medium leading-none cursor-pointer text-foreground/90 group-hover:text-foreground transition-colors",
-              children: label
-            }
-          )
-        ] });
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex items-center space-x-3 py-1.5 px-0.5 group cursor-pointer",
+              className
+            ),
+            style,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                Checkbox,
+                {
+                  id: label,
+                  checked: defaultValue,
+                  disabled,
+                  className: "rounded-[6px] border-border data-[state=checked]:bg-primary shadow-sm"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                "label",
+                {
+                  htmlFor: label,
+                  className: "text-sm font-medium leading-none cursor-pointer text-foreground/90 group-hover:text-foreground transition-colors",
+                  children: label
+                }
+              )
+            ]
+          }
+        );
       case "switch":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center justify-between py-1.5 px-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            Label,
-            {
-              htmlFor: label,
-              className: "cursor-pointer text-foreground/90",
-              children: label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            Switch,
-            {
-              id: label,
-              defaultChecked: defaultValue,
-              disabled,
-              className: "data-[state=checked]:bg-primary shadow-sm"
-            }
-          )
-        ] });
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between py-1.5 px-0.5",
+              className
+            ),
+            style,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                Label,
+                {
+                  htmlFor: label,
+                  className: "cursor-pointer text-foreground/90",
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                Switch,
+                {
+                  id: label,
+                  checked: defaultValue,
+                  disabled,
+                  className: "data-[state=checked]:bg-primary shadow-sm"
+                }
+              )
+            ]
+          }
+        );
       case "radio":
         return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           RadioGroup,
           {
-            defaultValue,
+            value: defaultValue,
             disabled,
-            className: "gap-2.5",
+            className: cn("gap-2.5", className),
+            style,
             children: options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center space-x-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 RadioGroupItem,
@@ -32042,37 +32082,44 @@ var InputAtom = ({
           }
         );
       case "otp":
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          InputOTP,
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
           {
-            maxLength: config?.maxLength || 6,
-            disabled,
-            defaultValue,
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InputOTPGroup, { className: "gap-2", children: Array.from({ length: config?.maxLength || 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              InputOTPSlot,
+            className: cn("flex justify-center py-2", className),
+            style,
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              InputOTP,
               {
-                index: i,
-                className: "rounded-xl border border-border bg-background shadow-sm"
-              },
-              i
-            )) })
+                maxLength: config?.maxLength || 6,
+                disabled,
+                value: defaultValue,
+                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InputOTPGroup, { className: "gap-2", children: Array.from({ length: config?.maxLength || 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  InputOTPSlot,
+                  {
+                    index: i,
+                    className: "rounded-xl border border-border bg-background shadow-sm"
+                  },
+                  i
+                )) })
+              }
+            )
           }
-        ) });
+        );
       default:
         return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           Input,
           {
+            ...commonProps,
             type: inputType,
-            placeholder,
-            defaultValue,
-            disabled,
-            required,
-            className: "rounded-xl border-border bg-background focus:ring-primary shadow-sm h-11"
+            className: cn(
+              "rounded-xl border-border bg-background focus:ring-primary shadow-sm h-11",
+              className
+            )
           }
         );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: containerClass, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: containerClass, style, children: [
     inputType !== "checkbox" && inputType !== "switch" && renderLabel(),
     renderInput()
   ] });
@@ -32083,7 +32130,8 @@ var import_jsx_runtime46 = require("react/jsx-runtime");
 var BadgeAtom = ({
   label,
   variant = "default",
-  className
+  className,
+  style
 }) => {
   const customVariants = {
     purple: "bg-primary/10 text-primary border-primary/20 hover:bg-primary/20",
@@ -32101,6 +32149,7 @@ var BadgeAtom = ({
         customClass,
         className
       ),
+      style,
       children: label
     }
   );
@@ -32112,9 +32161,10 @@ var AvatarAtom = ({
   src,
   fallback,
   alt,
-  className
+  className,
+  style
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Avatar, { className: cn("h-10 w-10", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Avatar, { className: cn("h-10 w-10", className), style, children: [
     src && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AvatarImage, { src, alt }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AvatarFallback, { className: "bg-purple50 text-purple600 font-bold uppercase", children: fallback })
   ] });
@@ -32201,7 +32251,8 @@ var AlertAtom = ({
   title,
   description,
   variant = "default",
-  className
+  className,
+  style
 }) => {
   const IconMap = {
     default: Info,
@@ -32223,6 +32274,7 @@ var AlertAtom = ({
     {
       variant: shadcnVariant,
       className: cn("rounded-2xl", customClass, className),
+      style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon3, { className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AlertTitle, { className: "font-bold", children: title }),
@@ -32252,7 +32304,8 @@ var import_jsx_runtime54 = require("react/jsx-runtime");
 var TableAtom = ({
   headers,
   rows,
-  className
+  className,
+  style
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
@@ -32261,6 +32314,7 @@ var TableAtom = ({
         "rounded-2xl border border-gray-100 overflow-hidden bg-white",
         className
       ),
+      style,
       children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Table3, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TableHeader, { className: "bg-gray-50/50", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TableRow, { children: headers.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           TableHead,
@@ -33357,7 +33411,8 @@ var ChartAtom = ({
   showTooltip = true,
   showLegend = true,
   stacked = false,
-  className
+  className,
+  style
 }) => {
   const renderChart = () => {
     switch (chartType) {
@@ -33498,6 +33553,7 @@ var ChartAtom = ({
     {
       config,
       className: cn("min-h-[200px] w-full", className),
+      style,
       children: renderChart()
     }
   );
@@ -37514,7 +37570,50 @@ var renderNotFoundError = (componentName, key) => {
 };
 var normalizeProps = (props) => {
   const normalized = {};
+  const dynamicStyle = {};
   Object.entries(props).forEach(([key, value]) => {
+    if (key === "className" && typeof value === "string") {
+      const classes = value.match(/(?:[^\s\[]|\[[^\]]*\])+/g) || [];
+      classes.forEach((cls) => {
+        const hexMatch = cls.match(
+          /^(bg|text|border)-\[#([0-9a-fA-F]{3,6})(?:\/(\d+))?\]$/
+        );
+        if (hexMatch) {
+          const [, type, hex, opacity] = hexMatch;
+          const color = `#${hex}${opacity ? Math.round(parseInt(opacity) / 100 * 255).toString(16).padStart(2, "0") : ""}`;
+          if (type === "bg") dynamicStyle.backgroundColor = color;
+          if (type === "text") dynamicStyle.color = color;
+          if (type === "border") dynamicStyle.borderColor = color;
+        }
+        const roundedMatch = cls.match(/^rounded-\[(.+)\]$/);
+        if (roundedMatch) {
+          dynamicStyle.borderRadius = roundedMatch[1].replace(/_/g, " ");
+        }
+        const paddingMatch = cls.match(/^(p|px|py)-\[(.+)\]$/);
+        if (paddingMatch) {
+          const [, type, val] = paddingMatch;
+          const cssVal = val.replace(/_/g, " ");
+          if (type === "p") dynamicStyle.padding = cssVal;
+          if (type === "px") {
+            dynamicStyle.paddingLeft = cssVal;
+            dynamicStyle.paddingRight = cssVal;
+          }
+          if (type === "py") {
+            dynamicStyle.paddingTop = cssVal;
+            dynamicStyle.paddingBottom = cssVal;
+          }
+        }
+        const shadowMatch = cls.match(/^shadow-\[(.+)\]$/);
+        if (shadowMatch) {
+          dynamicStyle.boxShadow = shadowMatch[1].replace(/_/g, " ");
+        }
+      });
+      normalized[key] = value;
+      return;
+    }
+    if (["type", "component", "name"].includes(key)) {
+      return;
+    }
     if (value === "true") {
       normalized[key] = true;
       return;
@@ -37523,15 +37622,13 @@ var normalizeProps = (props) => {
       normalized[key] = false;
       return;
     }
-    if (typeof value === "string" && value.trim() !== "" && !isNaN(Number(value)) && // Don't convert strings that are purely numeric but might be IDs or phone numbers
-    // A simple heuristic: if it's a small integer or a float, it's likely a prop number
-    (value.includes(".") || value.length < 10 && !value.startsWith("0") || value === "0")) {
+    if (typeof value === "string" && value.trim() !== "" && !isNaN(Number(value)) && (value.includes(".") || value.length < 10 && !value.startsWith("0") || value === "0")) {
       normalized[key] = Number(value);
       return;
     }
     normalized[key] = value;
   });
-  return normalized;
+  return { normalized, dynamicStyle };
 };
 var PXEngineRenderer = ({
   schema,
@@ -37559,29 +37656,11 @@ var PXEngineRenderer = ({
     const componentName = name || type || componentType;
     if (!componentName || typeof componentName !== "string") return null;
     const rawProps = { ...remainingProps, ...props };
-    const finalProps = normalizeProps(rawProps);
-    if (process.env.NODE_ENV === "development") {
-      const propTypes = Object.fromEntries(
-        Object.entries(finalProps).map(([k, v]) => [k, typeof v])
-      );
-      console.log(
-        `[PXEngineRenderer] Final props for ${componentName}:`,
-        finalProps,
-        "Types:",
-        propTypes
-      );
-    }
+    const { normalized: finalProps, dynamicStyle } = normalizeProps(rawProps);
     if (id && !finalProps.id) {
       finalProps.id = id;
     }
     const uniqueKey = id || `${componentName}-${index || Math.random().toString(36).substr(2, 9)}`;
-    if (process.env.NODE_ENV === "development") {
-      console.log(`[PXEngineRenderer] Rendering ${componentName}`, {
-        id,
-        props: finalProps,
-        childrenCount: Array.isArray(children) ? children.length : children ? 1 : 0
-      });
-    }
     const normalizedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
     const resolveComponent = (identifier) => {
       const normalized = identifier.charAt(0).toUpperCase() + identifier.slice(1);
@@ -37605,11 +37684,6 @@ var PXEngineRenderer = ({
     }
     if (!TargetComponent) {
       if (CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
-        if (process.env.NODE_ENV === "development") {
-          console.error(
-            `[PXEngineRenderer] Cannot render context-dependent component: ${componentName}. Use ${COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom`} instead.`
-          );
-        }
         return renderContextDependentError(
           componentName,
           normalizedName,
@@ -37622,20 +37696,31 @@ var PXEngineRenderer = ({
         return renderNotFoundError(componentName, uniqueKey);
       }
     }
-    if (process.env.NODE_ENV === "development") {
-      console.log(
-        `[PXEngineRenderer] Resolved ${componentName} to component`,
-        TargetComponent.displayName || TargetComponent.name || "Anonymous"
-      );
-    }
     const resolvedNormalized = resolvedIdentifier.charAt(0).toUpperCase() + resolvedIdentifier.slice(1);
     const atomName = resolvedNormalized.endsWith("Atom") ? resolvedNormalized : `${resolvedNormalized}Atom`;
-    const isAtomWithRenderProp = atomName in atoms_exports;
+    const ATOMS_WITH_RENDER = /* @__PURE__ */ new Set([
+      "LayoutAtom",
+      "CardAtom",
+      "TabsAtom",
+      "AccordionAtom",
+      "ScrollAreaAtom",
+      "CarouselAtom",
+      "AspectRatioAtom",
+      "CollapsibleAtom",
+      "TooltipAtom",
+      "PopoverAtom",
+      "DialogAtom",
+      "SheetAtom",
+      "ResizableAtom"
+    ]);
+    const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
+    const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
       return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         TargetComponent,
         {
           ...finalProps,
+          style: finalStyle,
           onAction,
           renderComponent: renderRecursive,
           children
@@ -37643,7 +37728,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(TargetComponent, { ...finalProps, children: Array.isArray(children) ? children.map((child, idx) => renderRecursive(child, idx)) : children }, uniqueKey);
+      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(TargetComponent, { ...finalProps, style: finalStyle, children: Array.isArray(children) ? children.map((child, idx) => renderRecursive(child, idx)) : children }, uniqueKey);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });

package/dist/index.d.cts

@@ -570,6 +570,7 @@ interface BaseAtom {
     id: string;
     type: string;
     className?: string;
+    style?: React.CSSProperties;
 }
 interface ButtonAtomType extends BaseAtom {
     type: "button";

package/dist/index.d.ts

@@ -570,6 +570,7 @@ interface BaseAtom {
     id: string;
     type: string;
     className?: string;
+    style?: React.CSSProperties;
 }
 interface ButtonAtomType extends BaseAtom {
     type: "button";