orn-ui 0.1.0 → 0.2.0

package/registry/transition.json

@@ -0,0 +1,19 @@
+{
+  "name": "Transition",
+  "slug": "transition",
+  "type": "component",
+  "category": "atoms",
+  "exportedNames": [
+    "Transition",
+    "useReduceMotion"
+  ],
+  "files": [
+    {
+      "path": "atoms/Transition.tsx",
+      "content": "import React, { memo, useEffect, useMemo, useRef, useState } from 'react';\nimport { AccessibilityInfo, Animated, Easing, type StyleProp, type ViewStyle } from 'react-native';\nimport { useTheme } from '../theme/UIProvider';\n\nexport type TransitionPreset =\n  | 'fade'\n  | 'scale'\n  | 'pop'\n  | 'slide-up'\n  | 'slide-down'\n  | 'slide-left'\n  | 'slide-right';\n\nexport interface TransitionProps {\n  children: React.ReactNode;\n  /** Entra en true, sale (y desmonta) en false. @default true */\n  visible?: boolean;\n  /** Uno o varios: 'fade scale' combina opacidad y escala. @default 'fade' */\n  preset?: TransitionPreset | TransitionPreset[];\n  /** ms del timing. @default tokens.duration.base */\n  duration?: number;\n  /** ms antes de arrancar. Un índice por delay escalona una lista. @default 0 */\n  delay?: number;\n  /** Píxeles que recorren los presets de slide. @default 24 */\n  distance?: number;\n  /** Spring en vez de timing (implícito en 'pop'). */\n  spring?: boolean;\n  /** Anima también el primer render. En false arranca ya presente. @default true */\n  appear?: boolean;\n  /** Deja el nodo montado al salir, sólo lo esconde. @default false */\n  keepMounted?: boolean;\n  /**\n   * Progreso 0→1 manejado desde afuera. Con esto el Transition sólo interpola:\n   * quien lo pasa decide cuándo y cómo avanza (un PanResponder, por ejemplo).\n   */\n  value?: Animated.Value;\n  onEntered?: () => void;\n  onExited?: () => void;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst SCALE_FROM: Record<'scale' | 'pop', number> = { scale: 0.92, pop: 0.8 };\n\n/**\n * Sigue el ajuste de \"reducir movimiento\" del sistema: con él activo las\n * animaciones saltan al estado final en vez de desactivarse, así que los\n * callbacks y el desmontaje siguen ocurriendo igual.\n */\nexport function useReduceMotion(): boolean {\n  const [reduceMotion, setReduceMotion] = useState(false);\n\n  useEffect(() => {\n    let alive = true;\n    // Sólo se actualiza el estado si el ajuste está activo: el valor inicial ya\n    // es `false` y un setState de false a false costaría un render por montaje.\n    AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {\n      if (alive && enabled) setReduceMotion(true);\n    });\n    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);\n    return () => {\n      alive = false;\n      sub.remove();\n    };\n  }, []);\n\n  return reduceMotion;\n}\n\n/**\n * Transition\n * Envuelve cualquier árbol y lo anima al entrar y al salir. Todos los presets\n * se reducen a `opacity` y `transform` sobre un único Animated.Value, que es\n * lo que `useNativeDriver` sabe mandar al hilo nativo: la animación corre ahí\n * y el hilo de JS no participa de ningún frame — por eso no hay presets de\n * alto, ancho o color, que obligarían a volver a JS en cada frame.\n *\n * El nodo se mantiene montado hasta que termina la animación de salida, y el\n * comportamiento es idéntico en iOS y Android: no hay ninguna rama por\n * plataforma.\n */\nexport const Transition = memo(\n  ({\n    children,\n    visible = true,\n    preset = 'fade',\n    duration,\n    delay = 0,\n    distance = 24,\n    spring,\n    appear = true,\n    keepMounted = false,\n    value,\n    onEntered,\n    onExited,\n    style,\n    testID,\n  }: TransitionProps) => {\n    const theme = useTheme();\n    const reduceMotion = useReduceMotion();\n    const internal = useRef(new Animated.Value(visible && !appear ? 1 : 0)).current;\n    const progress = value ?? internal;\n    const driven = value === undefined;\n\n    const [mounted, setMounted] = useState(visible || keepMounted);\n\n    // Los callbacks viven en un ref: pasados inline cambian de identidad en\n    // cada render y, como dependencias del efecto, reiniciarían la animación.\n    const callbacks = useRef({ onEntered, onExited });\n    useEffect(() => {\n      callbacks.current = { onEntered, onExited };\n    });\n\n    const presetKey = Array.isArray(preset) ? preset.join(' ') : preset;\n    const presets = useMemo(() => presetKey.split(' ') as TransitionPreset[], [presetKey]);\n\n    useEffect(() => {\n      if (visible) setMounted(true);\n    }, [visible]);\n\n    useEffect(() => {\n      if (!driven) return;\n      const toValue = visible ? 1 : 0;\n      const useSpring = spring ?? presets.includes('pop');\n\n      const animation = reduceMotion\n        ? Animated.timing(progress, { toValue, duration: 0, delay, useNativeDriver: true })\n        : useSpring\n          ? Animated.spring(progress, { toValue, delay, friction: 9, tension: 90, useNativeDriver: true })\n          : Animated.timing(progress, {\n              toValue,\n              delay,\n              duration: duration ?? theme.tokens.duration.base,\n              easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),\n              useNativeDriver: true,\n            });\n\n      animation.start(({ finished }) => {\n        if (!finished) return;\n        if (visible) {\n          callbacks.current.onEntered?.();\n          return;\n        }\n        callbacks.current.onExited?.();\n        if (!keepMounted) setMounted(false);\n      });\n\n      return () => animation.stop();\n    }, [visible, driven, reduceMotion, spring, delay, duration, keepMounted, presets, progress, theme]);\n\n    const animatedStyle = useMemo(() => {\n      type Interpolated = Animated.AnimatedInterpolation<number>;\n      const transform: Array<{ scale: Interpolated } | { translateX: Interpolated } | { translateY: Interpolated }> = [];\n      let opacity: Animated.Value | undefined;\n\n      for (const item of presets) {\n        if (item === 'fade') {\n          opacity = progress;\n          continue;\n        }\n        if (item === 'scale' || item === 'pop') {\n          transform.push({\n            scale: progress.interpolate({ inputRange: [0, 1], outputRange: [SCALE_FROM[item], 1] }),\n          });\n          continue;\n        }\n        const vertical = item === 'slide-up' || item === 'slide-down';\n        const from = item === 'slide-up' || item === 'slide-left' ? distance : -distance;\n        const offset = progress.interpolate({ inputRange: [0, 1], outputRange: [from, 0] });\n        transform.push(vertical ? { translateY: offset } : { translateX: offset });\n      }\n\n      return { opacity, transform };\n    }, [presets, progress, distance]);\n\n    if (!mounted) return null;\n\n    return (\n      <Animated.View\n        testID={testID}\n        pointerEvents={visible ? undefined : 'none'}\n        style={[style, animatedStyle]}\n      >\n        {children}\n      </Animated.View>\n    );\n  }\n);\nTransition.displayName = 'Transition';\n"
+    }
+  ],
+  "registryDependencies": [
+    "core"
+  ]
+}

