orn-ui 0.1.0

package/src/molecules/Steps.tsx

@@ -0,0 +1,198 @@
+import React, { memo } from 'react';
+import { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { Icon } from '../icons/Icon';
+
+export interface StepItem {
+  label: string;
+  description?: string;
+}
+
+export type StepStatus = 'completed' | 'current' | 'pending';
+
+export interface StepsProps {
+  steps: StepItem[];
+  /** Índice del paso actual (0-based). Los anteriores quedan 'completed'. */
+  current: number;
+  /** @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Qué muestra el círculo de un paso ya completado: un check, o su número.
+   * @default 'check'
+   */
+  completedIndicator?: 'check' | 'number';
+  /** Si se pasa, cada paso es tocable y reporta su índice. */
+  onStepPress?: (index: number) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const CIRCLE = 32;
+
+const useStyles = createStyles((theme) => ({
+  rowContainer: { flexDirection: 'row', alignItems: 'flex-start' },
+  columnContainer: { flexDirection: 'column' },
+
+  // horizontal
+  hStep: { flex: 1, alignItems: 'center', gap: theme.tokens.spacing.sm },
+  hLabels: { alignItems: 'center', gap: 2, paddingHorizontal: 4 },
+  // El conector toma una fracción chica del ancho: compitiendo de igual a
+  // igual con los pasos (flex: 1) cada etiqueta se quedaba con 1/(2n-1) del
+  // total y RN partía palabras a la mitad ("Paymen / t"). Con 0.3 un flujo de
+  // 4 pasos deja ~68px por etiqueta, suficiente para una palabra corriente.
+  hConnector: { height: 2, flex: 0.3, marginTop: CIRCLE / 2 - 1 },
+
+  // vertical
+  vStep: { flexDirection: 'row', gap: theme.tokens.spacing.md },
+  vIndicatorColumn: { alignItems: 'center' },
+  vConnector: { width: 2, flex: 1, minHeight: 20, marginVertical: 4 },
+  vLabels: { flex: 1, gap: 2, paddingBottom: theme.tokens.spacing.lg },
+
+  circle: {
+    width: CIRCLE,
+    height: CIRCLE,
+    borderRadius: CIRCLE / 2,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circleNumber: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.semibold },
+  label: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.text },
+  labelCentered: { textAlign: 'center' },
+  description: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight },
+  descriptionCentered: { textAlign: 'center' },
+}));
+
+function statusOf(index: number, current: number): StepStatus {
+  if (index < current) return 'completed';
+  if (index === current) return 'current';
+  return 'pending';
+}
+
+/**
+ * Steps
+ * Indicador de progreso multi-paso. Base visual de `Wizard`, pero utilizable
+ * suelto para mostrar el avance de un flujo que se navega de otra forma.
+ */
+export const Steps = memo(
+  ({ steps, current, orientation = 'horizontal', completedIndicator = 'check', onStepPress, style }: StepsProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const allowFontScaling = useAllowFontScaling();
+    const isVertical = orientation === 'vertical';
+
+    const colorsFor = (status: StepStatus) => {
+      if (status === 'completed') return { bg: colors.primary, border: colors.primary, fg: colors.white };
+      if (status === 'current') return { bg: 'transparent', border: colors.primary, fg: colors.primary };
+      return { bg: 'transparent', border: colors.border, fg: colors.textLight };
+    };
+
+    const renderCircle = (index: number, status: StepStatus) => {
+      const c = colorsFor(status);
+      const showCheck = status === 'completed' && completedIndicator === 'check';
+      return (
+        <View style={[styles.circle, { backgroundColor: c.bg, borderColor: c.border }]}>
+          {showCheck ? (
+            <Icon name="check" size={18} color={c.fg} />
+          ) : (
+            <Text allowFontScaling={allowFontScaling} style={[styles.circleNumber, { color: c.fg }]}>
+              {index + 1}
+            </Text>
+          )}
+        </View>
+      );
+    };
+
+    const renderLabels = (step: StepItem, status: StepStatus, centered: boolean) => (
+      <View style={centered ? styles.hLabels : styles.vLabels}>
+        <Text
+          allowFontScaling={allowFontScaling}
+          style={[
+            styles.label,
+            centered && styles.labelCentered,
+            status === 'pending' && { color: colors.textLight },
+          ]}
+        >
+          {step.label}
+        </Text>
+        {!!step.description && (
+          <Text
+            allowFontScaling={allowFontScaling}
+            style={[styles.description, centered && styles.descriptionCentered]}
+          >
+            {step.description}
+          </Text>
+        )}
+      </View>
+    );
+
+    const stepAccessibility = (index: number, step: StepItem, status: StepStatus) => ({
+      accessibilityRole: (onStepPress ? 'button' : 'text') as 'button' | 'text',
+      accessibilityLabel: `Step ${index + 1}: ${step.label}`,
+      accessibilityState: { selected: status === 'current', disabled: false },
+    });
+
+    if (isVertical) {
+      return (
+        <View style={[styles.columnContainer, style]}>
+          {steps.map((step, index) => {
+            const status = statusOf(index, current);
+            const isLast = index === steps.length - 1;
+            const Wrapper: any = onStepPress ? TouchableOpacity : View;
+            return (
+              <Wrapper
+                key={step.label}
+                style={styles.vStep}
+                onPress={onStepPress ? () => onStepPress(index) : undefined}
+                activeOpacity={0.7}
+                {...stepAccessibility(index, step, status)}
+              >
+                <View style={styles.vIndicatorColumn}>
+                  {renderCircle(index, status)}
+                  {!isLast && (
+                    <View
+                      style={[
+                        styles.vConnector,
+                        { backgroundColor: index < current ? colors.primary : colors.border },
+                      ]}
+                    />
+                  )}
+                </View>
+                {renderLabels(step, status, false)}
+              </Wrapper>
+            );
+          })}
+        </View>
+      );
+    }
+
+    return (
+      <View style={[styles.rowContainer, style]}>
+        {steps.map((step, index) => {
+          const status = statusOf(index, current);
+          const isLast = index === steps.length - 1;
+          const Wrapper: any = onStepPress ? TouchableOpacity : View;
+          return (
+            <React.Fragment key={step.label}>
+              <Wrapper
+                style={styles.hStep}
+                onPress={onStepPress ? () => onStepPress(index) : undefined}
+                activeOpacity={0.7}
+                {...stepAccessibility(index, step, status)}
+              >
+                {renderCircle(index, status)}
+                {renderLabels(step, status, true)}
+              </Wrapper>
+              {!isLast && (
+                <View
+                  style={[styles.hConnector, { backgroundColor: index < current ? colors.primary : colors.border }]}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </View>
+    );
+  }
+);
+Steps.displayName = 'Steps';

package/src/molecules/ThemeToggle.tsx

@@ -0,0 +1,67 @@
+import React, { memo } from 'react';
+import { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors, useThemeMode, type ThemeMode } from '../theme/UIProvider';
+
+export interface ThemeToggleProps {
+  style?: StyleProp<ViewStyle>;
+  labels?: Partial<Record<ThemeMode, string>>;
+}
+
+const MODES: ThemeMode[] = ['system', 'light', 'dark'];
+const DEFAULT_LABELS: Record<ThemeMode, string> = { system: 'Auto', light: 'Light', dark: 'Dark' };
+
+const useStyles = createStyles((theme) => ({
+  track: {
+    flexDirection: 'row',
+    backgroundColor: theme.colors.inputBackground,
+    borderRadius: theme.tokens.radius.md,
+    padding: 3,
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: theme.tokens.spacing.sm,
+    borderRadius: theme.tokens.radius.sm,
+    alignItems: 'center',
+  },
+  segmentActive: { backgroundColor: theme.colors.surface, ...theme.tokens.shadow.sm },
+  label: { fontSize: theme.tokens.fontSize.sm, fontWeight: theme.tokens.fontWeight.medium, color: theme.colors.textLight },
+  labelActive: { color: theme.colors.primary, fontWeight: theme.tokens.fontWeight.semibold },
+}));
+
+/**
+ * ThemeToggle
+ * Segmented control de 3 estados (system/light/dark) conectado a
+ * UIProvider.setMode. Sin persistencia — el consumidor la resuelve vía
+ * onModeChange en <UIProvider>.
+ */
+export const ThemeToggle = memo(({ style, labels: labelOverrides }: ThemeToggleProps) => {
+  const { mode, setMode } = useThemeMode();
+  const colors = useColors();
+  const styles = useStyles();
+  const allowFontScaling = useAllowFontScaling();
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+
+  return (
+    <View style={[styles.track, style]} accessibilityRole="tablist">
+      {MODES.map((m) => {
+        const active = mode === m;
+        return (
+          <TouchableOpacity
+            key={m}
+            style={[styles.segment, active && styles.segmentActive]}
+            onPress={() => setMode(m)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active }}
+            accessibilityLabel={labels[m]}
+          >
+            <Text allowFontScaling={allowFontScaling} style={[styles.label, active && styles.labelActive]}>
+              {labels[m]}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+});
+ThemeToggle.displayName = 'ThemeToggle';

package/src/molecules/index.ts

@@ -0,0 +1,14 @@
+export { Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+export { OptionCard } from './OptionCard';
+export type { OptionCardProps } from './OptionCard';
+export { InfoRow } from './InfoRow';
+export type { InfoRowProps } from './InfoRow';
+export { FormActions } from './FormActions';
+export type { FormActionsProps } from './FormActions';
+export { AvatarHeader } from './AvatarHeader';
+export type { AvatarHeaderProps } from './AvatarHeader';
+export { ThemeToggle } from './ThemeToggle';
+export type { ThemeToggleProps } from './ThemeToggle';
+export { Steps } from './Steps';
+export type { StepsProps, StepItem, StepStatus } from './Steps';

package/src/organisms/Alert.tsx

@@ -0,0 +1,162 @@
+import React, { memo } from 'react';
+import { Modal, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
+import { Button, type ButtonVariant } from '../atoms/Button';
+import { Icon } from '../icons/Icon';
+import type { IconName } from '../icons/types';
+
+export type AlertType = 'success' | 'error' | 'warning' | 'info' | 'question';
+
+export interface AlertButton {
+  text: string;
+  onPress?: () => void;
+  style?: 'cancel' | 'default' | 'destructive';
+  variant?: ButtonVariant;
+}
+
+export interface AlertProps {
+  visible: boolean;
+  title: string;
+  message?: string;
+  type?: AlertType;
+  onClose?: () => void;
+  buttons?: AlertButton[];
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  inline?: boolean;
+}
+
+const ICON_BY_TYPE: Record<AlertType, IconName> = {
+  success: 'check',
+  error: 'alert',
+  warning: 'warning',
+  question: 'question',
+  info: 'info',
+};
+
+const useStyles = createStyles((theme) => ({
+  overlay: { flex: 1, backgroundColor: theme.colors.overlay, justifyContent: 'center', alignItems: 'center', padding: theme.tokens.spacing.xl },
+  overlayInline: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999 },
+  container: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: theme.tokens.radius.xl,
+    padding: theme.tokens.spacing.xl,
+    width: '100%',
+    maxWidth: 340,
+    alignItems: 'center',
+    ...theme.tokens.shadow.md,
+  },
+  iconContainer: { marginBottom: theme.tokens.spacing.lg - 1 },
+  title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.text, textAlign: 'center', marginBottom: theme.tokens.spacing.md - 2 },
+  message: { fontSize: theme.tokens.fontSize.md, color: theme.colors.textLight, textAlign: 'center', marginBottom: theme.tokens.spacing.xl, lineHeight: theme.tokens.lineHeight.md },
+  buttonContainer: { flexDirection: 'row', justifyContent: 'center', gap: theme.tokens.spacing.sm + 2, width: '100%' },
+  buttonContainerVertical: { flexDirection: 'column' },
+  button: { paddingVertical: theme.tokens.spacing.md - 2, paddingHorizontal: theme.tokens.spacing.xl },
+  buttonHorizontal: { flex: 1 },
+  buttonVertical: { width: '100%' },
+}));
+
+/** Deriva la lista de botones a partir de props, sin mutar `buttons` recibido por props. */
+function resolveButtons(props: AlertProps, labels: { confirm: string; cancel: string; close: string }): AlertButton[] {
+  const { buttons, confirmText, cancelText, onConfirm, onCancel, onClose } = props;
+  if (buttons && buttons.length > 0) return buttons;
+
+  if (confirmText || onConfirm) {
+    const list: AlertButton[] = [];
+    if (cancelText || onCancel) {
+      list.push({ text: cancelText || labels.cancel, onPress: onCancel || onClose, variant: 'outline', style: 'cancel' });
+    }
+    list.push({ text: confirmText || labels.confirm, onPress: onConfirm, variant: 'primary' });
+    return list;
+  }
+
+  return [{ text: labels.close, onPress: onClose, variant: 'outline' }];
+}
+
+/**
+ * Alert
+ * Componente declarativo de diálogo. Para uso imperativo (mostrar desde
+ * un handler sin levantar estado propio), usar AlertProvider + useAlert().
+ */
+export const Alert = memo((props: AlertProps) => {
+  const { visible, title, message, type = 'info', onClose, inline = false } = props;
+  const colors = useColors();
+  const styles = useStyles();
+  const labels = useLabels();
+  const allowFontScaling = useAllowFontScaling();
+
+  if (!visible) return null;
+
+  const iconColor: Record<AlertType, string> = {
+    success: colors.success,
+    error: colors.error,
+    warning: colors.warning,
+    question: colors.primary,
+    info: colors.secondary,
+  };
+
+  const effectiveButtons = resolveButtons(props, { confirm: labels.confirm, cancel: labels.cancel, close: labels.close });
+  const vertical = effectiveButtons.length > 2;
+
+  const content = (
+    <TouchableWithoutFeedback onPress={onClose} accessibilityRole="none">
+      <View style={[styles.overlay, inline && styles.overlayInline]}>
+        <TouchableWithoutFeedback>
+          <View style={styles.container} accessibilityRole="alert" accessibilityViewIsModal>
+            <View style={styles.iconContainer}>
+              <Icon name={ICON_BY_TYPE[type]} size={48} color={iconColor[type]} />
+            </View>
+
+            <Text allowFontScaling={allowFontScaling} style={styles.title}>
+              {title}
+            </Text>
+
+            {!!message && (
+              <Text allowFontScaling={allowFontScaling} style={styles.message}>
+                {message}
+              </Text>
+            )}
+
+            <View style={[styles.buttonContainer, vertical && styles.buttonContainerVertical]}>
+              {effectiveButtons.map((btn, index) => {
+                const isCancel = btn.style === 'cancel';
+                let variant: ButtonVariant = btn.variant || 'primary';
+                if (!btn.variant && isCancel) variant = 'outline';
+                if (!btn.variant && btn.style === 'destructive') variant = 'destructive';
+
+                return (
+                  <Button
+                    key={index}
+                    title={btn.text}
+                    onPress={btn.onPress || onClose || (() => {})}
+                    variant={variant}
+                    style={[styles.button, vertical ? styles.buttonVertical : styles.buttonHorizontal]}
+                    textStyle={{ fontSize: 14 }}
+                  />
+                );
+              })}
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+
+  if (inline) {
+    return (
+      <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} pointerEvents="box-none">
+        {content}
+      </View>
+    );
+  }
+
+  return (
+    <Modal transparent visible={visible} animationType="fade" statusBarTranslucent presentationStyle="overFullScreen" onRequestClose={onClose || (() => {})}>
+      {content}
+    </Modal>
+  );
+});
+Alert.displayName = 'Alert';

package/src/organisms/AlertProvider.tsx

@@ -0,0 +1,125 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { Alert, type AlertButton, type AlertType } from './Alert';
+
+export interface AlertOptions {
+  title: string;
+  message?: string;
+  type?: AlertType;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export interface ConfirmOptions extends AlertOptions {
+  /** Botón de confirmar en rojo/destructivo (para "eliminar", etc). */
+  destructive?: boolean;
+}
+
+interface AlertContextValue {
+  /** Muestra un alert de un solo botón. Resuelve cuando se cierra. */
+  alert: (options: AlertOptions) => Promise<void>;
+  /** Muestra confirmar/cancelar. Resuelve true si se confirmó, false si se canceló. */
+  confirm: (options: ConfirmOptions) => Promise<boolean>;
+  hide: () => void;
+}
+
+const AlertContext = createContext<AlertContextValue | undefined>(undefined);
+
+interface InternalState {
+  visible: boolean;
+  title: string;
+  message?: string;
+  type: AlertType;
+  buttons: AlertButton[];
+}
+
+const HIDDEN: InternalState = { visible: false, title: '', type: 'info', buttons: [] };
+
+/**
+ * AlertProvider
+ * Monta un único <Alert> controlado imperativamente. Colocar una vez cerca
+ * de la raíz (dentro de UIProvider). Los handlers async pueden hacer
+ * `const ok = await confirm({ title: 'Eliminar', destructive: true })`.
+ */
+export function AlertProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<InternalState>(HIDDEN);
+  const resolverRef = useRef<((value: any) => void) | null>(null);
+
+  const hide = useCallback(() => {
+    setState(HIDDEN);
+    resolverRef.current?.(undefined);
+    resolverRef.current = null;
+  }, []);
+
+  const alertFn = useCallback((options: AlertOptions): Promise<void> => {
+    return new Promise((resolve) => {
+      resolverRef.current = resolve;
+      setState({
+        visible: true,
+        title: options.title,
+        message: options.message,
+        type: options.type ?? 'info',
+        buttons: [
+          {
+            text: options.confirmText ?? 'OK',
+            onPress: () => {
+              setState(HIDDEN);
+              resolve();
+              resolverRef.current = null;
+            },
+          },
+        ],
+      });
+    });
+  }, []);
+
+  const confirmFn = useCallback((options: ConfirmOptions): Promise<boolean> => {
+    return new Promise((resolve) => {
+      resolverRef.current = resolve;
+      setState({
+        visible: true,
+        title: options.title,
+        message: options.message,
+        type: options.type ?? 'question',
+        buttons: [
+          {
+            text: options.cancelText ?? 'Cancel',
+            style: 'cancel',
+            variant: 'outline',
+            onPress: () => {
+              setState(HIDDEN);
+              resolve(false);
+              resolverRef.current = null;
+            },
+          },
+          {
+            text: options.confirmText ?? 'OK',
+            variant: options.destructive ? 'destructive' : 'primary',
+            style: options.destructive ? 'destructive' : 'default',
+            onPress: () => {
+              setState(HIDDEN);
+              resolve(true);
+              resolverRef.current = null;
+            },
+          },
+        ],
+      });
+    });
+  }, []);
+
+  const value = useMemo<AlertContextValue>(() => ({ alert: alertFn, confirm: confirmFn, hide }), [alertFn, confirmFn, hide]);
+
+  return (
+    <AlertContext.Provider value={value}>
+      {children}
+      <Alert visible={state.visible} title={state.title} message={state.message} type={state.type} buttons={state.buttons} onClose={hide} />
+    </AlertContext.Provider>
+  );
+}
+
+export function useAlert(): AlertContextValue {
+  const ctx = useContext(AlertContext);
+  if (!ctx) {
+    throw new Error('orn-ui: useAlert must be used within an <AlertProvider>.');
+  }
+  return ctx;
+}

package/src/organisms/BottomSheet.tsx

@@ -0,0 +1,95 @@
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { Animated, Dimensions, Modal, PanResponder, Pressable, View, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+import { useInsets } from '../theme/UIProvider';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+const DISMISS_THRESHOLD = 100;
+
+export interface BottomSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  closeAccessibilityLabel?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: { flex: 1, justifyContent: 'flex-end' },
+  backdrop: { backgroundColor: theme.colors.overlay },
+  sheet: {
+    backgroundColor: theme.colors.surface,
+    borderTopLeftRadius: theme.tokens.radius.xxl,
+    borderTopRightRadius: theme.tokens.radius.xxl,
+    paddingHorizontal: theme.tokens.spacing.xl,
+    ...theme.tokens.shadow.lg,
+  },
+  handleArea: { paddingVertical: theme.tokens.spacing.md, alignItems: 'center' },
+  handle: { width: 40, height: 5, borderRadius: 3, backgroundColor: theme.colors.border },
+}));
+
+const absoluteFill: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };
+
+/**
+ * BottomSheet
+ * Modal que aparece desde abajo: animación con Animated (no la del Modal
+ * nativo) y arrastre para cerrar con PanResponder — no un gesture-handler
+ * externo, para mantener la librería en cero dependencias.
+ */
+export const BottomSheet = memo(({ visible, onClose, children, closeAccessibilityLabel = 'Close' }: BottomSheetProps) => {
+  const styles = useStyles();
+  const insets = useInsets();
+  const [mounted, setMounted] = useState(visible);
+  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      Animated.timing(translateY, { toValue: 0, duration: 250, useNativeDriver: true }).start();
+      Animated.timing(backdropOpacity, { toValue: 1, duration: 250, useNativeDriver: true }).start();
+    } else {
+      Animated.timing(translateY, { toValue: SCREEN_HEIGHT, duration: 200, useNativeDriver: true }).start(({ finished }) => {
+        if (finished) setMounted(false);
+      });
+      Animated.timing(backdropOpacity, { toValue: 0, duration: 200, useNativeDriver: true }).start();
+    }
+  }, [visible]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gesture) => gesture.dy > 5 && Math.abs(gesture.dy) > Math.abs(gesture.dx),
+      onPanResponderMove: (_, gesture) => {
+        if (gesture.dy > 0) translateY.setValue(gesture.dy);
+      },
+      onPanResponderRelease: (_, gesture) => {
+        if (gesture.dy > DISMISS_THRESHOLD) {
+          onClose();
+        } else {
+          Animated.timing(translateY, { toValue: 0, duration: 150, useNativeDriver: true }).start();
+        }
+      },
+    })
+  ).current;
+
+  if (!mounted) return null;
+
+  return (
+    <Modal visible transparent animationType="none" statusBarTranslucent onRequestClose={onClose}>
+      <View style={styles.container}>
+        <Animated.View style={[absoluteFill, styles.backdrop, { opacity: backdropOpacity }]}>
+          <Pressable style={absoluteFill} onPress={onClose} accessibilityRole="button" accessibilityLabel={closeAccessibilityLabel} />
+        </Animated.View>
+
+        <Animated.View
+          style={[styles.sheet, { paddingBottom: Math.max(insets.bottom, 20) }, { transform: [{ translateY }] }]}
+        >
+          <View style={styles.handleArea} {...panResponder.panHandlers}>
+            <View style={styles.handle} />
+          </View>
+          {children}
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+});
+BottomSheet.displayName = 'BottomSheet';