orn-ui 0.1.0

package/src/atoms/Image.tsx

@@ -0,0 +1,137 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import {
+  Image as RNImage,
+  Platform,
+  StyleSheet,
+  View,
+  type ImageErrorEventData,
+  type ImageResizeMode,
+  type ImageSourcePropType,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { Spinner } from './Spinner';
+
+export interface ImageProps {
+  source: ImageSourcePropType;
+  width?: number;
+  height?: number;
+  /** @default 'cover' */
+  resizeMode?: ImageResizeMode;
+  /** Radio de las esquinas, mismo patrón que Avatar/Card. @default 0 */
+  radius?: number;
+  /** Qué mostrar mientras carga. `false` para no mostrar nada. @default true (spinner chico) */
+  loading?: React.ReactNode | boolean;
+  /** Qué mostrar si la carga falla. @default un placeholder gris, sin contenido */
+  fallback?: React.ReactNode;
+  /**
+   * 'high' dispara Image.prefetch() al montar, antes de que <Image> arranque
+   * su propio ciclo de carga — pensado para la imagen above-the-fold de una
+   * pantalla (la primera que el usuario ve). Sin costo si ya está en caché.
+   * @default 'normal'
+   */
+  priority?: 'low' | 'normal' | 'high';
+  style?: StyleProp<ViewStyle>;
+  onLoadEnd?: () => void;
+  onError?: (error: NativeSyntheticEvent<ImageErrorEventData>) => void;
+  testID?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: { overflow: 'hidden', backgroundColor: theme.colors.border + '30' },
+  overlay: { alignItems: 'center', justifyContent: 'center' },
+  fallback: { flex: 1, backgroundColor: theme.colors.border + '30' },
+}));
+
+function sourceUri(source: ImageSourcePropType): string | undefined {
+  return typeof source === 'object' && source !== null && 'uri' in source ? source.uri : undefined;
+}
+
+/**
+ * Image
+ * Wrapper cero-dependencias sobre <Image> de RN: agrega estado de carga y
+ * error (con los mismos placeholders que el resto de la librería), y expone
+ * `priority="high"` para adelantar la descarga vía Image.prefetch(). El
+ * cache real (disco/memoria) lo maneja el motor de imágenes nativo de RN —
+ * esto no lo reimplementa, solo no lo deja apagado por accidente: en iOS
+ * fuerza `cache="force-cache"` (usa el disco aunque el header HTTP no lo
+ * pida); en Android el cache de disco de la imagen nativa ya está siempre
+ * activo, no hay knob equivalente que tocar.
+ */
+export const Image = memo(
+  ({
+    source,
+    width,
+    height,
+    resizeMode = 'cover',
+    radius = 0,
+    loading = true,
+    fallback,
+    priority = 'normal',
+    style,
+    onLoadEnd,
+    onError,
+    testID,
+  }: ImageProps) => {
+    const styles = useStyles();
+    const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading');
+    const uri = sourceUri(source);
+
+    useEffect(() => {
+      // Resetea el estado si cambia la imagen (misma instancia de Image,
+      // source distinto: p.ej. avatar de un usuario a otro en la misma fila).
+      setStatus('loading');
+    }, [uri ?? source]);
+
+    useEffect(() => {
+      if (priority === 'high' && uri) {
+        RNImage.prefetch(uri).catch(() => {});
+      }
+    }, [priority, uri]);
+
+    const handleError = useCallback(
+      (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+        setStatus('error');
+        onError?.(e);
+      },
+      [onError]
+    );
+
+    const handleLoadEnd = useCallback(() => {
+      setStatus('loaded');
+      onLoadEnd?.();
+    }, [onLoadEnd]);
+
+    return (
+      <View style={[styles.container, { width, height, borderRadius: radius }, style]} testID={testID}>
+        {status !== 'error' && (
+          <RNImage
+            source={source}
+            resizeMode={resizeMode}
+            style={StyleSheet.absoluteFill}
+            fadeDuration={Platform.OS === 'android' ? 150 : undefined}
+            {...(Platform.OS === 'ios' ? { cache: 'force-cache' as const } : null)}
+            onLoadEnd={handleLoadEnd}
+            onError={handleError}
+          />
+        )}
+        {status === 'loading' && loading !== false && (
+          <View style={[StyleSheet.absoluteFill, styles.overlay]}>
+            {loading === true ? <Spinner size="small" fullscreen={false} /> : loading}
+          </View>
+        )}
+        {status === 'error' && (fallback ?? <View style={styles.fallback} />)}
+      </View>
+    );
+  }
+);
+Image.displayName = 'Image';
+
+/**
+ * Precarga una URL antes de montar el componente (p.ej. al recibir la
+ * respuesta de un listado, antes de navegar al detalle). Re-exporta
+ * Image.prefetch de RN — no hay nada zero-dep que agregarle encima.
+ */
+export const prefetchImage = RNImage.prefetch;

