@developer_tribe/react-builder 1.2.8 → 1.2.9

package/src/build-components/OnboardButtons/OnboardButtons.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useId, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
@@ -6,7 +6,7 @@ import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
@@ -26,19 +26,31 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     }
   }, [ctx.selectedIndex]);
 
+  const attributes = node.attributes as any;
+  const styleBag = attributes?.style as Record<string, unknown> | undefined as
+    | Record<string, unknown>
+    | undefined;
   const direction =
-    node.attributes?.style?.buttons_direction === 'column' ? 'column' : 'row';
+    (attributes?.buttons_direction ?? (styleBag as any)?.buttons_direction) ===
+    'column'
+      ? 'column'
+      : 'row';
   const seperatorColor =
-    node.attributes?.style?.seperatorColor ?? seperatorColorDefault;
+    attributes?.seperatorColor ??
+    (styleBag as any)?.seperatorColor ??
+    seperatorColorDefault;
+  const buttonsClassName =
+    direction === 'column'
+      ? 'onboard__buttons onboard__buttons--column'
+      : 'onboard__buttons onboard__buttons--row';
 
-  const renderChildren = () => {
-    if (Array.isArray(node.children)) {
-      return (node.children as Node[]).map((child, idx) => (
-        <RenderNode key={idx} node={child} />
-      ));
+  const children = useMemo(() => {
+    const raw = node.children as unknown;
+    if (Array.isArray(raw)) {
+      return raw as Node[];
     }
-    return <RenderNode node={node.children as Node} />;
-  };
+    return [raw as Node];
+  }, [node.children]);
 
   const viewStyle = useExtractViewStyle(node);
 
@@ -47,8 +59,9 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   const generatedId = useId();
 
   // New condition logic: hide when condition is carousel-index and does not match
-  const condition = (node.attributes?.style as any)?.condition;
-  const conditionVariable = (node.attributes?.style as any)?.conditionVariable;
+  const condition = attributes?.condition ?? (styleBag as any)?.condition;
+  const conditionVariable =
+    attributes?.conditionVariable ?? (styleBag as any)?.conditionVariable;
   const shouldHide =
     condition === 'carousel-index' &&
     typeof conditionVariable === 'number' &&
@@ -66,25 +79,12 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     >
       <div
         className="onboard__separator"
-        style={{
-          height: 1,
-          backgroundColor: seperatorColor,
-          width: '100%',
-        }}
+        style={seperatorColor ? { backgroundColor: seperatorColor } : undefined}
       />
-      <div
-        className="onboard__buttons"
-        style={{
-          display: 'flex',
-          flexDirection: direction as any,
-          height: 40,
-          gap: 12,
-          alignItems: 'center',
-          justifyContent: 'center',
-          margin: '12px 24px',
-        }}
-      >
-        {renderChildren()}
+      <div className={buttonsClassName}>
+        {children.map((child, idx) => (
+          <RenderNode key={(child as any)?.key ?? idx} node={child} />
+        ))}
       </div>
     </div>
   );

package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts

@@ -2,6 +2,12 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ButtonTypeOptionType =
+  | 'previous_button'
+  | 'next_button'
+  | 'skip_button';
+export type ButtonsDirectionOptionType = 'row' | 'column';
+export type ConditionOptionType = 'carousel-index';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,15 +23,8 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ButtonTypeOptionType =
-  | 'previous_button'
-  | 'next_button'
-  | 'skip_button';
-export type ButtonsDirectionOptionType = 'row' | 'column';
-export type ConditionOptionType = 'carousel-index';
 
 export interface OnboardButtonsStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -59,19 +58,20 @@ export interface OnboardButtonsStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  buttonType?: ButtonTypeOptionType;
-  skipNumber?: number;
-  buttons_direction?: ButtonsDirectionOptionType;
-  forIndex?: number;
-  seperatorColor?: string;
-  condition?: ConditionOptionType;
-  conditionVariable?: number;
 }
 
 export interface OnboardButtonsPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardButtonsStyleGenerated;
+    scrollable?: boolean;
+    buttonType?: ButtonTypeOptionType;
+    skipNumber?: number;
+    buttons_direction?: ButtonsDirectionOptionType;
+    forIndex?: number;
+    seperatorColor?: string;
+    condition?: ConditionOptionType;
+    conditionVariable?: number;
   };
 }
 

