@lotics/ui 27.15.2 → 27.15.3

package/docs/catalog.md

@@ -615,9 +615,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`dots_indicator`** — `DotsIndicator`: three looping bouncing dots (`size`/`color`); the
   indeterminate "working/typing" pulse `Loading` composes; use bare beside a caption while
   an agent thinks. Determinate work → `ProgressBar`.
-- **`animation_fade_in`** — `AnimationFadeIn`: the mount transition — children fade (+
-  optional `translateY` rise) into place on first render, once; the entrance polish
-  Accordion/Timeline/Stepper/AgentRun rows use.
+- **`animation_fade_in`** — `AnimationFadeIn`: the mount transition — children fade into
+  place on first render, once; the entrance polish Accordion/Timeline/Stepper/AgentRun
+  rows use. `translateY` adds the rise that reads as settling into place; `translateX`
+  the horizontal travel of a panel arriving from an edge (negative = from the left).
 
 ### Pickers & selection controls
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "27.15.2",
+  "version": "27.15.3",
   "type": "module",
   "exports": {
     "./vite": {

package/src/animation_fade_in.tsx

@@ -7,10 +7,14 @@ interface AnimationFadeInProps {
   /** Rise this many px while fading in — the "appearing into place" gesture.
    *  Default 0 (fade only). */
   translateY?: number;
+  /** Travel this many px horizontally while fading in — negative enters from the
+   *  left, positive from the right. The gesture for a panel arriving from an
+   *  edge rather than settling into place. Default 0. */
+  translateX?: number;
 }
 
 export function AnimationFadeIn(props: AnimationFadeInProps) {
-  const { children, style, translateY = 0 } = props;
+  const { children, style, translateY = 0, translateX = 0 } = props;
   const progress = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -21,9 +25,18 @@ export function AnimationFadeIn(props: AnimationFadeInProps) {
     }).start();
   }, [progress]);
 
-  const transform = translateY
-    ? [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [translateY, 0] }) }]
-    : undefined;
+  const offset = (from: number) =>
+    progress.interpolate({ inputRange: [0, 1], outputRange: [from, 0] });
+  const transform = [
+    ...(translateX ? [{ translateX: offset(translateX) }] : []),
+    ...(translateY ? [{ translateY: offset(translateY) }] : []),
+  ];
 
-  return <Animated.View style={[{ opacity: progress, transform }, style]}>{children}</Animated.View>;
+  return (
+    <Animated.View
+      style={[{ opacity: progress, transform: transform.length ? transform : undefined }, style]}
+    >
+      {children}
+    </Animated.View>
+  );
 }