@rocapine/react-native-onboarding 1.15.0 → 1.17.0

package/src/onboarding-example.ts

@@ -9,6 +9,16 @@ export const onboardingExample = {
     audienceOrder: undefined,
     draft: true,
   },
+  fonts: {
+    Inter: {
+      regular: "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf",
+      medium: "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.ttf",
+      bold: "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-normal.ttf",
+    },
+    Lobster: {
+      regular: "https://cdn.jsdelivr.net/fontsource/fonts/lobster@latest/latin-400-normal.ttf",
+    },
+  },
   steps: [
     {
       id: "welcome",
@@ -188,10 +198,22 @@ export const onboardingExample = {
                   content: "Built from the CMS",
                   fontSize: 28,
                   fontWeight: "700",
-                  fontFamily: "System",
+                  fontFamily: "Inter",
                   textAlign: "center",
                 },
               },
+              {
+                id: "headline-display",
+                type: "Text",
+                props: {
+                  content: "Runtime-loaded font",
+                  fontSize: 32,
+                  fontFamily: "Lobster",
+                  fontStyle: "italic",
+                  textAlign: "center",
+                  marginVertical: 4,
+                },
+              },
               {
                 id: "subheadline",
                 type: "Text",
@@ -376,6 +398,10 @@ export const onboardingExample = {
                   label: "Get Started",
                   variant: "filled",
                   marginVertical: 8,
+                  actions: [
+                    { type: "custom", function: "trackCta", variables: ["name", "plan", "goals"] },
+                    "continue",
+                  ],
                 },
               },
               {

package/src/steps/ComposableScreen/elements/ButtonElement.ts

@@ -1,8 +1,36 @@
 import { z } from "zod";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 
+export type CustomButtonAction = {
+  type: "custom";
+  function: string;
+  variables?: string[];
+};
+
+export const CustomButtonActionSchema = z.object({
+  type: z.literal("custom"),
+  function: z.string().min(1, "function must not be empty"),
+  variables: z.array(z.string()).optional(),
+});
+
+export type ButtonAction = "continue" | CustomButtonAction;
+
+export const ButtonActionSchema = z.union([
+  z.literal("continue"),
+  CustomButtonActionSchema,
+]);
+
 export type ButtonElementProps = BaseBoxProps & {
   label: string;
+  /**
+   * Ordered list of actions to run on press. Sequential, await async handlers,
+   * abort on error, `"continue"` is terminal.
+   */
+  actions?: ButtonAction[];
+  /**
+   * @deprecated Use `actions` instead. When `actions` is absent and `action === "continue"`,
+   * runtime treats it as `actions: ["continue"]`.
+   */
   action?: "continue";
   variant?: "filled" | "outlined" | "ghost";
   backgroundColor?: string;
@@ -10,11 +38,13 @@ export type ButtonElementProps = BaseBoxProps & {
   fontSize?: number;
   fontWeight?: string;
   fontFamily?: string;
+  fontStyle?: "normal" | "italic";
   textAlign?: "left" | "center" | "right";
 };
 
 export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   label: z.string().min(1, "label must not be empty"),
+  actions: z.array(ButtonActionSchema).optional(),
   action: z.enum(["continue"]).optional(),
   variant: z.enum(["filled", "outlined", "ghost"]).optional(),
   backgroundColor: z.string().optional(),
@@ -22,5 +52,6 @@ export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
   fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),
 });

package/src/steps/ComposableScreen/elements/CheckboxGroupElement.ts