package/registry/wizard.json

@@ -9,12 +9,13 @@
   "files": [
     {
       "path": "organisms/Wizard.tsx",
-      "content": "import React, { useCallback, useMemo, useState } from 'react';\nimport { ScrollView, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { Steps, type StepItem } from '../molecules/Steps';\nimport { Button } from '../atoms/Button';\n\nexport interface WizardStep extends StepItem {\n  content: React.ReactNode;\n  /** false bloquea el avance desde este paso (validación). @default true */\n  canGoNext?: boolean;\n}\n\nexport interface WizardProps {\n  steps: WizardStep[];\n  /** Paso actual (controlado). Si se omite, el Wizard maneja su propio estado. */\n  current?: number;\n  onStepChange?: (index: number) => void;\n  onFinish?: () => void;\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n  completedIndicator?: 'check' | 'number';\n  /** Permite volver a un paso ya completado tocándolo en el indicador. @default true */\n  allowStepNavigation?: boolean;\n  backLabel?: string;\n  nextLabel?: string;\n  finishLabel?: string;\n  /**\n   * El contenido del paso scrollea cuando no entra. Ponelo en false sólo si\n   * un paso renderiza su propia lista virtualizada (anidar una\n   * VirtualizedList dentro de un ScrollView rompe la virtualización).\n   * @default true\n   */\n  scrollableContent?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flex: 1, gap: theme.tokens.spacing.xl },\n  content: { flex: 1 },\n  contentInner: { flexGrow: 1, paddingBottom: theme.tokens.spacing.sm },\n  footer: { flexDirection: 'row', gap: theme.tokens.spacing.md },\n  footerButton: { flex: 1 },\n}));\n\n/**\n * Wizard\n * Flujo multi-paso: indicador (Steps) + contenido del paso actual + barra de\n * navegación. Funciona controlado (`current` + `onStepChange`) o por su\n * cuenta. `canGoNext: false` en un paso deshabilita el avance, que es donde\n * se engancha la validación del formulario de ese paso.\n */\nexport function Wizard({\n  steps,\n  current: controlledCurrent,\n  onStepChange,\n  onFinish,\n  orientation = 'horizontal',\n  completedIndicator = 'check',\n  allowStepNavigation = true,\n  backLabel = 'Back',\n  nextLabel = 'Next',\n  finishLabel = 'Finish',\n  scrollableContent = true,\n  style,\n}: WizardProps) {\n  const styles = useStyles();\n  const [uncontrolled, setUncontrolled] = useState(0);\n  const isControlled = controlledCurrent !== undefined;\n  const current = isControlled ? controlledCurrent : uncontrolled;\n\n  const goTo = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, steps.length - 1));\n      if (!isControlled) setUncontrolled(clamped);\n      onStepChange?.(clamped);\n    },\n    [isControlled, onStepChange, steps.length]\n  );\n\n  const stepItems = useMemo(\n    () => steps.map(({ label, description }) => ({ label, description })),\n    [steps]\n  );\n\n  const activeStep = steps[current];\n  const isFirst = current === 0;\n  const isLast = current === steps.length - 1;\n  const canGoNext = activeStep?.canGoNext !== false;\n\n  const handleNext = () => {\n    if (isLast) onFinish?.();\n    else goTo(current + 1);\n  };\n\n  return (\n    <View style={[styles.container, style]}>\n      <Steps\n        steps={stepItems}\n        current={current}\n        orientation={orientation}\n        completedIndicator={completedIndicator}\n        // Sólo se puede volver atrás tocando el indicador; saltar hacia\n        // adelante se saltearía la validación de los pasos intermedios.\n        onStepPress={allowStepNavigation ? (index) => index < current && goTo(index) : undefined}\n      />\n\n      {/* El contenido scrollea en vez de desbordar: con el teclado abierto un\n          form largo se comía el footer y los botones quedaban pintados encima\n          de los campos. */}\n      {scrollableContent ? (\n        <ScrollView\n          style={styles.content}\n          contentContainerStyle={styles.contentInner}\n          keyboardShouldPersistTaps=\"handled\"\n          automaticallyAdjustKeyboardInsets\n          showsVerticalScrollIndicator={false}\n        >\n          {activeStep?.content}\n        </ScrollView>\n      ) : (\n        <View style={styles.content}>{activeStep?.content}</View>\n      )}\n\n      <View style={styles.footer}>\n        {!isFirst && (\n          <Button title={backLabel} variant=\"outline\" onPress={() => goTo(current - 1)} style={styles.footerButton} />\n        )}\n        <Button\n          title={isLast ? finishLabel : nextLabel}\n          onPress={handleNext}\n          disabled={!canGoNext}\n          style={styles.footerButton}\n        />\n      </View>\n    </View>\n  );\n}\n"
+      "content": "import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { ScrollView, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { Steps, type StepItem } from '../molecules/Steps';\nimport { Button } from '../atoms/Button';\nimport { Transition } from '../atoms/Transition';\n\nexport interface WizardStep extends StepItem {\n  content: React.ReactNode;\n  /** false bloquea el avance desde este paso (validación). @default true */\n  canGoNext?: boolean;\n}\n\nexport interface WizardProps {\n  steps: WizardStep[];\n  /** Paso actual (controlado). Si se omite, el Wizard maneja su propio estado. */\n  current?: number;\n  onStepChange?: (index: number) => void;\n  onFinish?: () => void;\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n  completedIndicator?: 'check' | 'number';\n  /** Permite volver a un paso ya completado tocándolo en el indicador. @default true */\n  allowStepNavigation?: boolean;\n  backLabel?: string;\n  nextLabel?: string;\n  finishLabel?: string;\n  /**\n   * El contenido del paso scrollea cuando no entra. Ponelo en false sólo si\n   * un paso renderiza su propia lista virtualizada (anidar una\n   * VirtualizedList dentro de un ScrollView rompe la virtualización).\n   * @default true\n   */\n  scrollableContent?: boolean;\n  /**\n   * El contenido del paso entra deslizándose en el sentido de la navegación.\n   * Sólo opacity y transform, así que la animación corre en el hilo nativo.\n   * @default true\n   */\n  animated?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flex: 1, gap: theme.tokens.spacing.xl },\n  content: { flex: 1 },\n  contentInner: { flexGrow: 1, paddingBottom: theme.tokens.spacing.sm },\n  footer: { flexDirection: 'row', gap: theme.tokens.spacing.md },\n  footerButton: { flex: 1 },\n}));\n\n/**\n * Wizard\n * Flujo multi-paso: indicador (Steps) + contenido del paso actual + barra de\n * navegación. Funciona controlado (`current` + `onStepChange`) o por su\n * cuenta. `canGoNext: false` en un paso deshabilita el avance, que es donde\n * se engancha la validación del formulario de ese paso.\n */\nexport function Wizard({\n  steps,\n  current: controlledCurrent,\n  onStepChange,\n  onFinish,\n  orientation = 'horizontal',\n  completedIndicator = 'check',\n  allowStepNavigation = true,\n  backLabel = 'Back',\n  nextLabel = 'Next',\n  finishLabel = 'Finish',\n  scrollableContent = true,\n  animated = true,\n  style,\n}: WizardProps) {\n  const styles = useStyles();\n  const [uncontrolled, setUncontrolled] = useState(0);\n  const isControlled = controlledCurrent !== undefined;\n  const current = isControlled ? controlledCurrent : uncontrolled;\n\n  const goTo = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, steps.length - 1));\n      if (!isControlled) setUncontrolled(clamped);\n      onStepChange?.(clamped);\n    },\n    [isControlled, onStepChange, steps.length]\n  );\n\n  const stepItems = useMemo(\n    () => steps.map(({ label, description }) => ({ label, description })),\n    [steps]\n  );\n\n  // El ref todavía guarda el paso anterior durante el render que trae el nuevo.\n  const previous = useRef(current);\n  const forward = current >= previous.current;\n  const entered = useRef(false);\n  useEffect(() => {\n    previous.current = current;\n    entered.current = true;\n  }, [current]);\n\n  const activeStep = steps[current];\n  const isFirst = current === 0;\n  const isLast = current === steps.length - 1;\n  const canGoNext = activeStep?.canGoNext !== false;\n\n  const handleNext = () => {\n    if (isLast) onFinish?.();\n    else goTo(current + 1);\n  };\n\n  // El paso saliente no se anima: mantener los dos montados a la vez duplicaría\n  // los formularios y su estado.\n  const renderContent = () =>\n    animated ? (\n      <Transition\n        key={current}\n        testID=\"wizard-step\"\n        preset={['fade', forward ? 'slide-left' : 'slide-right']}\n        appear={entered.current}\n      >\n        {activeStep?.content}\n      </Transition>\n    ) : (\n      activeStep?.content\n    );\n\n  return (\n    <View style={[styles.container, style]}>\n      <Steps\n        steps={stepItems}\n        current={current}\n        orientation={orientation}\n        completedIndicator={completedIndicator}\n        // Sólo se puede volver atrás tocando el indicador; saltar hacia\n        // adelante se saltearía la validación de los pasos intermedios.\n        onStepPress={allowStepNavigation ? (index) => index < current && goTo(index) : undefined}\n      />\n\n      {/* El contenido scrollea en vez de desbordar: con el teclado abierto un\n          form largo se comía el footer y los botones quedaban pintados encima\n          de los campos. */}\n      {scrollableContent ? (\n        <ScrollView\n          style={styles.content}\n          contentContainerStyle={styles.contentInner}\n          keyboardShouldPersistTaps=\"handled\"\n          automaticallyAdjustKeyboardInsets\n          showsVerticalScrollIndicator={false}\n        >\n          {renderContent()}\n        </ScrollView>\n      ) : (\n        <View style={styles.content}>{renderContent()}</View>\n      )}\n\n      <View style={styles.footer}>\n        {!isFirst && (\n          <Button title={backLabel} variant=\"outline\" onPress={() => goTo(current - 1)} style={styles.footerButton} />\n        )}\n        <Button\n          title={isLast ? finishLabel : nextLabel}\n          onPress={handleNext}\n          disabled={!canGoNext}\n          style={styles.footerButton}\n        />\n      </View>\n    </View>\n  );\n}\n"
     }
   ],
   "registryDependencies": [
     "core",
     "steps",
-    "button"
+    "button",
+    "transition"
   ]
 }