package/src/atoms/Input.tsx

@@ -0,0 +1,166 @@
+import React, { memo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
+import type { IconName } from '../icons/types';
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  label?: string;
+  /** Muestra un asterisco junto al label. Puramente visual, no valida nada. */
+  required?: boolean;
+  error?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  style?: TextInputProps['style'];
+  leftIconName?: IconName;
+  rightIconName?: IconName;
+  onRightIconPress?: () => void;
+  isPassword?: boolean;
+  isLoading?: boolean;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: { marginBottom: theme.tokens.spacing.lg, width: '100%' },
+  label: {
+    marginBottom: theme.tokens.spacing.sm,
+    fontSize: theme.tokens.fontSize.md,
+    fontWeight: theme.tokens.fontWeight.medium,
+    color: theme.colors.text,
+  },
+  required: { color: theme.colors.error },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: theme.colors.inputBackground,
+    borderRadius: theme.tokens.radius.lg,
+    borderWidth: 2,
+    minHeight: 50,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: theme.tokens.spacing.md,
+    paddingHorizontal: theme.tokens.spacing.lg,
+    fontSize: theme.tokens.fontSize.lg,
+    color: theme.colors.text,
+  },
+  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 },
+}));
+
+/**
+ * Input
+ * El borde anima color entre border/primary/error con Animated (no
+ * useNativeDriver: los navegadores de color en RN sin Fabric solo son
+ * confiables en el hilo de JS; el costo es despreciable, se anima un borde).
+ */
+export const Input = memo(
+  ({
+    label,
+    required = false,
+    error,
+    containerStyle,
+    leftIconName,
+    rightIconName,
+    onRightIconPress,
+    isPassword = false,
+    isLoading = false,
+    style,
+    onFocus,
+    onBlur,
+    testID,
+    ...props
+  }: InputProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const allowFontScaling = useAllowFontScaling();
+    const [isFocused, setIsFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const focusProgress = useRef(new Animated.Value(0)).current;
+
+    const handleFocus: TextInputProps['onFocus'] = (e) => {
+      setIsFocused(true);
+      Animated.timing(focusProgress, { toValue: 1, duration: 200, useNativeDriver: false }).start();
+      onFocus?.(e);
+    };
+
+    const handleBlur: TextInputProps['onBlur'] = (e) => {
+      setIsFocused(false);
+      Animated.timing(focusProgress, { toValue: 0, duration: 200, useNativeDriver: false }).start();
+      onBlur?.(e);
+    };
+
+    const borderColor = error
+      ? colors.error
+      : focusProgress.interpolate({ outputRange: [colors.border, colors.primary], inputRange: [0, 1] });
+
+    return (
+      <View style={[styles.container, containerStyle]} testID={testID}>
+        {label && (
+          <Text allowFontScaling={allowFontScaling} style={styles.label}>
+            {label}
+            {required && <Text style={styles.required}> *</Text>}
+          </Text>
+        )}
+
+        <Animated.View style={[styles.inputWrapper, { borderColor }]}>
+          {leftIconName && <Icon name={leftIconName} size={20} color={colors.textLight} style={styles.leftIcon} />}
+
+          <TextInput
+            style={[styles.input, style]}
+            placeholderTextColor={colors.textLight}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            secureTextEntry={isPassword && !showPassword}
+            allowFontScaling={allowFontScaling}
+            textAlignVertical="center"
+            accessibilityLabel={label ?? props.placeholder}
+            {...props}
+          />
+
+          {isLoading ? (
+            <View style={styles.rightIcon}>
+              <ActivityIndicator size="small" color={colors.primary} />
+            </View>
+          ) : isPassword ? (
+            <TouchableOpacity
+              onPress={() => setShowPassword((v) => !v)}
+              style={styles.rightIcon}
+              accessibilityRole="button"
+              accessibilityLabel={showPassword ? 'Hide password' : 'Show password'}
+            >
+              <Icon name={showPassword ? 'eye-off' : 'eye'} size={20} color={colors.textLight} />
+            </TouchableOpacity>
+          ) : rightIconName ? (
+            <TouchableOpacity
+              onPress={onRightIconPress}
+              style={styles.rightIcon}
+              disabled={!onRightIconPress}
+              accessibilityRole="button"
+              accessibilityLabel="Clear"
+            >
+              <Icon name={rightIconName} size={20} color={colors.textLight} />
+            </TouchableOpacity>
+          ) : null}
+        </Animated.View>
+
+        {!!error && (
+          <Text allowFontScaling={allowFontScaling} style={styles.errorText}>
+            {error}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+Input.displayName = 'Input';

package/src/atoms/KeyValueRow.tsx

@@ -0,0 +1,48 @@
+import React, { memo } from 'react';
+import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling } from '../theme/UIProvider';
+
+export interface KeyValueRowProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  valueStyle?: StyleProp<TextStyle>;
+}
+
+const useStyles = createStyles((theme) => ({
+  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  label: { fontSize: theme.tokens.fontSize.sm, fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.textLight },
+  value: { fontSize: theme.tokens.fontSize.sm, textAlign: 'right', color: theme.colors.text },
+}));
+
+/**
+ * KeyValueRow
+ * Fila label (izquierda) / value (derecha). Si label/value son string o
+ * number, se renderizan con el estilo default; si ya vienen envueltos en un
+ * componente de texto propio, se respetan tal cual.
+ */
+export const KeyValueRow = memo(({ label, value, style, labelStyle, valueStyle }: KeyValueRowProps) => {
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+  return (
+    <View style={[styles.row, style]}>
+      {typeof label === 'string' || typeof label === 'number' ? (
+        <Text allowFontScaling={allowFontScaling} style={[styles.label, labelStyle]}>
+          {label}
+        </Text>
+      ) : (
+        label
+      )}
+      {typeof value === 'string' || typeof value === 'number' ? (
+        <Text allowFontScaling={allowFontScaling} style={[styles.value, valueStyle]}>
+          {value}
+        </Text>
+      ) : (
+        value
+      )}
+    </View>
+  );
+});
+KeyValueRow.displayName = 'KeyValueRow';

package/src/atoms/PressableScale.tsx

@@ -0,0 +1,52 @@
+import React, { memo, useRef } from 'react';
+import { Animated, Pressable, type PressableProps, type GestureResponderEvent } from 'react-native';
+
+export interface PressableScaleProps extends PressableProps {
+  /** Escala objetivo al presionar. @default 0.96 */
+  scaleTo?: number;
+  children: React.ReactNode;
+}
+
+/**
+ * PressableScale
+ * Feedback táctil de "achicarse" al presionar, con Animated.spring de RN
+ * (useNativeDriver: true — corre en el hilo nativo, sin coste de JS por frame).
+ * No depende de reanimated: la librería entera es cero-dependencias.
+ */
+export const PressableScale = memo(
+  ({ scaleTo = 0.96, style, children, onPressIn, onPressOut, disabled, ...props }: PressableScaleProps) => {
+    const scale = useRef(new Animated.Value(1)).current;
+
+    const animateTo = (value: number) => {
+      Animated.spring(scale, {
+        toValue: value,
+        useNativeDriver: true,
+        speed: 50,
+        bounciness: 6,
+      }).start();
+    };
+
+    const handlePressIn = (e: GestureResponderEvent) => {
+      if (!disabled) animateTo(scaleTo);
+      onPressIn?.(e);
+    };
+
+    const handlePressOut = (e: GestureResponderEvent) => {
+      if (!disabled) animateTo(1);
+      onPressOut?.(e);
+    };
+
+    return (
+      <Pressable
+        {...props}
+        disabled={disabled}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        style={style}
+      >
+        <Animated.View style={{ transform: [{ scale }] }}>{children}</Animated.View>
+      </Pressable>
+    );
+  }
+);
+PressableScale.displayName = 'PressableScale';

package/src/atoms/Spinner.tsx

@@ -0,0 +1,127 @@
+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';
+
+export type SpinnerVariant = 'native' | 'dots' | 'ring';
+
+export interface SpinnerProps {
+  size?: 'small' | 'large';
+  color?: string;
+  text?: string;
+  /** @default true. En false, no ocupa flex:1 (útil inline, dentro de un botón/fila). */
+  fullscreen?: boolean;
+  /**
+   * 'native' usa el ActivityIndicator del sistema; 'dots' y 'ring' son
+   * indicadores propios, iguales en iOS y Android.
+   * @default 'native'
+   */
+  variant?: SpinnerVariant;
+  /** Indicador totalmente propio. Gana sobre `variant`. */
+  indicator?: React.ReactNode;
+  testID?: string;
+}
+
+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 },
+  dots: { flexDirection: 'row', gap: theme.tokens.spacing.sm },
+}));
+
+/** Tres puntos que laten en secuencia. Animated + useNativeDriver: corre en el hilo nativo. */
+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];
+
+  useEffect(() => {
+    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),
+        ])
+      )
+    );
+    animations.forEach((a) => a.start());
+    // Sin stop() los loops siguen corriendo tras desmontar y mantienen vivo
+    // el árbol de Animated.
+    return () => animations.forEach((a) => a.stop());
+  }, []);
+
+  return (
+    <View style={{ flexDirection: 'row', gap: dotSize * 0.6 }}>
+      {dots.map((dot, i) => (
+        <Animated.View
+          key={i}
+          style={{
+            width: dotSize,
+            height: dotSize,
+            borderRadius: dotSize / 2,
+            backgroundColor: color,
+            opacity: dot.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }),
+            transform: [{ scale: dot.interpolate({ inputRange: [0, 1], outputRange: [0.75, 1] }) }],
+          }}
+        />
+      ))}
+    </View>
+  );
+});
+DotsIndicator.displayName = 'DotsIndicator';
+
+/** Anillo que gira: un borde con un solo lado coloreado. */
+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 })
+    );
+    animation.start();
+    return () => animation.stop();
+  }, []);
+
+  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'] }) }],
+      }}
+    />
+  );
+});
+RingIndicator.displayName = 'RingIndicator';
+
+export const Spinner = memo(
+  ({ size = 'large', color, text, fullscreen = true, variant = 'native', indicator, testID }: SpinnerProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const allowFontScaling = useAllowFontScaling();
+    const resolvedColor = color || colors.primary;
+    const scale = size === 'small' ? 8 : 12;
+
+    const renderIndicator = () => {
+      if (indicator) return indicator;
+      if (variant === 'dots') return <DotsIndicator color={resolvedColor} dotSize={scale} />;
+      if (variant === 'ring') return <RingIndicator color={resolvedColor} diameter={scale * 3} />;
+      return <ActivityIndicator size={size} color={resolvedColor} />;
+    };
+
+    return (
+      <View style={[styles.container, fullscreen && { flex: 1 }]} testID={testID}>
+        {renderIndicator()}
+        {text && (
+          <Text allowFontScaling={allowFontScaling} style={styles.text}>
+            {text}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+Spinner.displayName = 'Spinner';

package/src/atoms/Text.tsx

@@ -0,0 +1,58 @@
+import React, { memo } from 'react';
+import { Text as RNText, type StyleProp, type TextProps, type TextStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+
+export interface TypographyProps extends TextProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  color?: string;
+  align?: 'left' | 'center' | 'right';
+}
+
+const useStyles = createStyles((theme) => ({
+  title: {
+    fontSize: theme.tokens.fontSize.xxl,
+    fontWeight: theme.tokens.fontWeight.bold,
+    letterSpacing: -0.5,
+    color: theme.colors.text,
+  },
+  subtitle: {
+    fontSize: theme.tokens.fontSize.lg,
+    fontWeight: theme.tokens.fontWeight.medium,
+    color: theme.colors.text,
+  },
+  body: {
+    fontSize: theme.tokens.fontSize.md,
+    lineHeight: theme.tokens.lineHeight.md,
+    color: theme.colors.text,
+  },
+  caption: {
+    fontSize: theme.tokens.fontSize.sm,
+    color: theme.colors.textLight,
+  },
+}));
+
+function makeVariant(variant: keyof ReturnType<typeof useStyles>, defaultColor: 'text' | 'textLight') {
+  const Component = memo(({ children, style, color, align = 'left', ...props }: TypographyProps) => {
+    const styles = useStyles();
+    const colors = useColors();
+    const allowFontScaling = useAllowFontScaling();
+    return (
+      <RNText
+        allowFontScaling={allowFontScaling}
+        style={[styles[variant], { color: color || colors[defaultColor], textAlign: align }, style]}
+        {...props}
+      >
+        {children}
+      </RNText>
+    );
+  });
+  Component.displayName = variant;
+  return Component;
+}
+
+export const Title = makeVariant('title', 'text');
+export const Subtitle = makeVariant('subtitle', 'text');
+export const Body = makeVariant('body', 'text');
+export const Caption = makeVariant('caption', 'textLight');

package/src/atoms/index.ts

@@ -0,0 +1,30 @@
+export { Title, Subtitle, Body, Caption } from './Text';
+export type { TypographyProps } from './Text';
+export { Button } from './Button';
+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 { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';
+export { Card } from './Card';
+export type { CardProps } from './Card';
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { Image, prefetchImage } from './Image';
+export type { ImageProps } from './Image';
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerVariant } from './Spinner';
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
+export { KeyValueRow } from './KeyValueRow';
+export type { KeyValueRowProps } from './KeyValueRow';
+export { Fab } from './Fab';
+export type { FabProps } from './Fab';
+export { PressableScale } from './PressableScale';
+export type { PressableScaleProps } from './PressableScale';

package/src/icons/Icon.tsx

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useColors, useIcons } from '../theme/UIProvider';
+import type { IconName } from './types';
+
+export interface IconProps {
+  name: IconName;
+  size?: number;
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Icon
+ * Resuelve el glifo vía el renderer activo (UIProvider.icons, default zero-dep
+ * si no se configuró ninguno). Uso interno de la librería — los componentes
+ * públicos exponen `icon?: ReactNode` además de esto, para que el consumidor
+ * pueda inyectar cualquier ícono sin pasar por el sistema de nombres.
+ */
+export const Icon = memo(({ name, size = 20, color, style }: IconProps) => {
+  const colors = useColors();
+  const render = useIcons();
+  const glyph = render(name, { size, color: color ?? colors.text });
+  if (!style) return <>{glyph}</>;
+  return <View style={style}>{glyph}</View>;
+});
+Icon.displayName = 'Icon';