@@ -18,6 +18,7 @@ export type CheckboxGroupElementProps = BaseBoxProps & {
   itemFontSize?: number;
   itemFontWeight?: string;
   itemFontFamily?: string;
+  itemFontStyle?: "normal" | "italic";
   itemPadding?: number;
   itemPaddingHorizontal?: number;
   itemPaddingVertical?: number;
@@ -40,6 +41,7 @@ export const CheckboxGroupElementPropsSchema = BaseBoxPropsSchema.extend({
   itemFontSize: z.number().optional(),
   itemFontWeight: z.string().optional(),
   itemFontFamily: z.string().optional(),
+  itemFontStyle: z.enum(["normal", "italic"]).optional(),
   itemPadding: z.number().optional(),
   itemPaddingHorizontal: z.number().optional(),
   itemPaddingVertical: z.number().optional(),

package/src/steps/ComposableScreen/elements/InputElement.ts

@@ -18,6 +18,7 @@ export type InputElementProps = BaseBoxProps & {
   fontSize?: number;
   fontWeight?: string;
   fontFamily?: string;
+  fontStyle?: "normal" | "italic";
   lineHeight?: number;
   letterSpacing?: number;
   textAlign?: "left" | "center" | "right";
@@ -41,6 +42,7 @@ export const InputElementPropsSchema = BaseBoxPropsSchema.extend({
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
   fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
   lineHeight: z.number().optional(),
   letterSpacing: z.number().optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),

package/src/steps/ComposableScreen/elements/RadioGroupElement.ts

@@ -18,6 +18,7 @@ export type RadioGroupElementProps = BaseBoxProps & {
   itemFontSize?: number;
   itemFontWeight?: string;
   itemFontFamily?: string;
+  itemFontStyle?: "normal" | "italic";
   itemPadding?: number;
   itemPaddingHorizontal?: number;
   itemPaddingVertical?: number;
@@ -40,6 +41,7 @@ export const RadioGroupElementPropsSchema = BaseBoxPropsSchema.extend({
   itemFontSize: z.number().optional(),
   itemFontWeight: z.string().optional(),
   itemFontFamily: z.string().optional(),
+  itemFontStyle: z.enum(["normal", "italic"]).optional(),
   itemPadding: z.number().optional(),
   itemPaddingHorizontal: z.number().optional(),
   itemPaddingVertical: z.number().optional(),

package/src/steps/ComposableScreen/elements/TextElement.ts

@@ -7,6 +7,7 @@ export type TextElementProps = BaseBoxProps & {
   fontSize?: number;
   fontWeight?: string;
   fontFamily?: string;
+  fontStyle?: "normal" | "italic";
   color?: string;
   textAlign?: "left" | "center" | "right";
   letterSpacing?: number;
@@ -19,6 +20,7 @@ export const TextElementPropsSchema = BaseBoxPropsSchema.extend({
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
   fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
   color: z.string().optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),
   letterSpacing: z.number().optional(),

package/src/steps/ComposableScreen/types.ts

@@ -26,7 +26,8 @@ export type { RiveElementProps } from "./elements/RiveElement";
 export type { IconElementProps } from "./elements/IconElement";
 export type { VideoElementProps } from "./elements/VideoElement";
 export type { InputElementProps } from "./elements/InputElement";
-export type { ButtonElementProps } from "./elements/ButtonElement";
+export type { ButtonElementProps, ButtonAction, CustomButtonAction } from "./elements/ButtonElement";
+export { ButtonActionSchema, CustomButtonActionSchema } from "./elements/ButtonElement";
 export type { RadioGroupElementProps } from "./elements/RadioGroupElement";
 export type { CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
 export type { DatePickerElementProps } from "./elements/DatePickerElement";
@@ -34,6 +35,12 @@ export type { CarouselElementProps } from "./elements/CarouselElement";
 export type { ZStackElementProps } from "./elements/ZStackElement";
 export type { SafeAreaViewElementProps, SafeAreaEdge, SafeAreaEdgeMode } from "./elements/SafeAreaViewElement";
 
+/**
+ * A variable entry stored in the ComposableScreen variables map.
+ * `value` is the canonical value (string), `label` is an optional display label.
+ */
+export type ComposableVariableEntry = { value: string; label?: string };
+
 // UIElement union — must live here (not in elements/) to avoid circular deps
 // because the Stack variant's children: UIElement[] references itself.
 type UIElement =

package/src/types.ts

@@ -44,10 +44,31 @@ export interface OnboardingMetadata {
   draft?: boolean;
 }
 
+export type FontWeightKey =
+  | "regular"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extrabold"
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900";
+
+export type FontFamilyManifest = Partial<Record<FontWeightKey, string>>;
+
+export type FontsManifest = Record<string, FontFamilyManifest>;
+
 export interface Onboarding<StepType extends BaseStepType = BaseStepType> {
   metadata: OnboardingMetadata;
   steps: StepType[];
   configuration: any;
+  fonts?: FontsManifest;
 }
 
 export interface GetStepsResponseHeaders {