orn-ui 0.1.0

package/registry/toast.json

@@ -0,0 +1,18 @@
+{
+  "name": "Toast",
+  "slug": "toast",
+  "type": "component",
+  "category": "organisms",
+  "exportedNames": [
+    "Toast"
+  ],
+  "files": [
+    {
+      "path": "organisms/Toast.tsx",
+      "content": "import React, { memo, useEffect, useRef } from 'react';\nimport { Animated, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport type ToastVariant = 'success' | 'error' | 'warning' | 'info';\n\nexport interface ToastProps {\n  title: string;\n  message?: string;\n  variant?: ToastVariant;\n  /** Se dispara al tocar el toast (además de cerrarlo). */\n  onPress?: () => void;\n  onDismiss?: () => void;\n  /** Oculta la X de cerrar. El toast igual se auto-descarta por tiempo. */\n  hideCloseButton?: boolean;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst ICON_BY_VARIANT: Record<ToastVariant, IconName> = {\n  success: 'check',\n  error: 'alert',\n  warning: 'warning',\n  info: 'info',\n};\n\nconst useStyles = createStyles((theme) => ({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.tokens.spacing.md,\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    paddingVertical: theme.tokens.spacing.md,\n    paddingHorizontal: theme.tokens.spacing.lg,\n    ...theme.tokens.shadow.lg,\n  },\n  accent: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: 4,\n    borderTopLeftRadius: theme.tokens.radius.lg,\n    borderBottomLeftRadius: theme.tokens.radius.lg,\n  },\n  text: { flex: 1, gap: 2 },\n  title: {\n    fontSize: theme.tokens.fontSize.md,\n    fontWeight: theme.tokens.fontWeight.semibold,\n    color: theme.colors.text,\n  },\n  message: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight, lineHeight: theme.tokens.lineHeight.sm },\n}));\n\n/**\n * Toast\n * Notificación efímera. Normalmente no se usa directo: `ToastProvider` +\n * `useToast()` la montan y la descartan por vos. Se expone igual por si\n * querés colocarla vos mismo dentro de una pantalla concreta.\n */\nexport const Toast = memo(\n  ({ title, message, variant = 'info', onPress, onDismiss, hideCloseButton, style, testID }: ToastProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n\n    const accentColor: Record<ToastVariant, string> = {\n      success: colors.success,\n      error: colors.error,\n      warning: colors.warning,\n      info: colors.secondary,\n    };\n\n    const body = (\n      <View style={[styles.container, style]} testID={testID} accessibilityRole=\"alert\">\n        <View style={[styles.accent, { backgroundColor: accentColor[variant] }]} />\n        <Icon name={ICON_BY_VARIANT[variant]} size={22} color={accentColor[variant]} />\n        <View style={styles.text}>\n          <Text allowFontScaling={allowFontScaling} style={styles.title}>\n            {title}\n          </Text>\n          {!!message && (\n            <Text allowFontScaling={allowFontScaling} style={styles.message}>\n              {message}\n            </Text>\n          )}\n        </View>\n        {!hideCloseButton && !!onDismiss && (\n          <Pressable onPress={onDismiss} accessibilityRole=\"button\" accessibilityLabel=\"Dismiss\" hitSlop={8}>\n            <Icon name=\"close\" size={18} color={colors.textLight} />\n          </Pressable>\n        )}\n      </View>\n    );\n\n    if (!onPress) return body;\n\n    return (\n      <Pressable onPress={onPress} accessibilityRole=\"button\" accessibilityLabel={title}>\n        {body}\n      </Pressable>\n    );\n  }\n);\nToast.displayName = 'Toast';\n\n/** Envuelve un Toast con su animación de entrada/salida. Uso interno del provider. */\nexport const AnimatedToast = memo(\n  ({ children, onHeight }: { children: React.ReactNode; onHeight?: (h: number) => void }) => {\n    const progress = useRef(new Animated.Value(0)).current;\n\n    useEffect(() => {\n      Animated.spring(progress, { toValue: 1, useNativeDriver: true, speed: 14, bounciness: 4 }).start();\n    }, [progress]);\n\n    return (\n      <Animated.View\n        onLayout={(e) => onHeight?.(e.nativeEvent.layout.height)}\n        style={{\n          opacity: progress,\n          transform: [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [-16, 0] }) }],\n        }}\n      >\n        {children}\n      </Animated.View>\n    );\n  }\n);\nAnimatedToast.displayName = 'AnimatedToast';\n"
+    }
+  ],
+  "registryDependencies": [
+    "core"
+  ]
+}

