orn-ui 0.1.0

package/src/organisms/Modal.tsx

@@ -0,0 +1,251 @@
+import React, { memo, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Dimensions,
+  KeyboardAvoidingView,
+  Modal as RNModal,
+  Platform,
+  Pressable,
+  ScrollView,
+  View,
+  type ModalProps as RNModalProps,
+  type ViewStyle,
+} from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useColors, useInsets } from '../theme/UIProvider';
+import { Title } from '../atoms/Text';
+import { IconButton } from '../atoms/IconButton';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export type ModalVariant = 'full' | 'overlay' | 'fullScreen' | 'bottomSheet';
+
+export interface ModalProps
+  extends Pick<RNModalProps, 'statusBarTranslucent' | 'onRequestClose' | 'hardwareAccelerated'> {
+  visible: boolean;
+  onClose?: () => void;
+  title?: string;
+  closeAccessibilityLabel?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  containerStyle?: ViewStyle;
+  contentStyle?: ViewStyle;
+  variant?: ModalVariant;
+  scrollable?: boolean;
+}
+
+const useStyles = createStyles((theme) => ({
+  flex1: { flex: 1 },
+  fullWrapper: { flex: 1, backgroundColor: theme.colors.background },
+  overlayContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: theme.tokens.spacing.xxl - 4 },
+  bottomSheetContainer: { justifyContent: 'flex-end', padding: 0 },
+  backdrop: { backgroundColor: theme.colors.overlay },
+  overlayCard: {
+    width: '100%',
+    maxHeight: '85%',
+    backgroundColor: theme.colors.surface,
+    borderRadius: theme.tokens.radius.xxl,
+    overflow: 'hidden',
+    ...theme.tokens.shadow.lg,
+  },
+  bottomSheetCard: {
+    width: '100%',
+    maxHeight: '90%',
+    backgroundColor: theme.colors.surface,
+    borderTopLeftRadius: theme.tokens.radius.xxl,
+    borderTopRightRadius: theme.tokens.radius.xxl,
+    overflow: 'hidden',
+    ...theme.tokens.shadow.lg,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.tokens.spacing.xl,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    backgroundColor: theme.colors.surface,
+  },
+  title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, flex: 1 },
+  closeButton: { marginLeft: theme.tokens.spacing.md },
+  contentWrapper: { flexShrink: 1, backgroundColor: theme.colors.surface },
+  scrollWrapper: { flexShrink: 1 },
+  scrollContent: { padding: theme.tokens.spacing.xl, flexGrow: 1 },
+  scrollContentFull: { padding: 0, flexGrow: 1 },
+  footer: {
+    padding: theme.tokens.spacing.xl,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border,
+    backgroundColor: theme.colors.surface,
+  },
+}));
+
+/**
+ * Modal
+ * Un solo componente para todos los modales de la app: maneja scroll,
+ * teclado, insets y layout según `variant`. overlay/bottomSheet/full animan
+ * su entrada/salida con Animated (solo transform, nunca opacity sobre la
+ * tarjeta: animar opacity ahí dispara un bug de Android donde los hijos con
+ * elevation parpadean/redibujan). El fondo semitransparente sí anima opacity.
+ */
+export const Modal = memo(
+  ({
+    visible,
+    onClose,
+    title,
+    closeAccessibilityLabel = 'Close',
+    children,
+    footer,
+    containerStyle,
+    contentStyle,
+    variant = 'full',
+    scrollable = true,
+    statusBarTranslucent = true,
+    onRequestClose,
+    hardwareAccelerated,
+  }: ModalProps) => {
+    const isFull = variant === 'full';
+    const isOverlay = variant === 'overlay';
+    const isFullScreen = variant === 'fullScreen';
+    const isBottomSheet = variant === 'bottomSheet';
+    const isAnimatedVariant = isOverlay || isBottomSheet || isFull;
+    const insets = useInsets();
+    const colors = useColors();
+    const styles = useStyles();
+
+    const [mounted, setMounted] = useState(!isAnimatedVariant && visible);
+    const backdropOpacity = useRef(new Animated.Value(0)).current;
+    const cardProgress = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      if (!isAnimatedVariant) {
+        setMounted(visible);
+        return;
+      }
+      if (visible) {
+        setMounted(true);
+        Animated.timing(backdropOpacity, { toValue: 1, duration: 200, useNativeDriver: true }).start();
+        Animated.timing(cardProgress, { toValue: 1, duration: 250, useNativeDriver: true }).start();
+      } else {
+        Animated.timing(backdropOpacity, { toValue: 0, duration: 180, useNativeDriver: true }).start();
+        Animated.timing(cardProgress, { toValue: 0, duration: 200, useNativeDriver: true }).start(({ finished }) => {
+          if (finished) setMounted(false);
+        });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, isAnimatedVariant]);
+
+    const cardAnimatedStyle =
+      isBottomSheet || isFull
+        ? { transform: [{ translateY: cardProgress.interpolate({ inputRange: [0, 1], outputRange: [SCREEN_HEIGHT, 0] }) }] }
+        : {
+            transform: [
+              { translateY: cardProgress.interpolate({ inputRange: [0, 1], outputRange: [-40, 0] }) },
+              { scale: cardProgress.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) },
+            ],
+          };
+
+    const behavior = Platform.OS === 'ios' ? (isFull ? undefined : 'padding') : 'height';
+    const keyboardOffset = Platform.OS === 'ios' ? 0 : 20;
+
+    const renderHeader = () => {
+      if (!title && !onClose) return null;
+      return (
+        <View style={styles.header}>
+          {!!title && (
+            <Title style={styles.title} numberOfLines={1}>
+              {title}
+            </Title>
+          )}
+          {!title && <View style={styles.flex1} />}
+          {!!onClose && (
+            <IconButton iconName="close" size={24} color={colors.text} onPress={onClose} accessibilityLabel={closeAccessibilityLabel} style={styles.closeButton} />
+          )}
+        </View>
+      );
+    };
+
+    const renderMainContent = () => (
+      <View style={[styles.contentWrapper, isFull && styles.flex1]}>
+        {scrollable ? (
+          <ScrollView
+            style={[styles.scrollWrapper, isFull && styles.flex1]}
+            contentContainerStyle={[!isFull ? styles.scrollContent : styles.scrollContentFull, contentStyle]}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+            bounces={Platform.OS === 'ios'}
+            automaticallyAdjustKeyboardInsets
+          >
+            {children}
+          </ScrollView>
+        ) : (
+          <View style={[!isFull ? styles.scrollContent : styles.scrollContentFull, isFull && styles.flex1, contentStyle]}>
+            {children}
+          </View>
+        )}
+      </View>
+    );
+
+    const renderFooter = () => (footer ? <View style={styles.footer}>{footer}</View> : null);
+
+    if (!mounted) return null;
+
+    return (
+      <RNModal
+        visible
+        onRequestClose={onRequestClose ?? onClose}
+        animationType={isAnimatedVariant ? 'none' : 'slide'}
+        // `full` anima su propia entrada (translateY) con animationType="none"
+        // y necesita `transparent` para que no se vea un fondo negro detrás
+        // mientras desliza. RN sólo admite `transparent` junto a
+        // 'overFullScreen' — con 'pageSheet' avisa que la combinación no está
+        // soportada. Por eso `full` usa overFullScreen: la presentación nativa
+        // de pageSheet sería redundante con nuestra animación de todos modos.
+        presentationStyle={
+          Platform.OS === 'ios' ? (isFullScreen ? 'fullScreen' : 'overFullScreen') : undefined
+        }
+        transparent={isOverlay || isBottomSheet || isFull}
+        statusBarTranslucent={statusBarTranslucent}
+        hardwareAccelerated={hardwareAccelerated}
+      >
+        <KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={keyboardOffset} style={styles.flex1}>
+          {isOverlay || isBottomSheet ? (
+            <View style={[styles.overlayContainer, isBottomSheet && styles.bottomSheetContainer]}>
+              {/* Sin accessibilityLabel propio: el header ya expone un botón "Close"
+                  accesible; duplicar el label aquí generaría dos elementos con el
+                  mismo nombre para lectores de pantalla. Tocar afuera es un atajo
+                  puramente táctil. */}
+              <Animated.View style={[{ ...StyleSheetAbsoluteFill }, styles.backdrop, { opacity: backdropOpacity }]}>
+                <Pressable style={StyleSheetAbsoluteFill} onPress={onClose} testID="modal-backdrop" />
+              </Animated.View>
+
+              <Animated.View
+                style={[
+                  isOverlay ? styles.overlayCard : styles.bottomSheetCard,
+                  isBottomSheet && { paddingBottom: Math.max(insets.bottom, Platform.OS === 'ios' ? 20 : 0) },
+                  containerStyle,
+                  cardAnimatedStyle,
+                ]}
+              >
+                {renderHeader()}
+                {renderMainContent()}
+                {renderFooter()}
+              </Animated.View>
+            </View>
+          ) : (
+            <Animated.View style={[styles.fullWrapper, containerStyle, isFull && cardAnimatedStyle]}>
+              <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+                {renderHeader()}
+                {renderMainContent()}
+                {renderFooter()}
+              </View>
+            </Animated.View>
+          )}
+        </KeyboardAvoidingView>
+      </RNModal>
+    );
+  }
+);
+Modal.displayName = 'Modal';
+
+const StyleSheetAbsoluteFill: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };

