orn-ui 0.1.1 → 0.2.1

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/OptionCard.tsx

@@ -1,22 +1,29 @@
 import React, { memo } from 'react';
-import { Text, TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
+import { PressableScale } from '../atoms/PressableScale';
 import type { IconName } from '../icons/types';
 
 export interface OptionCardProps {
   label: string;
-  iconName: IconName;
+  /** Línea secundaria: el detalle que decide la elección ("llega en 3 días"). */
+  description?: string;
+  iconName?: IconName;
   isSelected: boolean;
   onPress: () => void;
-  /** 'vertical': ícono arriba, texto abajo centrado. 'horizontal': ícono y texto en fila. */
+  disabled?: boolean;
+  /** 'vertical': ícono arriba, texto abajo centrado. 'horizontal': en fila. @default 'horizontal' */
   layout?: 'vertical' | 'horizontal';
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 const useStyles = createStyles((theme) => ({
   card: {
+    // Las tarjetas se reparten la fila que las contenga, sean dos o cinco.
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: theme.colors.surface,
@@ -25,8 +32,8 @@ const useStyles = createStyles((theme) => ({
     borderColor: theme.colors.border,
     ...theme.tokens.shadow.sm,
   },
-  cardHorizontal: { flex: 1, flexDirection: 'row', padding: theme.tokens.spacing.md - 2, gap: theme.tokens.spacing.sm },
-  cardVertical: { width: '31%', padding: theme.tokens.spacing.sm, gap: 5, minHeight: 100 },
+  cardHorizontal: { flexDirection: 'row', padding: theme.tokens.spacing.md - 2, gap: theme.tokens.spacing.sm },
+  cardVertical: { padding: theme.tokens.spacing.md - 2, gap: 6, minHeight: 100 },
   cardSelected: {
     borderColor: theme.colors.primary,
     backgroundColor: theme.colors.primarySoft,
@@ -34,48 +41,78 @@ const useStyles = createStyles((theme) => ({
     elevation: 0,
     shadowOpacity: 0,
   },
+  cardDisabled: { opacity: 0.5 },
+  text: { flexShrink: 1 },
+  textVertical: { alignItems: 'center' },
   label: { color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },
   labelVertical: { fontSize: theme.tokens.fontSize.xs, textAlign: 'center' },
   labelSelected: { color: theme.colors.primaryText },
+  description: { fontSize: theme.tokens.fontSize.xs, color: theme.colors.textLight, marginTop: 2 },
+  descriptionVertical: { textAlign: 'center' },
 }));
 
 /**
  * OptionCard
- * Card con ícono+label que resalta con borde/fondo primary cuando
- * `isSelected`. Para elegir entre opciones excluyentes (forma de pago, tipo
- * de documento, etc).
+ * Opción excluyente con ícono y label que resalta cuando `isSelected`. Es un
+ * radio con cara de tarjeta, así que se anuncia como tal: envolver el grupo en
+ * una View con `accessibilityRole="radiogroup"` para que el lector de pantalla
+ * lea "1 de 3".
  */
 export const OptionCard = memo(
-  ({ label, iconName, isSelected, onPress, layout = 'horizontal', style }: OptionCardProps) => {
+  ({
+    label,
+    description,
+    iconName,
+    isSelected,
+    onPress,
+    disabled = false,
+    layout = 'horizontal',
+    style,
+    testID,
+  }: OptionCardProps) => {
     const colors = useColors();
     const styles = useStyles();
     const allowFontScaling = useAllowFontScaling();
+    const isVertical = layout === 'vertical';
 
+    // Feedback por transform y no por opacity: con elevation, animar la opacity
+    // dispara un bug de Android que redibuja la sombra como un borde oscuro.
     return (
-      <TouchableOpacity
-        // activeOpacity=1: esta tarjeta tiene elevation (sombra Android); animar su
-        // propia opacity en el press dispara un bug de Android que redibuja la
-        // sombra como un borde oscuro pegado al borde del componente.
-        activeOpacity={1}
+      <PressableScale
         style={[
           styles.card,
-          layout === 'vertical' ? styles.cardVertical : styles.cardHorizontal,
+          isVertical ? styles.cardVertical : styles.cardHorizontal,
           isSelected && styles.cardSelected,
+          disabled && styles.cardDisabled,
           style,
         ]}
         onPress={onPress}
-        accessibilityRole="button"
-        accessibilityState={{ selected: isSelected }}
+        disabled={disabled}
+        accessibilityRole="radio"
+        accessibilityState={{ selected: isSelected, checked: isSelected, disabled }}
         accessibilityLabel={label}
+        accessibilityHint={description}
+        testID={testID}
       >
-        <Icon name={iconName} size={24} color={isSelected ? colors.primary : colors.textLight} />
-        <Text
-          allowFontScaling={allowFontScaling}
-          style={[styles.label, layout === 'vertical' && styles.labelVertical, isSelected && styles.labelSelected]}
-        >
-          {label}
-        </Text>
-      </TouchableOpacity>
+        {!!iconName && <Icon name={iconName} size={24} color={isSelected ? colors.primary : colors.textLight} />}
+
+        <View style={[styles.text, isVertical && styles.textVertical]}>
+          <Text
+            allowFontScaling={allowFontScaling}
+            style={[styles.label, isVertical && styles.labelVertical, isSelected && styles.labelSelected]}
+          >
+            {label}
+          </Text>
+          {!!description && (
+            <Text
+              allowFontScaling={allowFontScaling}
+              style={[styles.description, isVertical && styles.descriptionVertical]}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+      </PressableScale>
     );
   }
 );

package/src/molecules/SegmentedControl.tsx

@@ -0,0 +1,84 @@
+import React, { memo } from 'react';
+import { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling } from '../theme/UIProvider';
+
+export interface SegmentedControlOption<T extends string = string> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps<T extends string = string> {
+  options: SegmentedControlOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  track: {
+    flexDirection: 'row',
+    backgroundColor: theme.colors.inputBackground,
+    borderRadius: theme.tokens.radius.md,
+    padding: 3,
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: theme.tokens.spacing.sm,
+    borderRadius: theme.tokens.radius.sm,
+    alignItems: 'center',
+  },
+  segmentActive: { backgroundColor: theme.colors.surface, ...theme.tokens.shadow.sm },
+  segmentDisabled: { opacity: 0.5 },
+  label: { fontSize: theme.tokens.fontSize.sm, fontWeight: theme.tokens.fontWeight.medium, color: theme.colors.textLight },
+  labelActive: { color: theme.colors.primaryText, fontWeight: theme.tokens.fontWeight.semibold },
+}));
+
+/**
+ * SegmentedControl
+ * Elige una opción entre pocas, todas visibles. No conoce ningún estado
+ * global: recibe `value` y avisa por `onChange`.
+ */
+function SegmentedControlInner<T extends string>({
+  options,
+  value,
+  onChange,
+  disabled = false,
+  style,
+  testID,
+}: SegmentedControlProps<T>) {
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+
+  return (
+    <View style={[styles.track, style]} accessibilityRole="radiogroup" testID={testID}>
+      {options.map((option) => {
+        const active = option.value === value;
+        const isDisabled = disabled || !!option.disabled;
+        return (
+          <TouchableOpacity
+            key={option.value}
+            style={[styles.segment, active && styles.segmentActive, isDisabled && styles.segmentDisabled]}
+            onPress={() => onChange(option.value)}
+            disabled={isDisabled}
+            accessibilityRole="radio"
+            accessibilityState={{ selected: active, checked: active, disabled: isDisabled }}
+            accessibilityLabel={option.label}
+            testID={testID && `${testID}-${option.value}`}
+          >
+            <Text allowFontScaling={allowFontScaling} style={[styles.label, active && styles.labelActive]}>
+              {option.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+// memo() pierde los genéricos al envolver: el cast los devuelve para que
+// `value` y `onChange` sigan atados al union de `options`.
+export const SegmentedControl = memo(SegmentedControlInner) as typeof SegmentedControlInner;