@developer_tribe/react-builder 0.1.27 → 0.1.28

package/dist/size-matters/index.d.ts

@@ -0,0 +1,6 @@
+export declare function scale(size: number): number;
+export declare function verticalScale(size: number): number;
+export declare const s: typeof scale;
+export declare const vs: typeof verticalScale;
+export declare const fs: typeof verticalScale;
+export declare function parseSize(value?: string | number): string | number | undefined;

package/dist/store.d.ts

@@ -0,0 +1,25 @@
+import type { Device } from './types/Device';
+import type { Localication } from './types/PreviewConfig';
+import { ScreenStyle } from './RenderPage';
+type RenderStore = {
+    device: Device;
+    localication: Localication | null;
+    defaultLanguage?: string;
+    baseSize: {
+        width: number;
+        height: number;
+    };
+    theme: 'dark' | 'light';
+    screenStyle: ScreenStyle;
+    setBaseSize: (baseSize: {
+        width: number;
+        height: number;
+    }) => void;
+    setDevice: (device: Device) => void;
+    setLocalication: (localication: Localication | null) => void;
+    setDefaultLanguage: (defaultLanguage?: string) => void;
+    setTheme: (theme: 'dark' | 'light') => void;
+    setScreenStyle: (screenStyle: ScreenStyle) => void;
+};
+export declare const useRenderStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand/vanilla").StoreApi<RenderStore>>;
+export {};

package/dist/styles.css

@@ -1 +1 @@
-.embla{max-width:48rem;margin:auto;--slide-height: 19rem;--slide-spacing: 1rem;--slide-size: 70%}.embla__viewport{overflow:hidden}.embla__container{display:flex;touch-action:pan-y pinch-zoom;margin-left:calc(var(--slide-spacing)*-1)}.embla__slide{transform:translate3d(0, 0, 0);flex:0 0 var(--slide-size);min-width:0;padding-left:var(--slide-spacing);flex:0 0 100%}.embla__slide__number{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);border-radius:1.8rem;font-size:4rem;font-weight:600;display:flex;align-items:center;justify-content:center;height:var(--slide-height);user-select:none}.embla__controls{display:grid;grid-template-columns:auto 1fr;justify-content:space-between;gap:1.2rem;margin-top:1.8rem}.embla__buttons{display:grid;grid-template-columns:repeat(2, 1fr);gap:.6rem;align-items:center}.embla__button{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:3.6rem;height:3.6rem;z-index:1;border-radius:50%;color:var(--text-body);display:flex;align-items:center;justify-content:center}.embla__button:disabled{color:var(--detail-high-contrast)}.embla__button__svg{width:35%;height:35%}.embla__dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-right:0;height:50px}.embla__dot{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;border-radius:50%}.embla__dot:after{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:1.4rem;height:1.4rem;border-radius:50%;display:flex;align-items:center;content:""}.embla__dot--selected:after{box-shadow:inset 0 0 0 .2rem var(--text-body)}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}
+*,*::before,*::after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}button{font-family:inherit}input,button{font-size:100%}p{margin:0;padding:0}.embla{max-width:48rem;margin:auto;--slide-height: 19rem;--slide-spacing: 1rem;--slide-size: 70%}.embla__viewport{overflow:hidden}.embla__container{display:flex;touch-action:pan-y pinch-zoom;margin-left:calc(var(--slide-spacing)*-1)}.embla__slide{transform:translate3d(0, 0, 0);flex:0 0 var(--slide-size);min-width:0;padding-left:var(--slide-spacing);flex:0 0 100%}.embla__slide__number{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);border-radius:1.8rem;font-size:4rem;font-weight:600;display:flex;align-items:center;justify-content:center;height:var(--slide-height);user-select:none}.embla__controls{display:grid;grid-template-columns:auto 1fr;justify-content:space-between;gap:1.2rem;margin-top:1.8rem}.embla__buttons{display:grid;grid-template-columns:repeat(2, 1fr);gap:.6rem;align-items:center}.embla__button{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:3.6rem;height:3.6rem;z-index:1;border-radius:50%;color:var(--text-body);display:flex;align-items:center;justify-content:center}.embla__button:disabled{color:var(--detail-high-contrast)}.embla__button__svg{width:35%;height:35%}.embla__dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-right:0;height:50px}.embla__dot{-webkit-tap-highlight-color:rgba(var(--text-high-contrast-rgb-value), 0.5);-webkit-appearance:none;appearance:none;background-color:rgba(0,0,0,0);touch-action:manipulation;display:inline-flex;text-decoration:none;cursor:pointer;border:0;padding:0;margin:0;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;border-radius:50%}.embla__dot:after{box-shadow:inset 0 0 0 .2rem var(--detail-medium-contrast);width:1.4rem;height:1.4rem;border-radius:50%;display:flex;align-items:center;content:""}.embla__dot--selected:after{box-shadow:inset 0 0 0 .2rem var(--text-body)}.carousel-provider{height:100%}.embla{height:100%}.embla__viewport{height:100%;display:flex;flex-direction:column}.embla__container{flex:1}