package/src/organisms/Screen.tsx

@@ -0,0 +1,84 @@
+import React, { memo } from 'react';
+import { KeyboardAvoidingView, Platform, ScrollView, View, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useInsets } from '../theme/UIProvider';
+
+export type ScreenEdge = 'top' | 'bottom';
+
+export interface ScreenProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  scrollable?: boolean;
+  contentContainerStyle?: ViewStyle;
+  /** Qué insets de safe area aplicar. @default ['top', 'bottom'] */
+  edges?: ScreenEdge[];
+  /**
+   * Compensa el teclado con un KeyboardAvoidingView. Ponelo en false cuando
+   * el contenido ya trae su propio scroller que maneja el teclado (Wizard,
+   * List, SearchList): las dos compensaciones se suman y el campo enfocado
+   * termina empujado fuera de la pantalla.
+   * @default true
+   */
+  keyboardAvoiding?: boolean;
+}
+
+const useStyles = createStyles((theme) => ({
+  wrapper: { flex: 1, backgroundColor: theme.colors.background },
+  container: { flex: 1 },
+  contentContainer: { flexGrow: 1 },
+}));
+
+/**
+ * Screen
+ * Contenedor raíz de pantalla: fondo del theme, safe area (via insets del
+ * UIProvider), teclado y scroll opcional resueltos de forma consistente.
+ */
+export const Screen = memo(({
+  children,
+  style,
+  scrollable = true,
+  contentContainerStyle,
+  edges = ['top', 'bottom'],
+  keyboardAvoiding = true,
+}: ScreenProps) => {
+  const insets = useInsets();
+  const styles = useStyles();
+  const applyTop = edges.includes('top');
+  const applyBottom = edges.includes('bottom');
+
+  const KeyboardWrapper: React.ComponentType<any> = keyboardAvoiding ? KeyboardAvoidingView : View;
+  const keyboardProps = keyboardAvoiding
+    ? {
+        behavior: Platform.OS === 'ios' ? ('padding' as const) : ('height' as const),
+        keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 20,
+      }
+    : {};
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      <KeyboardWrapper style={styles.container} {...keyboardProps}>
+        {scrollable ? (
+          <ScrollView
+            style={styles.container}
+            contentInsetAdjustmentBehavior="automatic"
+            automaticallyAdjustKeyboardInsets
+            contentContainerStyle={[
+              styles.contentContainer,
+              { paddingTop: applyTop ? insets.top : 0 },
+              Platform.OS === 'android' && applyBottom && { paddingBottom: insets.bottom },
+              contentContainerStyle,
+            ]}
+            keyboardShouldPersistTaps="handled"
+          >
+            {children}
+          </ScrollView>
+        ) : (
+          <View style={[styles.container, { paddingTop: applyTop ? insets.top : 0, paddingBottom: applyBottom ? insets.bottom : 0 }]}>
+            {children}
+          </View>
+        )}
+      </KeyboardWrapper>
+    </View>
+  );
+});
+Screen.displayName = 'Screen';

