@developer_tribe/react-builder 1.2.6 → 1.2.8

package/src/build-components/PaywallProvider/PaywallProviderProps.generated.ts

@@ -18,43 +18,47 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface PaywallProviderStyleGenerated {
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  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 PaywallProviderPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: 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;
+    style?: PaywallProviderStyleGenerated;
   };
 }
 

package/src/build-components/PaywallSubscribeButton/PaywallSubscribeButtonProps.generated.ts

@@ -30,46 +30,50 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface PaywallSubscribeButtonStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontWeight?: FontWeightOptionType;
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  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 PaywallSubscribeButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    color?: string;
-    fontSize?: string;
-    fontWeight?: FontWeightOptionType;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: 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;
+    style?: PaywallSubscribeButtonStyleGenerated;
   };
 }
 

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

@@ -96,9 +96,10 @@ function RadioButton({ node }: RadioButtonComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const selected = Boolean(node.attributes?.selected);
-  const color = node.attributes?.color;
-  const size = parseNumberLike(node.attributes?.size);
+  const styleBag = node.attributes?.style;
+  const selected = Boolean(styleBag?.selected);
+  const color = styleBag?.color;
+  const size = parseNumberLike(styleBag?.size);
 
   return (
     <div

package/src/build-components/RadioButton/RadioButtonProps.generated.ts

@@ -18,46 +18,50 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface RadioButtonStyleGenerated {
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  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;
+  selected?: boolean;
+  color?: string;
+  size?: number;
+}
+
 export interface RadioButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: 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;
-    selected?: boolean;
-    color?: string;
-    size?: number;
+    style?: RadioButtonStyleGenerated;
   };
 }
 

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