package/registry/wizard.json

@@ -0,0 +1,20 @@
+{
+  "name": "Wizard",
+  "slug": "wizard",
+  "type": "component",
+  "category": "organisms",
+  "exportedNames": [
+    "Wizard"
+  ],
+  "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"
+    }
+  ],
+  "registryDependencies": [
+    "core",
+    "steps",
+    "button"
+  ]
+}

package/src/atoms/Avatar.tsx

@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useColors } from '../theme/UIProvider';
+
+export interface AvatarProps {
+  size?: number;
+  backgroundColor?: string;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  circle: { justifyContent: 'center', alignItems: 'center' },
+});
+
+/**
+ * Avatar
+ * Círculo con ícono/iniciales adentro. Usado a la izquierda de filas de
+ * lista o como header de detalle (junto a AvatarHeader).
+ */
+export const Avatar = memo(({ size = 44, backgroundColor, children, style }: AvatarProps) => {
+  const colors = useColors();
+  return (
+    <View
+      style={[
+        styles.circle,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: backgroundColor || colors.primary + '15',
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+});
+Avatar.displayName = 'Avatar';

package/src/atoms/Badge.tsx

@@ -0,0 +1,55 @@
+import React, { memo } from 'react';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useTheme } from '../theme/UIProvider';
+
+export type BadgeVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+
+export interface BadgeProps {
+  label: string;
+  variant?: BadgeVariant;
+  /** Override manual, gana sobre `variant`. */
+  backgroundColor?: string;
+  textColor?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const useStyles = createStyles((theme) => ({
+  badge: {
+    paddingHorizontal: theme.tokens.spacing.md - 2,
+    paddingVertical: theme.tokens.spacing.xs + 1,
+    borderRadius: theme.tokens.radius.full,
+    alignSelf: 'flex-start',
+  },
+  text: { fontSize: theme.tokens.fontSize.xs, fontWeight: theme.tokens.fontWeight.bold, letterSpacing: 0.3 },
+}));
+
+/**
+ * Badge
+ * Pill de estado. `variant` cubre los casos comunes (éxito/error/advertencia/
+ * info/neutral); `backgroundColor`/`textColor` quedan para casos que no
+ * encajan en el set semántico.
+ */
+export const Badge = memo(({ label, variant = 'neutral', backgroundColor, textColor, style }: BadgeProps) => {
+  const theme = useTheme();
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+  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 },
+    neutral: { bg: colors.inputBackground, fg: colors.textLight },
+  };
+
+  return (
+    <View style={[styles.badge, { backgroundColor: backgroundColor ?? palette[variant].bg }, style]}>
+      <Text allowFontScaling={allowFontScaling} style={[styles.text, { color: textColor ?? palette[variant].fg }]}>
+        {label}
+      </Text>
+    </View>
+  );
+});
+Badge.displayName = 'Badge';

package/src/atoms/Button.tsx

@@ -0,0 +1,186 @@
+import React, { memo, useRef } from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Pressable,
+  Text,
+  type GestureResponderEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors, useTheme } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
+import type { IconName } from '../icons/types';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps {
+  title: string;
+  onPress: (e: GestureResponderEvent) => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  leftIconName?: IconName;
+  rightIconName?: IconName;
+  iconColor?: string;
+  testID?: string;
+  accessibilityLabel?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.tokens.radius.lg,
+    borderWidth: 0,
+  },
+  sm: { paddingVertical: theme.tokens.spacing.sm, paddingHorizontal: theme.tokens.spacing.md },
+  md: { paddingVertical: theme.tokens.spacing.lg - 1, paddingHorizontal: theme.tokens.spacing.xl },
+  lg: { paddingVertical: theme.tokens.spacing.lg + 2, paddingHorizontal: theme.tokens.spacing.xxl },
+  link: { paddingVertical: theme.tokens.spacing.xs, paddingHorizontal: 0, justifyContent: 'flex-start' },
+  outline: { borderWidth: 1 },
+  filledShadow: { ...theme.tokens.shadow.md, shadowColor: '#000' },
+  text: { fontWeight: theme.tokens.fontWeight.semibold, textAlign: 'center' },
+  textSm: { fontSize: theme.tokens.fontSize.sm },
+  textMd: { fontSize: theme.tokens.fontSize.lg },
+  textLg: { fontSize: theme.tokens.fontSize.xl },
+  underline: { textDecorationLine: 'underline' },
+  iconLeft: { marginRight: theme.tokens.spacing.sm },
+  iconRight: { marginLeft: theme.tokens.spacing.sm },
+}));
+
+function resolveColors(variant: ButtonVariant, disabled: boolean, colors: ReturnType<typeof useColors>) {
+  if (disabled) {
+    return { background: colors.inputBackground, text: colors.textLight, border: 'transparent' };
+  }
+  switch (variant) {
+    case 'outline':
+      return { background: 'transparent', text: colors.primary, border: colors.primary };
+    case 'ghost':
+      return { background: 'transparent', text: colors.primary, border: 'transparent' };
+    case 'link':
+      return { background: 'transparent', text: colors.primary, border: 'transparent' };
+    case 'secondary':
+      return { background: colors.secondary, text: colors.white, border: 'transparent' };
+    case 'destructive':
+      return { background: colors.error, text: colors.white, border: 'transparent' };
+    case 'primary':
+    default:
+      return { background: colors.primary, text: colors.white, border: 'transparent' };
+  }
+}
+
+/**
+ * Button
+ * Único componente de botón de la librería. `variant` decide el estilo
+ * semántico, `size` la densidad. El feedback de "presionado" anima solo
+ * `transform` (Animated.spring, useNativeDriver) — nunca opacity ni layout.
+ */
+export const Button = memo(
+  ({
+    title,
+    onPress,
+    variant = 'primary',
+    size = 'md',
+    loading = false,
+    disabled = false,
+    style,
+    textStyle,
+    leftIcon,
+    rightIcon,
+    leftIconName,
+    rightIconName,
+    iconColor,
+    testID,
+    accessibilityLabel,
+  }: ButtonProps) => {
+    const styles = useStyles();
+    const colors = useColors();
+    const theme = useTheme();
+    const allowFontScaling = useAllowFontScaling();
+    const scale = useRef(new Animated.Value(1)).current;
+    const isDisabled = disabled || loading;
+    const isFilled = variant === 'primary' || variant === 'secondary' || variant === 'destructive';
+
+    const resolved = resolveColors(variant, disabled, colors);
+    const effectiveIconColor = iconColor ?? resolved.text;
+
+    const animateTo = (value: number) => {
+      Animated.spring(scale, { toValue: value, useNativeDriver: true, speed: 50, bounciness: 6 }).start();
+    };
+
+    const containerStyle: StyleProp<ViewStyle> = [
+      styles.base,
+      styles[size],
+      variant === 'link' && styles.link,
+      variant === 'outline' && [styles.outline, { borderColor: resolved.border }],
+      { backgroundColor: resolved.background },
+      isFilled && !disabled && styles.filledShadow,
+      { opacity: isDisabled ? 0.7 : 1 },
+      style,
+    ];
+
+    const labelStyle: StyleProp<TextStyle> = [
+      styles.text,
+      size === 'sm' ? styles.textSm : size === 'lg' ? styles.textLg : styles.textMd,
+      { color: resolved.text },
+      variant === 'link' && styles.underline,
+      textStyle,
+    ];
+
+    const iconSize = size === 'sm' ? 16 : size === 'lg' ? 22 : 20;
+
+    return (
+      // El Pressable ES el contenedor animado, no un wrapper alrededor de uno.
+      // Con un Animated.View interno, un `style` de layout (flex, width,
+      // margin) caía en el hijo mientras el Pressable — que es quien ocupa
+      // lugar en el layout del padre — quedaba sin él: el ancho colapsaba y
+      // el label desaparecía (visible en los botones en fila del Alert).
+      <AnimatedPressable
+        onPress={onPress}
+        onPressIn={() => {
+          if (!isDisabled) animateTo(0.95);
+        }}
+        onPressOut={() => {
+          if (!isDisabled) animateTo(1);
+        }}
+        disabled={isDisabled}
+        testID={testID}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? title}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
+        style={[containerStyle, { transform: [{ scale }] }]}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={resolved.text} />
+        ) : (
+          <>
+            {leftIcon}
+            {!leftIcon && leftIconName && (
+              <Icon name={leftIconName} size={iconSize} color={effectiveIconColor} style={styles.iconLeft} />
+            )}
+            <Text allowFontScaling={allowFontScaling} style={labelStyle}>
+              {title}
+            </Text>
+            {rightIcon}
+            {!rightIcon && rightIconName && (
+              <Icon name={rightIconName} size={iconSize} color={effectiveIconColor} style={styles.iconRight} />
+            )}
+          </>
+        )}
+      </AnimatedPressable>
+    );
+  }
+);
+Button.displayName = 'Button';

