@developer_tribe/react-builder 1.2.21 → 1.2.23

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

@@ -8,16 +8,24 @@
       "title": "title",
       "description": "description",
       "src": "string",
-      "width": "size",
-      "height": "size",
-      "resizeMode": ["cover", "contain", "stretch", "center"]
+      "style": {
+        "resizeMode": ["cover", "contain", "stretch", "center"]
+      }
     }
   },
   "meta": {
     "desiredParent": ["all"],
     "label": "Image",
     "description": "Shows an image or graphic.",
-    "styles": {},
+    "styles": {
+      "resizeMode": {
+        "label": "Resize Mode",
+        "description": "How the image fits the frame.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      }
+    },
     "attributes": {
       "src": {
         "label": "Src",
@@ -25,27 +33,6 @@
         "category": "other",
         "specialCategory": null,
         "sort": 1
-      },
-      "width": {
-        "label": "Width",
-        "description": "Image width.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 2
-      },
-      "height": {
-        "label": "Height",
-        "description": "Image height.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 3
-      },
-      "resizeMode": {
-        "label": "Resize Mode",
-        "description": "How the image fits the frame.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 4
       }
     }
   }

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

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import type { NavigationBarColorComponentProps } from './NavigationBarColorProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { parseColor } from '../../utils/parseColor';
+import { getStyleBag } from '../../utils/attributeStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { useRenderStore } from '../../store';
+
+function NavigationBarColor({ node }: NavigationBarColorComponentProps) {
+  useLogRender('NavigationBarColor');
+  node = useNode(node);
+
+  const { appConfig, projectColors } = useBuilderParams();
+  const setNavBarOverrideColor = useRenderStore(
+    (s) => s.setNavBarOverrideColor,
+  );
+
+  const rawBg = getStyleBag(node.attributes)?.backgroundColor as
+    | string
+    | undefined;
+  const resolvedColor = parseColor(rawBg, {
+    projectColors,
+    theme: appConfig?.theme,
+  });
+
+  useEffect(() => {
+    if (resolvedColor) {
+      setNavBarOverrideColor(resolvedColor);
+    }
+    return () => {
+      setNavBarOverrideColor(null);
+    };
+  }, [resolvedColor, setNavBarOverrideColor]);
+
+  return null;
+}
+
+export default React.memo(NavigationBarColor);

package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts

@@ -0,0 +1,71 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+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 NavigationBarColorStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface NavigationBarColorPropsGenerated {
+  child: string;
+  attributes: {
+    style?: NavigationBarColorStyleGenerated;
+    scrollable?: boolean;
+    title?: string;
+    description?: string;
+  };
+}
+
+export interface NavigationBarColorComponentProps {
+  node: NodeData<NavigationBarColorPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,34 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "NavigationBarColor",
+    "children": "never",
+    "extends": "View",
+    "attributes": {
+      "title": "title",
+      "description": "description",
+      "style": {
+        "backgroundColor": "color"
+      }
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Navigation Bar Color",
+    "description": "Sets the OS navigation bar background color.",
+    "styles": {
+      "backgroundColor": {
+        "label": "Background Color",
+        "description": "Navigation bar background color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      }
+    }
+  },
+  "defaults": {
+    "style": {
+      "backgroundColor": "THEME_COLORS.BACKGROUND"
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
-import type { Node } from '../../types/Node';
+import type { Node, NodeData } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import RenderNode from '../RenderNode.generated';
@@ -9,6 +9,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
@@ -28,13 +29,10 @@ 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 attrRecord = toAttributeRecord(node.attributes);
+  const styleBag = getStyleBag(node.attributes);
   const direction =
-    (attributes?.buttons_direction ?? (styleBag as any)?.buttons_direction) ===
-    'column'
+    (attrRecord.buttons_direction ?? styleBag?.buttons_direction) === 'column'
       ? 'column'
       : 'row';
 
@@ -62,9 +60,9 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   const generatedId = useId();
 
   // New condition logic: hide when condition is carousel-index and does not match
-  const condition = attributes?.condition ?? (styleBag as any)?.condition;
+  const condition = attrRecord.condition ?? styleBag?.condition;
   const conditionVariable =
-    attributes?.conditionVariable ?? (styleBag as any)?.conditionVariable;
+    attrRecord.conditionVariable ?? styleBag?.conditionVariable;
   const shouldHide =
     condition === 'carousel-index' &&
     typeof conditionVariable === 'number' &&
@@ -81,7 +79,7 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
       style={{ ...viewStyle, boxSizing: 'border-box' }}
     >
       {children.map((child, idx) => (
-        <RenderNode key={(child as any)?.key ?? idx} node={child} />
+        <RenderNode key={(child as NodeData)?.key ?? idx} node={child} />
       ))}
     </div>
   );

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

@@ -10,6 +10,7 @@ import { useMergedStyle } from '../../utils/useMergedStyle';
 import { parseColor } from '../../utils/parseColor';
 import { parseSize } from '../../size-matters';
 import { defaultAppConfig } from '../../types/PreviewConfig';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
   useLogRender('OnboardDot');
@@ -20,12 +21,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const attributeName = node.type ?? 'OnboardDot';
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
-  const stylesBag =
-    ((attrs as any)?.styles as Record<string, unknown> | undefined) ??
-    ((attrs as any)?.style as Record<string, unknown> | undefined) ??
-    undefined;
+  const attrRecord = toAttributeRecord(attrs);
+  const stylesBag = getStyleBag(attrs);
   const dotType =
-    (stylesBag?.dotType as any) ?? (attrs as any)?.dotType ?? 'normal_dot';
+    (stylesBag?.dotType as string | undefined) ??
+    (attrRecord.dotType as string | undefined) ??
+    'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
@@ -43,14 +44,14 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     : GHOST_DOT_LIGHT_COLOR;
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
-    (attrs as any)?.inactive_dot_opacity ??
+    (attrRecord.inactive_dot_opacity as number | undefined) ??
     0.3;
   const inactiveDotColorOverride =
     (stylesBag?.inactive_dot_color as string | undefined) ??
-    (attrs as any)?.inactive_dot_color;
+    (attrRecord.inactive_dot_color as string | undefined);
   const activeDotColor =
     (stylesBag?.active_dot_color as string | undefined) ??
-    (attrs as any)?.active_dot_color;
+    (attrRecord.active_dot_color as string | undefined);
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
     [activeDotColor, appConfig.theme, projectColors],
@@ -83,7 +84,8 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
   const dotThicknessRaw =
-    (stylesBag?.dot_thickness as any) ?? (attrs as any)?.dot_thickness;
+    (stylesBag?.dot_thickness as string | number | undefined) ??
+    (attrRecord.dot_thickness as string | number | undefined);
   const dotSizeCss = useMemo((): string => {
     const parsed = parseSize(dotThicknessRaw);
     if (parsed === undefined) return '10px';
@@ -100,7 +102,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     const n = Number.isFinite(px) ? px : 10;
     return `${Math.max(0, n / 3)}px`;
   }, [dotSizeCss]);
-  const gapValue = (style as any)?.gap ?? dotGapCss;
+  const gapValue = style.gap ?? dotGapCss;
   const containerStyle = useMergedStyle(style, {
     display: 'flex',
     flexWrap: 'wrap',

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

@@ -70,7 +70,7 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
           ...node,
           type: 'image',
           sourceType: attributeName,
-        } as unknown as ImageComponentProps['node']
+        } as ImageComponentProps['node']
       }
     />
   );

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

@@ -21,6 +21,7 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardImageStyleGenerated {
+  resizeMode?: ResizeModeOptionType;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -64,9 +65,6 @@ export interface OnboardImagePropsGenerated {
     title?: string;
     description?: string;
     src?: string;
-    width?: string;
-    height?: string;
-    resizeMode?: ResizeModeOptionType;
     scrollable?: boolean;
     video_url?: string;
     lottie?: string;

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

@@ -20,7 +20,9 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   node = useNode(node);
   const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'OnboardProvider';
-  const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    node.attributes as Parameters<typeof useEmblaCarousel>[0],
+  );
   const [selectedIndex, setSelectedIndex] = useState(0);
   const attributeKey = node.key ?? generatedId;
 

package/src/build-components/RenderNode.generated.tsx

@@ -25,6 +25,7 @@ import type { CountDownComponentProps } from './CountDown/CountDownProps.generat
 import type { CounterComponentProps } from './Counter/CounterProps.generated';
 import type { ImageComponentProps } from './Image/ImageProps.generated';
 import type { MainComponentProps } from './Main/MainProps.generated';
+import type { NavigationBarColorComponentProps } from './NavigationBarColor/NavigationBarColorProps.generated';
 import type { OnboardComponentProps } from './Onboard/OnboardProps.generated';
 import type { OnboardButtonComponentProps } from './OnboardButton/OnboardButtonProps.generated';
 import type { OnboardButtonsComponentProps } from './OnboardButtons/OnboardButtonsProps.generated';
@@ -42,6 +43,8 @@ import type { PaywallOptionsComponentProps } from './PaywallOptions/PaywallOptio
 import type { PaywallProviderComponentProps } from './PaywallProvider/PaywallProviderProps.generated';
 import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
 import type { RadioButtonComponentProps } from './RadioButton/RadioButtonProps.generated';
+import type { SeparatorComponentProps } from './Separator/SeparatorProps.generated';
+import type { StatusBarColorComponentProps } from './StatusBarColor/StatusBarColorProps.generated';
 import type { TextComponentProps } from './Text/TextProps.generated';
 import type { ViewComponentProps } from './View/ViewProps.generated';
 import BIcon from './BIcon/BIcon';
@@ -56,6 +59,7 @@ import { CountDown } from './CountDown/CountDown';
 import { Counter } from './Counter/Counter';
 import Image from './Image/Image';
 import Main from './Main/Main';
+import NavigationBarColor from './NavigationBarColor/NavigationBarColor';
 import Onboard from './Onboard/Onboard';
 import OnboardButton from './OnboardButton/OnboardButton';
 import OnboardButtons from './OnboardButtons/OnboardButtons';
@@ -73,6 +77,8 @@ import PaywallOptions from './PaywallOptions/PaywallOptions';
 import PaywallProvider from './PaywallProvider/PaywallProvider';
 import PaywallSubscribeButton from './PaywallSubscribeButton/PaywallSubscribeButton';
 import RadioButton from './RadioButton/RadioButton';
+import Separator from './Separator/Separator';
+import StatusBarColor from './StatusBarColor/StatusBarColor';
 import Text from './Text/Text';
 import View from './View/View';
 
@@ -89,6 +95,7 @@ type BuilderNode =
   | (CounterComponentProps['node'] & { type: 'Counter' })
   | (ImageComponentProps['node'] & { type: 'Image' })
   | (MainComponentProps['node'] & { type: 'Main' })
+  | (NavigationBarColorComponentProps['node'] & { type: 'NavigationBarColor' })
   | (OnboardComponentProps['node'] & { type: 'Onboard' })
   | (OnboardButtonComponentProps['node'] & { type: 'OnboardButton' })
   | (OnboardButtonsComponentProps['node'] & { type: 'OnboardButtons' })
@@ -108,6 +115,8 @@ type BuilderNode =
       type: 'PaywallSubscribeButton';
     })
   | (RadioButtonComponentProps['node'] & { type: 'RadioButton' })
+  | (SeparatorComponentProps['node'] & { type: 'Separator' })
+  | (StatusBarColorComponentProps['node'] & { type: 'StatusBarColor' })
   | (TextComponentProps['node'] & { type: 'Text' })
   | (ViewComponentProps['node'] & { type: 'View' });
 
@@ -165,6 +174,8 @@ function RenderNode({ node }: { node: Node }) {
       return <Image node={normalizedNode} />;
     case 'Main':
       return <Main node={normalizedNode} />;
+    case 'NavigationBarColor':
+      return <NavigationBarColor node={normalizedNode} />;
     case 'Onboard':
       return <Onboard node={normalizedNode} />;
     case 'OnboardButton':
@@ -199,6 +210,10 @@ function RenderNode({ node }: { node: Node }) {
       return <PaywallSubscribeButton node={normalizedNode} />;
     case 'RadioButton':
       return <RadioButton node={normalizedNode} />;
+    case 'Separator':
+      return <Separator node={normalizedNode} />;
+    case 'StatusBarColor':
+      return <StatusBarColor node={normalizedNode} />;
     case 'Text':
       return <Text node={normalizedNode} />;
     case 'View':

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

@@ -0,0 +1,41 @@
+import React, { useId } from 'react';
+import type { SeparatorComponentProps } from './SeparatorProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+function Separator({ node }: SeparatorComponentProps) {
+  useLogRender('Separator');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'Separator';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, selectedKey } = useBuilderParams();
+
+  const baseStyle = useExtractViewStyle(node);
+
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    />
+  );
+}
+
+export default React.memo(Separator);