package/src/organisms/SearchList.tsx

@@ -0,0 +1,186 @@
+import React, { memo } from 'react';
+import { ActivityIndicator, FlatList, 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 { Spinner } from '../atoms/Spinner';
+import { IconButton } from '../atoms/IconButton';
+import type { IconName } from '../icons/types';
+
+export interface SearchListProps<T> {
+  /** Chrome opcional arriba del buscador (ej. back button + título). */
+  header?: React.ReactNode;
+
+  searchValue: string;
+  onSearchChange: (text: string) => void;
+  searchPlaceholder?: string;
+  searchIsLoading?: boolean;
+  onScanPress?: () => void;
+  scanAccessibilityLabel?: string;
+  extraActions?: React.ReactNode;
+
+  data: T[];
+  keyExtractor: (item: T) => string;
+  renderItem: FlatListProps<T>['renderItem'];
+
+  isLoading?: boolean;
+  /** 'replace' cambia toda la lista por un spinner; 'overlay' lo muestra encima manteniendo el layout. */
+  loadingMode?: 'replace' | 'overlay';
+  loadingText?: string;
+
+  onLoadMore?: () => void;
+  isLoadingMore?: boolean;
+  loadingMoreText?: string;
+  hasMore?: boolean;
+  noMoreText?: string;
+
+  emptyTitle?: string;
+  emptyDescription?: string;
+  emptyIconName?: IconName;
+
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  ListComponent?: React.ComponentType<any>;
+  listProps?: Record<string, unknown>;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: { flex: 1 },
+  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 },
+  listArea: { flex: 1 },
+  listContent: { paddingBottom: theme.tokens.spacing.xl },
+  loadingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: theme.colors.surface + 'B3',
+    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 },
+}));
+
+/**
+ * SearchList
+ * Buscador + lista + estados de carga/paginación/vacío. El contenido de
+ * cada ítem (renderItem) queda a cargo de quien la usa, ya que difiere por
+ * completo entre casos de uso.
+ */
+export function SearchList<T>({
+  header,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder,
+  searchIsLoading = false,
+  onScanPress,
+  scanAccessibilityLabel = 'Scan',
+  extraActions,
+  data,
+  keyExtractor,
+  renderItem,
+  isLoading = false,
+  loadingMode = 'replace',
+  loadingText,
+  onLoadMore,
+  isLoadingMore = false,
+  loadingMoreText,
+  hasMore = false,
+  noMoreText,
+  emptyTitle,
+  emptyDescription,
+  emptyIconName,
+  contentContainerStyle,
+  ListComponent = FlatList,
+  listProps,
+}: SearchListProps<T>) {
+  const colors = useColors();
+  const styles = useStyles();
+  const labels = useLabels();
+  const resolvedSearchPlaceholder = searchPlaceholder ?? labels.search;
+  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>
+      );
+    }
+    return null;
+  };
+
+  const showReplaceLoading = 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}>
+      {header}
+
+      <View style={styles.searchRow}>
+        <Input
+          placeholder={resolvedSearchPlaceholder}
+          leftIconName="search"
+          value={searchValue}
+          onChangeText={onSearchChange}
+          rightIconName={searchValue.length > 0 ? 'close' : undefined}
+          onRightIconPress={() => onSearchChange('')}
+          isLoading={searchIsLoading}
+          containerStyle={styles.searchInput}
+        />
+        {onScanPress && (
+          <IconButton
+            iconName="search"
+            onPress={onScanPress}
+            color={colors.white}
+            style={styles.scanButton}
+            accessibilityLabel={scanAccessibilityLabel}
+          />
+        )}
+        {extraActions}
+      </View>
+
+      <View style={styles.listArea}>
+        {showOverlayLoading && (
+          <View style={styles.loadingOverlay}>
+            <ActivityIndicator size="large" color={colors.primary} />
+            <Text style={styles.footerText}>{resolvedLoadingText}</Text>
+          </View>
+        )}
+
+        {showReplaceLoading ? (
+          <Spinner text={resolvedLoadingText} />
+        ) : showEmpty ? (
+          <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} />
+        ) : (
+          <ListComponent
+            data={data}
+            keyExtractor={keyExtractor}
+            keyboardDismissMode="on-drag"
+            contentContainerStyle={contentContainerStyle ?? styles.listContent}
+            onEndReached={onLoadMore}
+            onEndReachedThreshold={0.2}
+            ListFooterComponent={renderFooter}
+            renderItem={renderItem}
+            {...listProps}
+          />
+        )}
+      </View>
+    </View>
+  );
+}

