@rocapine/react-native-onboarding-ui 1.30.0 → 1.32.0

package/dist/UI/Pages/ComposableScreen/elements/renderElement.js

@@ -22,70 +22,84 @@ const SafeAreaViewElement_1 = require("./SafeAreaViewElement");
 const ScrollViewElement_1 = require("./ScrollViewElement");
 const KeyboardAvoidingViewElement_1 = require("./KeyboardAvoidingViewElement");
 const ProgressIndicatorElement_1 = require("./ProgressIndicatorElement");
+const AnimatedBox_1 = require("./AnimatedBox");
 const renderElement = (element, ctx, parentType) => {
     if (element.renderWhen) {
         const flatVars = Object.fromEntries(Object.entries(ctx.variables).map(([k, v]) => [k, v === null || v === void 0 ? void 0 : v.value]));
         if (!(0, react_native_onboarding_1.evaluateCondition)(element.renderWhen, flatVars))
             return null;
     }
-    if (element.type === "YStack" || element.type === "XStack") {
-        return (0, jsx_runtime_1.jsx)(StackElement_1.StackElementComponent, { element: element, ctx: ctx, parentType: parentType }, element.id);
-    }
-    if (element.type === "Text") {
-        return (0, jsx_runtime_1.jsx)(TextElement_1.TextElementComponent, { element: element, ctx: ctx, parentType: parentType }, element.id);
-    }
-    if (element.type === "Image") {
-        return (0, jsx_runtime_1.jsx)(ImageElement_1.ImageElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "Lottie") {
-        return (0, jsx_runtime_1.jsx)(LottieElement_1.LottieElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "Rive") {
-        return (0, jsx_runtime_1.jsx)(RiveElement_1.RiveElementRenderer, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "Icon") {
-        return (0, jsx_runtime_1.jsx)(IconElement_1.IconElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "Video") {
-        return (0, jsx_runtime_1.jsx)(VideoElement_1.VideoElementRenderer, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "Input") {
-        return (0, jsx_runtime_1.jsx)(InputElement_1.InputElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "RadioGroup") {
-        return (0, jsx_runtime_1.jsx)(RadioGroupElement_1.RadioGroupComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "CheckboxGroup") {
-        return (0, jsx_runtime_1.jsx)(CheckboxGroupElement_1.CheckboxGroupComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "Button") {
-        return (0, jsx_runtime_1.jsx)(ButtonElement_1.ButtonElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "DatePicker") {
-        return (0, jsx_runtime_1.jsx)(DatePickerElement_1.DatePickerElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "WheelPicker") {
-        return (0, jsx_runtime_1.jsx)(WheelPickerElement_1.WheelPickerElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "Carousel") {
-        return (0, jsx_runtime_1.jsx)(CarouselElement_1.CarouselElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "ZStack") {
-        return (0, jsx_runtime_1.jsx)(ZStackElement_1.ZStackElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "SafeAreaView") {
-        return (0, jsx_runtime_1.jsx)(SafeAreaViewElement_1.SafeAreaViewElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "ScrollView") {
-        return (0, jsx_runtime_1.jsx)(ScrollViewElement_1.ScrollViewElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "KeyboardAvoidingView") {
-        return (0, jsx_runtime_1.jsx)(KeyboardAvoidingViewElement_1.KeyboardAvoidingViewElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    if (element.type === "ProgressIndicator") {
-        return (0, jsx_runtime_1.jsx)(ProgressIndicatorElement_1.ProgressIndicatorElementComponent, { element: element, ctx: ctx }, element.id);
-    }
-    return null;
+    // Dispatch to the concrete element renderer. Captured into `node` so a single
+    // AnimatedBox wrapper can apply animation/transform to any of the 15 types.
+    const node = (() => {
+        if (element.type === "YStack" || element.type === "XStack") {
+            return (0, jsx_runtime_1.jsx)(StackElement_1.StackElementComponent, { element: element, ctx: ctx, parentType: parentType }, element.id);
+        }
+        if (element.type === "Text") {
+            return (0, jsx_runtime_1.jsx)(TextElement_1.TextElementComponent, { element: element, ctx: ctx, parentType: parentType }, element.id);
+        }
+        if (element.type === "Image") {
+            return (0, jsx_runtime_1.jsx)(ImageElement_1.ImageElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "Lottie") {
+            return (0, jsx_runtime_1.jsx)(LottieElement_1.LottieElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "Rive") {
+            return (0, jsx_runtime_1.jsx)(RiveElement_1.RiveElementRenderer, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "Icon") {
+            return (0, jsx_runtime_1.jsx)(IconElement_1.IconElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "Video") {
+            return (0, jsx_runtime_1.jsx)(VideoElement_1.VideoElementRenderer, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "Input") {
+            return (0, jsx_runtime_1.jsx)(InputElement_1.InputElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "RadioGroup") {
+            return (0, jsx_runtime_1.jsx)(RadioGroupElement_1.RadioGroupComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "CheckboxGroup") {
+            return (0, jsx_runtime_1.jsx)(CheckboxGroupElement_1.CheckboxGroupComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "Button") {
+            return (0, jsx_runtime_1.jsx)(ButtonElement_1.ButtonElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "DatePicker") {
+            return (0, jsx_runtime_1.jsx)(DatePickerElement_1.DatePickerElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "WheelPicker") {
+            return (0, jsx_runtime_1.jsx)(WheelPickerElement_1.WheelPickerElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "Carousel") {
+            return (0, jsx_runtime_1.jsx)(CarouselElement_1.CarouselElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "ZStack") {
+            return (0, jsx_runtime_1.jsx)(ZStackElement_1.ZStackElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "SafeAreaView") {
+            return (0, jsx_runtime_1.jsx)(SafeAreaViewElement_1.SafeAreaViewElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "ScrollView") {
+            return (0, jsx_runtime_1.jsx)(ScrollViewElement_1.ScrollViewElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "KeyboardAvoidingView") {
+            return (0, jsx_runtime_1.jsx)(KeyboardAvoidingViewElement_1.KeyboardAvoidingViewElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        if (element.type === "ProgressIndicator") {
+            return (0, jsx_runtime_1.jsx)(ProgressIndicatorElement_1.ProgressIndicatorElementComponent, { element: element, ctx: ctx }, element.id);
+        }
+        return null;
+    })();
+    // Wrap only when motion is requested — zero overhead (no extra view) otherwise.
+    // Cast to BaseBoxProps: not every element's props type extends it (e.g.
+    // WheelPicker), but the animation/transform/flex/alignSelf fields are all
+    // optional BaseBoxProps members and simply read as undefined when absent.
+    const p = element.props;
+    if (node !== null && (p.animation || p.transform)) {
+        return ((0, jsx_runtime_1.jsx)(AnimatedBox_1.AnimatedBox, { animation: p.animation, transform: p.transform, flex: p.flex, alignSelf: p.alignSelf, children: node }, element.id));
+    }
+    return node;
 };
 exports.renderElement = renderElement;
 //# sourceMappingURL=renderElement.js.map

package/dist/UI/Pages/ComposableScreen/elements/renderElement.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.30.0",
+  "version": "1.32.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/Pages/ComposableScreen/elements/AnimatedBox.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useMemo } from "react";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  withDelay,
+  cancelAnimation,
+  interpolate,
+} from "react-native-reanimated";
+import type { ElementAnimation, ElementTransform } from "@rocapine/react-native-onboarding";
+import { buildEntering, buildExiting, buildLayout, EASING_MAP } from "./buildAnimation";
+
+type Props = {
+  animation?: ElementAnimation;
+  transform?: ElementTransform;
+  // Layout props forwarded from the child so the extra wrapper stays
+  // layout-transparent (a trapped `flex`/`alignSelf` would otherwise break
+  // the child's relationship to its parent).
+  flex?: number;
+  alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+  children: React.ReactNode;
+};
+
+// Build the static transform array (RN expects `[{translateX}, {scale}, ...]`).
+// Typed `any[]`: RN's transform element is a strict per-key union that a
+// programmatically-built array can't satisfy structurally, and the array is
+// composed with animated entries inside the worklet below.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const buildStaticTransform = (t?: ElementTransform): any[] => {
+  if (!t) return [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const arr: any[] = [];
+  if (t.translateX != null) arr.push({ translateX: t.translateX });
+  if (t.translateY != null) arr.push({ translateY: t.translateY });
+  if (t.scale != null) arr.push({ scale: t.scale });
+  if (t.scaleX != null) arr.push({ scaleX: t.scaleX });
+  if (t.scaleY != null) arr.push({ scaleY: t.scaleY });
+  if (t.rotate != null) arr.push({ rotate: `${t.rotate}deg` });
+  return arr;
+};
+
+/**
+ * Wraps a rendered UIElement in an `Animated.View` that owns its
+ * entering/exiting/layout transitions (reanimated builders) and a continuous
+ * `effect` (imperative `withRepeat`), plus any static `transform`.
+ *
+ * Injected by `renderElement` only when `animation` or `transform` is present.
+ * All reanimated hooks are called unconditionally (rules of hooks) — the
+ * effect-vs-no-effect branch lives inside the effect/worklet body.
+ */
+export const AnimatedBox = ({
+  animation,
+  transform,
+  flex,
+  alignSelf,
+  children,
+}: Props): React.ReactElement => {
+  const entering = buildEntering(animation?.entering);
+  const exiting = buildExiting(animation?.exiting);
+  const layout = buildLayout(animation?.layout);
+
+  const effect = animation?.effect;
+  const staticTransform = useMemo(() => buildStaticTransform(transform), [transform]);
+
+  // Continuous-effect driver (0 -> 1). Created unconditionally.
+  const driver = useSharedValue(0);
+
+  useEffect(() => {
+    if (!effect) {
+      cancelAnimation(driver);
+      driver.value = 0;
+      return;
+    }
+    driver.value = 0;
+    // rotate spins one direction; the rest breathe back and forth.
+    const reverse = effect.preset !== "rotate";
+    const half = withTiming(1, {
+      duration: effect.duration ?? 1000,
+      easing: EASING_MAP[effect.easing ?? "ease-in-out"],
+    });
+    const repeated = withRepeat(half, effect.loop === false ? 1 : -1, reverse);
+    driver.value = effect.delay ? withDelay(effect.delay, repeated) : repeated;
+    return () => cancelAnimation(driver);
+  }, [effect, driver]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    if (!effect) return { transform: staticTransform };
+    switch (effect.preset) {
+      case "pulse":
+        return {
+          transform: [
+            ...staticTransform,
+            { scale: interpolate(driver.value, [0, 1], [effect.minScale ?? 0.95, effect.maxScale ?? 1.05]) },
+          ],
+        };
+      case "fade":
+        return {
+          transform: staticTransform,
+          opacity: interpolate(driver.value, [0, 1], [effect.minOpacity ?? 0.4, 1]),
+        };
+      case "rotate":
+        return {
+          transform: [
+            ...staticTransform,
+            { rotate: `${interpolate(driver.value, [0, 1], [0, effect.degrees ?? 360])}deg` },
+          ],
+        };
+      case "bounce":
+        return {
+          transform: [...staticTransform, { translateY: interpolate(driver.value, [0, 1], [0, -10]) }],
+        };
+      case "shimmer":
+        return {
+          transform: staticTransform,
+          opacity: interpolate(driver.value, [0, 1], [0.5, 1]),
+        };
+      default:
+        return { transform: staticTransform };
+    }
+  }, [effect, staticTransform]);
+
+  return (
+    <Animated.View
+      entering={entering}
+      exiting={exiting}
+      layout={layout}
+      style={[{ flex, alignSelf }, animatedStyle]}
+    >
+      {children}
+    </Animated.View>
+  );
+};

package/src/UI/Pages/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/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.tsx

@@ -10,13 +10,13 @@ import Animated, {
   withRepeat,
   withDelay,
   runOnJS,
-  Easing,
   cancelAnimation,
 } from "react-native-reanimated";
 import Svg, { Circle } from "react-native-svg";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, dim } from "./shared";
+import { EASING_MAP } from "./buildAnimation";
 
 export type ProgressEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
 
@@ -60,14 +60,6 @@ export const ProgressIndicatorElementPropsSchema = BaseBoxPropsSchema.extend({
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
-// CSS-style cubic-bezier curves matching the selectable easing names.
-const EASING_MAP: Record<ProgressEasing, ReturnType<typeof Easing.bezier> | typeof Easing.linear> = {
-  linear: Easing.linear,
-  "ease-in": Easing.bezier(0.42, 0, 1, 1),
-  "ease-out": Easing.bezier(0, 0, 0.58, 1),
-  "ease-in-out": Easing.bezier(0.42, 0, 0.58, 1),
-};
-
 const clamp = (n: number): number => Math.max(0, Math.min(100, n));
 
 type ProgressUIElement = Extract<UIElement, { type: "ProgressIndicator" }>;