package/dist/types/PreviewConfig.d.ts

@@ -7,10 +7,12 @@ export interface PreviewConfig {
         light: {
             backgroundColor: string;
             color: string;
+            seperatorColor?: string;
         };
         dark: {
             backgroundColor: string;
             color: string;
+            seperatorColor?: string;
         };
     };
     localication: Localication;

package/dist/utils/getDevices.d.ts

@@ -1,2 +1,3 @@
 import { Device } from '../types/Device';
 export declare function getDevices(): Device[];
+export declare function getDefaultDevice(): Device;

package/dist/utils/patterns.d.ts

@@ -2,13 +2,14 @@ import type { NodeDefaultAttribute } from '../types/Node';
 type Pattern = {
     schemaVersion: number;
     allowUnknownAttributes: boolean;
+    extends: string;
     pattern: {
         type: string;
         children: unknown;
-        attributes: Record<string, string | string[]>;
+        attributes?: Record<string, string | string[]>;
     };
-    types?: Record<string, Record<string, string | string[]>>;
     defaults?: NodeDefaultAttribute;
+    types?: Record<string, Record<string, string | string[]>>;
 };
 export declare function getPatternByType(type?: string | null): Pattern | undefined;
 export declare function getAttributeSchema(type?: string | null): Record<string, string | string[]> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "type": "module",
   "restricted": true,
   "main": "dist/index.cjs.js",
@@ -56,6 +56,7 @@
     "sass": "^1.93.2",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.1",
+    "use-sync-external-store": "^1.6.0",
     "yargs": "^18.0.0"
   },
   "engines": {

package/scripts/prebuild/build-components.js

@@ -13,6 +13,7 @@ import {
   validateExistingComponentTsx,
   createRenderNodeGenerated,
   createBuildComponentsIndex,
+  createPatternsGenerated,
   // createGetDefaultsPerComponent,
   // createBuildComponentsRootGetDefaults,
   formatAllSourceFiles,
@@ -42,6 +43,7 @@ async function run() {
   }
 
   await createRenderNodeGenerated(validated, paths);
+  await createPatternsGenerated(validated, paths);
   await createBuildComponentsIndex(validated, paths);
   // Removed: root getDefaults generator
   await formatAllSourceFiles(paths);

package/scripts/prebuild/utils/createBuildComponentsIndex.js

@@ -16,7 +16,11 @@ export async function createBuildComponentsIndex(validated, paths) {
 
   const renderNodeExport = `export { default as RenderNode } from './RenderNode.generated';`;
 
-  const sections = [renderNodeExport, exportLines].filter(Boolean).join('\n\n');
+  const patternsExport = `export { patterns } from './patterns.generated';`;
+
+  const sections = [renderNodeExport, patternsExport, exportLines]
+    .filter(Boolean)
+    .join('\n\n');
 
   const fileContent =
     `/* AUTO-GENERATED FILE - DO NOT EDIT */\n\n` +

package/scripts/prebuild/utils/createPatternsGenerated.js

@@ -0,0 +1,23 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { formatWithPrettier } from './formatWithPrettier.js';
+
+// Creates src/build-components/patterns.generated.ts that aggregates all component pattern.json files
+export async function createPatternsGenerated(validated, paths) {
+  const { COMPONENTS_ROOT } = paths;
+  const targetPath = path.join(COMPONENTS_ROOT, 'patterns.generated.ts');
+
+  // Use already-validated and resolved patternJson objects and emit inline
+  const objectEntries = validated
+    .map(({ patternJson }) => JSON.stringify(patternJson))
+    .join(',\n  ');
+
+  const fileContent =
+    `/* AUTO-GENERATED FILE - DO NOT EDIT */\n` +
+    `\n` +
+    `// Export resolved patterns (after extends resolution)\n` +
+    `export const patterns = [\n  ${objectEntries}\n] as const;\n`;
+
+  const formatted = await formatWithPrettier(fileContent);
+  await fs.writeFile(targetPath, formatted, 'utf8');
+}

package/scripts/prebuild/utils/index.js

@@ -11,6 +11,7 @@ export { ensurePropsTs } from './ensurePropsTs.js';
 export { createComponentTsx } from './createComponentTsx.js';
 export { createRenderNodeGenerated } from './createRenderNodeGenerated.js';
 export { createBuildComponentsIndex } from './createBuildComponentsIndex.js';
+export { createPatternsGenerated } from './createPatternsGenerated.js';
 export { formatAllSourceFiles } from './formatAllSourceFiles.js';
 export { validateExistingComponentTsx } from './validateExistingComponentTsx.js';
 export { createGetDefaultsPerComponent } from './createGetDefaultsPerComponent.js';

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -24,7 +24,8 @@ async function getAllEntriesInComponentsRoot(paths) {
           d.name !== 'index.ts' &&
           d.name !== 'getDefaults.ts' &&
           d.name !== 'useDefaults.ts' &&
-          d.name !== 'useNode.ts'
+          d.name !== 'useNode.ts' &&
+          d.name !== 'patterns.generated.ts'
       );
     });
 }
