@developer_tribe/react-builder 1.0.8 → 1.0.9

package/src/assets/samples/vpn-onboard-6.json

@@ -1,6 +1,6 @@
 {
-  "name": "vpn-onboard-6 (legacy)",
-  "version": "1.0.0",
+  "name": "vpn-onboard-6",
+  "version": "1.1.0",
   "type": "onboard",
   "appConfig": {
     "theme": "dark",
@@ -85,309 +85,349 @@
     "children": [
       {
         "type": "OnboardProvider",
-    "children": [
-      {
-        "type": "Onboard",
         "children": [
           {
-            "type": "OnboardItem",
-            "key": "app_onboard-page1",
+            "type": "Onboard",
             "children": [
               {
-                "type": "OnboardImage",
-                "attributes": {
-                  "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/9cb1d668b3724655f93a91e5eee771c5.png",
-                  "height": 400,
-                  "resizeMode": "contain"
-                }
+                "type": "OnboardItem",
+                "key": "app_onboard-page1",
+                "children": [
+                  {
+                    "type": "OnboardImage",
+                    "attributes": {
+                      "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/9cb1d668b3724655f93a91e5eee771c5.png",
+                      "resizeMode": "contain",
+                      "style": {
+                        "height": 400
+                      }
+                    }
+                  },
+                  {
+                    "type": "OnboardTitle",
+                    "attributes": {
+                      "style": {
+                        "color": "#F4F5FF"
+                      }
+                    },
+                    "children": "onboard.title.one-page"
+                  },
+                  {
+                    "type": "OnboardSubtitle",
+                    "attributes": {
+                      "style": {
+                        "color": "#DBDDEB"
+                      }
+                    },
+                    "children": "onboard.subtitle.one-page"
+                  }
+                ]
               },
               {
-                "type": "OnboardTitle",
-                "attributes": {
-                  "color": "#F4F5FF"
-                },
-                "children": "onboard.title.one-page"
+                "type": "OnboardItem",
+                "key": "app_onboard-page2",
+                "children": [
+                  {
+                    "type": "OnboardImage",
+                    "attributes": {
+                      "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/f8d0c64bf89cc5f2f14126d0544ba174.png",
+                      "resizeMode": "contain",
+                      "style": {
+                        "height": 400
+                      }
+                    }
+                  },
+                  {
+                    "type": "OnboardTitle",
+                    "attributes": {
+                      "style": {
+                        "color": "#F4F5FF"
+                      }
+                    },
+                    "children": "onboard.title.two-page"
+                  },
+                  {
+                    "type": "OnboardSubtitle",
+                    "attributes": {
+                      "style": {
+                        "color": "#DBDDEB"
+                      }
+                    },
+                    "children": "onboard.subtitle.two-page"
+                  }
+                ]
               },
               {
-                "type": "OnboardSubtitle",
-                "attributes": {
-                  "color": "#DBDDEB"
-                },
-                "children": "onboard.subtitle.one-page"
+                "type": "OnboardItem",
+                "key": "app_onboard-page3",
+                "children": [
+                  {
+                    "type": "OnboardImage",
+                    "attributes": {
+                      "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/ad823809885c1a2a8e4632039f35a94e.png",
+                      "resizeMode": "contain",
+                      "style": {
+                        "height": 400
+                      }
+                    }
+                  },
+                  {
+                    "type": "OnboardTitle",
+                    "attributes": {
+                      "style": {
+                        "color": "#F4F5FF"
+                      }
+                    },
+                    "children": "onboard.title.three-page"
+                  },
+                  {
+                    "type": "OnboardSubtitle",
+                    "attributes": {
+                      "style": {
+                        "color": "#DBDDEB"
+                      }
+                    },
+                    "children": "onboard.subtitle.three-page"
+                  }
+                ]
+              },
+              {
+                "type": "OnboardItem",
+                "key": "app_onboard-page4",
+                "children": [
+                  {
+                    "type": "OnboardImage",
+                    "attributes": {
+                      "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/ede1705c51f3434ae9053ed5f29bf5dd.png",
+                      "resizeMode": "contain",
+                      "style": {
+                        "height": 400
+                      }
+                    }
+                  },
+                  {
+                    "type": "OnboardTitle",
+                    "attributes": {
+                      "style": {
+                        "color": "#F4F5FF"
+                      }
+                    },
+                    "children": "onboard.title.four-page"
+                  },
+                  {
+                    "type": "OnboardSubtitle",
+                    "attributes": {
+                      "style": {
+                        "color": "#DBDDEB"
+                      }
+                    },
+                    "children": "onboard.subtitle.four-page"
+                  }
+                ]
               }
             ]
           },
           {
-            "type": "OnboardItem",
-            "key": "app_onboard-page2",
+            "type": "OnboardDot",
+            "attributes": {
+              "dotType": "expanding_dot",
+              "expanding_dot_width": 20
+            }
+          },
+          {
+            "type": "OnboardButtons",
+            "attributes": {
+              "buttons_direction": "row",
+              "condition": "carousel-index",
+              "conditionVariable": 0
+            },
             "children": [
               {
-                "type": "OnboardImage",
+                "type": "OnboardButton",
                 "attributes": {
-                  "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/f8d0c64bf89cc5f2f14126d0544ba174.png",
-                  "height": 400,
-                  "resizeMode": "contain"
+                  "labelKey": "onboard.skip.one-page",
+                  "button_text_color": "#0450E2",
+                  "button_background_color": "#161827",
+                  "events": [
+                    {
+                      "type": "Navigate",
+                      "navigate_to": null,
+                      "targetIndex": 3
+                    }
+                  ],
+                  "style": {
+                    "flex": 1
+                  }
                 }
               },
               {
-                "type": "OnboardTitle",
-                "attributes": {
-                  "color": "#F4F5FF"
-                },
-                "children": "onboard.title.two-page"
-              },
-              {
-                "type": "OnboardSubtitle",
+                "type": "OnboardButton",
                 "attributes": {
-                  "color": "#DBDDEB"
-                },
-                "children": "onboard.subtitle.two-page"
+                  "labelKey": "onboard.next.one-page",
+                  "button_text_color": "#FFFFFF",
+                  "button_background_color": "#0450E2",
+                  "events": [
+                    {
+                      "type": "Navigate",
+                      "navigate_to": null,
+                      "targetIndex": 1
+                    }
+                  ],
+                  "style": {
+                    "flex": 1
+                  }
+                }
               }
             ]
           },
           {
-            "type": "OnboardItem",
-            "key": "app_onboard-page3",
+            "type": "OnboardButtons",
+            "attributes": {
+              "buttons_direction": "row",
+              "condition": "carousel-index",
+              "conditionVariable": 1
+            },
             "children": [
               {
-                "type": "OnboardImage",
+                "type": "OnboardButton",
                 "attributes": {
-                  "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/ad823809885c1a2a8e4632039f35a94e.png",
-                  "height": 400,
-                  "resizeMode": "contain"
+                  "labelKey": "onboard.skip.two-page",
+                  "button_text_color": "#0450E2",
+                  "button_background_color": "#161827",
+                  "events": [
+                    {
+                      "type": "Navigate",
+                      "navigate_to": null,
+                      "targetIndex": 3
+                    }
+                  ],
+                  "style": {
+                    "flex": 1
+                  }
                 }
               },
               {
-                "type": "OnboardTitle",
-                "attributes": {
-                  "color": "#F4F5FF"
-                },
-                "children": "onboard.title.three-page"
-              },
-              {
-                "type": "OnboardSubtitle",
+                "type": "OnboardButton",
                 "attributes": {
-                  "color": "#DBDDEB"
-                },
-                "children": "onboard.subtitle.three-page"
+                  "labelKey": "onboard.next.two-page",
+                  "button_text_color": "#FFFFFF",
+                  "button_background_color": "#0450E2",
+                  "events": [
+                    {
+                      "type": "Navigate",
+                      "navigate_to": null,
+                      "targetIndex": 2
+                    }
+                  ],
+                  "style": {
+                    "flex": 1
+                  }
+                }
               }
             ]
           },
           {
-            "type": "OnboardItem",
-            "key": "app_onboard-page4",
+            "type": "OnboardButtons",
+            "attributes": {
+              "buttons_direction": "row",
+              "condition": "carousel-index",
+              "conditionVariable": 2
+            },
             "children": [
               {
-                "type": "OnboardImage",
+                "type": "OnboardButton",
                 "attributes": {
-                  "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/ede1705c51f3434ae9053ed5f29bf5dd.png",
-                  "height": 400,
-                  "resizeMode": "contain"
+                  "labelKey": "onboard.skip.three-page",
+                  "button_text_color": "#0450E2",
+                  "button_background_color": "#161827",
+                  "events": [
+                    {
+                      "type": "Navigate",
+                      "navigate_to": null,
+                      "targetIndex": 3
+                    }
+                  ],
+                  "style": {
+                    "flex": 1
+                  }
                 }
               },
               {
-                "type": "OnboardTitle",
-                "attributes": {
-                  "color": "#F4F5FF"
-                },
-                "children": "onboard.title.four-page"
-              },
-              {
-                "type": "OnboardSubtitle",
+                "type": "OnboardButton",
                 "attributes": {
-                  "color": "#DBDDEB"
-                },
-                "children": "onboard.subtitle.four-page"
+                  "labelKey": "onboard.next.three-page",
+                  "button_text_color": "#FFFFFF",
+                  "button_background_color": "#0450E2",
+                  "events": [
+                    {
+                      "type": "Permission",
+                      "permission": "rating"
+                    },
+                    {
+                      "type": "Navigate",
+                      "navigate_to": null,
+                      "targetIndex": 3
+                    }
+                  ],
+                  "style": {
+                    "flex": 1
+                  }
+                }
               }
             ]
-          }
-        ]
-      },
-      {
-        "type": "OnboardDot",
-        "attributes": {
-          "dotType": "expanding_dot",
-          "expanding_dot_width": 20
-        }
-      },
-      {
-        "type": "OnboardButtons",
-        "attributes": {
-          "buttons_direction": "row",
-          "condition": "carousel-index",
-          "conditionVariable": 0
-        },
-        "children": [
-          {
-            "type": "OnboardButton",
-            "attributes": {
-              "labelKey": "onboard.skip.one-page",
-              "button_text_color": "#0450E2",
-              "button_background_color": "#161827",
-              "flex": 1,
-              "events": [
-                {
-                  "type": "Navigate",
-                  "navigate_to": null,
-                  "targetIndex": 3
-                }
-              ]
-            }
-          },
-          {
-            "type": "OnboardButton",
-            "attributes": {
-              "labelKey": "onboard.next.one-page",
-              "button_text_color": "#FFFFFF",
-              "button_background_color": "#0450E2",
-              "flex": 1,
-              "events": [
-                {
-                  "type": "Navigate",
-                  "navigate_to": null,
-                  "targetIndex": 1
-                }
-              ]
-            }
-          }
-        ]
-      },
-      {
-        "type": "OnboardButtons",
-        "attributes": {
-          "buttons_direction": "row",
-          "condition": "carousel-index",
-          "conditionVariable": 1
-        },
-        "children": [
-          {
-            "type": "OnboardButton",
-            "attributes": {
-              "labelKey": "onboard.skip.two-page",
-              "button_text_color": "#0450E2",
-              "button_background_color": "#161827",
-              "flex": 1,
-              "events": [
-                {
-                  "type": "Navigate",
-                  "navigate_to": null,
-                  "targetIndex": 3
-                }
-              ]
-            }
           },
           {
-            "type": "OnboardButton",
-            "attributes": {
-              "labelKey": "onboard.next.two-page",
-              "button_text_color": "#FFFFFF",
-              "button_background_color": "#0450E2",
-              "flex": 1,
-              "events": [
-                {
-                  "type": "Navigate",
-                  "navigate_to": null,
-                  "targetIndex": 2
-                }
-              ]
-            }
-          }
-        ]
-      },
-      {
-        "type": "OnboardButtons",
-        "attributes": {
-          "buttons_direction": "row",
-          "condition": "carousel-index",
-          "conditionVariable": 2
-        },
-        "children": [
-          {
-            "type": "OnboardButton",
+            "type": "OnboardButtons",
             "attributes": {
-              "labelKey": "onboard.skip.three-page",
-              "button_text_color": "#0450E2",
-              "button_background_color": "#161827",
-              "flex": 1,
-              "events": [
-                {
-                  "type": "Navigate",
-                  "navigate_to": null,
-                  "targetIndex": 3
+              "buttons_direction": "row",
+              "condition": "carousel-index",
+              "conditionVariable": 3
+            },
+            "children": [
+              {
+                "type": "OnboardButton",
+                "attributes": {
+                  "labelKey": "onboard.allow.four-page",
+                  "button_text_color": "#FFFFFF",
+                  "button_background_color": "#0450E2",
+                  "events": [
+                    {
+                      "type": "Permission",
+                      "permission": "notification"
+                    },
+                    {
+                      "type": "Navigate",
+                      "navigate_to": "subscriptions"
+                    }
+                  ],
+                  "style": {
+                    "flex": 1
+                  }
                 }
-              ]
-            }
+              }
+            ]
           },
           {
-            "type": "OnboardButton",
+            "type": "OnboardFooter",
             "attributes": {
-              "labelKey": "onboard.next.three-page",
-              "button_text_color": "#FFFFFF",
-              "button_background_color": "#0450E2",
-              "flex": 1,
-              "events": [
-                {
-                  "type": "Permission",
-                  "permission": "rating"
-                },
-                {
-                  "type": "Navigate",
-                  "navigate_to": null,
-                  "targetIndex": 3
-                }
-              ]
-            }
-          }
-        ]
-      },
-      {
-        "type": "OnboardButtons",
-        "attributes": {
-          "buttons_direction": "row",
-          "condition": "carousel-index",
-          "conditionVariable": 3
-        },
-        "children": [
-          {
-            "type": "OnboardButton",
-            "attributes": {
-              "labelKey": "onboard.allow.four-page",
-              "button_text_color": "#FFFFFF",
-              "button_background_color": "#0450E2",
-              "flex": 1,
-              "events": [
-                {
-                  "type": "Permission",
-                  "permission": "notification"
-                },
-                {
-                  "type": "Navigate",
-                  "navigate_to": "subscriptions"
-                }
-              ]
+              "textLocalizationKey": "view.onboarding.footer.description",
+              "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+              "linkedWordFirstColor": "#0450E2",
+              "linkedWordFirstPage": "privacy",
+              "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+              "linkedWordSecondColor": "#0450E2",
+              "linkedWordSecondPage": "terms",
+              "style": {
+                "gap": 8,
+                "color": "#81838F"
+              }
             }
           }
-        ]
-      },
-      {
-        "type": "OnboardFooter",
+        ],
         "attributes": {
-          "gap": 8,
-          "textLocalizationKey": "view.onboarding.footer.description",
-          "textColor": "#81838F",
-          "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-          "linkedWordFirstColor": "#0450E2",
-          "linkedWordFirstPage": "privacy",
-          "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-          "linkedWordSecondColor": "#0450E2",
-          "linkedWordSecondPage": "terms"
+          "theme": "dark"
         }
       }
-    ],
-    "attributes": {
-      "theme": "dark"
-    }
-      }
     ]
   }
 }