package/src/atoms/Avatar.tsx

@@ -28,7 +28,7 @@ export const Avatar = memo(({ size = 44, backgroundColor, children, style }: Ava
           width: size,
           height: size,
           borderRadius: size / 2,
-          backgroundColor: backgroundColor || colors.primary + '15',
+          backgroundColor: backgroundColor || colors.primarySoft,
         },
         style,
       ]}

package/src/atoms/Badge.tsx

@@ -37,10 +37,12 @@ export const Badge = memo(({ label, variant = 'neutral', backgroundColor, textCo
   const { colors } = theme;
 
   const palette: Record<BadgeVariant, { bg: string; fg: string }> = {
-    success: { bg: colors.success + '20', fg: colors.success },
-    error: { bg: colors.error + '20', fg: colors.error },
-    warning: { bg: colors.warning + '20', fg: colors.warning },
-    info: { bg: colors.secondary + '20', fg: colors.secondary },
+    // fg es el rol `*Text`, no el acento pleno: el acento sobre su propio
+    // tinte da ~2.2:1 en light — el label quedaba ilegible.
+    success: { bg: colors.successSoft, fg: colors.successText },
+    error: { bg: colors.errorSoft, fg: colors.errorText },
+    warning: { bg: colors.warningSoft, fg: colors.warningText },
+    info: { bg: colors.secondarySoft, fg: colors.secondaryText },
     neutral: { bg: colors.inputBackground, fg: colors.textLight },
   };
 

package/src/atoms/Button.tsx

@@ -65,19 +65,21 @@ function resolveColors(variant: ButtonVariant, disabled: boolean, colors: Return
     return { background: colors.inputBackground, text: colors.textLight, border: 'transparent' };
   }
   switch (variant) {
+    // Las variantes sin relleno pintan texto sobre el fondo de la pantalla:
+    // van con el rol `*Text`. Las rellenas van con `on*` sobre el acento.
     case 'outline':
-      return { background: 'transparent', text: colors.primary, border: colors.primary };
+      return { background: 'transparent', text: colors.primaryText, border: colors.primary };
     case 'ghost':
-      return { background: 'transparent', text: colors.primary, border: 'transparent' };
+      return { background: 'transparent', text: colors.primaryText, border: 'transparent' };
     case 'link':
-      return { background: 'transparent', text: colors.primary, border: 'transparent' };
+      return { background: 'transparent', text: colors.primaryText, border: 'transparent' };
     case 'secondary':
-      return { background: colors.secondary, text: colors.white, border: 'transparent' };
+      return { background: colors.secondary, text: colors.onSecondary, border: 'transparent' };
     case 'destructive':
-      return { background: colors.error, text: colors.white, border: 'transparent' };
+      return { background: colors.error, text: colors.onError, border: 'transparent' };
     case 'primary':
     default:
-      return { background: colors.primary, text: colors.white, border: 'transparent' };
+      return { background: colors.primary, text: colors.onPrimary, border: 'transparent' };
   }
 }
 

package/src/atoms/Checkbox.tsx

@@ -32,6 +32,9 @@ export const Checkbox = memo(({ value, onValueChange, label, color, disabled, te
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
   const activeColor = color || colors.primary;
+  // El check va encima del relleno: con `color` propio no sabemos qué tono
+  // contrasta, así que ahí seguimos con blanco (decisión del consumidor).
+  const checkColor = color ? colors.white : colors.onPrimary;
   const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
   const checkScale = useRef(new Animated.Value(value ? 1 : 0)).current;
 
@@ -61,7 +64,7 @@ export const Checkbox = memo(({ value, onValueChange, label, color, disabled, te
     >
       <Animated.View style={[styles.box, { backgroundColor, borderColor, opacity: disabled ? 0.5 : 1 }]}>
         <Animated.View style={{ transform: [{ scale: checkScale }] }}>
-          <Icon name="check" size={16} color={colors.white} />
+          <Icon name="check" size={16} color={checkColor} />
         </Animated.View>
       </Animated.View>
       {label && (

package/src/atoms/Fab.tsx

@@ -55,7 +55,7 @@ export const Fab = memo(
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
       >
-        {icon ?? <Icon name={iconName} size={size * 0.5} color={colors.white} />}
+        {icon ?? <Icon name={iconName} size={size * 0.5} color={colors.onPrimary} />}
       </PressableScale>
     );
   }

package/src/atoms/Image.tsx

@@ -40,9 +40,9 @@ export interface ImageProps {
 }
 
 const useStyles = createStyles((theme) => ({
-  container: { overflow: 'hidden', backgroundColor: theme.colors.border + '30' },
+  container: { overflow: 'hidden', backgroundColor: theme.colors.skeleton },
   overlay: { alignItems: 'center', justifyContent: 'center' },
-  fallback: { flex: 1, backgroundColor: theme.colors.border + '30' },
+  fallback: { flex: 1, backgroundColor: theme.colors.skeleton },
 }));
 
 function sourceUri(source: ImageSourcePropType): string | undefined {

package/src/atoms/Input.tsx

@@ -37,7 +37,7 @@ const useStyles = createStyles((theme) => ({
     fontWeight: theme.tokens.fontWeight.medium,
     color: theme.colors.text,
   },
-  required: { color: theme.colors.error },
+  required: { color: theme.colors.errorText },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -55,7 +55,7 @@ const useStyles = createStyles((theme) => ({
   },
   leftIcon: { marginLeft: theme.tokens.spacing.lg, marginRight: -theme.tokens.spacing.xs },
   rightIcon: { padding: theme.tokens.spacing.sm + 2, marginRight: theme.tokens.spacing.xs },
-  errorText: { marginTop: theme.tokens.spacing.xs, fontSize: theme.tokens.fontSize.sm, color: theme.colors.error },
+  errorText: { marginTop: theme.tokens.spacing.xs, fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },
 }));
 
 /**

package/src/atoms/PressableScale.tsx

@@ -1,12 +1,22 @@
 import React, { memo, useRef } from 'react';
-import { Animated, Pressable, type PressableProps, type GestureResponderEvent } from 'react-native';
+import {
+  Animated,
+  Pressable,
+  type GestureResponderEvent,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 
-export interface PressableScaleProps extends PressableProps {
+export interface PressableScaleProps extends Omit<PressableProps, 'style'> {
   /** Escala objetivo al presionar. @default 0.96 */
   scaleTo?: number;
+  style?: StyleProp<ViewStyle>;
   children: React.ReactNode;
 }
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 /**
  * PressableScale
  * Feedback táctil de "achicarse" al presionar, con Animated.spring de RN
@@ -37,15 +47,15 @@ export const PressableScale = memo(
     };
 
     return (
-      <Pressable
+      <AnimatedPressable
         {...props}
         disabled={disabled}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
-        style={style}
+        style={[style, { transform: [{ scale }] }]}
       >
-        <Animated.View style={{ transform: [{ scale }] }}>{children}</Animated.View>
-      </Pressable>
+        {children}
+      </AnimatedPressable>
     );
   }
 );

package/src/atoms/Skeleton.tsx

@@ -0,0 +1,114 @@
+import React, { memo, useEffect, useRef } from 'react';
+import {
+  Animated,
+  Easing,
+  View,
+  type DimensionValue,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useTheme } from '../theme/UIProvider';
+
+export type SkeletonVariant = 'rect' | 'text' | 'circle';
+
+export interface SkeletonProps {
+  /** @default '100%' ('circle' lo usa también como diámetro) */
+  width?: DimensionValue;
+  /** @default 16 ('text' usa el alto de línea; 'circle', el ancho) */
+  height?: DimensionValue;
+  /** @default 'rect' */
+  variant?: SkeletonVariant;
+  /** Override del radius del theme. */
+  radius?: number;
+  /** Líneas apiladas, sólo para variant="text". @default 1 */
+  lines?: number;
+  /** Ancho de la última línea, para que el párrafo no termine en bloque. @default '60%' */
+  lastLineWidth?: DimensionValue;
+  /** @default true */
+  animated?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  block: { backgroundColor: theme.colors.skeleton },
+  lines: { gap: theme.tokens.spacing.sm },
+}));
+
+/**
+ * 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.
+ */
+export const Skeleton = memo(
+  ({
+    width = '100%',
+    height = 16,
+    variant = 'rect',
+    radius,
+    lines = 1,
+    lastLineWidth = '60%',
+    animated = true,
+    style,
+    testID,
+  }: SkeletonProps) => {
+    const theme = useTheme();
+    const styles = useStyles();
+    const pulse = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      if (!animated) return;
+      const loop = Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulse, {
+            toValue: 1,
+            duration: 700,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.quad),
+          }),
+          Animated.timing(pulse, {
+            toValue: 0,
+            duration: 700,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.quad),
+          }),
+        ])
+      );
+      loop.start();
+      return () => loop.stop();
+    }, [animated, pulse]);
+
+    const isCircle = variant === 'circle';
+    const isText = variant === 'text';
+    const opacity = animated ? 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> => [
+      styles.block,
+      { width: barWidth, height: resolvedHeight, borderRadius: resolvedRadius, opacity },
+    ];
+
+    const a11y = { accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants' as const };
+
+    if (isText && lines > 1) {
+      return (
+        <View style={[styles.lines, style]} testID={testID} {...a11y}>
+          {Array.from({ length: lines }, (_, i) => (
+            <Animated.View
+              key={i}
+              testID={testID && `${testID}-${i}`}
+              style={barStyle(i === lines - 1 ? lastLineWidth : width)}
+            />
+          ))}
+        </View>
+      );
+    }
+
+    return <Animated.View style={[barStyle(width), style]} testID={testID} {...a11y} />;
+  }
+);
+Skeleton.displayName = 'Skeleton';