package/src/atoms/Card.tsx

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+
+export interface CardProps extends ViewProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: theme.tokens.radius.xl,
+    padding: theme.tokens.spacing.lg,
+    ...theme.tokens.shadow.sm,
+  },
+}));
+
+export const Card = memo(({ children, style, ...props }: CardProps) => {
+  const styles = useStyles();
+  return (
+    <View style={[styles.card, style]} {...props}>
+      {children}
+    </View>
+  );
+});
+Card.displayName = 'Card';

package/src/atoms/Checkbox.tsx

@@ -0,0 +1,75 @@
+import React, { memo, useEffect, useRef } from 'react';
+import { Animated, Text, TouchableOpacity } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
+
+export interface CheckboxProps {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  label?: string;
+  color?: string;
+  disabled?: boolean;
+  testID?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: { flexDirection: 'row', alignItems: 'center', marginBottom: theme.tokens.spacing.sm },
+  box: {
+    width: 24,
+    height: 24,
+    borderRadius: theme.tokens.radius.sm,
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: theme.tokens.spacing.sm + 2,
+  },
+  label: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },
+}));
+
+export const Checkbox = memo(({ value, onValueChange, label, color, disabled, testID }: CheckboxProps) => {
+  const colors = useColors();
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+  const activeColor = color || colors.primary;
+  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const checkScale = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(progress, { toValue: value ? 1 : 0, duration: 150, useNativeDriver: false }).start();
+    Animated.spring(checkScale, {
+      toValue: value ? 1 : 0,
+      useNativeDriver: true,
+      speed: 40,
+      bounciness: 10,
+    }).start();
+  }, [value]);
+
+  const backgroundColor = progress.interpolate({ inputRange: [0, 1], outputRange: [colors.surface, activeColor] });
+  const borderColor = progress.interpolate({ inputRange: [0, 1], outputRange: [colors.border, activeColor] });
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      activeOpacity={0.7}
+      disabled={disabled}
+      onPress={() => onValueChange(!value)}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: value, disabled: !!disabled }}
+      accessibilityLabel={label}
+      testID={testID}
+    >
+      <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} />
+        </Animated.View>
+      </Animated.View>
+      {label && (
+        <Text allowFontScaling={allowFontScaling} style={styles.label}>
+          {label}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+});
+Checkbox.displayName = 'Checkbox';