package/src/build-components/Separator/SeparatorProps.generated.ts

@@ -0,0 +1,26 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export interface SeparatorStyleGenerated {
+  backgroundColor?: string;
+  width?: string;
+  height?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+}
+
+export interface SeparatorPropsGenerated {
+  child: string;
+  attributes: {
+    style?: SeparatorStyleGenerated;
+    title?: string;
+    description?: string;
+  };
+}
+
+export interface SeparatorComponentProps {
+  node: NodeData<SeparatorPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,59 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "Separator",
+    "children": "never",
+    "attributes": {
+      "title": "title",
+      "description": "description",
+      "style": {
+        "backgroundColor": "color",
+        "width": "size",
+        "height": "size",
+        "marginHorizontal": "size",
+        "marginVertical": "size",
+        "marginTop": "size",
+        "marginBottom": "size"
+      }
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Separator",
+    "description": "Horizontal line separator.",
+    "styles": {
+      "backgroundColor": {
+        "label": "Color",
+        "description": "Separator line color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      }
+    },
+    "attributes": {
+      "width": {
+        "label": "Width",
+        "description": "Separator width.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 1,
+        "preferredScale": "s"
+      },
+      "height": {
+        "label": "Height",
+        "description": "Separator thickness.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 2,
+        "preferredScale": "vs"
+      }
+    }
+  },
+  "defaults": {
+    "style": {
+      "width": "100%",
+      "height": 2,
+      "backgroundColor": "#000000"
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import type { StatusBarColorComponentProps } from './StatusBarColorProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { parseColor } from '../../utils/parseColor';
+import { getStyleBag } from '../../utils/attributeStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { useRenderStore } from '../../store';
+
+function StatusBarColor({ node }: StatusBarColorComponentProps) {
+  useLogRender('StatusBarColor');
+  node = useNode(node);
+
+  const { appConfig, projectColors } = useBuilderParams();
+  const setStatusBarOverrideColor = useRenderStore(
+    (s) => s.setStatusBarOverrideColor,
+  );
+
+  const rawBg = getStyleBag(node.attributes)?.backgroundColor as
+    | string
+    | undefined;
+  const resolvedColor = parseColor(rawBg, {
+    projectColors,
+    theme: appConfig?.theme,
+  });
+
+  useEffect(() => {
+    if (resolvedColor) {
+      setStatusBarOverrideColor(resolvedColor);
+    }
+    return () => {
+      setStatusBarOverrideColor(null);
+    };
+  }, [resolvedColor, setStatusBarOverrideColor]);
+
+  return null;
+}
+
+export default React.memo(StatusBarColor);

package/src/build-components/StatusBarColor/StatusBarColorProps.generated.ts

@@ -0,0 +1,71 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+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 StatusBarColorStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface StatusBarColorPropsGenerated {
+  child: string;
+  attributes: {
+    style?: StatusBarColorStyleGenerated;
+    scrollable?: boolean;
+    title?: string;
+    description?: string;
+  };
+}
+
+export interface StatusBarColorComponentProps {
+  node: NodeData<StatusBarColorPropsGenerated['attributes']>;
+}