package/src/organisms/Select.tsx

@@ -0,0 +1,156 @@
+import React, { memo, useState } from 'react';
+import { ActivityIndicator, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
+
+export interface SelectOption<T> {
+  label: string;
+  value: T;
+}
+
+export interface SelectProps<T> {
+  label?: string;
+  required?: boolean;
+  options: SelectOption<T>[];
+  selectedValue: T | undefined;
+  onSelect: (value: T) => void;
+  placeholder?: string;
+  error?: string;
+  isLoading?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+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 },
+  field: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 2,
+    borderColor: theme.colors.border,
+    borderRadius: theme.tokens.radius.lg,
+    backgroundColor: theme.colors.inputBackground,
+    minHeight: 50,
+    paddingHorizontal: theme.tokens.spacing.lg,
+  },
+  fieldText: { fontSize: theme.tokens.fontSize.lg, color: theme.colors.text },
+  fieldPlaceholder: { color: theme.colors.textLight },
+  optionsList: {
+    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,
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: theme.tokens.spacing.lg,
+    paddingVertical: theme.tokens.spacing.md + 2,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
+  optionRowLast: { borderBottomWidth: 0 },
+  optionRowSelected: { backgroundColor: theme.colors.primary + '15' },
+  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 },
+}));
+
+/**
+ * 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.
+ */
+export function Select<T extends string | number>({
+  label,
+  required = false,
+  options,
+  selectedValue,
+  onSelect,
+  placeholder,
+  error,
+  isLoading = false,
+  containerStyle,
+}: SelectProps<T>) {
+  const colors = useColors();
+  const styles = useStyles();
+  const labels = useLabels();
+  const allowFontScaling = useAllowFontScaling();
+  const [open, setOpen] = useState(false);
+  const selectedOption = options.find((o) => o.value === selectedValue);
+
+  return (
+    <View style={[styles.container, open && styles.containerOpen, containerStyle]}>
+      {label && (
+        <Text allowFontScaling={allowFontScaling} style={styles.label}>
+          {label}
+          {required && <Text style={styles.required}> *</Text>}
+        </Text>
+      )}
+
+      <Pressable
+        style={styles.field}
+        onPress={() => !isLoading && setOpen((o) => !o)}
+        disabled={isLoading}
+        accessibilityRole="button"
+        accessibilityLabel={label ?? placeholder ?? labels.selectPlaceholder}
+        accessibilityState={{ expanded: open, disabled: isLoading }}
+      >
+        <Text allowFontScaling={allowFontScaling} style={[styles.fieldText, !selectedOption && styles.fieldPlaceholder]}>
+          {selectedOption?.label || placeholder || labels.selectPlaceholder}
+        </Text>
+        {isLoading ? (
+          <ActivityIndicator size="small" color={colors.primary} />
+        ) : (
+          <Icon name={open ? 'chevron-up' : 'chevron-down'} size={20} color={colors.textLight} />
+        )}
+      </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}
+                </Text>
+                {isSelected && <Icon name="check" size={18} color={colors.primary} />}
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+
+      {!!error && (
+        <Text allowFontScaling={allowFontScaling} style={styles.errorText}>
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+}