@@ -39,11 +39,9 @@ function Text({ node }: TextComponentProps) {
 
   const attrs = node.attributes;
   const styleBag = attrs?.style;
-  const adjustsFontSizeToFit = attrs?.adjustsFontSizeToFit ?? false;
-  const showEllipsis =
-    attrs?.showEllipsis ??
-    (styleBag?.showEllipsis as boolean | undefined) ??
-    false;
+  const adjustsFontSizeToFit =
+    (styleBag?.adjustsFontSizeToFit as boolean | undefined) ?? false;
+  const showEllipsis = (styleBag?.showEllipsis as boolean | undefined) ?? false;
 
   useLayoutEffect(() => {
     if (!adjustsFontSizeToFit) {

package/src/build-components/Text/TextProps.generated.ts

@@ -19,50 +19,54 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 
+export interface TextStyleGenerated {
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  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;
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  adjustsFontSizeToFit?: boolean;
+  showEllipsis?: boolean;
+}
+
 export interface TextPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: 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;
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
-    adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    style?: TextStyleGenerated;
   };
 }
 

package/src/build-components/View/ViewProps.generated.ts

@@ -18,43 +18,47 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface ViewStyleGenerated {
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  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 ViewPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: 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;
+    style?: ViewStyleGenerated;
   };
 }
 

package/src/build-components/patterns.generated.ts

@@ -787,13 +787,6 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        src: {
-          label: 'Src',
-          description: 'Image source URL.',
-          category: 'other',
-          specialCategory: null,
-          sort: 1,
-        },
         resizeMode: {
           label: 'Resize Mode',
           description: 'How the image fits its container.',
@@ -802,6 +795,13 @@ export const patterns = [
           sort: 4,
         },
       },
+      src: {
+        label: 'Src',
+        description: 'Image source URL.',
+        category: 'other',
+        specialCategory: null,
+        sort: 1,
+      },
     },
     defaults: {
       style: {
@@ -3342,13 +3342,6 @@ export const patterns = [
           specialCategory: null,
           sort: 26,
         },
-        src: {
-          label: 'Src',
-          description: 'Image source URL.',
-          category: 'other',
-          specialCategory: null,
-          sort: 1,
-        },
         resizeMode: {
           label: 'Resize Mode',
           description: 'How the image fits the frame.',
@@ -3357,6 +3350,13 @@ export const patterns = [
           sort: 4,
         },
       },
+      src: {
+        label: 'Src',
+        description: 'Image source URL.',
+        category: 'other',
+        specialCategory: null,
+        sort: 1,
+      },
     },
     defaults: {
       style: { flexDirection: 'column', position: 'relative', zIndex: 1 },
@@ -5808,14 +5808,14 @@ export const patterns = [
       desiredParent: ['>OnboardProvider', '>OnboardItem', '!=Onboard'],
       label: 'Onboard Image',
       description: 'Onboarding hero image with media.',
+      src: {
+        label: 'Src',
+        description: 'Image source URL.',
+        category: 'other',
+        specialCategory: null,
+        sort: 1,
+      },
       styles: {
-        src: {
-          label: 'Src',
-          description: 'Image source URL.',
-          category: 'other',
-          specialCategory: null,
-          sort: 1,
-        },
         width: {
           label: 'Width',
           description: 'Fixed width value.',

package/src/components/BuilderProvider.tsx

@@ -15,6 +15,12 @@ export type Products = Product;
 export type BuilderProviderParams = {
   products: Products[];
   benefits: PaywallBenefits;
+  /**
+   * Render platform for style extraction + meta filtering.
+   * - 'web' (default): returns CSS-friendly styles for DOM rendering.
+   * - 'native': returns React Native-friendly styles (no DOM-only props like overflowX/Y).
+   */
+  platform?: 'web' | 'native';
   onPaywallClose?: () => void;
   onPaywallSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
   /**
@@ -68,6 +74,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
           : undefined,
       fonts: Array.isArray(params?.fonts) ? (params.fonts as Fonts) : undefined,
       appFont: params?.appFont,
+      platform: params?.platform === 'native' ? 'native' : 'web',
       previewMode: !!params?.previewMode,
       selectedKey:
         typeof params?.selectedKey === 'string'
@@ -77,6 +84,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
     [
       params?.benefits,
       params?.products,
+      params?.platform,
       params?.onPaywallClose,
       params?.onPaywallSubscribe,
       params?.appConfig,
@@ -94,5 +102,11 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
 }
 
 export function useBuilderParams(): BuilderProviderParams {
-  return useContext(BuilderContext) ?? { products: [], benefits: {} };
+  return (
+    useContext(BuilderContext) ?? {
+      products: [],
+      benefits: {},
+      platform: 'web',
+    }
+  );
 }

package/src/hooks/useExtractImageStyle.ts

@@ -2,18 +2,29 @@ import { useMemo } from 'react';
 import type { NodeData } from '../types/Node';
 import type { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
 import { useBuilderParams } from '../components/BuilderProvider';
-import { extractImageStyle } from '../utils/extractImageStyle';
+import {
+  extractImageStyle,
+  extractImageStyleNative,
+} from '../utils/extractImageStyle';
 import { defaultAppConfig } from '../types/PreviewConfig';
 
 export function useExtractImageStyle<
   T extends ImagePropsGenerated['attributes'],
 >(node: NodeData<T>) {
-  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
+  const {
+    appConfig,
+    projectColors: builderProjectColors,
+    platform,
+  } = useBuilderParams();
   const theme = appConfig?.theme ?? defaultAppConfig.theme;
   const projectColors = builderProjectColors;
+  const isNative = platform === 'native';
 
   return useMemo(
-    () => extractImageStyle(node, { theme, projectColors }),
-    [node, theme, projectColors],
+    () =>
+      isNative
+        ? extractImageStyleNative(node, { theme, projectColors })
+        : extractImageStyle(node, { theme, projectColors }),
+    [node, theme, projectColors, isNative],
   );
 }

package/src/hooks/useExtractTextStyle.ts

@@ -3,7 +3,10 @@ import type { NodeData } from '../types/Node';
 import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
 import { defaultAppConfig } from '../types/PreviewConfig';
 import { useBuilderParams } from '../components/BuilderProvider';
-import { extractTextStyle } from '../utils/extractTextStyle';
+import {
+  extractTextStyle,
+  extractTextStyleNative,
+} from '../utils/extractTextStyle';
 
 export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
@@ -12,15 +15,20 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
     appConfig: builderAppConfig,
     projectColors: builderProjectColors,
     fonts: builderFonts,
+    platform,
   } = useBuilderParams();
 
   const appConfig = builderAppConfig ?? defaultAppConfig;
   const projectColors = builderProjectColors;
   const fonts = builderFonts;
+  const isNative = platform === 'native';
 
   return useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors, fonts }),
+    () =>
+      isNative
+        ? extractTextStyleNative(node, { appConfig, projectColors, fonts })
+        : extractTextStyle(node, { appConfig, projectColors, fonts }),
     // fonts is intentionally included: extractTextStyle resolves weights via font definitions.
-    [node, appConfig, projectColors, fonts],
+    [node, appConfig, projectColors, fonts, isNative],
   );
 }

package/src/hooks/useExtractViewStyle.ts

@@ -2,18 +2,29 @@ import { useMemo } from 'react';
 import type { NodeData } from '../types/Node';
 import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import { useBuilderParams } from '../components/BuilderProvider';
-import { extractViewStyle } from '../utils/extractViewStyle';
+import {
+  extractViewStyle,
+  extractViewStyleNative,
+} from '../utils/extractViewStyle';
 import { defaultAppConfig } from '../types/PreviewConfig';
 
 export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
 ) {
-  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
+  const {
+    appConfig,
+    projectColors: builderProjectColors,
+    platform,
+  } = useBuilderParams();
   const theme = appConfig?.theme ?? defaultAppConfig.theme;
   const projectColors = builderProjectColors;
+  const isNative = platform === 'native';
 
   return useMemo(
-    () => extractViewStyle(node, { theme, projectColors }),
-    [node, theme, projectColors],
+    () =>
+      isNative
+        ? extractViewStyleNative(node, { theme, projectColors })
+        : extractViewStyle(node, { theme, projectColors }),
+    [node, theme, projectColors, isNative],
   );
 }