package/src/atoms/Divider.tsx

@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useColors } from '../theme/UIProvider';
+
+export interface DividerProps {
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const Divider = memo(({ style, testID }: DividerProps) => {
+  const colors = useColors();
+  return <View testID={testID} style={[{ height: 1, backgroundColor: colors.border, width: '100%' }, style]} />;
+});
+Divider.displayName = 'Divider';

package/src/atoms/EmptyState.tsx

@@ -0,0 +1,60 @@
+import React, { memo } from 'react';
+import { Text, View, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
+import type { IconName } from '../icons/types';
+
+export interface EmptyStateProps {
+  title?: string;
+  description?: string;
+  iconName?: IconName;
+  icon?: React.ReactNode;
+  style?: ViewStyle;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.tokens.spacing.xxl - 4,
+    minHeight: 200,
+  },
+  title: {
+    fontSize: theme.tokens.fontSize.lg,
+    fontWeight: theme.tokens.fontWeight.semibold,
+    color: theme.colors.textLight,
+    marginTop: theme.tokens.spacing.md - 2,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: theme.tokens.fontSize.md,
+    color: theme.colors.textLight,
+    marginTop: theme.tokens.spacing.xs + 1,
+    textAlign: 'center',
+  },
+}));
+
+export const EmptyState = memo(
+  ({ title, description, iconName = 'search', icon, style }: EmptyStateProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const labels = useLabels();
+    const allowFontScaling = useAllowFontScaling();
+    const resolvedTitle = title ?? labels.noResultsTitle;
+    const resolvedDescription = description ?? labels.noResultsDescription;
+    return (
+      <View style={[styles.container, style]} accessible accessibilityRole="text">
+        {icon ?? <Icon name={iconName} size={48} color={colors.textLight} />}
+        <Text allowFontScaling={allowFontScaling} style={styles.title}>
+          {resolvedTitle}
+        </Text>
+        <Text allowFontScaling={allowFontScaling} style={styles.description}>
+          {resolvedDescription}
+        </Text>
+      </View>
+    );
+  }
+);
+EmptyState.displayName = 'EmptyState';

