@rocapine/react-native-onboarding 1.22.0 → 1.24.0

package/dist/steps/ComposableScreen/types.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "description": "Headless React Native SDK for Rocapine Onboarding Studio - Data fetching, state management, and hooks",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/onboarding-example.ts

@@ -274,6 +274,22 @@ export const onboardingExample = {
                   marginVertical: 4,
                 },
               },
+              {
+                id: "lifetime-badge",
+                renderWhen: {
+                  variable: "plan",
+                  operator: "eq",
+                  value: "lifetime",
+                },
+                type: "Text",
+                props: {
+                  content: "🎉 Best value — lifetime access!",
+                  fontSize: 14,
+                  fontWeight: "600",
+                  textAlign: "center",
+                  marginVertical: 4,
+                },
+              },
               {
                 id: "hero-checkbox",
                 type: "CheckboxGroup",
@@ -529,6 +545,67 @@ export const onboardingExample = {
                   },
                 },
               },
+              {
+                id: "states-heading",
+                type: "Text",
+                props: {
+                  content: "Button states & shadow",
+                  fontSize: 13,
+                  fontWeight: "700",
+                  marginVertical: 4,
+                  opacity: 0.5,
+                },
+              },
+              {
+                id: "btn-shadow",
+                type: "Button",
+                props: {
+                  label: "Elevated (shadow)",
+                  variant: "filled",
+                  marginVertical: 4,
+                  backgroundColor: "#6C63FF",
+                  shadowColor: "#6C63FF",
+                  shadowOffset: { width: 0, height: 6 },
+                  shadowOpacity: 0.4,
+                  shadowRadius: 12,
+                  elevation: 8,
+                },
+              },
+              {
+                id: "btn-pressed",
+                type: "Button",
+                props: {
+                  label: "Press me (hold)",
+                  variant: "filled",
+                  marginVertical: 4,
+                  backgroundColor: "#10b981",
+                  transitionDurationMs: 300,
+                  pressedStyle: {
+                    opacity: 0.6,
+                    backgroundColor: "#065f46",
+                  },
+                },
+              },
+              {
+                id: "btn-disabled",
+                type: "Button",
+                props: {
+                  label: "Always disabled",
+                  variant: "filled",
+                  marginVertical: 4,
+                  actions: ["continue"],
+                  disabledWhen: {
+                    variable: "never_enabled",
+                    operator: "neq",
+                    value: "yes",
+                  },
+                  disabledStyle: {
+                    backgroundColor: "#fee2e2",
+                    color: "#b91c1c",
+                    borderRadius: 12,
+                  },
+                },
+              },
               {
                 id: "consent-toggle",
                 type: "Button",
@@ -554,6 +631,22 @@ export const onboardingExample = {
                     operator: "neq",
                     value: "yes",
                   },
+                  transitionDurationMs: 180,
+                  shadowColor: "#000",
+                  shadowOffset: { width: 0, height: 4 },
+                  shadowOpacity: 0.18,
+                  shadowRadius: 8,
+                  elevation: 4,
+                  pressedStyle: {
+                    opacity: 0.7,
+                    backgroundColor: "#4f46e5",
+                  },
+                  disabledStyle: {
+                    backgroundColor: "#d1d5db",
+                    color: "#6b7280",
+                    shadowOpacity: 0,
+                    elevation: 0,
+                  },
                 },
               },
             ],

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

@@ -40,6 +40,16 @@ export const GradientBackgroundSchema = z.discriminatedUnion("type", [
   }),
 ]);
 
