orn-ui 0.2.9 → 0.3.0

package/src/atoms/Skeleton.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useEffect, useRef, type ComponentProps } from 'react';
 import {
   Animated,
   Easing,
@@ -9,15 +9,19 @@ import {
 } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useTheme } from '../theme/UIProvider';
+import { useReduceMotion } from './Transition';
+
+/** Half a pulse cycle (opaque → faint). A loading loop, not a transition: it doesn't come from `duration`. */
+const PULSE_HALF_MS = 700;
 
 export type SkeletonVariant = 'rect' | 'text' | 'circle';
 
 export interface SkeletonProps {
-  /** @default '100%' ('circle' also uses this as the diameter) */
+  /** Width of the placeholder. @default '100%' ('circle' also uses this as the diameter) */
   width?: DimensionValue;
-  /** @default 16 ('text' uses the line height; 'circle', the width) */
+  /** Height of the placeholder. @default 16 ('text' uses Body's line height; 'circle', the width) */
   height?: DimensionValue;
-  /** @default 'rect' */
+  /** Shape: a block, a line of text or a circle. @default 'rect' */
   variant?: SkeletonVariant;
   /** Override of the theme's radius. */
   radius?: number;
@@ -25,7 +29,7 @@ export interface SkeletonProps {
   lines?: number;
   /** Width of the last line, so the paragraph doesn't end as a solid block. @default '60%' */
   lastLineWidth?: DimensionValue;
-  /** @default true */
+  /** Pulses while waiting. Off when the system's Reduce Motion is on. @default true */
   animated?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;
@@ -33,14 +37,24 @@ export interface SkeletonProps {
 
 const useStyles = createStyles((theme) => ({
   block: { backgroundColor: theme.colors.skeleton },
-  lines: { gap: theme.tokens.spacing.sm },
+  // Each line takes exactly `lineHeight.md` (Body's): a `fontSize.md` bar
+  // plus half the leading above and below. That way the fake paragraph
+  // measures the same as the real one and nothing jumps when the content arrives.
+  textLine: {
+    marginVertical: (theme.tokens.lineHeight.md - theme.tokens.fontSize.md) / 2,
+  },
 }));
 
 /**
  * Skeleton
- * Placeholder que late mientras llega el contenido real. Reserva el espacio
- * exacto de lo que reemplaza, así la pantalla no salta cuando aparecen los
- * datos — que es justamente lo que un Spinner centrado no puede hacer.
+ * Placeholder that pulses while the real content arrives. It reserves the
+ * exact space of what it replaces, so the screen doesn't jump when the data
+ * shows up — which is precisely what a centered Spinner can't do.
+ *
+ * Gestalt, similarity: the silhouette repeats the shape and size of the
+ * content (a circle for avatars, Body-height lines for text), so the eye
+ * already groups the screen before the data arrives. Respects Reduce Motion:
+ * no pulse, a static block.
  */
 export const Skeleton = memo(
   ({
@@ -56,39 +70,45 @@ export const Skeleton = memo(
   }: SkeletonProps) => {
     const theme = useTheme();
     const styles = useStyles();
+    const reduceMotion = useReduceMotion();
+    const pulsing = animated && !reduceMotion;
     const pulse = useRef(new Animated.Value(0)).current;
 
     useEffect(() => {
-      if (!animated) return;
+      if (!pulsing) return;
       const loop = Animated.loop(
         Animated.sequence([
           Animated.timing(pulse, {
             toValue: 1,
-            duration: 700,
+            duration: PULSE_HALF_MS,
             useNativeDriver: true,
             easing: Easing.inOut(Easing.quad),
           }),
           Animated.timing(pulse, {
             toValue: 0,
-            duration: 700,
+            duration: PULSE_HALF_MS,
             useNativeDriver: true,
             easing: Easing.inOut(Easing.quad),
           }),
         ])
       );
       loop.start();
-      return () => loop.stop();
-    }, [animated, pulse]);
+      return () => {
+        loop.stop();
+        pulse.setValue(0);
+      };
+    }, [pulsing, pulse]);
 
     const isCircle = variant === 'circle';
     const isText = variant === 'text';
-    const opacity = animated ? pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 0.4] }) : 1;
+    const opacity = pulsing ? pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 0.4] }) : 1;
     const resolvedHeight = isCircle ? width : isText ? theme.tokens.fontSize.md : height;
     const resolvedRadius =
       radius ?? (isCircle ? theme.tokens.radius.full : isText ? theme.tokens.radius.xs : theme.tokens.radius.sm);
 
