orn-ui 0.2.6 → 0.2.8

package/src/atoms/Gradient.tsx

@@ -0,0 +1,99 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+export type GradientDirection = 'vertical' | 'horizontal' | 'diagonal' | 'diagonal-reverse';
+
+export interface GradientProps {
+  /** Paradas del degradado. Uno solo pinta plano; ninguno no pinta nada. */
+  colors: string[];
+  /**
+   * 'vertical' va de arriba a abajo, 'horizontal' de izquierda a derecha,
+   * 'diagonal' de arriba-izquierda a abajo-derecha y 'diagonal-reverse' de
+   * arriba-derecha a abajo-izquierda.
+   * @default 'vertical'
+   */
+  direction?: GradientDirection;
+  /**
+   * Bandas por tramo (un tramo = un par de colores consecutivos). Más bandas
+   * = transición más suave y más vistas en el árbol.
+   * @default 24
+   */
+  steps?: number;
+  /** Contenido por encima del degradado. */
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const DEFAULT_STEPS = 24;
+
+const styles = StyleSheet.create({
+  // Recorta el plano rotado de las diagonales y el degradado al borderRadius.
+  root: { overflow: 'hidden' },
+  segment: { flex: 1 },
+  band: { flex: 1 },
+  // Plano √2 centrado: rotado 45° cubre las esquinas sin medir el contenedor.
+  diagonalPlane: { position: 'absolute', top: '-21%', left: '-21%', width: '142%', height: '142%' },
+});
+
+/**
+ * Gradient
+ * Degradado lineal sin dependencias: React Native no trae uno en el rango
+ * soportado (Expo SDK 54–57) y `experimental_backgroundImage` no está en toda
+ * esa ventana, así que se compone con bandas.
+ *
+ * Cada tramo pinta el color inicial y encima N bandas del final con opacidad
+ * de 0 a 1. El compositor mezcla alpha linealmente: el resultado es la
+ * interpolación sRGB entre paradas sin parsear el color, y por eso vale
+ * cualquier formato que acepte RN (hex, `rgba()`, nombre).
+ */
+export const Gradient = memo(
+  ({ colors, direction = 'vertical', steps = DEFAULT_STEPS, children, style, testID }: GradientProps) => {
+    const isRow = direction === 'horizontal';
+    const isDiagonal = direction === 'diagonal' || direction === 'diagonal-reverse';
+    // rotate positivo gira en horario (Y crece hacia abajo): -45° manda el eje
+    // del degradado hacia abajo-derecha.
+    const rotate = direction === 'diagonal' ? '-45deg' : '45deg';
+    const bandCount = Math.max(2, Math.floor(steps));
+
+    const painted = useMemo(() => {
+      if (colors.length === 0) return null;
+      if (colors.length === 1) {
+        return <View style={[StyleSheet.absoluteFill, { backgroundColor: colors[0] }]} />;
+      }
+
+      const segments = colors.slice(0, -1).map((from, index) => {
+        const to = colors[index + 1] as string;
+        return (
+          <View
+            key={`${from}-${to}-${index}`}
+            style={[styles.segment, { backgroundColor: from, flexDirection: isRow ? 'row' : 'column' }]}
+          >
+            {Array.from({ length: bandCount }, (_, band) => (
+              <View key={band} style={[styles.band, { backgroundColor: to, opacity: band / (bandCount - 1) }]} />
+            ))}
+          </View>
+        );
+      });
+
+      const stack = (
+        <View style={[StyleSheet.absoluteFill, { flexDirection: isRow ? 'row' : 'column' }]}>{segments}</View>
+      );
+
+      if (!isDiagonal) return stack;
+      return <View style={[styles.diagonalPlane, { transform: [{ rotate }] }]}>{segments}</View>;
+    }, [colors, isRow, isDiagonal, rotate, bandCount]);
+
+    return (
+      <View testID={testID} style={[styles.root, style]}>
+        {/* pointerEvents va en el pintado, no en la raíz: el degradado no debe
+            robarle los toques a lo que el consumidor ponga encima. */}
+        <View style={StyleSheet.absoluteFill} pointerEvents="none">
+          {painted}
+        </View>
+        {children}
+      </View>
+    );
+  }
+);
+Gradient.displayName = 'Gradient';

package/src/atoms/Image.tsx

@@ -20,16 +20,16 @@ export interface ImageProps {
   height?: number;
   /** @default 'cover' */
   resizeMode?: ImageResizeMode;
-  /** Radio de las esquinas, mismo patrón que Avatar/Card. @default 0 */
+  /** Corner radius, same pattern as Avatar/Card. @default 0 */
   radius?: number;
-  /** Qué mostrar mientras carga. `false` para no mostrar nada. @default true (spinner chico) */
+  /** What to show while loading. `false` to show nothing. @default true (small spinner) */
   loading?: React.ReactNode | boolean;
-  /** Qué mostrar si la carga falla. @default un placeholder gris, sin contenido */
+  /** What to show if loading fails. @default a gray placeholder, no content */
   fallback?: React.ReactNode;
   /**
-   * 'high' dispara Image.prefetch() al montar, antes de que <Image> arranque
-   * su propio ciclo de carga — pensado para la imagen above-the-fold de una
-   * pantalla (la primera que el usuario ve). Sin costo si ya está en caché.
+   * 'high' triggers Image.prefetch() on mount, before <Image> starts
+   * its own load cycle — meant for the above-the-fold image of a
+   * screen (the first one the user sees). No cost if it's already cached.
    * @default 'normal'
    */
   priority?: 'low' | 'normal' | 'high';

package/src/atoms/Input.tsx

@@ -17,7 +17,7 @@ import type { IconName } from '../icons/types';
 
 export interface InputProps extends Omit<TextInputProps, 'style'> {
   label?: string;
-  /** Muestra un asterisco junto al label. Puramente visual, no valida nada. */
+  /** Shows an asterisk next to the label. Purely visual, doesn't validate anything. */
   required?: boolean;
   error?: string;
   containerStyle?: StyleProp<ViewStyle>;

package/src/atoms/PressableScale.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 
 export interface PressableScaleProps extends Omit<PressableProps, 'style'> {
-  /** Escala objetivo al presionar. @default 0.96 */
+  /** Target scale when pressed. @default 0.96 */
   scaleTo?: number;
   style?: StyleProp<ViewStyle>;
   children: React.ReactNode;

package/src/atoms/Skeleton.tsx

@@ -13,17 +13,17 @@ import { useTheme } from '../theme/UIProvider';
 export type SkeletonVariant = 'rect' | 'text' | 'circle';
 
 export interface SkeletonProps {
-  /** @default '100%' ('circle' lo usa también como diámetro) */
+  /** @default '100%' ('circle' also uses this as the diameter) */
   width?: DimensionValue;
-  /** @default 16 ('text' usa el alto de línea; 'circle', el ancho) */
+  /** @default 16 ('text' uses the line height; 'circle', the width) */
   height?: DimensionValue;
   /** @default 'rect' */
   variant?: SkeletonVariant;
-  /** Override del radius del theme. */
+  /** Override of the theme's radius. */
   radius?: number;
-  /** Líneas apiladas, sólo para variant="text". @default 1 */
+  /** Stacked lines, only for variant="text". @default 1 */
   lines?: number;
-  /** Ancho de la última línea, para que el párrafo no termine en bloque. @default '60%' */
+  /** Width of the last line, so the paragraph doesn't end as a solid block. @default '60%' */
   lastLineWidth?: DimensionValue;
   /** @default true */
   animated?: boolean;

package/src/atoms/Spinner.tsx

@@ -9,15 +9,15 @@ export interface SpinnerProps {
   size?: 'small' | 'large';
   color?: string;
   text?: string;
-  /** @default true. En false, no ocupa flex:1 (útil inline, dentro de un botón/fila). */
+  /** @default true. When false, doesn't take up flex:1 (useful inline, inside a button/row). */
   fullscreen?: boolean;
   /**
-   * 'native' usa el ActivityIndicator del sistema; 'dots' y 'ring' son
-   * indicadores propios, iguales en iOS y Android.
+   * 'native' uses the system's ActivityIndicator; 'dots' and 'ring' are
+   * custom indicators, identical on iOS and Android.
    * @default 'native'
    */
   variant?: SpinnerVariant;
-  /** Indicador totalmente propio. Gana sobre `variant`. */
+  /** Fully custom indicator. Takes precedence over `variant`. */
   indicator?: React.ReactNode;
   testID?: string;
 }

package/src/atoms/Transition.tsx

@@ -13,25 +13,25 @@ export type TransitionPreset =
 
 export interface TransitionProps {
   children: React.ReactNode;
-  /** Entra en true, sale (y desmonta) en false. @default true */
+  /** Enters when true, exits (and unmounts) when false. @default true */
   visible?: boolean;
-  /** Uno o varios: 'fade scale' combina opacidad y escala. @default 'fade' */
+  /** One or more: 'fade scale' combines opacity and scale. @default 'fade' */
   preset?: TransitionPreset | TransitionPreset[];
-  /** ms del timing. @default tokens.duration.base */
+  /** Timing duration in ms. @default tokens.duration.base */
   duration?: number;
-  /** ms antes de arrancar. Un índice por delay escalona una lista. @default 0 */
+  /** ms before starting. A per-index delay staggers a list. @default 0 */
   delay?: number;
-  /** Píxeles que recorren los presets de slide. @default 24 */
+  /** Pixels traveled by the slide presets. @default 24 */
   distance?: number;
-  /** Spring en vez de timing (implícito en 'pop'). */
+  /** Spring instead of timing (implicit in 'pop'). */
   spring?: boolean;
-  /** Anima también el primer render. En false arranca ya presente. @default true */
+  /** Also animates the first render. When false it starts already present. @default true */
   appear?: boolean;
-  /** Deja el nodo montado al salir, sólo lo esconde. @default false */
+  /** Keeps the node mounted on exit, only hides it. @default false */
   keepMounted?: boolean;
   /**
-   * Progreso 0→1 manejado desde afuera. Con esto el Transition sólo interpola:
-   * quien lo pasa decide cuándo y cómo avanza (un PanResponder, por ejemplo).
+   * 0→1 progress driven from outside. With this, Transition only interpolates:
+   * whoever passes it decides when and how it advances (a PanResponder, for example).
    */
   value?: Animated.Value;
   onEntered?: () => void;

package/src/atoms/index.ts

@@ -14,6 +14,8 @@ export { Card } from './Card';
 export type { CardProps } from './Card';
 export { Divider } from './Divider';
 export type { DividerProps } from './Divider';
+export { Gradient } from './Gradient';
+export type { GradientProps, GradientDirection } from './Gradient';
 export { Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { Image, prefetchImage } from './Image';

package/src/molecules/AvatarHeader.tsx

@@ -6,10 +6,10 @@ import { Icon } from '../icons/Icon';
 import type { IconName } from '../icons/types';
 
 export interface AvatarHeaderProps {
-  /** Ícono a mostrar dentro del círculo. Si se omite, se usan `initials`. */
+  /** Icon to show inside the circle. If omitted, `initials` is used instead. */
   iconName?: IconName;
   iconColor?: string;
-  /** Texto corto (ej. 2 letras) mostrado si no se pasa `iconName`. */
+  /** Short text (e.g. 2 letters) shown when `iconName` isn't provided. */
   initials?: string;
   title: string;
   subtitle?: React.ReactNode;

package/src/molecules/FormActions.tsx

@@ -5,7 +5,7 @@ import type { IconName } from '../icons/types';
 import { useLabels } from '../theme/UIProvider';
 
 export interface FormActionsProps {
-  /** Si se omite, solo se muestra el botón secundario. */
+  /** If omitted, only the secondary button is shown. */
   primaryLabel?: string;
   onPrimaryPress?: () => void;
   primaryDisabled?: boolean;

package/src/molecules/OptionCard.tsx

@@ -8,13 +8,13 @@ import type { IconName } from '../icons/types';
 
 export interface OptionCardProps {
   label: string;
-  /** Línea secundaria: el detalle que decide la elección ("llega en 3 días"). */
+  /** Secondary line: the detail that decides the choice ("arrives in 3 days"). */
   description?: string;
   iconName?: IconName;
   isSelected: boolean;
   onPress: () => void;
   disabled?: boolean;
-  /** 'vertical': ícono arriba, texto abajo centrado. 'horizontal': en fila. @default 'horizontal' */
+  /** 'vertical': icon on top, text centered below. 'horizontal': in a row. @default 'horizontal' */
   layout?: 'vertical' | 'horizontal';
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/molecules/Stepper.tsx

@@ -11,23 +11,23 @@ export interface StepperProps {
   onChangeText: (text: string) => void;
   onIncrement: () => void;
   onDecrement: () => void;
-  /** Escala del control: alto, botones, ícono y tipografía. @default 'md' */
+  /** Scale of the control: height, buttons, icon and typography. @default 'md' */
   size?: StepperSize;
-  /** Ocupa todo el ancho disponible y el input se lleva el sobrante. @default false */
+  /** Takes up all available width and the input absorbs the extra space. @default false */
   block?: boolean;
   /**
-   * En false el valor sólo se cambia con los botones: el teclado no se abre y
-   * el campo pierde el fondo que lo anuncia como editable. @default true
+   * When false the value can only be changed with the buttons: the keyboard doesn't open and
+   * the field loses the background that marks it as editable. @default true
    */
   editable?: boolean;
   /**
-   * Mínimo permitido. Deshabilita "-" al alcanzarlo y acota lo tipeado al
-   * salir del campo. Los negativos se aceptan sólo si `min` es negativo.
+   * Minimum allowed value. Disables "-" when reached and clamps the typed value on
+   * blur. Negative values are only accepted if `min` is negative.
    */
   min?: number;
-  /** Máximo permitido. Deshabilita "+" al alcanzarlo y acota lo tipeado. */
+  /** Maximum allowed value. Disables "+" when reached and clamps the typed value. */
   max?: number;
-  /** Acepta un separador decimal, normalizando la coma a punto. @default false */
+  /** Accepts a decimal separator, normalizing comma to dot. @default false */
   allowDecimals?: boolean;
   style?: StyleProp<ViewStyle>;
   incrementAccessibilityLabel?: string;

package/src/molecules/Steps.tsx

@@ -13,16 +13,16 @@ export type StepStatus = 'completed' | 'current' | 'pending';
 
 export interface StepsProps {
   steps: StepItem[];
-  /** Índice del paso actual (0-based). Los anteriores quedan 'completed'. */
+  /** Index of the current step (0-based). Earlier steps become 'completed'. */
   current: number;
   /** @default 'horizontal' */
   orientation?: 'horizontal' | 'vertical';
   /**
-   * Qué muestra el círculo de un paso ya completado: un check, o su número.
+   * What the circle of an already-completed step shows: a check, or its number.
    * @default 'check'
    */
   completedIndicator?: 'check' | 'number';
-  /** Si se pasa, cada paso es tocable y reporta su índice. */
+  /** If provided, each step is tappable and reports its index. */
   onStepPress?: (index: number) => void;
   style?: StyleProp<ViewStyle>;
 }

package/src/molecules/SymmetricGrid.tsx

@@ -6,13 +6,13 @@ export interface SymmetricGridProps<T> {
   data: T[];
   renderItem: (item: T, index: number) => React.ReactElement;
   keyExtractor: (item: T, index: number) => string;
-  /** Columnas por fila. @default 2 */
+  /** Columns per row. @default 2 */
   columns?: number;
-  /** Separación entre celdas, en ambos ejes. @default theme.tokens.spacing.md */
+  /** Spacing between cells, on both axes. @default theme.tokens.spacing.md */
   gap?: number;
   /**
-   * Última fila incompleta: centrada (simétrica) en vez de pegada a la
-   * izquierda con un hueco a la derecha. @default true
+   * Incomplete last row: centered (symmetric) instead of stuck to the
+   * left with a gap on the right. @default true
    */
   balanceLastRow?: boolean;
   style?: StyleProp<ViewStyle>;

package/src/organisms/BottomSheet.tsx

@@ -27,21 +27,21 @@ export interface BottomSheetProps {
   visible: boolean;
   onClose: () => void;
   children: React.ReactNode;
-  /** Con título aparece el header, con su botón de cerrar. */
+  /** With a title, the header appears, with its close button. */
   title?: string;
-  /** Acciones de la hoja. Dónde vive lo decide `footerPlacement`. */
+  /** Sheet actions. Where they live is decided by `footerPlacement`. */
   footer?: React.ReactNode;
   /**
-   * 'fixed' lo ancla al pie de la hoja; 'scroll' lo deja al final del
-   * contenido; 'hide-with-keyboard' lo esconde mientras se escribe, que en un
-   * formulario largo le devuelve esa franja al campo enfocado. @default 'fixed'
+   * 'fixed' anchors it to the bottom of the sheet; 'scroll' leaves it at the
+   * end of the content; 'hide-with-keyboard' hides it while typing, which in a
+   * long form gives that strip back to the focused field. @default 'fixed'
    */
   footerPlacement?: FooterPlacement;
-  /** El contenido scrollea cuando no entra. @default true */
+  /** The content scrolls when it doesn't fit. @default true */
   scrollable?: boolean;
-  /** Arrastrar la hoja hacia abajo la cierra. @default true */
+  /** Dragging the sheet down closes it. @default true */
   draggable?: boolean;
-  /** Fracción de la pantalla (0-1) o píxeles. @default 0.9 */
+  /** Fraction of the screen (0-1) or pixels. @default 0.9 */
   maxHeight?: number;
   closeAccessibilityLabel?: string;
   containerStyle?: ViewStyle;

package/src/organisms/DateField.tsx

@@ -11,31 +11,31 @@ export interface DateFieldProps
   label?: string;
   required?: boolean;
   /**
-   * 'single' elige una fecha; 'range' elige un intervalo con dos toques.
+   * 'single' picks one date; 'range' picks an interval with two taps.
    * @default 'single'
    */
   mode?: 'single' | 'range';
-  /** Fecha elegida en mode="single". */
+  /** Selected date in mode="single". */
   value?: Date;
-  /** Se llama en mode="single". */
+  /** Called in mode="single". */
   onChange?: (date: Date) => void;
-  /** Rango elegido en mode="range". */
+  /** Selected range in mode="range". */
   range?: DateRange;
-  /** Se llama en mode="range", tanto al fijar el inicio como al cerrar el rango. */
+  /** Called in mode="range", both when setting the start and when closing the range. */
   onRangeChange?: (range: DateRange) => void;
   placeholder?: string;
   error?: string;
   disabled?: boolean;
-  /** Formatea la fecha en el campo. @default "Month D, YYYY" */
+  /** Formats the date in the field. @default "Month D, YYYY" */
   format?: (date: Date) => string;
-  /** Título del modal del calendario. @default el `selectDate` de `useLabels()` */
+  /** Title of the calendar modal. @default the `selectDate` from `useLabels()` */
   modalTitle?: string;
   /**
-   * Si se pasa, el modal muestra un botón que borra la selección y cierra.
-   * Sin esto no hay botón: el "Clear" anterior sólo cerraba, sin limpiar nada.
+   * If provided, the modal shows a button that clears the selection and closes.
+   * Without this there's no button: the previous "Clear" only closed, without clearing anything.
    */
   onClear?: () => void;
-  /** Texto de ese botón. @default el `clear` de `useLabels()` */
+  /** Text for that button. @default the `clear` from `useLabels()` */
   clearLabel?: string;
   containerStyle?: StyleProp<ViewStyle>;
   testID?: string;

package/src/organisms/DatePicker.tsx

@@ -20,29 +20,29 @@ export interface DateRange {
 
 export interface DatePickerProps {
   /**
-   * 'single' elige una fecha; 'range' elige un intervalo con dos toques.
+   * 'single' picks one date; 'range' picks an interval with two taps.
    * @default 'single'
    */
   mode?: 'single' | 'range';
-  /** Fecha elegida en mode="single". */
+  /** Selected date in mode="single". */
   value?: Date;
-  /** Se llama en mode="single". */
+  /** Called in mode="single". */
   onChange?: (date: Date) => void;
-  /** Rango elegido en mode="range". */
+  /** Selected range in mode="range". */
   range?: DateRange;
-  /** Se llama en mode="range", tanto al fijar el inicio como al cerrar el rango. */
+  /** Called in mode="range", both when setting the start and when closing the range. */
   onRangeChange?: (range: DateRange) => void;
   minDate?: Date;
   maxDate?: Date;
-  /** Mes mostrado al abrir si no hay `value`. @default hoy */
+  /** Month shown on open if there's no `value`. @default today */
   defaultMonth?: Date;
-  /** Nombres de los meses. @default los de `useLabels()` */
+  /** Month names. @default those from `useLabels()` */
   monthNames?: string[];
-  /** Iniciales de los días, índice 0 = domingo. @default las de `useLabels()` */
+  /** Day initials, index 0 = Sunday. @default those from `useLabels()` */
   weekdayNames?: string[];
-  /** 0 = domingo, 1 = lunes. @default 0 */
+  /** 0 = Sunday, 1 = Monday. @default 0 */
   firstDayOfWeek?: 0 | 1;
-  /** Avisa qué mes quedó a la vista al navegar con las flechas. */
+  /** Reports which month became visible when navigating with the arrows. */
   onVisibleMonthChange?: (month: Date) => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/organisms/List.tsx

@@ -12,19 +12,19 @@ export interface ListProps<T> {
   keyExtractor: (item: T, index: number) => string;
   renderItem: FlatListProps<T>['renderItem'];
 
-  /** Carga inicial: mientras sea true y no haya datos, se muestran placeholders. */
+  /** Initial load: while true and there's no data, placeholders are shown. */
   isLoading: boolean;
-  /** Recarga con datos ya en pantalla (pull-to-refresh). @default false */
+  /** Reload with data already on screen (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 */
+  /** Controlled by the consumer: while false, a fullscreen spinner is shown. @default true */
   isReady?: boolean;
   loadingText?: string;
   loadingMoreText?: string;
 
-  /** Filas fantasma de la carga inicial. @default 6 */
+  /** Ghost rows for the initial load. @default 6 */
   skeletonCount?: number;
-  /** Placeholder propio, para que calce con la forma real del ítem. */
+  /** Custom placeholder, to match the real shape of the item. */
   renderSkeletonItem?: () => React.ReactElement;
 
   onEndReached?: () => void;
@@ -41,7 +41,7 @@ export interface ListProps<T> {
   contentContainerStyle?: ViewStyle;
   containerStyle?: ViewStyle;
 
-  /** Componente de lista a usar (FlashList, etc). @default FlatList */
+  /** List component to use (FlashList, etc). @default FlatList */
   ListComponent?: React.ComponentType<any>;
   listProps?: Record<string, unknown>;
 }

package/src/organisms/NavigationBar.tsx

@@ -26,11 +26,11 @@ export interface NavigationBarProps {
   items: NavigationBarItem[];
   activeKey: string;
   onChange: (key: string) => void;
-  /** Borde de la pantalla donde vive la barra. @default 'bottom' */
+  /** Screen edge where the bar lives. @default 'bottom' */
   position?: 'bottom' | 'top';
   /** @default true */
   showLabels?: boolean;
-  /** Suma el inset de safe area del borde donde vive la barra. @default true */
+  /** Adds the safe area inset for the edge where the bar lives. @default true */
   safeArea?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/organisms/ReorderableList.tsx

@@ -5,19 +5,19 @@ import { createStyles } from '../theme/createStyles';
 export interface ReorderableListProps<T> {
   data: T[];
   keyExtractor: (item: T, index: number) => string;
-  /** Alto fijo de cada fila: necesario para calcular el índice destino sin medir layout async. */
+  /** Fixed height of each row: needed to calculate the target index without measuring layout async. */
   itemHeight: number;
   renderItem: (item: T, index: number, dragging: boolean) => React.ReactElement;
-  /** Se llama al soltar, con el arreglo ya reordenado. No muta `data`. */
+  /** Called on release, with the array already reordered. Does not mutate `data`. */
   onReorder: (data: T[]) => void;
   /**
-   * Empieza el arrastre de la fila `index`. Úsalo para apagar el scroll del
-   * contenedor (`scrollEnabled={false}`) mientras dura: en iOS el
-   * `UIScrollView` padre cancela los toques del contenido apenas su gesto
-   * vertical arranca, y sin eso el arrastre muere a los pocos píxeles.
+   * Starts dragging row `index`. Use it to turn off the container's scroll
+   * (`scrollEnabled={false}`) while it lasts: on iOS the parent
+   * `UIScrollView` cancels touches on the content as soon as its
+   * vertical gesture starts, and without this the drag dies within a few pixels.
    */
   onDragStart?: (index: number) => void;
-  /** Termina el arrastre — soltando o por cancelación. Siempre corre si corrió `onDragStart`. */
+  /** Ends the drag — on release or cancellation. Always runs if `onDragStart` ran. */
   onDragEnd?: () => void;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;

package/src/organisms/Screen.tsx

@@ -10,14 +10,14 @@ export interface ScreenProps {
   style?: ViewStyle;
   scrollable?: boolean;
   contentContainerStyle?: ViewStyle;
-  /** Qué insets de safe area aplicar. @default ['top', 'bottom'] */
+  /** Which safe area insets to apply. @default ['top', 'bottom'] */
   edges?: ScreenEdge[];
   /**
-   * Compensa el teclado: en iOS con scroll lo hace el propio ScrollView, en el
-   * resto de los casos 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.
+   * Compensates for the keyboard: on iOS with scroll the ScrollView itself does it, in
+   * other cases a KeyboardAvoidingView does. Set to false when
+   * the content already brings its own scroller that handles the keyboard (Wizard,
+   * List, SearchList): the two compensations add up and the focused field
+   * ends up pushed off screen.
    * @default true
    */
   keyboardAvoiding?: boolean;