+export type ShadowOffset = {
+  width: number;
+  height: number;
+};
+
+export const ShadowOffsetSchema = z.object({
+  width: z.number(),
+  height: z.number(),
+});
+
 export type BaseBoxProps = {
   width?: number | string;
   height?: number | string;
@@ -64,6 +74,11 @@ export type BaseBoxProps = {
   borderWidth?: number;
   borderRadius?: number;
   borderColor?: string;
+  shadowColor?: string;
+  shadowOffset?: ShadowOffset;
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  elevation?: number;
 };
 
 export const BaseBoxPropsSchema = z.object({
@@ -90,4 +105,9 @@ export const BaseBoxPropsSchema = z.object({
   borderWidth: z.number().min(0).optional(),
   borderRadius: z.number().min(0).optional(),
   borderColor: z.string().optional(),
+  shadowColor: z.string().optional(),
+  shadowOffset: ShadowOffsetSchema.optional(),
+  shadowOpacity: z.number().min(0).max(1).optional(),
+  shadowRadius: z.number().min(0).optional(),
+  elevation: z.number().min(0).optional(),
 });

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

@@ -26,6 +26,20 @@ export const ButtonActionSchema = z.union([
   CustomButtonActionSchema,
 ]);
 
+type ButtonOverridableProps = BaseBoxProps & {
+  variant?: "filled" | "outlined" | "ghost";
+  backgroundColor?: string;
+  color?: string;
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string | "inherit";
+  fontStyle?: "normal" | "italic";
+  textAlign?: "left" | "center" | "right";
+};
+
+/** Subset of ButtonElementProps that can be overridden per-state. */
+export type ButtonStyleOverride = Partial<ButtonOverridableProps>;
+
 export type ButtonElementProps = BaseBoxProps & {
   label: string;
   /**
@@ -56,12 +70,29 @@ export type ButtonElementProps = BaseBoxProps & {
    * the same condition schema as `Branch.condition`.
    */
   disabledWhen?: LeafCondition | ConditionGroup;
-  /** Override background color in the disabled state (filled variant). Defaults to `theme.colors.disable`. */
+  /** @deprecated Use `disabledStyle.backgroundColor`. Falls back when `disabledStyle` omitted. */
   disabledBackgroundColor?: string;
-  /** Override text color in the disabled state. Defaults to `theme.colors.text.disable`. */
+  /** @deprecated Use `disabledStyle.color`. Falls back when `disabledStyle` omitted. */
   disabledColor?: string;
+  /** Style overrides merged on top of base props while pressed. */
+  pressedStyle?: ButtonStyleOverride;
+  /** Style overrides merged on top of base props while disabled. Wins over deprecated `disabled*` fields. */
+  disabledStyle?: ButtonStyleOverride;
+  /** Animation duration (ms) between rest/pressed/disabled. Default 150. */
+  transitionDurationMs?: number;
 };
 
+export const ButtonStyleOverrideSchema = BaseBoxPropsSchema.extend({
+  variant: z.enum(["filled", "outlined", "ghost"]).optional(),
+  backgroundColor: z.string().optional(),
+  color: z.string().optional(),
+  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(),
+}).partial();
+
 export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   label: z.string().min(1, "label must not be empty"),
   actions: z.array(ButtonActionSchema).optional(),
@@ -77,4 +108,7 @@ export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   disabledWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
   disabledBackgroundColor: z.string().optional(),
   disabledColor: z.string().optional(),
+  pressedStyle: ButtonStyleOverrideSchema.optional(),
+  disabledStyle: ButtonStyleOverrideSchema.optional(),
+  transitionDurationMs: z.number().min(0).optional(),
 });

package/src/steps/ComposableScreen/types.ts

@@ -1,5 +1,11 @@
 import { z } from "zod";
-import { BaseStepTypeSchema } from "../common.types";
+import {
+  BaseStepTypeSchema,
+  type LeafCondition,
+  type ConditionGroup,
+  LeafConditionSchema,
+  ConditionGroupSchema,
+} from "../common.types";
 import { type StackElementProps, StackElementPropsSchema } from "./elements/StackElement";
 import { type TextElementProps, TextElementPropsSchema } from "./elements/TextElement";
 import { type ImageElementProps, ImageElementPropsSchema } from "./elements/ImageElement";
@@ -58,6 +64,7 @@ type UIElement =
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "YStack" | "XStack";
       props: StackElementProps;
       children: UIElement[];
@@ -65,72 +72,84 @@ type UIElement =
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Text";
       props: TextElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Image";
       props: ImageElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Lottie";
       props: LottieElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Rive";
       props: RiveElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Icon";
       props: IconElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Video";
       props: VideoElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Input";
       props: InputElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Button";
       props: ButtonElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "RadioGroup";
       props: RadioGroupElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "CheckboxGroup";
       props: CheckboxGroupElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "DatePicker";
       props: DatePickerElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Carousel";
       props: CarouselElementProps;
       children: UIElement[];
@@ -138,6 +157,7 @@ type UIElement =
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "ZStack";
       props: ZStackElementProps;
       children: UIElement[];
@@ -145,6 +165,7 @@ type UIElement =
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "SafeAreaView";
       props: SafeAreaViewElementProps;
       children: UIElement[];
@@ -155,6 +176,7 @@ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.union([z.literal("YStack"), z.literal("XStack")]),
       props: StackElementPropsSchema,
       children: z.array(UIElementSchema),
@@ -162,72 +184,84 @@ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Text"),
       props: TextElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Image"),
       props: ImageElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Lottie"),
       props: LottieElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Rive"),
       props: RiveElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Icon"),
       props: IconElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Video"),
       props: VideoElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Input"),
       props: InputElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Button"),
       props: ButtonElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("RadioGroup"),
       props: RadioGroupElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("CheckboxGroup"),
       props: CheckboxGroupElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("DatePicker"),
       props: DatePickerElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Carousel"),
       props: CarouselElementPropsSchema,
       children: z.array(UIElementSchema),
@@ -235,6 +269,7 @@ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("ZStack"),
       props: ZStackElementPropsSchema,
       children: z.array(UIElementSchema),
@@ -242,6 +277,7 @@ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("SafeAreaView"),
       props: SafeAreaViewElementPropsSchema,
       children: z.array(UIElementSchema),