-    const barStyle = (barWidth: DimensionValue): StyleProp<ViewStyle> => [
+    const barStyle = (barWidth: DimensionValue): ComponentProps<typeof Animated.View>['style'] => [
       styles.block,
+      isText && styles.textLine,
       { width: barWidth, height: resolvedHeight, borderRadius: resolvedRadius, opacity },
     ];
 
@@ -96,7 +116,7 @@ export const Skeleton = memo(
 
     if (isText && lines > 1) {
       return (
-        <View style={[styles.lines, style]} testID={testID} {...a11y}>
+        <View style={style} testID={testID} {...a11y}>
           {Array.from({ length: lines }, (_, i) => (
             <Animated.View
               key={i}

package/src/atoms/Spinner.tsx

@@ -1,13 +1,16 @@
 import React, { memo, useEffect, useRef } from 'react';
 import { ActivityIndicator, Animated, Easing, Text, View } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
 
 export type SpinnerVariant = 'native' | 'dots' | 'ring';
 
 export interface SpinnerProps {
+  /** Indicator size; also scales the `dots` and `ring` variants. @default 'large' */
   size?: 'small' | 'large';
+  /** Indicator color. @default colors.primary */
   color?: string;
+  /** Message under the indicator. Also what screen readers announce. */
   text?: string;
   /** @default true. When false, doesn't take up flex:1 (useful inline, inside a button/row). */
   fullscreen?: boolean;
@@ -19,16 +22,30 @@ export interface SpinnerProps {
   variant?: SpinnerVariant;
   /** Fully custom indicator. Takes precedence over `variant`. */
   indicator?: React.ReactNode;
+  /**
+   * Shown above the indicator — typically the app logo on a splash or
+   * first-load screen (an `<Image>`, an `<Avatar>`, any node).
+   */
+  logo?: React.ReactNode;
+  /** What screen readers announce. @default text ?? labels.loading */
+  accessibilityLabel?: string;
   testID?: string;
 }
 
+// Rhythm of the looping indicators. They are not UI transitions (those use
+// theme.tokens.duration): they are the pulse of a continuous animation.
+const DOT_PULSE_MS = 320;
+const DOT_STAGGER_MS = 140;
+const RING_TURN_MS = 900;
+
 const useStyles = createStyles((theme) => ({
   container: { justifyContent: 'center', alignItems: 'center', padding: theme.tokens.spacing.xl },
   text: { marginTop: theme.tokens.spacing.md, color: theme.colors.textLight, fontSize: theme.tokens.fontSize.md },
+  logo: { marginBottom: theme.tokens.spacing.xl },
   dots: { flexDirection: 'row', gap: theme.tokens.spacing.sm },
 }));
 
-/** Tres puntos que laten en secuencia. Animated + useNativeDriver: corre en el hilo nativo. */
+/** Three dots that pulse in sequence. Animated + useNativeDriver: runs on the native thread. */
 const DotsIndicator = memo(({ color, dotSize }: { color: string; dotSize: number }) => {
   const dots = [useRef(new Animated.Value(0)).current, useRef(new Animated.Value(0)).current, useRef(new Animated.Value(0)).current];
 
@@ -36,16 +53,16 @@ const DotsIndicator = memo(({ color, dotSize }: { color: string; dotSize: number
     const animations = dots.map((dot, i) =>
       Animated.loop(
         Animated.sequence([
-          Animated.delay(i * 140),
-          Animated.timing(dot, { toValue: 1, duration: 320, useNativeDriver: true, easing: Easing.out(Easing.quad) }),
-          Animated.timing(dot, { toValue: 0, duration: 320, useNativeDriver: true, easing: Easing.in(Easing.quad) }),
-          Animated.delay((2 - i) * 140),
+          Animated.delay(i * DOT_STAGGER_MS),
+          Animated.timing(dot, { toValue: 1, duration: DOT_PULSE_MS, useNativeDriver: true, easing: Easing.out(Easing.quad) }),
+          Animated.timing(dot, { toValue: 0, duration: DOT_PULSE_MS, useNativeDriver: true, easing: Easing.in(Easing.quad) }),
+          Animated.delay((2 - i) * DOT_STAGGER_MS),
         ])
       )
     );
     animations.forEach((a) => a.start());
-    // Sin stop() los loops siguen corriendo tras desmontar y mantienen vivo
-    // el árbol de Animated.
+    // Without stop() the loops keep running after unmount and keep the
+    // Animated tree alive.
     return () => animations.forEach((a) => a.stop());
   }, []);
 
@@ -69,37 +86,74 @@ const DotsIndicator = memo(({ color, dotSize }: { color: string; dotSize: number
 });
 DotsIndicator.displayName = 'DotsIndicator';
 
-/** Anillo que gira: un borde con un solo lado coloreado. */
+/**
+ * Spinning ring: a faint fixed track and, on top, an arc (a single side of
+ * the border) that spins. The track uses `opacity` instead of appending alpha
+ * to the color (`color + '33'`), which only worked with 6-digit hex and broke
+ * with `rgb()` or color names.
+ */
 const RingIndicator = memo(({ color, diameter }: { color: string; diameter: number }) => {
   const spin = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     const animation = Animated.loop(
-      Animated.timing(spin, { toValue: 1, duration: 900, useNativeDriver: true, easing: Easing.linear })
+      Animated.timing(spin, { toValue: 1, duration: RING_TURN_MS, useNativeDriver: true, easing: Easing.linear })
     );
     animation.start();
     return () => animation.stop();
   }, []);
 
+  const ring = { width: diameter, height: diameter, borderRadius: diameter / 2, borderWidth: Math.max(2, diameter / 10) };
   return (
-    <Animated.View
-      style={{
-        width: diameter,
-        height: diameter,
-        borderRadius: diameter / 2,
-        borderWidth: Math.max(2, diameter / 10),
-        borderColor: color + '33',
-        borderTopColor: color,
-        transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) }],
-      }}
-    />
+    <View style={{ width: diameter, height: diameter }}>
+      <View style={[ring, { position: 'absolute', borderColor: color, opacity: 0.2 }]} />
+      <Animated.View
+        style={[
+          ring,
+          {
+            borderColor: 'transparent',
+            borderTopColor: color,
+            transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) }],
+          },
+        ]}
+      />
+    </View>
   );
 });
 RingIndicator.displayName = 'RingIndicator';
 
+/**
+ * Spinner
+ * Indeterminate loading indicator, with optional text below.
+ *
+ * Gestalt:
+ * - Common fate: the three `dots` pulse in sequence, at the same rhythm, and
+ *   read as a single indicator moving forward.
+ * - Proximity: the text sits `spacing.md` from the indicator, so it reads as
+ *   its explanation and not as loose text on the screen. The `logo` sits
+ *   further away (`spacing.xl`): it is the screen's brand, not part of the indicator.
+ * - Focal point: with `logo`, the logo is the first thing seen and the
+ *   indicator stays as a secondary signal that the app is loading.
+ *
+ * Accessibility: it is announced as a busy `progressbar`, with `text` (or
+ * `labels.loading`) as its name. The animation doesn't stop with Reduce
+ * Motion: it is the signal that something is happening, like the system's
+ * ActivityIndicator.
+ */
 export const Spinner = memo(
-  ({ size = 'large', color, text, fullscreen = true, variant = 'native', indicator, testID }: SpinnerProps) => {
+  ({
+    size = 'large',
+    color,
+    text,
+    fullscreen = true,
+    variant = 'native',
+    indicator,
+    logo,
+    accessibilityLabel,
+    testID,
+  }: SpinnerProps) => {
     const colors = useColors();
+    const labels = useLabels();
     const styles = useStyles();
     const allowFontScaling = useAllowFontScaling();
     const resolvedColor = color || colors.primary;
@@ -113,9 +167,18 @@ export const Spinner = memo(
     };
 
     return (
-      <View style={[styles.container, fullscreen && { flex: 1 }]} testID={testID}>
+      <View
+        style={[styles.container, fullscreen && { flex: 1 }]}
+        testID={testID}
+        accessible
+        accessibilityRole="progressbar"
+        accessibilityLabel={accessibilityLabel ?? (text || labels.loading)}
+        accessibilityState={{ busy: true }}
+        accessibilityLiveRegion="polite"
+      >
+        {logo != null && <View style={styles.logo}>{logo}</View>}
         {renderIndicator()}
-        {text && (
+        {!!text && (
           <Text allowFontScaling={allowFontScaling} style={styles.text}>
             {text}
           </Text>

package/src/atoms/Text.tsx

@@ -1,5 +1,11 @@
 import React, { memo } from 'react';
-import { Text as RNText, type StyleProp, type TextProps, type TextStyle } from 'react-native';
+import {
+  Text as RNText,
+  type AccessibilityRole,
+  type StyleProp,
+  type TextProps,
+  type TextStyle,
+} from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors } from '../theme/UIProvider';
 
@@ -13,13 +19,15 @@ export interface TypographyProps extends TextProps {
 const useStyles = createStyles((theme) => ({
   title: {
     fontSize: theme.tokens.fontSize.xxl,
+    lineHeight: theme.tokens.lineHeight.xl,
     fontWeight: theme.tokens.fontWeight.bold,
-    letterSpacing: -0.5,
+    letterSpacing: theme.tokens.letterSpacing.tight,
     color: theme.colors.text,
   },
   subtitle: {
     fontSize: theme.tokens.fontSize.lg,
-    fontWeight: theme.tokens.fontWeight.medium,
+    lineHeight: theme.tokens.lineHeight.lg,
+    fontWeight: theme.tokens.fontWeight.semibold,
     color: theme.colors.text,
   },
   body: {
@@ -29,11 +37,16 @@ const useStyles = createStyles((theme) => ({
   },
   caption: {
     fontSize: theme.tokens.fontSize.sm,
+    lineHeight: theme.tokens.lineHeight.sm,
     color: theme.colors.textLight,
   },
 }));
 
-function makeVariant(variant: keyof ReturnType<typeof useStyles>, defaultColor: 'text' | 'textLight') {
+function makeVariant(
+  variant: keyof ReturnType<typeof useStyles>,
+  defaultColor: 'text' | 'textLight',
+  defaultRole?: AccessibilityRole,
+) {
   const Component = memo(({ children, style, color, align = 'left', ...props }: TypographyProps) => {
     const styles = useStyles();
     const colors = useColors();
@@ -41,6 +54,7 @@ function makeVariant(variant: keyof ReturnType<typeof useStyles>, defaultColor:
     return (
       <RNText
         allowFontScaling={allowFontScaling}
+        accessibilityRole={defaultRole}
         style={[styles[variant], { color: color || colors[defaultColor], textAlign: align }, style]}
         {...props}
       >
@@ -48,11 +62,57 @@ function makeVariant(variant: keyof ReturnType<typeof useStyles>, defaultColor:
       </RNText>
     );
   });
-  Component.displayName = variant;
+  Component.displayName = String(variant);
   return Component;
 }
 
-export const Title = makeVariant('title', 'text');
+/**
+ * Screen or section title: the highest step of the typographic hierarchy.
+ *
+ * Gestalt, focal point (Von Restorff): it is the only text in its block with
+ * size `xxl` and weight `bold`, so it breaks the series of Body/Caption and is
+ * the first thing read. That is why there should be only one per block: two
+ * Titles together cancel each other out. The `tight` tracking offsets the room
+ * the large size opens between letters so the word reads as a single shape
+ * (Prägnanz), and `lineHeight.xl` keeps the block compact when the title wraps.
+ *
+ * Accessibility: it is announced with `accessibilityRole="header"`, so
+ * VoiceOver/TalkBack can jump from title to title. It can be overridden by
+ * passing a different `accessibilityRole`.
+ */
+export const Title = makeVariant('title', 'text', 'header');
+/**
+ * Second step of the hierarchy: heads a group within the screen or
+ * accompanies a Title with a short piece of data.
+ *
+ * Gestalt, similarity: it shares its color with Body but steps up size (`lg`)
+ * and weight (`semibold`), so it is perceived as part of the same family and,
+ * at the same time, as the label of the block that follows. Proximity: it
+ * should sit closer to the content it heads than to the previous block. It is
+ * not an accessibility heading: if it marks a navigable section, use Title (or
+ * pass `accessibilityRole="header"`).
+ * `lineHeight.lg` (1.5×) keeps the text legible when it spans several lines.
+ */
 export const Subtitle = makeVariant('subtitle', 'text');
+/**
+ * Running text: the default style for paragraphs, descriptions and values.
+ *
+ * Gestalt, similarity: all reading content shares size (`md`), regular weight
+ * and the `text` color, so it is perceived as a single level and the steps
+ * above (Title, Subtitle) and below (Caption) stand out by contrast.
+ * `lineHeight.md` (≈1.43×) gives the room between lines to read long
+ * paragraphs. If `color` is passed, the color/background pair must meet WCAG
+ * AA (4.5:1); the theme colors already guarantee it.
+ */
 export const Body = makeVariant('body', 'text');
+/**
+ * Secondary text: hints, metadata, dates, help below a field.
+ *
+ * Gestalt, figure and ground: size `sm` and color `textLight` bring it one
+ * step below Body, so it reads as context and doesn't compete with the
+ * content. Proximity: it sits right next to the element it explains.
+ * `textLight` meets WCAG AA over `surface` and `background` in light and dark
+ * (palettes tests); don't lighten it further. `lineHeight.sm` (≈1.33×) keeps
+ * the lines together when the hint spans several.
+ */
 export const Caption = makeVariant('caption', 'textLight');

package/src/atoms/Transition.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Animated, Easing, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, Easing, type StyleProp, type ViewStyle } from 'react-native';
 import { useTheme } from '../theme/UIProvider';
+import { useReduceMotion } from '../theme/useReduceMotion';
 
 export type TransitionPreset =
   | 'fade'
@@ -12,6 +13,7 @@ export type TransitionPreset =
   | 'slide-right';
 
 export interface TransitionProps {
+  /** Content that enters and exits. */
   children: React.ReactNode;
   /** Enters when true, exits (and unmounts) when false. @default true */
   visible?: boolean;
@@ -21,7 +23,7 @@ export interface TransitionProps {
   duration?: number;
   /** ms before starting. A per-index delay staggers a list. @default 0 */
   delay?: number;
-  /** Pixels traveled by the slide presets. @default 24 */
+  /** Pixels traveled by the slide presets. @default tokens.spacing.xxl (24) */
   distance?: number;
   /** Spring instead of timing (implicit in 'pop'). */
   spring?: boolean;
@@ -34,50 +36,39 @@ export interface TransitionProps {
    * whoever passes it decides when and how it advances (a PanResponder, for example).
    */
   value?: Animated.Value;
+  /** Called when the enter animation finishes. Not called when driven by `value`. */
   onEntered?: () => void;
+  /** Called when the exit animation finishes, before unmounting. Not called when driven by `value`. */
   onExited?: () => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
 const SCALE_FROM: Record<'scale' | 'pop', number> = { scale: 0.92, pop: 0.8 };
+const hiddenStyle: ViewStyle = { pointerEvents: 'none' };
+/** 'pop' spring: bounces once and settles (~350 ms), without oscillating. */
+const POP_SPRING = { friction: 9, tension: 90 } as const;
 
-/**
- * Sigue el ajuste de "reducir movimiento" del sistema: con él activo las
- * animaciones saltan al estado final en vez de desactivarse, así que los
- * callbacks y el desmontaje siguen ocurriendo igual.
- */
-export function useReduceMotion(): boolean {
-  const [reduceMotion, setReduceMotion] = useState(false);
-
-  useEffect(() => {
-    let alive = true;
-    // Sólo se actualiza el estado si el ajuste está activo: el valor inicial ya
-    // es `false` y un setState de false a false costaría un render por montaje.
-    AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
-      if (alive && enabled) setReduceMotion(true);
-    });
-    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
-    return () => {
-      alive = false;
-      sub.remove();
-    };
-  }, []);
-
-  return reduceMotion;
-}
+// Lives in theme/ (UIProvider uses it too); re-exported here so existing
+// imports don't break.
+export { useReduceMotion };
 
 /**
  * Transition
- * Envuelve cualquier árbol y lo anima al entrar y al salir. Todos los presets
- * se reducen a `opacity` y `transform` sobre un único Animated.Value, que es
- * lo que `useNativeDriver` sabe mandar al hilo nativo: la animación corre ahí
- * y el hilo de JS no participa de ningún frame — por eso no hay presets de
- * alto, ancho o color, que obligarían a volver a JS en cada frame.
+ * Wraps any tree and animates it on enter and exit. Every preset boils down
+ * to `opacity` and `transform` over a single Animated.Value, which is what
+ * `useNativeDriver` knows how to send to the native thread: the animation runs
+ * there and the JS thread takes part in no frame — that is why there are no
+ * height, width or color presets, which would force a return to JS every frame.
+ *
+ * The node stays mounted until the exit animation finishes, and the behavior
+ * is identical on iOS and Android: there is no per-platform branch. While
+ * exiting (or hidden with `keepMounted`) it stops receiving touches and leaves
+ * the accessibility tree: what is invisible isn't read.
  *
- * El nodo se mantiene montado hasta que termina la animación de salida, y el
- * comportamiento es idéntico en iOS y Android: no hay ninguna rama por
- * plataforma.
+ * Gestalt, common fate: what enters or exits together is perceived as a group;
+ * with a per-index `delay` the list enters in reading order (continuity).
+ * Respects Reduce Motion: jumps to the final state, callbacks still fire.
  */
 export const Transition = memo(
   ({
@@ -86,7 +77,7 @@ export const Transition = memo(
     preset = 'fade',
     duration,
     delay = 0,
-    distance = 24,
+    distance,
     spring,
     appear = true,
     keepMounted = false,
@@ -97,6 +88,10 @@ export const Transition = memo(
     testID,
   }: TransitionProps) => {
     const theme = useTheme();
+    const travel = distance ?? theme.tokens.spacing.xxl;
+    // Resolved here, not inside the effect: depending on `theme` restarted the
+    // animation (and fired onEntered again) every time the theme changed.
+    const resolvedDuration = duration ?? theme.tokens.duration.base;
     const reduceMotion = useReduceMotion();
     const internal = useRef(new Animated.Value(visible && !appear ? 1 : 0)).current;
     const progress = value ?? internal;
@@ -104,8 +99,8 @@ export const Transition = memo(
 
     const [mounted, setMounted] = useState(visible || keepMounted);
 
-    // Los callbacks viven en un ref: pasados inline cambian de identidad en
-    // cada render y, como dependencias del efecto, reiniciarían la animación.
+    // The callbacks live in a ref: passed inline they change identity on
+    // every render and, as effect dependencies, would restart the animation.
     const callbacks = useRef({ onEntered, onExited });
     useEffect(() => {
       callbacks.current = { onEntered, onExited };
@@ -126,11 +121,11 @@ export const Transition = memo(
       const animation = reduceMotion
         ? Animated.timing(progress, { toValue, duration: 0, delay, useNativeDriver: true })
         : useSpring
-          ? Animated.spring(progress, { toValue, delay, friction: 9, tension: 90, useNativeDriver: true })
+          ? Animated.spring(progress, { toValue, delay, ...POP_SPRING, useNativeDriver: true })
           : Animated.timing(progress, {
               toValue,
               delay,
-              duration: duration ?? theme.tokens.duration.base,
+              duration: resolvedDuration,
               easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
               useNativeDriver: true,
             });
@@ -146,7 +141,7 @@ export const Transition = memo(
       });
 
       return () => animation.stop();
-    }, [visible, driven, reduceMotion, spring, delay, duration, keepMounted, presets, progress, theme]);
+    }, [visible, driven, reduceMotion, spring, delay, resolvedDuration, keepMounted, presets, progress]);
 
     const animatedStyle = useMemo(() => {
       type Interpolated = Animated.AnimatedInterpolation<number>;
@@ -165,21 +160,22 @@ export const Transition = memo(
           continue;
         }
         const vertical = item === 'slide-up' || item === 'slide-down';
-        const from = item === 'slide-up' || item === 'slide-left' ? distance : -distance;
+        const from = item === 'slide-up' || item === 'slide-left' ? travel : -travel;
         const offset = progress.interpolate({ inputRange: [0, 1], outputRange: [from, 0] });
         transform.push(vertical ? { translateY: offset } : { translateX: offset });
       }
 
       return { opacity, transform };
-    }, [presets, progress, distance]);
+    }, [presets, progress, travel]);
 
     if (!mounted) return null;
 
     return (
       <Animated.View
         testID={testID}
-        pointerEvents={visible ? undefined : 'none'}
-        style={[style, animatedStyle]}
+        accessibilityElementsHidden={!visible}
+        importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}
+        style={[style, animatedStyle, !visible && hiddenStyle]}
       >
         {children}
       </Animated.View>

package/src/atoms/index.ts

@@ -5,7 +5,7 @@ export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
 export { IconButton } from './IconButton';
 export type { IconButtonProps } from './IconButton';
 export { Input } from './Input';
-export type { InputProps } from './Input';
+export type { InputProps, InputHandle, InputRules, InputRuleValue } from './Input';
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { Badge } from './Badge';
@@ -16,7 +16,7 @@ export { Divider } from './Divider';
 export type { DividerProps } from './Divider';
 export { Gradient } from './Gradient';
 export type { GradientProps, GradientDirection } from './Gradient';
-export { Avatar } from './Avatar';
+export { Avatar, initialsOf } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { Image, prefetchImage } from './Image';
 export type { ImageProps } from './Image';
@@ -29,7 +29,7 @@ export type { TransitionProps, TransitionPreset } from './Transition';
 export { ShinyText } from './ShinyText';
 export type { ShinyTextProps } from './ShinyText';
 export { EmptyState } from './EmptyState';
-export type { EmptyStateProps } from './EmptyState';
+export type { EmptyStateProps, EmptyStateAction } from './EmptyState';
 export { KeyValueRow } from './KeyValueRow';
 export type { KeyValueRowProps } from './KeyValueRow';
 export { Fab } from './Fab';