@rocapine/react-native-onboarding-ui 1.1.6 → 1.2.0

package/README.md

@@ -0,0 +1,193 @@
+# @rocapine/react-native-onboarding-ui
+
+**UI layer for the Rocapine Onboarding Studio SDK.**
+
+Pre-built renderers, components, and a theme system on top of
+`@rocapine/react-native-onboarding`.
+
+---
+
+## Installation
+
+```bash
+npm install @rocapine/react-native-onboarding-ui @rocapine/react-native-onboarding
+```
+
+---
+
+## Usage
+
+Render any CMS-driven step with a single component:
+
+```typescript
+import { OnboardingPage } from "@rocapine/react-native-onboarding-ui";
+
+export default function OnboardingScreen() {
+  const { step } = useOnboardingQuestions({ stepNumber: 1 });
+  return <OnboardingPage step={step} onContinue={handleContinue} />;
+}
+```
+
+---
+
+## 🎨 Page Types
+
+| Type                                     | Description                                            |
+| ---------------------------------------- | ------------------------------------------------------ |
+| `Question`                               | Single / multi-select answer screens                   |
+| `MediaContent`                           | Image or video with title and description              |
+| `Carousel`                               | Horizontal paginated slides                            |
+| `Picker`                                 | Structured data pickers (weight, height, age, gender…) |
+| `Loader`                                 | Animated progress bars with optional carousel          |
+| `Ratings`                                | App store rating prompts with social proof             |
+| `Commitment`                             | Agreement / signature screens                          |
+| `ComposableScreen` _(under development)_ | Declarative layout system — see below                  |
+
+---
+
+## 🧱 ComposableScreen _(under development)_
+
+> **This page type is still under active development. The API may change before
+> it is considered stable.**
+
+`ComposableScreen` lets you build arbitrary onboarding screens entirely from CMS
+data, without writing a custom renderer. You compose a tree of layout and text
+elements that is rendered directly to native views.
+
+### Element types
+
+**`YStack`** — vertical flex container (`flexDirection: "column"`)
+
+**`XStack`** — horizontal flex container (`flexDirection: "row"`)
+
+**`Text`** — text node
+
+### Supported props
+
+#### Stack elements (`YStack` / `XStack`)
+
+| Prop                | Type                                                                          | Notes                                  |
+| ------------------- | ----------------------------------------------------------------------------- | -------------------------------------- |
+| `gap`               | `number`                                                                      | Space between children                 |
+| `padding`           | `number`                                                                      |                                        |
+| `paddingHorizontal` | `number`                                                                      |                                        |
+| `paddingVertical`   | `number`                                                                      |                                        |
+| `margin`            | `number`                                                                      |                                        |
+| `marginHorizontal`  | `number`                                                                      |                                        |
+| `marginVertical`    | `number`                                                                      |                                        |
+| `flex`              | `number`                                                                      |                                        |
+| `flexShrink`        | `number`                                                                      | Defaults to `1` inside an `XStack`     |
+| `flexWrap`          | `"wrap" \| "nowrap"`                                                          |                                        |
+| `alignItems`        | `"flex-start" \| "center" \| "flex-end" \| "stretch"`                         |                                        |
+| `justifyContent`    | `"flex-start" \| "center" \| "flex-end" \| "space-between" \| "space-around"` |                                        |
+| `width`             | `number`                                                                      |                                        |
+| `height`            | `number`                                                                      |                                        |
+| `minWidth`          | `number`                                                                      |                                        |
+| `maxWidth`          | `number`                                                                      |                                        |
+| `minHeight`         | `number`                                                                      |                                        |
+| `maxHeight`         | `number`                                                                      |                                        |
+| `backgroundColor`   | `string`                                                                      |                                        |
+| `borderWidth`       | `number`                                                                      |                                        |
+| `borderRadius`      | `number`                                                                      |                                        |
+| `borderColor`       | `string`                                                                      |                                        |
+| `overflow`          | `"hidden" \| "visible" \| "scroll"`                                           | Use `"hidden"` to clip rounded corners |
+| `opacity`           | `number`                                                                      |                                        |
+
+#### Text elements
+
+| Prop                | Type                            | Notes                                   |
+| ------------------- | ------------------------------- | --------------------------------------- |
+| `content`           | `string`                        | **Required**                            |
+| `fontSize`          | `number`                        |                                         |
+| `fontWeight`        | `string`                        |                                         |
+| `color`             | `string`                        | Defaults to `theme.colors.text.primary` |
+| `textAlign`         | `"left" \| "center" \| "right"` |                                         |
+| `letterSpacing`     | `number`                        |                                         |
+| `lineHeight`        | `number`                        |                                         |
+| `backgroundColor`   | `string`                        |                                         |
+| `padding`           | `number`                        |                                         |
+| `paddingHorizontal` | `number`                        |                                         |
+| `paddingVertical`   | `number`                        |                                         |
+| `margin`            | `number`                        |                                         |
+| `marginHorizontal`  | `number`                        |                                         |
+| `marginVertical`    | `number`                        |                                         |
+| `borderWidth`       | `number`                        |                                         |
+| `borderRadius`      | `number`                        |                                         |
+| `borderColor`       | `string`                        |                                         |
+| `opacity`           | `number`                        |                                         |
+
+### Example payload
+
+```json
+{
+  "type": "ComposableScreen",
+  "payload": {
+    "elements": [
+      {
+        "id": "card",
+        "type": "YStack",
+        "props": {
+          "padding": 24,
+          "gap": 12,
+          "borderWidth": 1,
+          "borderRadius": 16,
+          "borderColor": "#E0E0E0",
+          "overflow": "hidden"
+        },
+        "children": [
+          {
+            "id": "title",
+            "type": "Text",
+            "props": {
+              "content": "Welcome aboard",
+              "fontSize": 24,
+              "fontWeight": "700"
+            }
+          },
+          {
+            "id": "subtitle",
+            "type": "Text",
+            "props": {
+              "content": "Let's get you set up.",
+              "fontSize": 16
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 🎭 Theming
+
+Pass a `theme` prop (or `lightTheme` / `darkTheme`) to `OnboardingProvider`:
+
+```typescript
+<OnboardingProvider
+  theme={{
+    colors: { primary: "#FF5733" },
+    typography: { fontFamily: { title: "CustomFont-Bold" } },
+  }}
+/>;
+```
+
+See `@rocapine/react-native-onboarding` for the full token reference.
+
+---
+
+## 📦 Optional Dependencies
+
+| Feature                | Package                       |
+| ---------------------- | ----------------------------- |
+| Picker screens         | `@react-native-picker/picker` |
+| Ratings screen         | `expo-store-review`           |
+| Commitment (signature) | `@shopify/react-native-skia`  |
+
+---
+
+## 📄 License
+
+MIT © [Rocapine](https://rocapine.com)

package/dist/UI/OnboardingPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingPage.d.ts","sourceRoot":"","sources":["../../src/UI/OnboardingPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAiI,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAG7M,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,kBAAkB,CAAC;IACzB,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gBAAgB,CAAC,EAAE;QACjB,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;QACtE,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;KACrE,CAAC;CACH;AAED,eAAO,MAAM,cAAc,GAAI,iCAAiC,mBAAmB,4CAkClF,CAAC"}
+{"version":3,"file":"OnboardingPage.d.ts","sourceRoot":"","sources":["../../src/UI/OnboardingPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAA2J,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAGvO,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,kBAAkB,CAAC;IACzB,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gBAAgB,CAAC,EAAE;QACjB,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;QACtE,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;KACrE,CAAC;CACH;AAED,eAAO,MAAM,cAAc,GAAI,iCAAiC,mBAAmB,4CAoClF,CAAC"}

package/dist/UI/OnboardingPage.js

@@ -22,6 +22,8 @@ const OnboardingPage = ({ step, onContinue, isSandbox }) => {
             return (0, jsx_runtime_1.jsx)(Pages_1.LoaderRenderer, { step: step, onContinue: onContinue, theme: theme });
         case 'Question':
             return (0, jsx_runtime_1.jsx)(Pages_1.QuestionRenderer, { step: step, onContinue: onContinue, theme: theme });
+        case 'ComposableScreen':
+            return (0, jsx_runtime_1.jsx)(Pages_1.ComposableScreenRenderer, { step: step, onContinue: onContinue, theme: theme });
         default:
             if (isSandbox) {
                 // @ts-ignore

package/dist/UI/OnboardingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingPage.js","sourceRoot":"","sources":["../../src/UI/OnboardingPage.tsx"],"names":[],"mappings":";;;;AACA,mCAA6M;AAC7M,+CAAkD;AAClD,+CAA4C;AAerC,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAuB,EAAE,EAAE;IACrF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAE7B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,SAAS;YACZ,OAAO,uBAAC,uBAAe,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC/E,KAAK,QAAQ;YACX,OAAO,uBAAC,sBAAc,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC9E,KAAK,YAAY;YACf,OAAO,uBAAC,0BAAkB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAClF,KAAK,UAAU;YACb,OAAO,uBAAC,wBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAChF,KAAK,cAAc;YACjB,OAAO,uBAAC,4BAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QACpF,KAAK,QAAQ;YACX,OAAO,uBAAC,sBAAc,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC9E,KAAK,UAAU;YACb,OAAO,uBAAC,wBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAChF;YACE,IAAI,SAAS,EAAE,CAAC;gBACd,aAAa;gBACb,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;gBAC3B,OAAO,wBAAC,mBAAI,eACV,wBAAC,mBAAI,0BAAS,QAAQ,wBAAwB,EAC9C,uBAAC,qBAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,UAAU,GAAI,IAC3C,CAAA;YACT,CAAC;iBAAM,CAAC;gBACN,UAAU,CAAC,mCAAmC,CAAC,CAAC;gBAChD,OAAO,wBAAC,mBAAI,eACV,uBAAC,mBAAI,sCAA2B,EAChC,uBAAC,qBAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,UAAU,GAAI,IAC3C,CAAA;YACT,CAAC;IACL,CAAC;AACH,CAAC,CAAC;AAlCW,QAAA,cAAc,kBAkCzB"}
+{"version":3,"file":"OnboardingPage.js","sourceRoot":"","sources":["../../src/UI/OnboardingPage.tsx"],"names":[],"mappings":";;;;AACA,mCAAuO;AACvO,+CAAkD;AAClD,+CAA4C;AAerC,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAuB,EAAE,EAAE;IACrF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAE7B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,SAAS;YACZ,OAAO,uBAAC,uBAAe,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC/E,KAAK,QAAQ;YACX,OAAO,uBAAC,sBAAc,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC9E,KAAK,YAAY;YACf,OAAO,uBAAC,0BAAkB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAClF,KAAK,UAAU;YACb,OAAO,uBAAC,wBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAChF,KAAK,cAAc;YACjB,OAAO,uBAAC,4BAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QACpF,KAAK,QAAQ;YACX,OAAO,uBAAC,sBAAc,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC9E,KAAK,UAAU;YACb,OAAO,uBAAC,wBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAChF,KAAK,kBAAkB;YACrB,OAAO,uBAAC,gCAAwB,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QACxF;YACE,IAAI,SAAS,EAAE,CAAC;gBACd,aAAa;gBACb,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;gBAC3B,OAAO,wBAAC,mBAAI,eACV,wBAAC,mBAAI,0BAAS,QAAQ,wBAAwB,EAC9C,uBAAC,qBAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,UAAU,GAAI,IAC3C,CAAA;YACT,CAAC;iBAAM,CAAC;gBACN,UAAU,CAAC,mCAAmC,CAAC,CAAC;gBAChD,OAAO,wBAAC,mBAAI,eACV,uBAAC,mBAAI,sCAA2B,EAChC,uBAAC,qBAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,UAAU,GAAI,IAC3C,CAAA;YACT,CAAC;IACL,CAAC;AACH,CAAC,CAAC;AApCW,QAAA,cAAc,kBAoCzB"}

package/dist/UI/Pages/ComposableScreen/Renderer.d.ts

@@ -0,0 +1,13 @@
+import { ComposableScreenStepType } from "./types";
+import { Theme } from "../../Theme/types";
+type ContentProps = {
+    step: ComposableScreenStepType;
+    onContinue: () => void;
+    theme?: Theme;
+};
+export declare const ComposableScreenRenderer: {
+    (props: ContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=Renderer.d.ts.map

package/dist/UI/Pages/ComposableScreen/Renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAA6C,MAAM,SAAS,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAO1C,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,wBAAwB,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAkIF,eAAO,MAAM,wBAAwB;;;CAAsE,CAAC"}

package/dist/UI/Pages/ComposableScreen/Renderer.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposableScreenRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const types_1 = require("./types");
+const defaultTheme_1 = require("../../Theme/defaultTheme");
+const helpers_1 = require("../../Theme/helpers");
+const ErrorBoundary_1 = require("../../ErrorBoundary");
+const OnboardingTemplate_1 = require("../../Templates/OnboardingTemplate");
+const renderElement = (element, theme, parentType) => {
+    var _a, _b;
+    if (element.type === "YStack" || element.type === "XStack") {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                flexDirection: element.type === "XStack" ? "row" : "column",
+                gap: element.props.gap,
+                padding: element.props.padding,
+                paddingHorizontal: element.props.paddingHorizontal,
+                paddingVertical: element.props.paddingVertical,
+                margin: element.props.margin,
+                marginHorizontal: element.props.marginHorizontal,
+                marginVertical: element.props.marginVertical,
+                flex: element.props.flex,
+                width: element.props.width,
+                height: element.props.height,
+                minWidth: element.props.minWidth,
+                maxWidth: element.props.maxWidth,
+                minHeight: element.props.minHeight,
+                maxHeight: element.props.maxHeight,
+                flexShrink: (_a = element.props.flexShrink) !== null && _a !== void 0 ? _a : (parentType === "XStack" ? 1 : undefined),
+                flexWrap: element.props.flexWrap,
+                alignItems: element.props.alignItems,
+                justifyContent: element.props.justifyContent,
+                backgroundColor: element.props.backgroundColor,
+                borderWidth: element.props.borderWidth,
+                borderRadius: element.props.borderRadius,
+                borderColor: element.props.borderColor,
+                overflow: element.props.overflow,
+                opacity: element.props.opacity,
+            }, children: element.children.map((child) => renderElement(child, theme, element.type)) }, element.id));
+    }
+    if (element.type === "Text") {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                fontSize: element.props.fontSize,
+                fontWeight: element.props.fontWeight,
+                color: (_b = element.props.color) !== null && _b !== void 0 ? _b : theme.colors.text.primary,
+                textAlign: element.props.textAlign,
+                letterSpacing: element.props.letterSpacing,
+                lineHeight: element.props.lineHeight,
+                backgroundColor: element.props.backgroundColor,
+                padding: element.props.padding,
+                paddingHorizontal: element.props.paddingHorizontal,
+                paddingVertical: element.props.paddingVertical,
+                margin: element.props.margin,
+                marginHorizontal: element.props.marginHorizontal,
+                marginVertical: element.props.marginVertical,
+                borderWidth: element.props.borderWidth,
+                borderRadius: element.props.borderRadius,
+                borderColor: element.props.borderColor,
+                opacity: element.props.opacity,
+                flexShrink: parentType === "XStack" ? 1 : undefined,
+            }, children: element.props.content }, element.id));
+    }
+    return null;
+};
+const ComposableScreenRendererBase = ({ step, onContinue, theme = defaultTheme_1.defaultTheme }) => {
+    const { top, bottom } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const validatedData = types_1.ComposableScreenStepTypeSchema.parse(step);
+    const { elements } = validatedData.payload;
+    return ((0, jsx_runtime_1.jsx)(OnboardingTemplate_1.OnboardingTemplate, { step: step, onContinue: onContinue, theme: theme, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, alwaysBounceVertical: false, children: [elements.map((element) => renderElement(element, theme)), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.bottomSection, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.ctaButton, { backgroundColor: theme.colors.primary }], onPress: onContinue, activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                (0, helpers_1.getTextStyle)(theme, "button"),
+                                { color: theme.colors.text.opposite },
+                            ], children: validatedData.continueButtonLabel }) }) })] }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    bottomSection: {
+        paddingHorizontal: 32,
+        alignItems: "center",
+    },
+    ctaButton: {
+        borderRadius: 90,
+        paddingVertical: 18,
+        paddingHorizontal: 24,
+        minWidth: 234,
+        alignItems: "center",
+    },
+});
+exports.ComposableScreenRenderer = (0, ErrorBoundary_1.withErrorBoundary)(ComposableScreenRendererBase, "ComposableScreen");
+//# sourceMappingURL=Renderer.js.map

package/dist/UI/Pages/ComposableScreen/Renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":"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"}

package/dist/UI/Pages/ComposableScreen/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Renderer";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/UI/Pages/ComposableScreen/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/UI/Pages/ComposableScreen/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Renderer"), exports);
+__exportStar(require("./types"), exports);
+//# sourceMappingURL=index.js.map

package/dist/UI/Pages/ComposableScreen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B;AAC3B,0CAAwB"}

package/dist/UI/Pages/ComposableScreen/types.d.ts

@@ -0,0 +1,75 @@
+import { z } from "zod";
+export type UIElement = {
+    id: string;
+    name?: string;
+    type: "YStack" | "XStack";
+    props: {
+        gap?: number;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        flex?: number;
+        width?: number;
+        height?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        minHeight?: number;
+        maxHeight?: number;
+        alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+        justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+        backgroundColor?: string;
+        flexWrap?: "wrap" | "nowrap";
+        flexShrink?: number;
+        borderWidth?: number;
+        borderRadius?: number;
+        borderColor?: string;
+        overflow?: "hidden" | "visible" | "scroll";
+        opacity?: number;
+    };
+    children: UIElement[];
+} | {
+    id: string;
+    name?: string;
+    type: "Text";
+    props: {
+        content: string;
+        fontSize?: number;
+        fontWeight?: string;
+        color?: string;
+        textAlign?: "left" | "center" | "right";
+        letterSpacing?: number;
+        lineHeight?: number;
+        backgroundColor?: string;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        borderWidth?: number;
+        borderRadius?: number;
+        borderColor?: string;
+        opacity?: number;
+    };
+};
+export declare const UIElementSchema: z.ZodType<UIElement>;
+export declare const ComposableScreenStepPayloadSchema: z.ZodObject<{
+    elements: z.ZodArray<z.ZodType<UIElement, unknown, z.core.$ZodTypeInternals<UIElement, unknown>>>;
+}, z.core.$strip>;
+export declare const ComposableScreenStepTypeSchema: z.ZodObject<{
+    id: z.ZodString;
+    type: z.ZodLiteral<"ComposableScreen">;
+    name: z.ZodString;
+    displayProgressHeader: z.ZodBoolean;
+    payload: z.ZodObject<{
+        elements: z.ZodArray<z.ZodType<UIElement, unknown, z.core.$ZodTypeInternals<UIElement, unknown>>>;
+    }, z.core.$strip>;
+    customPayload: z.ZodOptional<z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodAny>>>;
+    continueButtonLabel: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    figmaUrl: z.ZodNullable<z.ZodString>;
+}, z.core.$strip>;
+export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;
+//# sourceMappingURL=types.d.ts.map

package/dist/UI/Pages/ComposableScreen/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,SAAS,GACjB;IACE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,KAAK,EAAE;QACL,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;QAC9D,cAAc,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,CAAC;QACzF,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;QAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;QAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB,GACD;IACE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE;QACL,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;QACxC,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAkDN,eAAO,MAAM,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,CAgBhD,CAAC;AAGF,eAAO,MAAM,iCAAiC;;iBAE5C,CAAC;AAEH,eAAO,MAAM,8BAA8B;;;;;;;;;;;iBASzC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,8BAA8B,CAAC,CAAC"}

package/dist/UI/Pages/ComposableScreen/types.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposableScreenStepTypeSchema = exports.ComposableScreenStepPayloadSchema = exports.UIElementSchema = void 0;
+const zod_1 = require("zod");
+const types_1 = require("../types");
+const StackElementPropsSchema = zod_1.z.object({
+    gap: zod_1.z.number().optional(),
+    padding: zod_1.z.number().optional(),
+    paddingHorizontal: zod_1.z.number().optional(),
+    paddingVertical: zod_1.z.number().optional(),
+    margin: zod_1.z.number().optional(),
+    marginHorizontal: zod_1.z.number().optional(),
+    marginVertical: zod_1.z.number().optional(),
+    flex: zod_1.z.number().optional(),
+    width: zod_1.z.number().optional(),
+    height: zod_1.z.number().optional(),
+    minWidth: zod_1.z.number().optional(),
+    maxWidth: zod_1.z.number().optional(),
+    minHeight: zod_1.z.number().optional(),
+    maxHeight: zod_1.z.number().optional(),
+    alignItems: zod_1.z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
+    justifyContent: zod_1.z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
+    backgroundColor: zod_1.z.string().optional(),
+    flexWrap: zod_1.z.enum(["wrap", "nowrap"]).optional(),
+    flexShrink: zod_1.z.number().optional(),
+    borderWidth: zod_1.z.number().optional(),
+    borderRadius: zod_1.z.number().optional(),
+    borderColor: zod_1.z.string().optional(),
+    overflow: zod_1.z.enum(["hidden", "visible", "scroll"]).optional(),
+    opacity: zod_1.z.number().min(0).max(1).optional(),
+});
+const TextElementPropsSchema = zod_1.z.object({
+    content: zod_1.z.string(),
+    fontSize: zod_1.z.number().optional(),
+    fontWeight: zod_1.z.string().optional(),
+    color: zod_1.z.string().optional(),
+    textAlign: zod_1.z.enum(["left", "center", "right"]).optional(),
+    letterSpacing: zod_1.z.number().optional(),
+    lineHeight: zod_1.z.number().optional(),
+    backgroundColor: zod_1.z.string().optional(),
+    padding: zod_1.z.number().optional(),
+    paddingHorizontal: zod_1.z.number().optional(),
+    paddingVertical: zod_1.z.number().optional(),
+    margin: zod_1.z.number().optional(),
+    marginHorizontal: zod_1.z.number().optional(),
+    marginVertical: zod_1.z.number().optional(),
+    borderWidth: zod_1.z.number().optional(),
+    borderRadius: zod_1.z.number().optional(),
+    borderColor: zod_1.z.string().optional(),
+    opacity: zod_1.z.number().min(0).max(1).optional(),
+});
+exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.union([zod_1.z.literal("YStack"), zod_1.z.literal("XStack")]),
+        props: StackElementPropsSchema,
+        children: zod_1.z.array(exports.UIElementSchema),
+    }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.literal("Text"),
+        props: TextElementPropsSchema,
+    }),
+]));
+exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
+    elements: zod_1.z.array(exports.UIElementSchema),
+});
+exports.ComposableScreenStepTypeSchema = zod_1.z.object({
+    id: zod_1.z.string(),
+    type: zod_1.z.literal("ComposableScreen"),
+    name: zod_1.z.string(),
+    displayProgressHeader: zod_1.z.boolean(),
+    payload: exports.ComposableScreenStepPayloadSchema,
+    customPayload: types_1.CustomPayloadSchema,
+    continueButtonLabel: zod_1.z.string().optional().default("Continue"),
+    figmaUrl: zod_1.z.string().nullable(),
+});
+//# sourceMappingURL=types.js.map

package/dist/UI/Pages/ComposableScreen/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}

package/dist/UI/Pages/index.d.ts

@@ -2,6 +2,7 @@ export * from "./Carousel";
 export * from "./Commitment";
 export * from "./Loader";
 export * from "./MediaContent";
+export * from "./ComposableScreen";
 export * from "./Picker";
 export * from "./Question";
 export * from "./Ratings";

package/dist/UI/Pages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/UI/Pages/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/UI/Pages/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC"}

package/dist/UI/Pages/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./Carousel"), exports);
 __exportStar(require("./Commitment"), exports);
 __exportStar(require("./Loader"), exports);
 __exportStar(require("./MediaContent"), exports);
+__exportStar(require("./ComposableScreen"), exports);
 __exportStar(require("./Picker"), exports);
 __exportStar(require("./Question"), exports);
 __exportStar(require("./Ratings"), exports);

package/dist/UI/Pages/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/UI/Pages/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B;AAC3B,+CAA6B;AAC7B,2CAAyB;AACzB,iDAA+B;AAC/B,2CAAyB;AACzB,6CAA2B;AAC3B,4CAA0B;AAE1B,eAAe;AACf,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/UI/Pages/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B;AAC3B,+CAA6B;AAC7B,2CAAyB;AACzB,iDAA+B;AAC/B,qDAAmC;AACnC,2CAAyB;AACzB,6CAA2B;AAC3B,4CAA0B;AAE1B,eAAe;AACf,0CAAwB"}

package/dist/UI/types.d.ts

@@ -1,4 +1,4 @@
-import { CarouselStepType, CommitmentStepType, LoaderStepType, MediaContentStepType, PickerStepType, RatingsStepType, QuestionStepType } from "./Pages";
+import { CarouselStepType, CommitmentStepType, LoaderStepType, MediaContentStepType, ComposableScreenStepType, PickerStepType, RatingsStepType, QuestionStepType } from "./Pages";
 export type CustomStepType<StepPayload = any> = {
     id: string;
     type: "CustomScreen";
@@ -19,5 +19,5 @@ export type BaseStepType = {
     payload?: any;
     customPayload?: any;
 };
-export type OnboardingStepType = RatingsStepType | MediaContentStepType | PickerStepType | CommitmentStepType | CarouselStepType | LoaderStepType | QuestionStepType | CustomStepType;
+export type OnboardingStepType = RatingsStepType | MediaContentStepType | ComposableScreenStepType | PickerStepType | CommitmentStepType | CarouselStepType | LoaderStepType | QuestionStepType | CustomStepType;
 //# sourceMappingURL=types.d.ts.map

package/dist/UI/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/UI/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,cAAc,CAAC,WAAW,GAAG,GAAG,IAAI;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE;QACP,cAAc,EAAE,MAAM,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,aAAa,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,cAAc,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/UI/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,wBAAwB,EACxB,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,cAAc,CAAC,WAAW,GAAG,GAAG,IAAI;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE;QACP,cAAc,EAAE,MAAM,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,aAAa,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,eAAe,GACf,oBAAoB,GACpB,wBAAwB,GACxB,cAAc,GACd,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/UI/OnboardingPage.tsx

@@ -1,5 +1,5 @@
 import { OnboardingStepType } from "./types";
-import { RatingsRenderer, PickerRenderer, CommitmentRenderer, CarouselRenderer, LoaderRenderer, MediaContentRenderer, QuestionRenderer, QuestionAnswerButtonProps, QuestionAnswersListProps } from "./Pages";
+import { RatingsRenderer, PickerRenderer, CommitmentRenderer, CarouselRenderer, LoaderRenderer, MediaContentRenderer, ComposableScreenRenderer, QuestionRenderer, QuestionAnswerButtonProps, QuestionAnswersListProps } from "./Pages";
 import { View, Text, Button } from 'react-native';
 import { useTheme } from "./Theme/useTheme";
 import { Theme } from "./Theme";
@@ -34,6 +34,8 @@ export const OnboardingPage = ({ step, onContinue, isSandbox }: OnboardingPagePr
       return <LoaderRenderer step={step} onContinue={onContinue} theme={theme} />;
     case 'Question':
       return <QuestionRenderer step={step} onContinue={onContinue} theme={theme} />;
+    case 'ComposableScreen':
+      return <ComposableScreenRenderer step={step} onContinue={onContinue} theme={theme} />;
     default:
       if (isSandbox) {
         // @ts-ignore

package/src/UI/Pages/ComposableScreen/Renderer.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ComposableScreenStepType, ComposableScreenStepTypeSchema, UIElement } from "./types";
+import { Theme } from "../../Theme/types";
+import { defaultTheme } from "../../Theme/defaultTheme";
+import { getTextStyle } from "../../Theme/helpers";
+
+import { withErrorBoundary } from "../../ErrorBoundary";
+import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+
+type ContentProps = {
+  step: ComposableScreenStepType;
+  onContinue: () => void;
+  theme?: Theme;
+};
+
+const renderElement = (element: UIElement, theme: Theme, parentType?: "XStack" | "YStack"): React.ReactNode => {
+  if (element.type === "YStack" || element.type === "XStack") {
+    return (
+      <View
+        key={element.id}
+        style={{
+          flexDirection: element.type === "XStack" ? "row" : "column",
+          gap: element.props.gap,
+          padding: element.props.padding,
+          paddingHorizontal: element.props.paddingHorizontal,
+          paddingVertical: element.props.paddingVertical,
+          margin: element.props.margin,
+          marginHorizontal: element.props.marginHorizontal,
+          marginVertical: element.props.marginVertical,
+          flex: element.props.flex,
+          width: element.props.width,
+          height: element.props.height,
+          minWidth: element.props.minWidth,
+          maxWidth: element.props.maxWidth,
+          minHeight: element.props.minHeight,
+          maxHeight: element.props.maxHeight,
+          flexShrink: element.props.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+          flexWrap: element.props.flexWrap,
+          alignItems: element.props.alignItems,
+          justifyContent: element.props.justifyContent,
+          backgroundColor: element.props.backgroundColor,
+          borderWidth: element.props.borderWidth,
+          borderRadius: element.props.borderRadius,
+          borderColor: element.props.borderColor,
+          overflow: element.props.overflow,
+          opacity: element.props.opacity,
+        }}
+      >
+        {element.children.map((child) => renderElement(child, theme, element.type))}
+      </View>
+    );
+  }
+
+  if (element.type === "Text") {
+    return (
+      <Text
+        key={element.id}
+        style={{
+          fontSize: element.props.fontSize,
+          fontWeight: element.props.fontWeight as any,
+          color: element.props.color ?? theme.colors.text.primary,
+          textAlign: element.props.textAlign,
+          letterSpacing: element.props.letterSpacing,
+          lineHeight: element.props.lineHeight,
+          backgroundColor: element.props.backgroundColor,
+          padding: element.props.padding,
+          paddingHorizontal: element.props.paddingHorizontal,
+          paddingVertical: element.props.paddingVertical,
+          margin: element.props.margin,
+          marginHorizontal: element.props.marginHorizontal,
+          marginVertical: element.props.marginVertical,
+          borderWidth: element.props.borderWidth,
+          borderRadius: element.props.borderRadius,
+          borderColor: element.props.borderColor,
+          opacity: element.props.opacity,
+          flexShrink: parentType === "XStack" ? 1 : undefined,
+        }}
+      >
+        {element.props.content}
+      </Text>
+    );
+  }
+
+  return null;
+};
+
+const ComposableScreenRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentProps) => {
+  const { top, bottom } = useSafeAreaInsets();
+  const validatedData = ComposableScreenStepTypeSchema.parse(step);
+  const { elements } = validatedData.payload;
+  return (
+    <OnboardingTemplate
+      step={step}
+      onContinue={onContinue}
+      theme={theme}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+        alwaysBounceVertical={false}
+      >
+        {elements.map((element) => renderElement(element, theme))}
+        <View style={styles.bottomSection}>
+          <TouchableOpacity
+            style={[styles.ctaButton, { backgroundColor: theme.colors.primary }]}
+            onPress={onContinue}
+            activeOpacity={0.8}
+          >
+            <Text
+              style={[
+                getTextStyle(theme, "button"),
+                { color: theme.colors.text.opposite },
+              ]}
+            >
+              {validatedData.continueButtonLabel}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </OnboardingTemplate>
+  )
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  bottomSection: {
+    paddingHorizontal: 32,
+    alignItems: "center",
+  },
+  ctaButton: {
+    borderRadius: 90,
+    paddingVertical: 18,
+    paddingHorizontal: 24,
+    minWidth: 234,
+    alignItems: "center",
+  },
+});
+
+export const ComposableScreenRenderer = withErrorBoundary(ComposableScreenRendererBase, "ComposableScreen");

package/src/UI/Pages/ComposableScreen/index.ts

@@ -0,0 +1,2 @@
+export * from "./Renderer";
+export * from "./types";

package/src/UI/Pages/ComposableScreen/types.ts

@@ -0,0 +1,145 @@
+import { z } from "zod";
+import { CustomPayloadSchema } from "../types";
+
+export type UIElement =
+  | {
+      id: string;
+      name?: string;
+      type: "YStack" | "XStack";
+      props: {
+        gap?: number;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        flex?: number;
+        width?: number;
+        height?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        minHeight?: number;
+        maxHeight?: number;
+        alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+        justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+        backgroundColor?: string;
+        flexWrap?: "wrap" | "nowrap";
+        flexShrink?: number;
+        borderWidth?: number;
+        borderRadius?: number;
+        borderColor?: string;
+        overflow?: "hidden" | "visible" | "scroll";
+        opacity?: number;
+      };
+      children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "Text";
+      props: {
+        content: string;
+        fontSize?: number;
+        fontWeight?: string;
+        color?: string;
+        textAlign?: "left" | "center" | "right";
+        letterSpacing?: number;
+        lineHeight?: number;
+        backgroundColor?: string;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        borderWidth?: number;
+        borderRadius?: number;
+        borderColor?: string;
+        opacity?: number;
+      };
+    };
+
+const StackElementPropsSchema = z.object({
+  gap: z.number().optional(),
+  padding: z.number().optional(),
+  paddingHorizontal: z.number().optional(),
+  paddingVertical: z.number().optional(),
+  margin: z.number().optional(),
+  marginHorizontal: z.number().optional(),
+  marginVertical: z.number().optional(),
+  flex: z.number().optional(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+  minWidth: z.number().optional(),
+  maxWidth: z.number().optional(),
+  minHeight: z.number().optional(),
+  maxHeight: z.number().optional(),
+  alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
+  justifyContent: z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
+  backgroundColor: z.string().optional(),
+  flexWrap: z.enum(["wrap", "nowrap"]).optional(),
+  flexShrink: z.number().optional(),
+  borderWidth: z.number().optional(),
+  borderRadius: z.number().optional(),
+  borderColor: z.string().optional(),
+  overflow: z.enum(["hidden", "visible", "scroll"]).optional(),
+  opacity: z.number().min(0).max(1).optional(),
+});
+
+const TextElementPropsSchema = z.object({
+  content: z.string(),
+  fontSize: z.number().optional(),
+  fontWeight: z.string().optional(),
+  color: z.string().optional(),
+  textAlign: z.enum(["left", "center", "right"]).optional(),
+  letterSpacing: z.number().optional(),
+  lineHeight: z.number().optional(),
+  backgroundColor: z.string().optional(),
+  padding: z.number().optional(),
+  paddingHorizontal: z.number().optional(),
+  paddingVertical: z.number().optional(),
+  margin: z.number().optional(),
+  marginHorizontal: z.number().optional(),
+  marginVertical: z.number().optional(),
+  borderWidth: z.number().optional(),
+  borderRadius: z.number().optional(),
+  borderColor: z.string().optional(),
+  opacity: z.number().min(0).max(1).optional(),
+});
+
+export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
+  z.union([
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.union([z.literal("YStack"), z.literal("XStack")]),
+      props: StackElementPropsSchema,
+      children: z.array(UIElementSchema),
+    }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("Text"),
+      props: TextElementPropsSchema,
+    }),
+  ])
+);
+
+
+export const ComposableScreenStepPayloadSchema = z.object({
+  elements: z.array(UIElementSchema),
+});
+
+export const ComposableScreenStepTypeSchema = z.object({
+  id: z.string(),
+  type: z.literal("ComposableScreen"),
+  name: z.string(),
+  displayProgressHeader: z.boolean(),
+  payload: ComposableScreenStepPayloadSchema,
+  customPayload: CustomPayloadSchema,
+  continueButtonLabel: z.string().optional().default("Continue"),
+  figmaUrl: z.string().nullable(),
+});
+
+export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;

package/src/UI/Pages/index.ts

@@ -2,6 +2,7 @@ export * from "./Carousel";
 export * from "./Commitment";
 export * from "./Loader";
 export * from "./MediaContent";
+export * from "./ComposableScreen";
 export * from "./Picker";
 export * from "./Question";
 export * from "./Ratings";

package/src/UI/types.ts

@@ -3,6 +3,7 @@ import {
   CommitmentStepType,
   LoaderStepType,
   MediaContentStepType,
+  ComposableScreenStepType,
   PickerStepType,
   RatingsStepType,
   QuestionStepType,
@@ -33,6 +34,7 @@ export type BaseStepType = {
 export type OnboardingStepType =
   | RatingsStepType
   | MediaContentStepType
+  | ComposableScreenStepType
   | PickerStepType
   | CommitmentStepType
   | CarouselStepType