orn-ui 0.1.0 → 0.2.0

package/src/organisms/SearchList.tsx

@@ -1,9 +1,19 @@
-import React, { memo } from 'react';
-import { ActivityIndicator, FlatList, Text, View, type FlatListProps, type StyleProp, type ViewStyle } from 'react-native';
+import React, { useCallback } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  RefreshControl,
+  Text,
+  View,
+  type FlatListProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useColors, useLabels } from '../theme/UIProvider';
 import { Input } from '../atoms/Input';
 import { EmptyState } from '../atoms/EmptyState';
+import { Skeleton } from '../atoms/Skeleton';
 import { Spinner } from '../atoms/Spinner';
 import { IconButton } from '../atoms/IconButton';
 import type { IconName } from '../icons/types';
@@ -21,31 +31,50 @@ export interface SearchListProps<T> {
   extraActions?: React.ReactNode;
 
   data: T[];
-  keyExtractor: (item: T) => string;
+  keyExtractor: (item: T, index: number) => string;
   renderItem: FlatListProps<T>['renderItem'];
 
+  /** Carga inicial: mientras sea true y no haya datos, se muestran placeholders. */
   isLoading?: boolean;
-  /** 'replace' cambia toda la lista por un spinner; 'overlay' lo muestra encima manteniendo el layout. */
+  /** 'replace' cambia toda la lista por un spinner/skeleton; 'overlay' lo muestra encima manteniendo el layout. */
   loadingMode?: 'replace' | 'overlay';
-  loadingText?: string;
-
-  onLoadMore?: () => void;
+  /** Recarga con datos ya en pantalla (pull-to-refresh). @default false */
+  isRefreshing?: boolean;
   isLoadingMore?: boolean;
+  /** Controlado por el consumidor: mientras es false, se muestra un spinner de pantalla completa. @default true */
+  isReady?: boolean;
+  loadingText?: string;
   loadingMoreText?: string;
   hasMore?: boolean;
   noMoreText?: string;
 
+  /** Filas fantasma de la carga inicial. @default 6 */
+  skeletonCount?: number;
+  /** Placeholder propio, para que calce con la forma real del ítem. */
+  renderSkeletonItem?: () => React.ReactElement;
+
+  onLoadMore?: () => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  onRefresh?: () => void;
+
   emptyTitle?: string;
   emptyDescription?: string;
   emptyIconName?: IconName;
 
+  ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];
+  ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];
+
   contentContainerStyle?: StyleProp<ViewStyle>;
