@rocapine/react-native-onboarding 1.31.0 → 1.33.0

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

@@ -50,6 +50,213 @@ export const ShadowOffsetSchema = z.object({
   height: z.number(),
 });
 
+// ---------------------------------------------------------------------------
+// Animation / Transform surface
+//
+// Schema stays intentionally close to react-native-reanimated: `preset` values
+// are the *exact* reanimated builder names (e.g. `FadeInDown`, `SlideOutLeft`,
+// `LinearTransition`), so the UI renderer resolves them by direct namespace
+// lookup (`Reanimated[preset]`) rather than a translation table. Modifier fields
+// (`duration`/`delay`/`spring`/`easing`) map to reanimated builder methods
+// (`.duration().delay().springify().easing()`).
+// ---------------------------------------------------------------------------
+
+// Reuses the easing-name convention from ProgressIndicatorElement.
+export type AnimationEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
+
+const AnimationEasingSchema = z.enum(["linear", "ease-in", "ease-out", "ease-in-out"]);
+
+// Mirrors reanimated's `.springify(config)` — only the fields it accepts.
+// When `spring` is present it wins over `easing` (matches reanimated semantics).
+export type SpringConfig = {
+  damping?: number;
+  stiffness?: number;
+  mass?: number;
+};
+
+const SpringConfigSchema = z.object({
+  damping: z.number().positive().optional(),
+  stiffness: z.number().positive().optional(),
+  mass: z.number().positive().optional(),
+});
+
+// Exact reanimated entering builder names.
+export type EnteringPreset =
+  | "FadeIn" | "FadeInUp" | "FadeInDown" | "FadeInLeft" | "FadeInRight"
+  | "SlideInUp" | "SlideInDown" | "SlideInLeft" | "SlideInRight"
+  | "ZoomIn" | "ZoomInRotate" | "ZoomInUp" | "ZoomInDown" | "ZoomInLeft" | "ZoomInRight"
+  | "ZoomInEasyUp" | "ZoomInEasyDown"
+  | "BounceIn" | "BounceInUp" | "BounceInDown" | "BounceInLeft" | "BounceInRight"
+  | "FlipInXUp" | "FlipInYLeft" | "FlipInXDown" | "FlipInYRight" | "FlipInEasyX" | "FlipInEasyY"
+  | "StretchInX" | "StretchInY"
+  | "RotateInDownLeft" | "RotateInDownRight" | "RotateInUpLeft" | "RotateInUpRight"
+  | "RollInLeft" | "RollInRight"
+  | "PinwheelIn"
+  | "LightSpeedInLeft" | "LightSpeedInRight";
+
+const EnteringPresetSchema = z.enum([
+  "FadeIn", "FadeInUp", "FadeInDown", "FadeInLeft", "FadeInRight",
+  "SlideInUp", "SlideInDown", "SlideInLeft", "SlideInRight",
+  "ZoomIn", "ZoomInRotate", "ZoomInUp", "ZoomInDown", "ZoomInLeft", "ZoomInRight",
+  "ZoomInEasyUp", "ZoomInEasyDown",
+  "BounceIn", "BounceInUp", "BounceInDown", "BounceInLeft", "BounceInRight",
+  "FlipInXUp", "FlipInYLeft", "FlipInXDown", "FlipInYRight", "FlipInEasyX", "FlipInEasyY",
+  "StretchInX", "StretchInY",
+  "RotateInDownLeft", "RotateInDownRight", "RotateInUpLeft", "RotateInUpRight",
+  "RollInLeft", "RollInRight",
+  "PinwheelIn",
+  "LightSpeedInLeft", "LightSpeedInRight",
+]);
+
+// Exact reanimated exiting builder names.
+export type ExitingPreset =
+  | "FadeOut" | "FadeOutUp" | "FadeOutDown" | "FadeOutLeft" | "FadeOutRight"
+  | "SlideOutUp" | "SlideOutDown" | "SlideOutLeft" | "SlideOutRight"
+  | "ZoomOut" | "ZoomOutRotate" | "ZoomOutUp" | "ZoomOutDown" | "ZoomOutLeft" | "ZoomOutRight"
+  | "ZoomOutEasyUp" | "ZoomOutEasyDown"
+  | "BounceOut" | "BounceOutUp" | "BounceOutDown" | "BounceOutLeft" | "BounceOutRight"
+  | "FlipOutXUp" | "FlipOutYLeft" | "FlipOutXDown" | "FlipOutYRight" | "FlipOutEasyX" | "FlipOutEasyY"
+  | "StretchOutX" | "StretchOutY"
+  | "RotateOutDownLeft" | "RotateOutDownRight" | "RotateOutUpLeft" | "RotateOutUpRight"
+  | "RollOutLeft" | "RollOutRight"
+  | "PinwheelOut"
+  | "LightSpeedOutLeft" | "LightSpeedOutRight";
+
+const ExitingPresetSchema = z.enum([
+  "FadeOut", "FadeOutUp", "FadeOutDown", "FadeOutLeft", "FadeOutRight",
+  "SlideOutUp", "SlideOutDown", "SlideOutLeft", "SlideOutRight",
+  "ZoomOut", "ZoomOutRotate", "ZoomOutUp", "ZoomOutDown", "ZoomOutLeft", "ZoomOutRight",
+  "ZoomOutEasyUp", "ZoomOutEasyDown",
+  "BounceOut", "BounceOutUp", "BounceOutDown", "BounceOutLeft", "BounceOutRight",
+  "FlipOutXUp", "FlipOutYLeft", "FlipOutXDown", "FlipOutYRight", "FlipOutEasyX", "FlipOutEasyY",
+  "StretchOutX", "StretchOutY",
+  "RotateOutDownLeft", "RotateOutDownRight", "RotateOutUpLeft", "RotateOutUpRight",
+  "RollOutLeft", "RollOutRight",
+  "PinwheelOut",
+  "LightSpeedOutLeft", "LightSpeedOutRight",
+]);
+
+// Exact reanimated layout-transition builder names.
+export type LayoutPreset =
+  | "LinearTransition" | "FadingTransition" | "SequencedTransition"
+  | "JumpingTransition" | "CurvedTransition" | "EntryExitTransition";
+
+const LayoutPresetSchema = z.enum([
+  "LinearTransition", "FadingTransition", "SequencedTransition",
+  "JumpingTransition", "CurvedTransition", "EntryExitTransition",
+]);
+
+export type EnteringAnimation = {
+  preset: EnteringPreset;
+  duration?: number;
+  delay?: number;
+  easing?: AnimationEasing;
+  spring?: SpringConfig;
+};
+
+const EnteringAnimationSchema = z.object({
+  preset: EnteringPresetSchema,
+  duration: z.number().min(0).optional(),
+  delay: z.number().min(0).optional(),
+  easing: AnimationEasingSchema.optional(),
+  spring: SpringConfigSchema.optional(),
+});
+
+export type ExitingAnimation = {
+  preset: ExitingPreset;
+  duration?: number;
+  delay?: number;
+  easing?: AnimationEasing;
+  spring?: SpringConfig;
+};
+
+const ExitingAnimationSchema = z.object({
+  preset: ExitingPresetSchema,
+  duration: z.number().min(0).optional(),
+  delay: z.number().min(0).optional(),
+  easing: AnimationEasingSchema.optional(),
+  spring: SpringConfigSchema.optional(),
+});
+
+export type LayoutAnimation = {
+  preset: LayoutPreset;
+  duration?: number;
+  spring?: SpringConfig;
+};
+
+const LayoutAnimationSchema = z.object({
+  preset: LayoutPresetSchema,
+  duration: z.number().min(0).optional(),
+  spring: SpringConfigSchema.optional(),
+});
+
+// Continuous looping effects — the one piece not named after a reanimated
+// builder. Rendered imperatively with `withRepeat` over `withTiming`.
+export type EffectPreset = "pulse" | "fade" | "rotate" | "shimmer" | "bounce";
+
+const EffectPresetSchema = z.enum(["pulse", "fade", "rotate", "shimmer", "bounce"]);
+
+export type ElementEffect = {
+  preset: EffectPreset;
+  duration?: number;
+  delay?: number;
+  easing?: AnimationEasing;
+  loop?: boolean;
+  /** pulse: scale bounds (default 0.95 / 1.05). */
+  minScale?: number;
+  maxScale?: number;
+  /** fade: lower opacity bound (default 0.4). */
+  minOpacity?: number;
+  /** rotate: sweep in degrees (default 360). */
+  degrees?: number;
+};
+
+const EffectSchema = z.object({
+  preset: EffectPresetSchema,
+  duration: z.number().min(0).optional(),
+  delay: z.number().min(0).optional(),
+  easing: AnimationEasingSchema.optional(),
+  loop: z.boolean().optional(),
+  minScale: z.number().positive().optional(),
+  maxScale: z.number().positive().optional(),
+  minOpacity: z.number().min(0).max(1).optional(),
+  degrees: z.number().optional(),
+});
+
+export type ElementAnimation = {
+  entering?: EnteringAnimation;
+  exiting?: ExitingAnimation;
+  layout?: LayoutAnimation;
+  effect?: ElementEffect;
+};
+
+const ElementAnimationSchema = z.object({
+  entering: EnteringAnimationSchema.optional(),
+  exiting: ExitingAnimationSchema.optional(),
+  layout: LayoutAnimationSchema.optional(),
+  effect: EffectSchema.optional(),
+});
+
+// Static transform surface — also what `effect` animates at runtime.
+export type ElementTransform = {
+  translateX?: number;
+  translateY?: number;
+  scale?: number;
+  scaleX?: number;
+  scaleY?: number;
+  /** degrees */
+  rotate?: number;
+};
+
+const TransformSchema = z.object({
+  translateX: z.number().optional(),
+  translateY: z.number().optional(),
+  scale: z.number().optional(),
+  scaleX: z.number().optional(),
+  scaleY: z.number().optional(),
+  rotate: z.number().optional(),
+});
+
 export type BaseBoxProps = {
   width?: number | string;
   height?: number | string;
@@ -80,6 +287,8 @@ export type BaseBoxProps = {
   shadowOpacity?: number;
   shadowRadius?: number;
   elevation?: number;
+  transform?: ElementTransform;
+  animation?: ElementAnimation;
 };
 
 export const BaseBoxPropsSchema = z.object({
@@ -112,4 +321,6 @@ export const BaseBoxPropsSchema = z.object({
   shadowOpacity: z.number().min(0).max(1).optional(),
   shadowRadius: z.number().min(0).optional(),
   elevation: z.number().min(0).optional(),
+  transform: TransformSchema.optional(),
+  animation: ElementAnimationSchema.optional(),
 });

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

@@ -0,0 +1,55 @@
+import { z } from "zod";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+
+/**
+ * Multi-element container that lays out child `Text` elements as a **wrapping
+ * flex row** — each child is a full `Text` UIElement that wraps to the next line
+ * as a whole unit (word or styled "chip"). Unlike inline `TextSpan`s (the `Text`
+ * element's `content[]`, which are nested `<Text>` and so cannot carry box
+ * styling), each `RichText` child is a real flex child, so it honors its own box
+ * props — `padding`, `borderRadius`, `borderWidth`, `backgroundColor`, `margin`,
+ * `transform` (e.g. rotated pills), `renderWhen`, and `expression` mode.
+ *
+ * The text-style fields below (`fontSize`, `color`, …) act as **inherited
+ * defaults**: every child `Text` uses them for any matching prop it omits, so a
+ * title's base typography is declared once on the container and only the
+ * highlighted "chip" children override (color, background, weight). Children
+ * always win over the inherited default.
+ *
+ * Use this to compose mixed runs of plain words and padded/rounded chips that
+ * wrap and align together (e.g. a marketing title with highlighted pills). For
+ * pure character-level inline flow with text-only styling, use `Text.content`
+ * spans instead.
+ */
+export type RichTextElementProps = BaseBoxProps & {
+  // Layout (wrapping row)
+  gap?: number;
+  alignItems?: "flex-start" | "center" | "flex-end" | "baseline" | "stretch";
+  justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+  /** Defaults to `"wrap"` — the whole point of RichText is multi-line wrapping. */
+  flexWrap?: "wrap" | "nowrap";
+  // Inherited text-style defaults for children
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string | "inherit";
+  fontStyle?: "normal" | "italic";
+  color?: string;
+  textAlign?: "left" | "center" | "right";
+  letterSpacing?: number;
+  lineHeight?: number;
+};
+
+export const RichTextElementPropsSchema = BaseBoxPropsSchema.extend({
+  gap: z.number().optional(),
+  alignItems: z.enum(["flex-start", "center", "flex-end", "baseline", "stretch"]).optional(),
+  justifyContent: z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
+  flexWrap: z.enum(["wrap", "nowrap"]).optional(),
+  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(),
+  lineHeight: z.number().optional(),
+});

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

@@ -18,12 +18,20 @@ export type TextSpan = {
   fontFamily?: string | "inherit";
   fontSize?: number;
   letterSpacing?: number;
+  lineHeight?: number;
   color?: string;
+  /** Inline highlight behind the span text. */
+  backgroundColor?: string;
+  /** Per-span opacity (0–1). */
+  opacity?: number;
+  textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
   textDecorationLine?:
     | "none"
     | "underline"
     | "line-through"
     | "underline line-through";
+  textDecorationColor?: string;
+  textDecorationStyle?: "solid" | "double" | "dotted" | "dashed";
 };
 
 export const TextSpanSchema = z.object({
@@ -33,10 +41,16 @@ export const TextSpanSchema = z.object({
   fontFamily: z.string().optional(),
   fontSize: z.number().optional(),
   letterSpacing: z.number().optional(),
+  lineHeight: z.number().optional(),
   color: z.string().optional(),
+  backgroundColor: z.string().optional(),
+  opacity: z.number().min(0).max(1).optional(),
+  textTransform: z.enum(["none", "uppercase", "lowercase", "capitalize"]).optional(),
   textDecorationLine: z
     .enum(["none", "underline", "line-through", "underline line-through"])
     .optional(),
+  textDecorationColor: z.string().optional(),
+  textDecorationStyle: z.enum(["solid", "double", "dotted", "dashed"]).optional(),
 });
 
 export type TextElementProps = BaseBoxProps & {

package/src/steps/ComposableScreen/types.ts

@@ -8,6 +8,7 @@ import {
 } from "../common.types";
 import { type StackElementProps, StackElementPropsSchema } from "./elements/StackElement";
 import { type TextElementProps, TextElementPropsSchema } from "./elements/TextElement";
+import { type RichTextElementProps, RichTextElementPropsSchema } from "./elements/RichTextElement";
 import { type ImageElementProps, ImageElementPropsSchema } from "./elements/ImageElement";
 import { type LottieElementProps, LottieElementPropsSchema } from "./elements/LottieElement";
 import { type RiveElementProps, RiveElementPropsSchema } from "./elements/RiveElement";
@@ -30,10 +31,25 @@ import {
 import { type ProgressIndicatorElementProps, ProgressIndicatorElementPropsSchema } from "./elements/ProgressIndicatorElement";
 
 export type { BaseBoxProps, GradientBackground, GradientEdge, GradientStop, LinearGradientConfig } from "./elements/BaseBoxProps";
+export type {
+  AnimationEasing,
+  SpringConfig,
+  EnteringPreset,
+  ExitingPreset,
+  LayoutPreset,
+  EffectPreset,
+  EnteringAnimation,
+  ExitingAnimation,
+  LayoutAnimation,
+  ElementEffect,
+  ElementAnimation,
+  ElementTransform,
+} from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema, GradientBackgroundSchema } from "./elements/BaseBoxProps";
 export type { StackElementProps } from "./elements/StackElement";
 export type { TextElementProps, TextSpan } from "./elements/TextElement";
 export { TextSpanSchema } from "./elements/TextElement";
+export type { RichTextElementProps } from "./elements/RichTextElement";
 export type { ImageElementProps } from "./elements/ImageElement";
 export type { LottieElementProps } from "./elements/LottieElement";
 export type { RiveElementProps } from "./elements/RiveElement";
@@ -92,6 +108,14 @@ type UIElement =
       type: "Text";
       props: TextElementProps;
     }
+  | {
+      id: string;
+      name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
+      type: "RichText";
+      props: RichTextElementProps;
+      children: Array<Extract<UIElement, { type: "Text" }>>;
+    }
   | {
       id: string;
       name?: string;
@@ -217,6 +241,17 @@ type UIElement =
       props: ProgressIndicatorElementProps;
     };
 
+// The `Text` variant, extracted so `RichText` can restrict its children to
+// Text-only (children: z.array(TextUIElementSchema)) while the union references
+// the same object.
+const TextUIElementSchema = z.object({
+  id: z.string(),
+  name: z.string().optional(),
+  renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
+  type: z.literal("Text"),
+  props: TextElementPropsSchema,
+});
+
 const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
   z.union([
     z.object({
@@ -227,12 +262,14 @@ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       props: StackElementPropsSchema,
       children: z.array(UIElementSchema),
     }),
+    TextUIElementSchema,
     z.object({
       id: z.string(),
       name: z.string().optional(),
       renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
-      type: z.literal("Text"),
-      props: TextElementPropsSchema,
+      type: z.literal("RichText"),
+      props: RichTextElementPropsSchema,
+      children: z.array(TextUIElementSchema),
     }),
     z.object({
       id: z.string(),