package/src/build-components/OnboardButtons/pattern.json

@@ -30,6 +30,15 @@
     "label": "Onboard Buttons",
     "description": "Wrapper for onboarding button set.",
     "styles": {
+      "seperatorColor": {
+        "label": "Seperator Color",
+        "description": "Color of the divider line.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      }
+    },
+    "attributes": {
       "buttonType": {
         "label": "Button Type",
         "description": "Which onboard button to show.",
@@ -58,13 +67,6 @@
         "specialCategory": null,
         "sort": 4
       },
-      "seperatorColor": {
-        "label": "Seperator Color",
-        "description": "Color of the divider line.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 5
-      },
       "condition": {
         "label": "Condition",
         "description": "Built-in condition to check.",

package/src/build-components/OnboardDot/OnboardDot.tsx

@@ -3,7 +3,7 @@ import type { OnboardDotComponentProps } from './OnboardDotProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -19,8 +19,9 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const generatedId = useId();
   const attributeName = node.type ?? 'OnboardDot';
   const attributeKey = node.key ?? generatedId;
-  const styleBag = node.attributes?.style;
-  const dotType = styleBag?.dotType || 'normal_dot';
+  const attrs = node.attributes;
+  const styleBag = attrs?.style;
+  const dotType = attrs?.dotType || 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
@@ -36,8 +37,8 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const inactiveDotColor = isDark
     ? GHOST_DOT_DARK_COLOR
     : GHOST_DOT_LIGHT_COLOR;
-  const inactiveDotOpacity = styleBag?.inactive_dot_opacity ?? 0.3;
-  const activeDotColor = styleBag?.active_dot_color;
+  const inactiveDotOpacity = attrs?.inactive_dot_opacity ?? 0.3;
+  const activeDotColor = attrs?.active_dot_color;
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
     [activeDotColor, appConfig.theme, projectColors],
@@ -57,7 +58,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const expandingDotWidthRaw = styleBag?.expanding_dot_width;
+  const expandingDotWidthRaw = attrs?.expanding_dot_width;
   const expandingDotWidthOverride = useMemo(() => {
     const parsed = parseSize(expandingDotWidthRaw);
     if (parsed === undefined) return undefined;

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type PositionOptionType = 'relative' | 'absolute';
 export type DotTypeOptionType =
   | 'expanding_dot'
   | 'normal_dot'
@@ -10,12 +9,26 @@ export type DotTypeOptionType =
   | 'sliding_border'
   | 'sliding_dot'
   | 'liquid_like';
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardDotStyleGenerated {
-  scrollable?: boolean;
-  flexDirection?: never;
-  alignItems?: never;
-  justifyContent?: never;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
   gap?: string;
   padding?: string;
   paddingHorizontal?: string;
@@ -46,16 +59,20 @@ export interface OnboardDotStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  dotType?: DotTypeOptionType;
-  inactive_dot_opacity?: number;
-  expanding_dot_width?: string;
-  active_dot_color?: string;
 }
 
 export interface OnboardDotPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardDotStyleGenerated;
+    scrollable?: boolean;
+    dotType?: DotTypeOptionType;
+    inactive_dot_opacity?: number;
+    expanding_dot_width?: string;
+    active_dot_color?: string;
+    flexDirection?: never;
+    alignItems?: never;
+    justifyContent?: never;
   };
 }
 

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -3,8 +3,8 @@ import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { parseSize } from '../../size-matters';
-import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -104,8 +104,9 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
-  const styleBag = node?.attributes?.style;
-  const text = t(styleBag?.textLocalizationKey);
+  const attrs = node?.attributes;
+  const styleBag = attrs?.style;
+  const text = t(attrs?.textLocalizationKey);
   const textStyle = useExtractTextStyle(node);
   const viewStyle = useExtractViewStyle(node);
 
@@ -142,18 +143,18 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     >
       {!!text &&
         (() => {
-          const firstText = t(styleBag?.linkedWordFirstLocalizationKey);
-          const secondText = t(styleBag?.linkedWordSecondLocalizationKey);
+          const firstText = t(attrs?.linkedWordFirstLocalizationKey);
+          const secondText = t(attrs?.linkedWordSecondLocalizationKey);
           const { segments, matchCount } = buildSegments(text, [
             {
               value: firstText,
-              color: styleBag?.linkedWordFirstColor,
-              page: (styleBag as any)?.linkedWordFirstPage,
+              color: attrs?.linkedWordFirstColor,
+              page: (attrs as any)?.linkedWordFirstPage,
             },
             {
               value: secondText,
-              color: styleBag?.linkedWordSecondColor,
-              page: (styleBag as any)?.linkedWordSecondPage,
+              color: attrs?.linkedWordSecondColor,
+              page: (attrs as any)?.linkedWordSecondPage,
             },
           ]);
 
@@ -182,21 +183,21 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
               </p>
               {matchCount === 0 && (
                 <div>
-                  {styleBag?.linkedWordFirstLocalizationKey && (
+                  {attrs?.linkedWordFirstLocalizationKey && (
                     <span
-                      style={linkStyle(styleBag?.linkedWordFirstColor)}
+                      style={linkStyle(attrs?.linkedWordFirstColor)}
                       onClick={() =>
-                        handleClick((styleBag as any)?.linkedWordFirstPage)
+                        handleClick((attrs as any)?.linkedWordFirstPage)
                       }
                     >
                       {firstText}
                     </span>
                   )}
-                  {styleBag?.linkedWordSecondLocalizationKey && (
+                  {attrs?.linkedWordSecondLocalizationKey && (
                     <span
-                      style={linkStyle(styleBag?.linkedWordSecondColor)}
+                      style={linkStyle(attrs?.linkedWordSecondColor)}
                       onClick={() =>
-                        handleClick((styleBag as any)?.linkedWordSecondPage)
+                        handleClick((attrs as any)?.linkedWordSecondPage)
                       }
                     >
                       {secondText}

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -25,9 +25,6 @@ export interface OnboardFooterStyleGenerated {
   fontFamily?: string;
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
-  adjustsFontSizeToFit?: boolean;
-  showEllipsis?: boolean;
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -61,19 +58,22 @@ export interface OnboardFooterStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  textLocalizationKey?: string;
-  linkedWordFirstLocalizationKey?: string;
-  linkedWordFirstColor?: string;
-  linkedWordFirstPage?: string;
-  linkedWordSecondLocalizationKey?: string;
-  linkedWordSecondColor?: string;
-  linkedWordSecondPage?: string;
 }
 
 export interface OnboardFooterPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardFooterStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
+    textLocalizationKey?: string;
+    linkedWordFirstLocalizationKey?: string;
+    linkedWordFirstColor?: string;
+    linkedWordFirstPage?: string;
+    linkedWordSecondLocalizationKey?: string;
+    linkedWordSecondColor?: string;
+    linkedWordSecondPage?: string;
   };
 }
 

package/src/build-components/OnboardFooter/pattern.json

@@ -26,6 +26,22 @@
     "label": "Onboard Footer",
     "description": "Footer text with optional links.",
     "styles": {
+      "linkedWordFirstColor": {
+        "label": "Linked Word First Color",
+        "description": "Color of the first linked word.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "linkedWordSecondColor": {
+        "label": "Linked Word Second Color",
+        "description": "Color of the second linked word.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 6
+      }
+    },
+    "attributes": {
       "textLocalizationKey": {
         "label": "Text Localization Key",
         "description": "Localization key for the footer text.",
@@ -40,13 +56,6 @@
         "specialCategory": null,
         "sort": 2
       },
-      "linkedWordFirstColor": {
-        "label": "Linked Word First Color",
-        "description": "Color of the first linked word.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 3
-      },
       "linkedWordFirstPage": {
         "label": "Linked Word First Page",
         "description": "Page opened by the first link.",
@@ -61,13 +70,6 @@
         "specialCategory": null,
         "sort": 5
       },
-      "linkedWordSecondColor": {
-        "label": "Linked Word Second Color",
-        "description": "Color of the second linked word.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 6
-      },
       "linkedWordSecondPage": {
         "label": "Linked Word Second Page",
         "description": "Page opened by the second link.",

package/src/build-components/OnboardImage/OnboardImage.tsx

@@ -5,7 +5,7 @@ import type { ImageComponentProps } from '../Image/ImageProps.generated';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
   useLogRender('OnboardImage');
@@ -15,17 +15,17 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const [lottie, setLottie] = useState<string | null>(null);
   const viewStyle = useExtractViewStyle(node);
-  const styleBag = node.attributes?.style;
+  const attrs = node.attributes;
 
   useEffect(() => {
-    if (styleBag?.lottie) {
-      fetch(styleBag?.lottie)
+    if (attrs?.lottie) {
+      fetch(attrs?.lottie)
         .then((res) => res.json())
         .then((data) => setLottie(data));
     }
-  }, [styleBag?.lottie]);
+  }, [attrs?.lottie]);
 
-  if (styleBag?.video_url) {
+  if (attrs?.video_url) {
     return (
       <video
         attribute-name={attributeName}
@@ -33,13 +33,13 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
         autoPlay
         muted
         loop
-        src={styleBag?.video_url}
+        src={attrs?.video_url}
         style={viewStyle}
       />
     );
   }
 
-  if (styleBag?.lottie) {
+  if (attrs?.lottie) {
     if (lottie) {
       return (
         <div

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -20,10 +20,6 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardImageStyleGenerated {
-  width?: string;
-  height?: string;
-  resizeMode?: ResizeModeOptionType;
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -44,8 +40,10 @@ export interface OnboardImageStyleGenerated {
   marginRight?: string;
   backgroundColor?: string;
   borderRadius?: string;
+  width?: string;
   minWidth?: string;
   maxWidth?: string;
+  height?: string;
   minHeight?: string;
   maxHeight?: string;
   flex?: number;
@@ -55,8 +53,6 @@ export interface OnboardImageStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  video_url?: string;
-  lottie?: string;
 }
 
 export interface OnboardImagePropsGenerated {
@@ -64,6 +60,12 @@ export interface OnboardImagePropsGenerated {
   attributes: {
     style?: OnboardImageStyleGenerated;
     src?: string;
+    width?: string;
+    height?: string;
+    resizeMode?: ResizeModeOptionType;
+    scrollable?: boolean;
+    video_url?: string;
+    lottie?: string;
   };
 }
 

package/src/build-components/OnboardImage/pattern.json

@@ -17,7 +17,8 @@
     ],
     "label": "Onboard Image",
     "description": "Onboarding hero image with media.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "video_url": {
         "label": "Video Url",
         "description": "URL for the onboarding video.",

package/src/build-components/OnboardItem/OnboardItem.tsx

@@ -3,7 +3,7 @@ import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import RenderNode from '../RenderNode.generated';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
   useLogRender('OnboardItem');

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type DisplayOptionType = 'flex' | 'block';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,10 +18,8 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type DisplayOptionType = 'flex' | 'block';
 
 export interface OnboardItemStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -54,13 +53,17 @@ export interface OnboardItemStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  display?: DisplayOptionType;
 }
 
 export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardItemStyleGenerated;
+    scrollable?: boolean;
+    display?: DisplayOptionType;
+    gap?: string;
+    flexDirection?: FlexDirectionOptionType;
+    paddingHorizontal?: string;
   };
 }
 

package/src/build-components/OnboardItem/pattern.json

@@ -31,7 +31,8 @@
     ],
     "label": "Onboard Item",
     "description": "Single onboarding screen section.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "display": {
         "label": "Display",
         "description": "Controls layout display mode.",

package/src/build-components/OnboardProvider/OnboardProvider.tsx

@@ -12,7 +12,7 @@ import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -2,6 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type ThemeOptionType = 'light' | 'dark' | 'all';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
   | 'flex-start'
@@ -17,10 +18,8 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type ThemeOptionType = 'light' | 'dark' | 'all';
 
 export interface OnboardProviderStyleGenerated {
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -40,7 +39,7 @@ export interface OnboardProviderStyleGenerated {
   marginLeft?: string;
   marginRight?: string;
   backgroundColor?: string;
-  borderRadius?: never;
+  borderRadius?: string;
   width?: string;
   minWidth?: string;
   maxWidth?: string;
@@ -54,13 +53,15 @@ export interface OnboardProviderStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  theme?: ThemeOptionType;
 }
 
 export interface OnboardProviderPropsGenerated {
   child: string;
   attributes: {
     style?: OnboardProviderStyleGenerated;
+    scrollable?: boolean;
+    theme?: ThemeOptionType;
+    borderRadius?: never;
   };
 }