+  containerStyle?: ViewStyle;
+
+  /** Componente de lista a usar (FlashList, etc). @default FlatList */
   ListComponent?: React.ComponentType<any>;
   listProps?: Record<string, unknown>;
 }
 
 const useStyles = createStyles((theme) => ({
-  container: { flex: 1 },
+  container: { flex: 1, backgroundColor: theme.colors.background },
   searchRow: { flexDirection: 'row', alignItems: 'center', marginBottom: theme.tokens.spacing.lg - 1, gap: theme.tokens.spacing.sm + 2 },
   searchInput: { flex: 1, marginBottom: 0 },
   scanButton: { backgroundColor: theme.colors.primary, width: 50, height: 50, borderRadius: theme.tokens.radius.lg, ...theme.tokens.shadow.sm },
@@ -57,13 +86,20 @@ const useStyles = createStyles((theme) => ({
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: theme.colors.surface + 'B3',
+    backgroundColor: theme.colors.scrim,
     zIndex: 10,
     justifyContent: 'center',
     alignItems: 'center',
   },
   footer: { paddingVertical: theme.tokens.spacing.xl, alignItems: 'center', gap: theme.tokens.spacing.md },
   footerText: { color: theme.colors.textLight, fontSize: theme.tokens.fontSize.md },
+  skeletonRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.tokens.spacing.md,
+    padding: theme.tokens.spacing.md,
+  },
+  skeletonText: { flex: 1, gap: theme.tokens.spacing.sm },
 }));
 
 /**
@@ -86,16 +122,26 @@ export function SearchList<T>({
   renderItem,
   isLoading = false,
   loadingMode = 'replace',
-  loadingText,
-  onLoadMore,
+  isRefreshing = false,
   isLoadingMore = false,
+  isReady = true,
+  loadingText,
   loadingMoreText,
   hasMore = false,
   noMoreText,
+  skeletonCount = 6,
+  renderSkeletonItem,
+  onLoadMore,
+  onEndReached,
+  onEndReachedThreshold = 0.3,
+  onRefresh,
   emptyTitle,
   emptyDescription,
   emptyIconName,
+  ListHeaderComponent,
+  ListFooterComponent,
   contentContainerStyle,
+  containerStyle,
   ListComponent = FlatList,
   listProps,
 }: SearchListProps<T>) {
@@ -106,30 +152,55 @@ export function SearchList<T>({
   const resolvedLoadingText = loadingText ?? labels.loading;
   const resolvedLoadingMoreText = loadingMoreText ?? labels.loadingMore;
 
-  const renderFooter = () => {
-    if (isLoadingMore) {
-      return (
-        <View style={styles.footer}>
-          <Spinner text={resolvedLoadingMoreText} fullscreen={false} />
-        </View>
-      );
-    }
-    if (noMoreText && !hasMore && data.length > 0) {
-      return (
-        <View style={styles.footer}>
-          <Text style={styles.footerText}>{noMoreText}</Text>
-        </View>
+  const handleEndReached = onLoadMore ?? onEndReached;
+
+  // El footer propio y el loader de paginación conviven: antes el primero
+  // tapaba al segundo y la lista dejaba de avisar que estaba trayendo más.
+  const renderFooter = useCallback(() => {
+    const custom =
+      typeof ListFooterComponent === 'function' ? (
+        <ListFooterComponent />
+      ) : (
+        (ListFooterComponent as React.ReactElement | undefined) ?? null
       );
-    }
-    return null;
-  };
 
-  const showReplaceLoading = isLoading && loadingMode === 'replace' && data.length === 0;
+    return (
+      <>
+        {custom}
+        {isLoadingMore && (
+          <View style={styles.footer}>
+            <Spinner text={resolvedLoadingMoreText} fullscreen={false} />
+          </View>
+        )}
+        {noMoreText && !hasMore && data.length > 0 && (
+          <View style={styles.footer}>
+            <Text style={styles.footerText}>{noMoreText}</Text>
+          </View>
+        )}
+      </>
+    );
+  }, [ListFooterComponent, isLoadingMore, resolvedLoadingMoreText, noMoreText, hasMore, data.length, styles.footer, styles.footerText]);
+
+  // Vacío sólo cuando ya se sabe que no hay nada: durante la carga inicial se
+  // muestran placeholders, no "sin resultados".
+  const renderEmpty = useCallback(() => {
+    if (isLoading || isRefreshing) return null;
+    return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={{ marginTop: 50 }} />;
+  }, [isLoading, isRefreshing, emptyTitle, emptyDescription, emptyIconName]);
+
+  if (!isReady) {
+    return (
+      <View style={[styles.container, containerStyle]}>
+        <Spinner text={resolvedLoadingText} />
+      </View>
+    );
+  }
+
+  const isInitialLoading = isLoading && loadingMode === 'replace' && data.length === 0;
   const showOverlayLoading = isLoading && loadingMode === 'overlay' && data.length === 0;
-  const showEmpty = !isLoading && data.length === 0;
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, containerStyle]}>
       {header}
 
       <View style={styles.searchRow}>
@@ -147,7 +218,7 @@ export function SearchList<T>({
           <IconButton
             iconName="search"
             onPress={onScanPress}
-            color={colors.white}
+            color={colors.onPrimary}
             style={styles.scanButton}
             accessibilityLabel={scanAccessibilityLabel}
           />
@@ -163,20 +234,44 @@ export function SearchList<T>({
           </View>
         )}
 
-        {showReplaceLoading ? (
-          <Spinner text={resolvedLoadingText} />
-        ) : showEmpty ? (
-          <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} />
+        {isInitialLoading ? (
+          <View testID="list-skeleton" style={[styles.listContent, contentContainerStyle]}>
+            {Array.from({ length: skeletonCount }, (_, i) => (
+              <React.Fragment key={i}>
+                {renderSkeletonItem?.() ?? (
+                  <View style={styles.skeletonRow}>
+                    <Skeleton variant="circle" width={40} />
+                    <View style={styles.skeletonText}>
+                      <Skeleton width="60%" height={14} />
+                      <Skeleton width="35%" height={12} />
+                    </View>
+                  </View>
+                )}
+              </React.Fragment>
+            ))}
+          </View>
         ) : (
           <ListComponent
             data={data}
             keyExtractor={keyExtractor}
             keyboardDismissMode="on-drag"
-            contentContainerStyle={contentContainerStyle ?? styles.listContent}
-            onEndReached={onLoadMore}
-            onEndReachedThreshold={0.2}
+            contentContainerStyle={[styles.listContent, contentContainerStyle]}
+            onEndReached={handleEndReached}
+            onEndReachedThreshold={onEndReachedThreshold}
+            ListHeaderComponent={ListHeaderComponent}
             ListFooterComponent={renderFooter}
+            ListEmptyComponent={renderEmpty}
             renderItem={renderItem}
+            refreshControl={
+              onRefresh ? (
+                <RefreshControl
+                  refreshing={isRefreshing}
+                  onRefresh={onRefresh}
+                  colors={[colors.primary]}
+                  tintColor={colors.primary}
+                />
+              ) : undefined
+            }
             {...listProps}
           />
         )}
@@ -184,3 +279,4 @@ export function SearchList<T>({
     </View>
   );
 }
+

package/src/organisms/Select.tsx

@@ -1,12 +1,31 @@
-import React, { memo, useState } from 'react';
-import { ActivityIndicator, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Keyboard,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+  useWindowDimensions,
+  type StyleProp,
+  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 SelectOption<T> {
   label: string;
   value: T;
+  /** Glifo del set de la librería, a la izquierda del label. */
+  iconName?: IconName;
+  /** Emoji a la izquierda del label. Gana sobre `iconName`. */
+  emoji?: string;
+  disabled?: boolean;
 }
 
 export interface SelectProps<T> {
@@ -18,14 +37,26 @@ export interface SelectProps<T> {
   placeholder?: string;
   error?: string;
   isLoading?: boolean;
+  disabled?: boolean;
+  /** Agrega un buscador dentro del desplegable. @default false */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Alto máximo del desplegable, si el espacio disponible lo permite. @default 280 */
+  maxHeight?: number;
+  onOpenChange?: (open: boolean) => void;
   containerStyle?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
+/** Aire entre el campo y el desplegable. */
+const GAP = 8;
+/** Por debajo de esto el desplegable no muestra ni dos filas. */
+const MIN_HEIGHT = 120;
+
 const useStyles = createStyles((theme) => ({
   container: { gap: theme.tokens.spacing.sm },
-  containerOpen: { zIndex: 20, elevation: 20 },
   label: { fontWeight: theme.tokens.fontWeight.bold, fontSize: theme.tokens.fontSize.md, color: theme.colors.text },
-  required: { color: theme.colors.error },
+  required: { color: theme.colors.errorText },
   field: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -37,23 +68,29 @@ const useStyles = createStyles((theme) => ({
     minHeight: 50,
     paddingHorizontal: theme.tokens.spacing.lg,
   },
-  fieldText: { fontSize: theme.tokens.fontSize.lg, color: theme.colors.text },
+  fieldOpen: { borderColor: theme.colors.primary },
+  fieldDisabled: { opacity: 0.5 },
+  fieldValue: { flexDirection: 'row', alignItems: 'center', gap: theme.tokens.spacing.sm, flexShrink: 1 },
+  fieldText: { fontSize: theme.tokens.fontSize.lg, color: theme.colors.text, flexShrink: 1 },
   fieldPlaceholder: { color: theme.colors.textLight },
-  optionsList: {
+  backdrop: { flex: 1 },
+  sheet: {
     position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    marginTop: theme.tokens.spacing.sm,
     borderWidth: 2,
     borderColor: theme.colors.border,
     borderRadius: theme.tokens.radius.lg,
     backgroundColor: theme.colors.surface,
     overflow: 'hidden',
-    zIndex: 20,
-    elevation: 20,
     ...theme.tokens.shadow.md,
   },
+  search: {
+    fontSize: theme.tokens.fontSize.md,
+    color: theme.colors.text,
+    paddingHorizontal: theme.tokens.spacing.lg,
+    paddingVertical: theme.tokens.spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
   optionRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -64,17 +101,34 @@ const useStyles = createStyles((theme) => ({
     borderBottomColor: theme.colors.border,
   },
   optionRowLast: { borderBottomWidth: 0 },
-  optionRowSelected: { backgroundColor: theme.colors.primary + '15' },
+  optionRowSelected: { backgroundColor: theme.colors.primarySoft },
+  optionRowDisabled: { opacity: 0.4 },
+  optionLabel: { flexDirection: 'row', alignItems: 'center', gap: theme.tokens.spacing.sm, flexShrink: 1 },
   optionText: { fontSize: theme.tokens.fontSize.lg - 1, color: theme.colors.text },
-  optionTextSelected: { fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.primary },
-  errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.error },
+  optionTextSelected: { fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.primaryText },
+  emoji: { fontSize: theme.tokens.fontSize.lg },
+  empty: {
+    padding: theme.tokens.spacing.lg,
+    textAlign: 'center',
+    color: theme.colors.textLight,
+    fontSize: theme.tokens.fontSize.md,
+  },
+  errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },
 }));
 
+interface Anchor {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 /**
  * Select
- * Dropdown que expande la lista de opciones flotando sobre el resto del
- * contenido (position: absolute), en vez de empujarlo hacia abajo o abrir
- * un picker nativo del sistema.
+ * Dropdown de una sola opción. La lista se mide contra la ventana y se dibuja
+ * dentro de un Modal, no en el árbol del campo: así ningún `overflow: hidden`
+ * la recorta, no depende del zIndex (poco confiable en Android) y el fondo del
+ * Modal resuelve cerrar tocando afuera y con el botón atrás.
  */
 export function Select<T extends string | number>({
   label,
@@ -85,17 +139,93 @@ export function Select<T extends string | number>({
   placeholder,
   error,
   isLoading = false,
+  disabled = false,
+  searchable = false,
+  searchPlaceholder,
+  maxHeight = 280,
+  onOpenChange,
   containerStyle,
+  testID,
 }: SelectProps<T>) {
   const colors = useColors();
   const styles = useStyles();
   const labels = useLabels();
   const allowFontScaling = useAllowFontScaling();
+  const { height: windowHeight } = useWindowDimensions();
+
+  const fieldRef = useRef<View>(null);
   const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState<Anchor | null>(null);
+  const [query, setQuery] = useState('');
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const isDisabled = disabled || isLoading;
   const selectedOption = options.find((o) => o.value === selectedValue);
 
+  const close = useCallback(() => {
+    setOpen(false);
+    setAnchor(null);
+    setQuery('');
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+
+  // Abrir no espera a la medición: si `measureInWindow` no responde, la lista
+  // igual aparece (centrada) en vez de que el campo deje de funcionar.
+  const openList = () => {
+    fieldRef.current?.measureInWindow((x, y, width, height) => setAnchor({ x, y, width, height }));
+    setOpen(true);
+    onOpenChange?.(true);
+  };
+
+  // El buscador abre el teclado encima del desplegable: sin descontarlo, la
+  // lista se dibuja donde ya no se ve.
+  useEffect(() => {
+    if (!open) return;
+    setKeyboardHeight(Keyboard.metrics()?.height ?? 0);
+    const [show, hide] =
+      Platform.OS === 'ios' ? ['keyboardWillShow', 'keyboardWillHide'] : ['keyboardDidShow', 'keyboardDidHide'];
+    const subs = [
+      Keyboard.addListener(show as 'keyboardDidShow', (e) => setKeyboardHeight(e.endCoordinates.height)),
+      Keyboard.addListener(hide as 'keyboardDidHide', () => setKeyboardHeight(0)),
+    ];
+    return () => subs.forEach((sub) => sub.remove());
+  }, [open]);
+
+  const visibleOptions = useMemo(() => {
+    if (!searchable || query.trim() === '') return options;
+    const needle = query.trim().toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(needle));
+  }, [options, query, searchable]);
+
+  // Se abre hacia donde haya más aire: contra el borde inferior de la pantalla,
+  // hacia arriba es la única forma de que entre.
+  const placement = useMemo((): ViewStyle => {
+    if (!anchor) return { left: GAP * 2, right: GAP * 2, top: windowHeight * 0.25, maxHeight };
+    const usableHeight = windowHeight - keyboardHeight;
+    const below = usableHeight - (anchor.y + anchor.height) - GAP * 2;
+    const above = anchor.y - GAP * 2;
+    const downwards = below >= Math.min(maxHeight, above);
+    return {
+      left: anchor.x,
+      width: anchor.width,
+      maxHeight: Math.max(Math.min(maxHeight, downwards ? below : above), MIN_HEIGHT),
+      ...(downwards ? { top: anchor.y + anchor.height + GAP } : { bottom: windowHeight - anchor.y + GAP }),
+    };
+  }, [anchor, keyboardHeight, maxHeight, windowHeight]);
+
+  const renderLeading = (option: SelectOption<T> | undefined, color: string) => {
+    if (!option) return null;
+    if (option.emoji) {
+      return (
+        <Text allowFontScaling={allowFontScaling} style={styles.emoji}>
+          {option.emoji}
+        </Text>
+      );
+    }
+    return option.iconName ? <Icon name={option.iconName} size={20} color={color} /> : null;
+  };
+
   return (
-    <View style={[styles.container, open && styles.containerOpen, containerStyle]}>
+    <View style={[styles.container, containerStyle]} testID={testID}>
       {label && (
         <Text allowFontScaling={allowFontScaling} style={styles.label}>
           {label}
@@ -104,16 +234,25 @@ export function Select<T extends string | number>({
       )}
 
       <Pressable
-        style={styles.field}
-        onPress={() => !isLoading && setOpen((o) => !o)}
-        disabled={isLoading}
-        accessibilityRole="button"
+        ref={fieldRef}
+        style={[styles.field, open && styles.fieldOpen, isDisabled && styles.fieldDisabled]}
+        onPress={openList}
+        disabled={isDisabled}
+        accessibilityRole="combobox"
         accessibilityLabel={label ?? placeholder ?? labels.selectPlaceholder}
-        accessibilityState={{ expanded: open, disabled: isLoading }}
+        accessibilityValue={{ text: selectedOption?.label ?? '' }}
+        accessibilityState={{ expanded: open, disabled: isDisabled }}
       >
-        <Text allowFontScaling={allowFontScaling} style={[styles.fieldText, !selectedOption && styles.fieldPlaceholder]}>
-          {selectedOption?.label || placeholder || labels.selectPlaceholder}
-        </Text>
+        <View style={styles.fieldValue}>
+          {renderLeading(selectedOption, colors.textLight)}
+          <Text
+            allowFontScaling={allowFontScaling}
+            numberOfLines={1}
+            style={[styles.fieldText, !selectedOption && styles.fieldPlaceholder]}
+          >
+            {selectedOption?.label || placeholder || labels.selectPlaceholder}
+          </Text>
+        </View>
         {isLoading ? (
           <ActivityIndicator size="small" color={colors.primary} />
         ) : (
@@ -121,29 +260,68 @@ export function Select<T extends string | number>({
         )}
       </Pressable>
 
-      {open && !isLoading && (
-        <View style={styles.optionsList}>
-          {options.map((option, index) => {
-            const isSelected = option.value === selectedValue;
-            return (
-              <Pressable
-                key={String(option.value)}
-                style={[styles.optionRow, index === options.length - 1 && styles.optionRowLast, isSelected && styles.optionRowSelected]}
-                onPress={() => {
-                  onSelect(option.value);
-                  setOpen(false);
-                }}
-                accessibilityRole="menuitem"
-                accessibilityState={{ selected: isSelected }}
-              >
-                <Text allowFontScaling={allowFontScaling} style={[styles.optionText, isSelected && styles.optionTextSelected]}>
-                  {option.label}
+      {open && (
+        <Modal visible transparent animationType="fade" statusBarTranslucent onRequestClose={close}>
+          <Pressable style={styles.backdrop} onPress={close} testID="select-backdrop" />
+
+          <View style={[styles.sheet, placement]} accessibilityRole="radiogroup" testID="select-list">
+            {searchable && (
+              <TextInput
+                allowFontScaling={allowFontScaling}
+                style={styles.search}
+                value={query}
+                onChangeText={setQuery}
+                placeholder={searchPlaceholder ?? labels.search}
+                placeholderTextColor={colors.textLight}
+                autoFocus
+                accessibilityLabel={searchPlaceholder ?? labels.search}
+              />
+            )}
+
+            <ScrollView keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false} bounces={false}>
+              {visibleOptions.map((option, index) => {
+                const isSelected = option.value === selectedValue;
+                return (
+                  <Pressable
+                    key={String(option.value)}
+                    style={[
+                      styles.optionRow,
+                      index === visibleOptions.length - 1 && styles.optionRowLast,
+                      isSelected && styles.optionRowSelected,
+                      option.disabled && styles.optionRowDisabled,
+                    ]}
+                    onPress={() => {
+                      onSelect(option.value);
+                      close();
+                    }}
+                    disabled={option.disabled}
+                    accessibilityRole="radio"
+                    accessibilityLabel={option.label}
+                    accessibilityState={{ selected: isSelected, checked: isSelected, disabled: !!option.disabled }}
+                  >
+                    <View style={styles.optionLabel}>
+                      {renderLeading(option, isSelected ? colors.primary : colors.textLight)}
+                      <Text
+                        allowFontScaling={allowFontScaling}
+                        numberOfLines={1}
+                        style={[styles.optionText, isSelected && styles.optionTextSelected]}
+                      >
+                        {option.label}
+                      </Text>
+                    </View>
+                    {isSelected && <Icon name="check" size={18} color={colors.primary} />}
+                  </Pressable>
+                );
+              })}
+
+              {visibleOptions.length === 0 && (
+                <Text allowFontScaling={allowFontScaling} style={styles.empty}>
+                  {labels.noResultsTitle}
                 </Text>
-                {isSelected && <Icon name="check" size={18} color={colors.primary} />}
-              </Pressable>
-            );
-          })}
-        </View>
+              )}
+            </ScrollView>
+          </View>
+        </Modal>
       )}
 
       {!!error && (

package/src/organisms/ThemeToggle.tsx

@@ -0,0 +1,30 @@
+import React, { memo, useMemo } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { useThemeMode, type ThemeMode } from '../theme/UIProvider';
+import { SegmentedControl } from '../molecules/SegmentedControl';
+
+export interface ThemeToggleProps {
+  style?: StyleProp<ViewStyle>;
+  labels?: Partial<Record<ThemeMode, string>>;
+  testID?: string;
+}
+
+const MODES: ThemeMode[] = ['system', 'light', 'dark'];
+const DEFAULT_LABELS: Record<ThemeMode, string> = { system: 'Auto', light: 'Light', dark: 'Dark' };
+
+/**
+ * ThemeToggle
+ * Conecta un SegmentedControl con UIProvider.setMode. Sin persistencia — el
+ * consumidor la resuelve vía onModeChange en <UIProvider>.
+ */
+export const ThemeToggle = memo(({ style, labels: labelOverrides, testID }: ThemeToggleProps) => {
+  const { mode, setMode } = useThemeMode();
+
+  const options = useMemo(() => {
+    const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+    return MODES.map((value) => ({ value, label: labels[value] }));
+  }, [labelOverrides]);
+
+  return <SegmentedControl options={options} value={mode} onChange={setMode} style={style} testID={testID} />;
+});
+ThemeToggle.displayName = 'ThemeToggle';