package/src/attributes-editor/Field.tsx

@@ -518,7 +518,7 @@ function ColorPickerButton({
           borderRadius: 6,
           border: '1px solid #ddd',
           padding: '8px 10px',
-          background: '#fff',
+          background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
           cursor: 'pointer',
         }}
       >

package/src/attributes-editor/LayoutPreviewPicker.tsx

@@ -50,7 +50,7 @@ export function LayoutPreviewPicker({
               width: 110,
               flex: '0 0 auto',
               border: isActive ? '2px solid #222' : '1px solid #d5d5d5',
-              background: '#fff',
+              background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
               textAlign: 'left',
               display: 'flex',
               flexDirection: 'column',
@@ -94,7 +94,10 @@ function LayoutPreview({
   const resolved = resolvePreviewContext(mode, option, layoutContext);
   const isColumn = resolved.flexDirection?.startsWith('column');
   const resolvedBackground =
-    viewAttributes?.backgroundColor ?? (isActive ? '#fffdf5' : '#fafafa');
+    viewAttributes?.backgroundColor ??
+    (isActive
+      ? 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)) / 0.55)'
+      : 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)))');
   const resolvedGap = parseNumeric(viewAttributes?.gap) ?? 3;
   const resolvedBorderRadius = parseNumeric(viewAttributes?.borderRadius) ?? 4;
 

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -34,10 +34,13 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface BIconPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;