@@ -173,6 +174,130 @@ async function validatePatternJson(componentDir, componentName) {
     }
   }
 
+  // Resolve chained extends: walk up the chain, detect cycles, merge from base to child
+  const componentsRoot = path.dirname(componentDir);
+  const visited = new Set();
+  const ancestorStack = [];
+
+  // Track both componentName and current type for cycle detection
+  visited.add(componentName);
+  if (typeof data?.pattern?.type === 'string') visited.add(data.pattern.type);
+
+  let cursor = data;
+  // Collect raw ancestors without mutating child yet
+  while (
+    typeof cursor?.pattern?.extends === 'string' &&
+    cursor.pattern.extends.trim().length > 0
+  ) {
+    const parentName = cursor.pattern.extends.trim();
+    if (visited.has(parentName)) {
+      return fail(
+        `Circular dependency detected in extends chain at '${parentName}'. We don't allow circular dependency.`
+      );
+    }
+    visited.add(parentName);
+
+    const parentDir = path.join(componentsRoot, parentName);
+    const parentDirExists = await fs
+      .stat(parentDir)
+      .then(() => true)
+      .catch(() => false);
+    if (!parentDirExists) {
+      return fail(
+        `[${componentName}] extends '${parentName}' but folder not found at ${parentDir}`
+      );
+    }
+    const parentPatternPath = path.join(parentDir, 'pattern.json');
+    const parentPatternExists = await fs
+      .stat(parentPatternPath)
+      .then(() => true)
+      .catch(() => false);
+    if (!parentPatternExists) {
+      return fail(
+        `[${componentName}] extends '${parentName}' but missing pattern.json at ${parentPatternPath}`
+      );
+    }
+
+    let parentData;
+    try {
+      const parentContent = await fs.readFile(parentPatternPath, 'utf8');
+      parentData = JSON.parse(parentContent);
+    } catch (error) {
+      const reason =
+        error instanceof SyntaxError
+          ? 'Invalid JSON'
+          : error.code || error.message;
+      return fail(`Failed to read JSON at ${parentPatternPath}: ${reason}`);
+    }
+    if (typeof parentData?.pattern !== 'object' || parentData.pattern == null) {
+      return fail(
+        `[${componentName}] extends '${parentName}' but parent pattern.json -> 'pattern' must be an object`
+      );
+    }
+    if (typeof parentData.pattern.type !== 'string') {
+      return fail(
+        `[${componentName}] extends '${parentName}' but parent pattern.json -> 'pattern.type' must be a string`
+      );
+    }
+
+    // Detect cycle by type name too
+    const parentType = parentData.pattern.type;
+    if (visited.has(parentType)) {
+      return fail(
+        `Circular dependency detected in extends chain via type '${parentType}'. We don't allow circular dependency.`
+      );
+    }
+    visited.add(parentType);
+
+    ancestorStack.push(parentData);
+    cursor = parentData;
+  }
+
+  // Merge from the top-most ancestor down to the child
+  for (let i = ancestorStack.length - 1; i >= 0; i -= 1) {
+    const parentData = ancestorStack[i];
+    const parentAttributes = parentData?.pattern?.attributes || {};
+    const childAttributes = data?.pattern?.attributes || {};
+    const mergedAttributes = { ...parentAttributes, ...childAttributes };
+
+    // If child does not define children, inherit parent's
+    const childHasChildren = Object.prototype.hasOwnProperty.call(
+      data.pattern,
+      'children'
+    );
+    const mergedChildren = childHasChildren
+      ? data.pattern.children
+      : parentData?.pattern?.children;
+
+    const mergedTypes = { ...(parentData.types || {}), ...(data.types || {}) };
+    const mergedDefaults = {
+      ...(parentData.defaults || {}),
+      ...(data.defaults || {}),
+    };
+    const mergedAllowUnknown =
+      typeof data.allowUnknownAttributes === 'boolean'
+        ? data.allowUnknownAttributes
+        : parentData.allowUnknownAttributes;
+
+    const mergedPattern = {
+      ...parentData.pattern,
+      ...data.pattern,
+      type: data.pattern.type, // keep child's type
+      attributes: mergedAttributes,
+      children: mergedChildren,
+    };
+    delete mergedPattern.extends;
+
+    data = {
+      ...parentData,
+      ...data,
+      allowUnknownAttributes: mergedAllowUnknown,
+      types: mergedTypes,
+      defaults: mergedDefaults,
+      pattern: mergedPattern,
+    };
+  }
+
   return data;
 }
 