package/src/atoms/Fab.tsx

@@ -0,0 +1,63 @@
+import React, { memo } from 'react';
+import { type GestureResponderEvent, type StyleProp, type ViewStyle } from 'react-native';
+import { PressableScale } from './PressableScale';
+import { Icon } from '../icons/Icon';
+import type { IconName } from '../icons/types';
+import { createStyles } from '../theme/createStyles';
+import { useColors } from '../theme/UIProvider';
+
+export interface FabProps {
+  onPress: (e: GestureResponderEvent) => void;
+  iconName?: IconName;
+  icon?: React.ReactNode;
+  size?: number;
+  bottom?: number;
+  right?: number;
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  fab: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...theme.tokens.shadow.lg,
+  },
+}));
+
+/**
+ * Fab
+ * Botón flotante circular. `bottom`/`right` en vez del `tabBarHeight`
+ * obligatorio de la versión original — el consumidor decide su propio
+ * offset (con o sin tab bar).
+ */
+export const Fab = memo(
+  ({ onPress, iconName = 'plus', icon, size = 60, bottom = 20, right = 20, color, style, accessibilityLabel }: FabProps) => {
+    const styles = useStyles();
+    const colors = useColors();
+    return (
+      <PressableScale
+        onPress={onPress}
+        style={[
+          styles.fab,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            bottom,
+            right,
+            backgroundColor: color ?? colors.primary,
+          },
+          style,
+        ]}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      >
+        {icon ?? <Icon name={iconName} size={size * 0.5} color={colors.white} />}
+      </PressableScale>
+    );
+  }
+);
+Fab.displayName = 'Fab';

package/src/atoms/IconButton.tsx

@@ -0,0 +1,53 @@
+import React, { memo } from 'react';
+import { type GestureResponderEvent, type StyleProp, type ViewStyle } from 'react-native';
+import { PressableScale } from './PressableScale';
+import { Icon } from '../icons/Icon';
+import type { IconName } from '../icons/types';
+import { createStyles } from '../theme/createStyles';
+
+export interface IconButtonProps {
+  iconName?: IconName;
+  icon?: React.ReactNode;
+  onPress?: (e: GestureResponderEvent) => void;
+  size?: number;
+  color?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel: string;
+  testID?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  hitArea: {
+    padding: theme.tokens.spacing.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+/**
+ * IconButton
+ * Botón de solo ícono con área táctil mínima de 44x44 garantizada por el
+ * padding (icon 24 + padding 8*2 = 40; sube a 44 con size>=24 default RN).
+ * `accessibilityLabel` es obligatorio: sin texto visible, es la única forma
+ * de que un lector de pantalla anuncie qué hace el botón.
+ */
+export const IconButton = memo(
+  ({ iconName, icon, onPress, size = 24, color, disabled, style, accessibilityLabel, testID }: IconButtonProps) => {
+    const styles = useStyles();
+    return (
+      <PressableScale
+        onPress={onPress}
+        disabled={disabled}
+        style={[styles.hitArea, { opacity: disabled ? 0.5 : 1 }, style]}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: !!disabled }}
+        testID={testID}
+      >
+        {icon ?? (iconName && <Icon name={iconName} size={size} color={color} />)}
+      </PressableScale>
+    );
+  }
+);
+IconButton.displayName = 'IconButton';