package/src/atoms/Transition.tsx

@@ -0,0 +1,189 @@
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../theme/UIProvider';
+
+export type TransitionPreset =
+  | 'fade'
+  | 'scale'
+  | 'pop'
+  | 'slide-up'
+  | 'slide-down'
+  | 'slide-left'
+  | 'slide-right';
+
+export interface TransitionProps {
+  children: React.ReactNode;
+  /** Entra en true, sale (y desmonta) en false. @default true */
+  visible?: boolean;
+  /** Uno o varios: 'fade scale' combina opacidad y escala. @default 'fade' */
+  preset?: TransitionPreset | TransitionPreset[];
+  /** ms del timing. @default tokens.duration.base */
+  duration?: number;
+  /** ms antes de arrancar. Un índice por delay escalona una lista. @default 0 */
+  delay?: number;
+  /** Píxeles que recorren los presets de slide. @default 24 */
+  distance?: number;
+  /** Spring en vez de timing (implícito en 'pop'). */
+  spring?: boolean;
+  /** Anima también el primer render. En false arranca ya presente. @default true */
+  appear?: boolean;
+  /** Deja el nodo montado al salir, sólo lo esconde. @default false */
+  keepMounted?: boolean;
+  /**
+   * Progreso 0→1 manejado desde afuera. Con esto el Transition sólo interpola:
+   * quien lo pasa decide cuándo y cómo avanza (un PanResponder, por ejemplo).
+   */
+  value?: Animated.Value;
+  onEntered?: () => void;
+  onExited?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const SCALE_FROM: Record<'scale' | 'pop', number> = { scale: 0.92, pop: 0.8 };
+
+/**
+ * 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;
+}
+
+/**
+ * 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.
+ *
+ * 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.
+ */
+export const Transition = memo(
+  ({
+    children,
+    visible = true,
+    preset = 'fade',
+    duration,
+    delay = 0,
+    distance = 24,
+    spring,
+    appear = true,
+    keepMounted = false,
+    value,
+    onEntered,
+    onExited,
+    style,
+    testID,
+  }: TransitionProps) => {
+    const theme = useTheme();
+    const reduceMotion = useReduceMotion();
+    const internal = useRef(new Animated.Value(visible && !appear ? 1 : 0)).current;
+    const progress = value ?? internal;
+    const driven = value === undefined;
+
+    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.
+    const callbacks = useRef({ onEntered, onExited });
+    useEffect(() => {
+      callbacks.current = { onEntered, onExited };
+    });
+
+    const presetKey = Array.isArray(preset) ? preset.join(' ') : preset;
+    const presets = useMemo(() => presetKey.split(' ') as TransitionPreset[], [presetKey]);
+
+    useEffect(() => {
+      if (visible) setMounted(true);
+    }, [visible]);
+
+    useEffect(() => {
+      if (!driven) return;
+      const toValue = visible ? 1 : 0;
+      const useSpring = spring ?? presets.includes('pop');
+
+      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.timing(progress, {
+              toValue,
+              delay,
+              duration: duration ?? theme.tokens.duration.base,
+              easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
+              useNativeDriver: true,
+            });
+
+      animation.start(({ finished }) => {
+        if (!finished) return;
+        if (visible) {
+          callbacks.current.onEntered?.();
+          return;
+        }
+        callbacks.current.onExited?.();
+        if (!keepMounted) setMounted(false);
+      });
+
+      return () => animation.stop();
+    }, [visible, driven, reduceMotion, spring, delay, duration, keepMounted, presets, progress, theme]);
+
+    const animatedStyle = useMemo(() => {
+      type Interpolated = Animated.AnimatedInterpolation<number>;
+      const transform: Array<{ scale: Interpolated } | { translateX: Interpolated } | { translateY: Interpolated }> = [];
+      let opacity: Animated.Value | undefined;
+
+      for (const item of presets) {
+        if (item === 'fade') {
+          opacity = progress;
+          continue;
+        }
+        if (item === 'scale' || item === 'pop') {
+          transform.push({
+            scale: progress.interpolate({ inputRange: [0, 1], outputRange: [SCALE_FROM[item], 1] }),
+          });
+          continue;
+        }
+        const vertical = item === 'slide-up' || item === 'slide-down';
+        const from = item === 'slide-up' || item === 'slide-left' ? distance : -distance;
+        const offset = progress.interpolate({ inputRange: [0, 1], outputRange: [from, 0] });
+        transform.push(vertical ? { translateY: offset } : { translateX: offset });
+      }
+
+      return { opacity, transform };
+    }, [presets, progress, distance]);
+
+    if (!mounted) return null;
+
+    return (
+      <Animated.View
+        testID={testID}
+        pointerEvents={visible ? undefined : 'none'}
+        style={[style, animatedStyle]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+);
+Transition.displayName = 'Transition';

package/src/atoms/index.ts

@@ -20,6 +20,10 @@ export { Image, prefetchImage } from './Image';
 export type { ImageProps } from './Image';
 export { Spinner } from './Spinner';
 export type { SpinnerProps, SpinnerVariant } from './Spinner';
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton';
+export { Transition, useReduceMotion } from './Transition';
+export type { TransitionProps, TransitionPreset } from './Transition';
 export { EmptyState } from './EmptyState';
 export type { EmptyStateProps } from './EmptyState';
 export { KeyValueRow } from './KeyValueRow';

package/src/molecules/AvatarHeader.tsx

@@ -22,12 +22,12 @@ const useStyles = createStyles((theme) => ({
     width: 80,
     height: 80,
     borderRadius: 40,
-    backgroundColor: theme.colors.primary + '20',
+    backgroundColor: theme.colors.primarySoft,
     justifyContent: 'center',
     alignItems: 'center',
     marginBottom: theme.tokens.spacing.md,
   },
-  initials: { fontSize: theme.tokens.fontSize.xxl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.primary },
+  initials: { fontSize: theme.tokens.fontSize.xxl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.primaryText },
   title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, textAlign: 'center', color: theme.colors.text, marginBottom: theme.tokens.spacing.xs },
   subtitle: { fontSize: theme.tokens.fontSize.md, color: theme.colors.textLight },
 }));