package/src/RenderPage.tsx

@@ -1,26 +1,24 @@
 import { Localication } from './types/PreviewConfig';
 import { TargetedScreenSize } from './types/TargetedScreenSize';
-import { RenderMainNode } from './RenderMainNode';
 import { DeviceMockFrame } from './DeviceMockFrame';
 import { Node } from './types/Node';
 import { RenderNode } from './build-components';
 import { Device } from './types/Device';
-import { createContext } from 'react';
+import { useEffect } from 'react';
+import { useRenderStore } from './store';
+export type ScreenStyle = {
+  light: { backgroundColor: string; color: string; seperatorColor?: string };
+  dark: { backgroundColor: string; color: string; seperatorColor?: string };
+};
 type RenderPageProps = {
   data: Node;
   isRtl: boolean;
-  screenStyle: {
-    light: { backgroundColor: string; color: string };
-    dark: { backgroundColor: string; color: string };
-  };
+  screenStyle: ScreenStyle;
   theme: 'dark' | 'light';
   localication: Localication;
   defaultLanguage?: string;
   device: Device;
 };
-export const renderPageContext = createContext<{
-  device: Device;
-} | null>(null);
 export function RenderPage({
   data,
   theme,
@@ -36,26 +34,32 @@ export function RenderPage({
   // width = (previewHeight * targetWidth) / targetHeight
   const height = screenPreviewHeight;
   const width = (height * device.width) / device.height;
+
+  useEffect(() => {
+    const {
+      setDevice,
+      setLocalication,
+      setDefaultLanguage,
+      setTheme,
+      setScreenStyle,
+    } = useRenderStore.getState();
+    setDevice(device);
+    setLocalication(localication);
+    setDefaultLanguage(defaultLanguage);
+    setTheme(theme);
+    setScreenStyle(screenStyle);
+  }, [device, localication, defaultLanguage, theme, screenStyle]);
+
   return (
-    <renderPageContext.Provider value={{ device }}>
-      <DeviceMockFrame
-        width={width}
-        height={height}
-        isRtl={isRtl}
-        screenStyle={screenStyle}
-        theme={theme}
-        device={device}
-      >
-        {
-          <RenderMainNode
-            localication={localication}
-            defaultLanguage={defaultLanguage}
-            theme={theme}
-          >
-            <RenderNode node={data} />
-          </RenderMainNode>
-        }
-      </DeviceMockFrame>
-    </renderPageContext.Provider>
+    <DeviceMockFrame
+      width={width}
+      height={height}
+      isRtl={isRtl}
+      screenStyle={screenStyle}
+      theme={theme}
+      device={device}
+    >
+      <RenderNode node={data} />
+    </DeviceMockFrame>
   );
 }

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ButtonComponentProps } from './ButtonProps.generated';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function Button({ node }: ButtonComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   return String(node?.type ?? 'button');
 }
 

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

@@ -2,10 +2,10 @@ import React from 'react';
 import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function Carousel({ node }: CarouselComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   // Ensure children are carouselItems
   const renderChildren = () => {
     if (Array.isArray(node.children)) {

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

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [
     'previous_button',

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

@@ -1,10 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   const dotType = node.attributes?.dotType || 'normal_dot';
   const emblaApi = useContext(carouselContext);
   const [selectedIndex, setSelectedIndex] = useState(0);

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
 import { RenderNode } from '../..';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 export function CarouselItem({ node }: CarouselItemComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   return (
     <div className="embla__slide" {...node.attributes}>
       {node.children && <RenderNode node={node.children} />}

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

@@ -2,11 +2,11 @@ import React, { createContext } from 'react';
 import type { CarouselProviderComponentProps } from './CarouselProviderProps.generated';
 import { RenderNode } from '../..';
 import useEmblaCarousel from 'embla-carousel-react';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 export const carouselContext = createContext<any>(undefined);
 function CarouselProvider({ node }: CarouselProviderComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   return (
     <carouselContext.Provider value={emblaApi}>

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

@@ -1,13 +1,12 @@
 import React from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function Image({ node }: ImageComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   return (
     <img
       key={node.key}
-      className="primitive primitive-image"
       src={node.attributes?.src}
       width={node.attributes?.width}
       height={node.attributes?.height}

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { OnboardComponentProps } from './OnboardProps.generated';
 import Carousel from '../Carousel/Carousel';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function Onboard({ node }: OnboardComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   return <Carousel node={{ ...node, type: 'carousel' } as any} />;
 }
 

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

@@ -1,13 +1,16 @@
 import React, { useContext } from 'react';
 import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
-import { mainNodeContext } from '../../RenderMainNode';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
+  const { defaultLanguage, localication } = useRenderStore((s) => ({
+    defaultLanguage: s.defaultLanguage,
+    localication: s.localication,
+  }));
 
   const labelRaw = node.attributes?.labelKey ?? '';
   const label =

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

@@ -3,14 +3,19 @@ import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import RenderNode from '../RenderNode.generated';
-import useDefaults from '../useNode';
-
-const THEME_COLORS = {
-  ONBOARD_SEPARATOR_COLOR: '#E5E7EB',
-};
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
+  const { screenStyle, theme } = useRenderStore((s) => ({
+    screenStyle: s.screenStyle,
+    theme: s.theme,
+  }));
+  const seperatorColorDefault =
+    theme === 'light'
+      ? screenStyle.light.seperatorColor
+      : screenStyle.dark.seperatorColor;
   const ctx = useContext(onboardContext) ?? {};
   const emblaApi = ctx.emblaApi;
   const [selectedIndex, setSelectedIndex] = useState(ctx.selectedIndex ?? 0);
@@ -30,7 +35,8 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
 
   const direction =
     node.attributes?.buttons_direction === 'column' ? 'column' : 'row';
-  const seperatorColor = node.attributes?.seperatorColor;
+  const seperatorColor =
+    node.attributes?.seperatorColor ?? seperatorColorDefault;
 
   const renderChildren = () => {
     if (Array.isArray(node.children)) {
@@ -47,8 +53,7 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
         className="onboard__separator"
         style={{
           height: 1,
-          backgroundColor:
-            seperatorColor ?? THEME_COLORS.ONBOARD_SEPARATOR_COLOR,
+          backgroundColor: seperatorColor,
           width: '100%',
         }}
       />

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { OnboardDotComponentProps } from './OnboardExpandingDotProps.generated';
 import CarouselDots from '../CarouselDots/CarouselDots';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   return <CarouselDots node={{ ...node, type: 'carouselDots' } as any} />;
 }