orn-ui 0.1.1 → 0.2.1

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "core": {
-    "bytes": 27455
+    "bytes": 35592
   },
   "components": [
     {
@@ -141,6 +141,31 @@
       ],
       "bytes": 4626
     },
+    {
+      "name": "Skeleton",
+      "slug": "skeleton",
+      "category": "atoms",
+      "exportedNames": [
+        "Skeleton"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 3554
+    },
+    {
+      "name": "Transition",
+      "slug": "transition",
+      "category": "atoms",
+      "exportedNames": [
+        "Transition",
+        "useReduceMotion"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 6558
+    },
     {
       "name": "EmptyState",
       "slug": "empty-state",
@@ -188,19 +213,20 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 1565
+      "bytes": 1709
     },
     {
       "name": "Stepper",
       "slug": "stepper",
       "category": "molecules",
       "exportedNames": [
-        "Stepper"
+        "Stepper",
+        "sanitizeNumeric"
       ],
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2842
+      "bytes": 6717
     },
     {
       "name": "OptionCard",
@@ -210,9 +236,10 @@
         "OptionCard"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "pressable-scale"
       ],
-      "bytes": 3006
+      "bytes": 4156
     },
     {
       "name": "InfoRow",
@@ -253,16 +280,16 @@
       "bytes": 2487
     },
     {
-      "name": "ThemeToggle",
-      "slug": "theme-toggle",
+      "name": "SegmentedControl",
+      "slug": "segmented-control",
       "category": "molecules",
       "exportedNames": [
-        "ThemeToggle"
+        "SegmentedControl"
       ],
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2444
+      "bytes": 2884
     },
     {
       "name": "Steps",
@@ -274,7 +301,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 7314
+      "bytes": 8302
     },
     {
       "name": "Modal",
@@ -287,9 +314,10 @@
         "core",
         "title",
         "icon-button",
-        "pressable-scale"
+        "pressable-scale",
+        "transition"
       ],
-      "bytes": 9588
+      "bytes": 8647
     },
     {
       "name": "BottomSheet",
@@ -299,9 +327,13 @@
         "BottomSheet"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "title",
+        "icon-button",
+        "pressable-scale",
+        "transition"
       ],
-      "bytes": 3765
+      "bytes": 8662
     },
     {
       "name": "Select",
@@ -313,7 +345,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 5357
+      "bytes": 12122
     },
     {
       "name": "Alert",
@@ -334,14 +366,17 @@
       "category": "organisms",
       "exportedNames": [
         "AlertProvider",
-        "useAlert"
+        "useAlert",
+        "showAlert",
+        "showConfirm",
+        "hideAlert"
       ],
       "registryDependencies": [
         "core",
         "alert",
         "button"
       ],
-      "bytes": 3819
+      "bytes": 5470
     },
     {
       "name": "Screen",
@@ -353,7 +388,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2814
+      "bytes": 3321
     },
     {
       "name": "List",
@@ -365,9 +400,10 @@
       "registryDependencies": [
         "core",
         "empty-state",
+        "skeleton",
         "spinner"
       ],
-      "bytes": 4767
+      "bytes": 6039
     },
     {
       "name": "SearchList",
@@ -380,11 +416,12 @@
         "core",
         "input",
         "empty-state",
+        "skeleton",
         "spinner",
         "icon-button",
         "pressable-scale"
       ],
-      "bytes": 5856
+      "bytes": 9285
     },
     {
       "name": "Toast",
@@ -394,9 +431,10 @@
         "Toast"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "transition"
       ],
-      "bytes": 4737
+      "bytes": 4402
     },
     {
       "name": "ToastProvider",
@@ -404,13 +442,17 @@
       "category": "organisms",
       "exportedNames": [
         "ToastProvider",
-        "useToast"
+        "useToast",
+        "showToast",
+        "hideToast",
+        "hideAllToasts"
       ],
       "registryDependencies": [
         "core",
-        "toast"
+        "toast",
+        "transition"
       ],
-      "bytes": 4920
+      "bytes": 6368
     },
     {
       "name": "DatePicker",
@@ -427,7 +469,7 @@
         "icon-button",
         "pressable-scale"
       ],
-      "bytes": 10098
+      "bytes": 13400
     },
     {
       "name": "DateField",
@@ -442,10 +484,11 @@
         "title",
         "icon-button",
         "pressable-scale",
+        "transition",
         "date-picker",
         "button"
       ],
-      "bytes": 4553
+      "bytes": 6402
     },
     {
       "name": "Wizard",
@@ -457,9 +500,35 @@
       "registryDependencies": [
         "core",
         "steps",
-        "button"
+        "button",
+        "transition"
+      ],
+      "bytes": 5625
+    },
+    {
+      "name": "ThemeToggle",
+      "slug": "theme-toggle",
+      "category": "organisms",
+      "exportedNames": [
+        "ThemeToggle"
+      ],
+      "registryDependencies": [
+        "core",
+        "segmented-control"
+      ],
+      "bytes": 1189
+    },
+    {
+      "name": "NavigationBar",
+      "slug": "navigation-bar",
+      "category": "organisms",
+      "exportedNames": [
+        "NavigationBar"
+      ],
+      "registryDependencies": [
+        "core"
       ],
-      "bytes": 4569
+      "bytes": 7623
     }
   ]
 }

package/registry/list.json

@@ -9,12 +9,13 @@
   "files": [
     {
       "path": "organisms/List.tsx",
-      "content": "import React, { memo, useCallback } from 'react';\nimport {\n  ActivityIndicator,\n  FlatList,\n  Platform,\n  RefreshControl,\n  Text,\n  View,\n  type FlatListProps,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useColors, useLabels } from '../theme/UIProvider';\nimport { EmptyState } from '../atoms/EmptyState';\nimport { Spinner } from '../atoms/Spinner';\nimport type { IconName } from '../icons/types';\n\nexport interface ListProps<T> {\n  data: T[];\n  keyExtractor: (item: T) => string;\n  renderItem: FlatListProps<T>['renderItem'];\n\n  isLoading: boolean;\n  isLoadingMore?: boolean;\n  /** Controlado por el consumidor: mientras es false, se muestra un spinner de pantalla completa. @default true */\n  isReady?: boolean;\n  loadingText?: string;\n  loadingMoreText?: string;\n\n  onEndReached?: () => void;\n  onEndReachedThreshold?: number;\n  onRefresh?: () => void;\n\n  emptyTitle?: string;\n  emptyDescription?: string;\n  emptyIconName?: IconName;\n\n  ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];\n  ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];\n\n  contentContainerStyle?: ViewStyle;\n  containerStyle?: ViewStyle;\n\n  /** Componente de lista a usar (FlashList, etc). @default FlatList */\n  ListComponent?: React.ComponentType<any>;\n  listProps?: Record<string, unknown>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flex: 1, backgroundColor: theme.colors.background },\n  loadingOverlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    backgroundColor: theme.colors.scrim,\n    zIndex: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  loadingText: { marginTop: theme.tokens.spacing.md, color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },\n  listContent: { padding: theme.tokens.spacing.md, paddingBottom: Platform.OS === 'android' ? 100 : 80 },\n  footerLoader: { paddingVertical: theme.tokens.spacing.xl, alignItems: 'center' },\n}));\n\n/**\n * List\n * Lista con estados de carga/paginación/vacío resueltos, sin atarse a\n * expo-router ni a FlashList: `ListComponent` permite inyectar cualquiera\n * (por defecto FlatList del propio React Native).\n */\nexport function List<T>({\n  data,\n  keyExtractor,\n  renderItem,\n  isLoading,\n  isLoadingMore = false,\n  isReady = true,\n  loadingText,\n  loadingMoreText,\n  onEndReached,\n  onEndReachedThreshold = 0.3,\n  onRefresh,\n  emptyTitle,\n  emptyDescription,\n  emptyIconName,\n  ListHeaderComponent,\n  ListFooterComponent,\n  contentContainerStyle,\n  containerStyle,\n  ListComponent = FlatList,\n  listProps,\n}: ListProps<T>) {\n  const colors = useColors();\n  const styles = useStyles();\n  const labels = useLabels();\n  const resolvedLoadingText = loadingText ?? labels.loading;\n  const resolvedLoadingMoreText = loadingMoreText ?? labels.loadingMore;\n\n  const renderFooter = useCallback(() => {\n    if (ListFooterComponent) {\n      return typeof ListFooterComponent === 'function' ? <ListFooterComponent /> : (ListFooterComponent as React.ReactElement);\n    }\n    if (!isLoadingMore) return null;\n    return (\n      <View style={styles.footerLoader}>\n        <Spinner text={resolvedLoadingMoreText} fullscreen={false} />\n      </View>\n    );\n  }, [isLoadingMore, resolvedLoadingMoreText, ListFooterComponent, styles.footerLoader]);\n\n  const renderEmpty = useCallback(() => {\n    if (isLoading) return null;\n    return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={{ marginTop: 50 }} />;\n  }, [isLoading, emptyTitle, emptyDescription, emptyIconName]);\n\n  if (!isReady) {\n    return (\n      <View style={styles.container}>\n        <Spinner text={resolvedLoadingText} />\n      </View>\n    );\n  }\n\n  return (\n    <View style={[styles.container, containerStyle]}>\n      {isLoading && data.length === 0 && (\n        <View style={styles.loadingOverlay} pointerEvents=\"none\">\n          <ActivityIndicator size=\"large\" color={colors.primary} />\n          <Text style={styles.loadingText}>{resolvedLoadingText}</Text>\n        </View>\n      )}\n\n      <ListComponent\n        data={data}\n        keyExtractor={keyExtractor}\n        renderItem={renderItem}\n        contentContainerStyle={[styles.listContent, contentContainerStyle]}\n        onEndReached={onEndReached}\n        onEndReachedThreshold={onEndReachedThreshold}\n        ListHeaderComponent={ListHeaderComponent}\n        ListFooterComponent={renderFooter}\n        ListEmptyComponent={renderEmpty}\n        refreshControl={\n          onRefresh ? (\n            <RefreshControl refreshing={isLoading} onRefresh={onRefresh} colors={[colors.primary]} tintColor={colors.primary} />\n          ) : undefined\n        }\n        {...listProps}\n      />\n    </View>\n  );\n}\n"
+      "content": "import React, { useCallback } from 'react';\nimport { FlatList, RefreshControl, View, type FlatListProps, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useColors, useLabels } from '../theme/UIProvider';\nimport { EmptyState } from '../atoms/EmptyState';\nimport { Skeleton } from '../atoms/Skeleton';\nimport { Spinner } from '../atoms/Spinner';\nimport type { IconName } from '../icons/types';\n\nexport interface ListProps<T> {\n  data: T[];\n  keyExtractor: (item: T, index: number) => string;\n  renderItem: FlatListProps<T>['renderItem'];\n\n  /** Carga inicial: mientras sea true y no haya datos, se muestran placeholders. */\n  isLoading: boolean;\n  /** Recarga con datos ya en pantalla (pull-to-refresh). @default false */\n  isRefreshing?: boolean;\n  isLoadingMore?: boolean;\n  /** Controlado por el consumidor: mientras es false, se muestra un spinner de pantalla completa. @default true */\n  isReady?: boolean;\n  loadingText?: string;\n  loadingMoreText?: string;\n\n  /** Filas fantasma de la carga inicial. @default 6 */\n  skeletonCount?: number;\n  /** Placeholder propio, para que calce con la forma real del ítem. */\n  renderSkeletonItem?: () => React.ReactElement;\n\n  onEndReached?: () => void;\n  onEndReachedThreshold?: number;\n  onRefresh?: () => void;\n\n  emptyTitle?: string;\n  emptyDescription?: string;\n  emptyIconName?: IconName;\n\n  ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];\n  ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];\n\n  contentContainerStyle?: ViewStyle;\n  containerStyle?: ViewStyle;\n\n  /** Componente de lista a usar (FlashList, etc). @default FlatList */\n  ListComponent?: React.ComponentType<any>;\n  listProps?: Record<string, unknown>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flex: 1, backgroundColor: theme.colors.background },\n  listContent: { padding: theme.tokens.spacing.md },\n  footerLoader: { paddingVertical: theme.tokens.spacing.xl, alignItems: 'center' },\n  skeletonRow: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.tokens.spacing.md,\n    padding: theme.tokens.spacing.md,\n  },\n  skeletonText: { flex: 1, gap: theme.tokens.spacing.sm },\n}));\n\n/**\n * List\n * Lista con estados de carga/paginación/vacío resueltos, sin atarse a\n * expo-router ni a FlashList: `ListComponent` permite inyectar cualquiera\n * (por defecto FlatList del propio React Native).\n */\nexport function List<T>({\n  data,\n  keyExtractor,\n  renderItem,\n  isLoading,\n  isRefreshing = false,\n  isLoadingMore = false,\n  isReady = true,\n  loadingText,\n  loadingMoreText,\n  skeletonCount = 6,\n  renderSkeletonItem,\n  onEndReached,\n  onEndReachedThreshold = 0.3,\n  onRefresh,\n  emptyTitle,\n  emptyDescription,\n  emptyIconName,\n  ListHeaderComponent,\n  ListFooterComponent,\n  contentContainerStyle,\n  containerStyle,\n  ListComponent = FlatList,\n  listProps,\n}: ListProps<T>) {\n  const colors = useColors();\n  const styles = useStyles();\n  const labels = useLabels();\n  const resolvedLoadingText = loadingText ?? labels.loading;\n  const resolvedLoadingMoreText = loadingMoreText ?? labels.loadingMore;\n\n  const isInitialLoading = isLoading && data.length === 0;\n\n  // El footer propio y el loader de paginación conviven: antes el primero\n  // tapaba al segundo y la lista dejaba de avisar que estaba trayendo más.\n  const renderFooter = useCallback(() => {\n    const custom =\n      typeof ListFooterComponent === 'function' ? (\n        <ListFooterComponent />\n      ) : (\n        (ListFooterComponent as React.ReactElement | undefined) ?? null\n      );\n\n    return (\n      <>\n        {custom}\n        {isLoadingMore && (\n          <View style={styles.footerLoader}>\n            <Spinner text={resolvedLoadingMoreText} fullscreen={false} />\n          </View>\n        )}\n      </>\n    );\n  }, [isLoadingMore, resolvedLoadingMoreText, ListFooterComponent, styles.footerLoader]);\n\n  // Vacío sólo cuando ya se sabe que no hay nada: durante la carga inicial se\n  // muestran placeholders, no \"sin resultados\".\n  const renderEmpty = useCallback(() => {\n    if (isLoading || isRefreshing) return null;\n    return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={{ marginTop: 50 }} />;\n  }, [isLoading, isRefreshing, emptyTitle, emptyDescription, emptyIconName]);\n\n  if (!isReady) {\n    return (\n      <View style={styles.container}>\n        <Spinner text={resolvedLoadingText} />\n      </View>\n    );\n  }\n\n  if (isInitialLoading) {\n    return (\n      <View style={[styles.container, containerStyle]} testID=\"list-skeleton\">\n        <View style={[styles.listContent, contentContainerStyle]}>\n          {Array.from({ length: skeletonCount }, (_, i) => (\n            <React.Fragment key={i}>\n              {renderSkeletonItem?.() ?? (\n                <View style={styles.skeletonRow}>\n                  <Skeleton variant=\"circle\" width={40} />\n                  <View style={styles.skeletonText}>\n                    <Skeleton width=\"60%\" height={14} />\n                    <Skeleton width=\"35%\" height={12} />\n                  </View>\n                </View>\n              )}\n            </React.Fragment>\n          ))}\n        </View>\n      </View>\n    );\n  }\n\n  return (\n    <View style={[styles.container, containerStyle]}>\n      <ListComponent\n        data={data}\n        keyExtractor={keyExtractor}\n        renderItem={renderItem}\n        contentContainerStyle={[styles.listContent, contentContainerStyle]}\n        onEndReached={onEndReached}\n        onEndReachedThreshold={onEndReachedThreshold}\n        ListHeaderComponent={ListHeaderComponent}\n        ListFooterComponent={renderFooter}\n        ListEmptyComponent={renderEmpty}\n        refreshControl={\n          onRefresh ? (\n            <RefreshControl\n              refreshing={isRefreshing}\n              onRefresh={onRefresh}\n              colors={[colors.primary]}\n              tintColor={colors.primary}\n            />\n          ) : undefined\n        }\n        {...listProps}\n      />\n    </View>\n  );\n}\n"
     }
   ],
   "registryDependencies": [
     "core",
     "empty-state",
+    "skeleton",
     "spinner"
   ]
 }

package/registry/manifest.json

@@ -83,6 +83,22 @@
       "file": "atoms/Spinner.tsx",
       "slug": "spinner"
     },
+    {
+      "name": "Skeleton",
+      "siblingNames": [],
+      "category": "atoms",
+      "file": "atoms/Skeleton.tsx",
+      "slug": "skeleton"
+    },
+    {
+      "name": "Transition",
+      "siblingNames": [
+        "useReduceMotion"
+      ],
+      "category": "atoms",
+      "file": "atoms/Transition.tsx",
+      "slug": "transition"
+    },
     {
       "name": "EmptyState",
       "siblingNames": [],
@@ -113,7 +129,9 @@
     },
     {
       "name": "Stepper",
-      "siblingNames": [],
+      "siblingNames": [
+        "sanitizeNumeric"
+      ],
       "category": "molecules",
       "file": "molecules/Stepper.tsx",
       "slug": "stepper"
@@ -147,11 +165,11 @@
       "slug": "avatar-header"
     },
     {
-      "name": "ThemeToggle",
+      "name": "SegmentedControl",
       "siblingNames": [],
       "category": "molecules",
-      "file": "molecules/ThemeToggle.tsx",
-      "slug": "theme-toggle"
+      "file": "molecules/SegmentedControl.tsx",
+      "slug": "segmented-control"
     },
     {
       "name": "Steps",
@@ -191,7 +209,10 @@
     {
       "name": "AlertProvider",
       "siblingNames": [
-        "useAlert"
+        "useAlert",
+        "showAlert",
+        "showConfirm",
+        "hideAlert"
       ],
       "category": "organisms",
       "file": "organisms/AlertProvider.tsx",
@@ -228,7 +249,10 @@
     {
       "name": "ToastProvider",
       "siblingNames": [
-        "useToast"
+        "useToast",
+        "showToast",
+        "hideToast",
+        "hideAllToasts"
       ],
       "category": "organisms",
       "file": "organisms/ToastProvider.tsx",
@@ -258,6 +282,20 @@
       "category": "organisms",
       "file": "organisms/Wizard.tsx",
       "slug": "wizard"
+    },
+    {
+      "name": "ThemeToggle",
+      "siblingNames": [],
+      "category": "organisms",
+      "file": "organisms/ThemeToggle.tsx",
+      "slug": "theme-toggle"
+    },
+    {
+      "name": "NavigationBar",
+      "siblingNames": [],
+      "category": "organisms",
+      "file": "organisms/NavigationBar.tsx",
+      "slug": "navigation-bar"
     }
   ]
 }

package/registry/modal.json

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

package/registry/navigation-bar.json

@@ -0,0 +1,18 @@
+{
+  "name": "NavigationBar",
+  "slug": "navigation-bar",
+  "type": "component",
+  "category": "organisms",
+  "exportedNames": [
+    "NavigationBar"
+  ],
+  "files": [
+    {
+      "path": "organisms/NavigationBar.tsx",
+      "content": "import React, { memo, useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  View,\n  type LayoutChangeEvent,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useInsets, useTheme } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport interface NavigationBarItem {\n  key: string;\n  label: string;\n  iconName?: IconName;\n  /** Contador sobre el ícono. `true` pinta sólo el punto. */\n  badge?: number | string | true;\n}\n\nexport interface NavigationBarProps {\n  items: NavigationBarItem[];\n  activeKey: string;\n  onChange: (key: string) => void;\n  /** Borde de la pantalla donde vive la barra. @default 'bottom' */\n  position?: 'bottom' | 'top';\n  /** @default true */\n  showLabels?: boolean;\n  /** Suma el inset de safe area del borde donde vive la barra. @default true */\n  safeArea?: boolean;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  bar: {\n    flexDirection: 'row',\n    backgroundColor: theme.colors.surface,\n    borderColor: theme.colors.border,\n    paddingHorizontal: theme.tokens.spacing.xs,\n    paddingVertical: theme.tokens.spacing.sm,\n  },\n  barBottom: { borderTopWidth: StyleSheet.hairlineWidth },\n  barTop: { borderBottomWidth: StyleSheet.hairlineWidth },\n  indicator: {\n    position: 'absolute',\n    top: theme.tokens.spacing.xs,\n    bottom: theme.tokens.spacing.xs,\n    left: theme.tokens.spacing.sm,\n    borderRadius: theme.tokens.radius.lg,\n    backgroundColor: theme.colors.primarySoft,\n  },\n  item: { flex: 1, paddingVertical: theme.tokens.spacing.xs },\n  itemContent: { alignItems: 'center', justifyContent: 'center', gap: 2 },\n  label: { fontSize: theme.tokens.fontSize.xs, fontWeight: theme.tokens.fontWeight.medium },\n  badge: {\n    position: 'absolute',\n    top: -4,\n    left: '50%',\n    marginLeft: 4,\n    minWidth: 16,\n    height: 16,\n    paddingHorizontal: 4,\n    borderRadius: theme.tokens.radius.full,\n    backgroundColor: theme.colors.error,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  badgeDot: { minWidth: 10, height: 10, top: -2, paddingHorizontal: 0 },\n  badgeText: {\n    fontSize: 10,\n    fontWeight: theme.tokens.fontWeight.bold,\n    color: theme.colors.onError,\n  },\n}));\n\nconst ICON_SIZE = 22;\n\n/**\n * NavigationBar\n * Barra de navegación por pestañas con la misma apariencia y las mismas\n * transiciones en iOS y Android: el indicador se desliza hasta la pestaña\n * activa y su contenido crece y toma el color de acento con un cross-fade.\n * No navega por su cuenta — reporta la pestaña tocada y el consumidor decide.\n */\nexport const NavigationBar = memo(\n  ({\n    items,\n    activeKey,\n    onChange,\n    position = 'bottom',\n    showLabels = true,\n    safeArea = true,\n    style,\n    testID,\n  }: NavigationBarProps) => {\n    const theme = useTheme();\n    const colors = useColors();\n    const styles = useStyles();\n    const insets = useInsets();\n    const allowFontScaling = useAllowFontScaling();\n\n    const [barWidth, setBarWidth] = useState(0);\n    const slide = useRef(new Animated.Value(0)).current;\n    const placed = useRef(false);\n\n    const activeIndex = Math.max(\n      0,\n      items.findIndex((item) => item.key === activeKey)\n    );\n    const itemWidth = items.length > 0 ? barWidth / items.length : 0;\n\n    useEffect(() => {\n      if (itemWidth <= 0) return;\n      const to = activeIndex * itemWidth;\n      // En el primer layout el indicador aparece en su lugar; animarlo desde 0\n      // sería un deslizamiento que el usuario no pidió.\n      if (!placed.current) {\n        placed.current = true;\n        slide.setValue(to);\n        return;\n      }\n      Animated.spring(slide, { toValue: to, useNativeDriver: true, friction: 9, tension: 90 }).start();\n    }, [activeIndex, itemWidth, slide]);\n\n    const onLayout = (e: LayoutChangeEvent) => {\n      const next = e.nativeEvent.layout.width - theme.tokens.spacing.xs * 2;\n      if (next !== barWidth) setBarWidth(next);\n    };\n\n    const renderContent = (item: NavigationBarItem, color: string) => (\n      <>\n        {!!item.iconName && <Icon name={item.iconName} size={ICON_SIZE} color={color} />}\n        {showLabels && (\n          <Text allowFontScaling={allowFontScaling} numberOfLines={1} style={[styles.label, { color }]}>\n            {item.label}\n          </Text>\n        )}\n      </>\n    );\n\n    return (\n      <View\n        testID={testID}\n        onLayout={onLayout}\n        accessibilityRole=\"tablist\"\n        style={[\n          styles.bar,\n          position === 'bottom' ? styles.barBottom : styles.barTop,\n          safeArea && position === 'bottom' && { paddingBottom: theme.tokens.spacing.sm + insets.bottom },\n          safeArea && position === 'top' && { paddingTop: theme.tokens.spacing.sm + insets.top },\n          style,\n        ]}\n      >\n        {itemWidth > 0 && (\n          <Animated.View\n            testID=\"navigation-bar-indicator\"\n            pointerEvents=\"none\"\n            style={[\n              styles.indicator,\n              safeArea && position === 'bottom' && { bottom: theme.tokens.spacing.xs + insets.bottom },\n              safeArea && position === 'top' && { top: theme.tokens.spacing.xs + insets.top },\n              {\n                width: itemWidth - theme.tokens.spacing.sm * 2,\n                transform: [{ translateX: slide }],\n              },\n            ]}\n          />\n        )}\n\n        {items.map((item, index) => {\n          const active = index === activeIndex;\n          const range = [(index - 1) * itemWidth, index * itemWidth, (index + 1) * itemWidth];\n          const scale =\n            itemWidth > 0\n              ? slide.interpolate({ inputRange: range, outputRange: [1, 1.08, 1], extrapolate: 'clamp' })\n              : 1;\n          const activeOpacity =\n            itemWidth > 0\n              ? slide.interpolate({ inputRange: range, outputRange: [0, 1, 0], extrapolate: 'clamp' })\n              : 0;\n\n          return (\n            <TouchableOpacity\n              key={item.key}\n              style={styles.item}\n              activeOpacity={0.7}\n              onPress={() => onChange(item.key)}\n              accessibilityRole=\"tab\"\n              accessibilityLabel={item.label}\n              accessibilityState={{ selected: active }}\n            >\n              <Animated.View style={[styles.itemContent, { transform: [{ scale }] }]}>\n                {renderContent(item, colors.textLight)}\n                {/* Copia decorativa: sin ocultarla, el lector lee el label dos veces. */}\n                <Animated.View\n                  pointerEvents=\"none\"\n                  accessibilityElementsHidden\n                  importantForAccessibility=\"no-hide-descendants\"\n                  style={[StyleSheet.absoluteFill, styles.itemContent, { opacity: activeOpacity }]}\n                >\n                  {renderContent(item, colors.primaryText)}\n                </Animated.View>\n\n                {item.badge !== undefined && (\n                  <View style={[styles.badge, item.badge === true && styles.badgeDot]}>\n                    {item.badge !== true && (\n                      <Text allowFontScaling={false} style={styles.badgeText}>\n                        {item.badge}\n                      </Text>\n                    )}\n                  </View>\n                )}\n              </Animated.View>\n            </TouchableOpacity>\n          );\n        })}\n      </View>\n    );\n  }\n);\nNavigationBar.displayName = 'NavigationBar';\n"
+    }
+  ],
+  "registryDependencies": [
+    "core"
+  ]
+}

package/registry/option-card.json

@@ -9,10 +9,11 @@
   "files": [
     {
       "path": "molecules/OptionCard.tsx",
-      "content": "import React, { memo } from 'react';\nimport { Text, TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport interface OptionCardProps {\n  label: string;\n  iconName: IconName;\n  isSelected: boolean;\n  onPress: () => void;\n  /** 'vertical': ícono arriba, texto abajo centrado. 'horizontal': ícono y texto en fila. */\n  layout?: 'vertical' | 'horizontal';\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  card: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.md,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    ...theme.tokens.shadow.sm,\n  },\n  cardHorizontal: { flex: 1, flexDirection: 'row', padding: theme.tokens.spacing.md - 2, gap: theme.tokens.spacing.sm },\n  cardVertical: { width: '31%', padding: theme.tokens.spacing.sm, gap: 5, minHeight: 100 },\n  cardSelected: {\n    borderColor: theme.colors.primary,\n    backgroundColor: theme.colors.primarySoft,\n    borderWidth: 1.5,\n    elevation: 0,\n    shadowOpacity: 0,\n  },\n  label: { color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },\n  labelVertical: { fontSize: theme.tokens.fontSize.xs, textAlign: 'center' },\n  labelSelected: { color: theme.colors.primaryText },\n}));\n\n/**\n * OptionCard\n * Card con ícono+label que resalta con borde/fondo primary cuando\n * `isSelected`. Para elegir entre opciones excluyentes (forma de pago, tipo\n * de documento, etc).\n */\nexport const OptionCard = memo(\n  ({ label, iconName, isSelected, onPress, layout = 'horizontal', style }: OptionCardProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n\n    return (\n      <TouchableOpacity\n        // activeOpacity=1: esta tarjeta tiene elevation (sombra Android); animar su\n        // propia opacity en el press dispara un bug de Android que redibuja la\n        // sombra como un borde oscuro pegado al borde del componente.\n        activeOpacity={1}\n        style={[\n          styles.card,\n          layout === 'vertical' ? styles.cardVertical : styles.cardHorizontal,\n          isSelected && styles.cardSelected,\n          style,\n        ]}\n        onPress={onPress}\n        accessibilityRole=\"button\"\n        accessibilityState={{ selected: isSelected }}\n        accessibilityLabel={label}\n      >\n        <Icon name={iconName} size={24} color={isSelected ? colors.primary : colors.textLight} />\n        <Text\n          allowFontScaling={allowFontScaling}\n          style={[styles.label, layout === 'vertical' && styles.labelVertical, isSelected && styles.labelSelected]}\n        >\n          {label}\n        </Text>\n      </TouchableOpacity>\n    );\n  }\n);\nOptionCard.displayName = 'OptionCard';\n"
+      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport { PressableScale } from '../atoms/PressableScale';\nimport type { IconName } from '../icons/types';\n\nexport interface OptionCardProps {\n  label: string;\n  /** Línea secundaria: el detalle que decide la elección (\"llega en 3 días\"). */\n  description?: string;\n  iconName?: IconName;\n  isSelected: boolean;\n  onPress: () => void;\n  disabled?: boolean;\n  /** 'vertical': ícono arriba, texto abajo centrado. 'horizontal': en fila. @default 'horizontal' */\n  layout?: 'vertical' | 'horizontal';\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  card: {\n    // Las tarjetas se reparten la fila que las contenga, sean dos o cinco.\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.md,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    ...theme.tokens.shadow.sm,\n  },\n  cardHorizontal: { flexDirection: 'row', padding: theme.tokens.spacing.md - 2, gap: theme.tokens.spacing.sm },\n  cardVertical: { padding: theme.tokens.spacing.md - 2, gap: 6, minHeight: 100 },\n  cardSelected: {\n    borderColor: theme.colors.primary,\n    backgroundColor: theme.colors.primarySoft,\n    borderWidth: 1.5,\n    elevation: 0,\n    shadowOpacity: 0,\n  },\n  cardDisabled: { opacity: 0.5 },\n  text: { flexShrink: 1 },\n  textVertical: { alignItems: 'center' },\n  label: { color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },\n  labelVertical: { fontSize: theme.tokens.fontSize.xs, textAlign: 'center' },\n  labelSelected: { color: theme.colors.primaryText },\n  description: { fontSize: theme.tokens.fontSize.xs, color: theme.colors.textLight, marginTop: 2 },\n  descriptionVertical: { textAlign: 'center' },\n}));\n\n/**\n * OptionCard\n * Opción excluyente con ícono y label que resalta cuando `isSelected`. Es un\n * radio con cara de tarjeta, así que se anuncia como tal: envolver el grupo en\n * una View con `accessibilityRole=\"radiogroup\"` para que el lector de pantalla\n * lea \"1 de 3\".\n */\nexport const OptionCard = memo(\n  ({\n    label,\n    description,\n    iconName,\n    isSelected,\n    onPress,\n    disabled = false,\n    layout = 'horizontal',\n    style,\n    testID,\n  }: OptionCardProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const isVertical = layout === 'vertical';\n\n    // Feedback por transform y no por opacity: con elevation, animar la opacity\n    // dispara un bug de Android que redibuja la sombra como un borde oscuro.\n    return (\n      <PressableScale\n        style={[\n          styles.card,\n          isVertical ? styles.cardVertical : styles.cardHorizontal,\n          isSelected && styles.cardSelected,\n          disabled && styles.cardDisabled,\n          style,\n        ]}\n        onPress={onPress}\n        disabled={disabled}\n        accessibilityRole=\"radio\"\n        accessibilityState={{ selected: isSelected, checked: isSelected, disabled }}\n        accessibilityLabel={label}\n        accessibilityHint={description}\n        testID={testID}\n      >\n        {!!iconName && <Icon name={iconName} size={24} color={isSelected ? colors.primary : colors.textLight} />}\n\n        <View style={[styles.text, isVertical && styles.textVertical]}>\n          <Text\n            allowFontScaling={allowFontScaling}\n            style={[styles.label, isVertical && styles.labelVertical, isSelected && styles.labelSelected]}\n          >\n            {label}\n          </Text>\n          {!!description && (\n            <Text\n              allowFontScaling={allowFontScaling}\n              style={[styles.description, isVertical && styles.descriptionVertical]}\n            >\n              {description}\n            </Text>\n          )}\n        </View>\n      </PressableScale>\n    );\n  }\n);\nOptionCard.displayName = 'OptionCard';\n"
     }
   ],
   "registryDependencies": [
-    "core"
+    "core",
+    "pressable-scale"
   ]
 }

package/registry/pressable-scale.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/PressableScale.tsx",
-      "content": "import React, { memo, useRef } from 'react';\nimport { Animated, Pressable, type PressableProps, type GestureResponderEvent } from 'react-native';\n\nexport interface PressableScaleProps extends PressableProps {\n  /** Escala objetivo al presionar. @default 0.96 */\n  scaleTo?: number;\n  children: React.ReactNode;\n}\n\n/**\n * PressableScale\n * Feedback táctil de \"achicarse\" al presionar, con Animated.spring de RN\n * (useNativeDriver: true — corre en el hilo nativo, sin coste de JS por frame).\n * No depende de reanimated: la librería entera es cero-dependencias.\n */\nexport const PressableScale = memo(\n  ({ scaleTo = 0.96, style, children, onPressIn, onPressOut, disabled, ...props }: PressableScaleProps) => {\n    const scale = useRef(new Animated.Value(1)).current;\n\n    const animateTo = (value: number) => {\n      Animated.spring(scale, {\n        toValue: value,\n        useNativeDriver: true,\n        speed: 50,\n        bounciness: 6,\n      }).start();\n    };\n\n    const handlePressIn = (e: GestureResponderEvent) => {\n      if (!disabled) animateTo(scaleTo);\n      onPressIn?.(e);\n    };\n\n    const handlePressOut = (e: GestureResponderEvent) => {\n      if (!disabled) animateTo(1);\n      onPressOut?.(e);\n    };\n\n    return (\n      <Pressable\n        {...props}\n        disabled={disabled}\n        onPressIn={handlePressIn}\n        onPressOut={handlePressOut}\n        style={style}\n      >\n        <Animated.View style={{ transform: [{ scale }] }}>{children}</Animated.View>\n      </Pressable>\n    );\n  }\n);\nPressableScale.displayName = 'PressableScale';\n"
+      "content": "import React, { memo, useRef } from 'react';\nimport {\n  Animated,\n  Pressable,\n  type GestureResponderEvent,\n  type PressableProps,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\n\nexport interface PressableScaleProps extends Omit<PressableProps, 'style'> {\n  /** Escala objetivo al presionar. @default 0.96 */\n  scaleTo?: number;\n  style?: StyleProp<ViewStyle>;\n  children: React.ReactNode;\n}\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\n/**\n * PressableScale\n * Feedback táctil de \"achicarse\" al presionar, con Animated.spring de RN\n * (useNativeDriver: true — corre en el hilo nativo, sin coste de JS por frame).\n * No depende de reanimated: la librería entera es cero-dependencias.\n */\nexport const PressableScale = memo(\n  ({ scaleTo = 0.96, style, children, onPressIn, onPressOut, disabled, ...props }: PressableScaleProps) => {\n    const scale = useRef(new Animated.Value(1)).current;\n\n    const animateTo = (value: number) => {\n      Animated.spring(scale, {\n        toValue: value,\n        useNativeDriver: true,\n        speed: 50,\n        bounciness: 6,\n      }).start();\n    };\n\n    const handlePressIn = (e: GestureResponderEvent) => {\n      if (!disabled) animateTo(scaleTo);\n      onPressIn?.(e);\n    };\n\n    const handlePressOut = (e: GestureResponderEvent) => {\n      if (!disabled) animateTo(1);\n      onPressOut?.(e);\n    };\n\n    return (\n      <AnimatedPressable\n        {...props}\n        disabled={disabled}\n        onPressIn={handlePressIn}\n        onPressOut={handlePressOut}\n        style={[style, { transform: [{ scale }] }]}\n      >\n        {children}\n      </AnimatedPressable>\n    );\n  }\n);\nPressableScale.displayName = 'PressableScale';\n"
     }
   ],
   "registryDependencies": [

package/registry/screen.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "organisms/Screen.tsx",
-      "content": "import React, { memo } from 'react';\nimport { KeyboardAvoidingView, Platform, ScrollView, View, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useInsets } from '../theme/UIProvider';\n\nexport type ScreenEdge = 'top' | 'bottom';\n\nexport interface ScreenProps {\n  children: React.ReactNode;\n  style?: ViewStyle;\n  scrollable?: boolean;\n  contentContainerStyle?: ViewStyle;\n  /** Qué insets de safe area aplicar. @default ['top', 'bottom'] */\n  edges?: ScreenEdge[];\n  /**\n   * Compensa el teclado con un KeyboardAvoidingView. Ponelo en false cuando\n   * el contenido ya trae su propio scroller que maneja el teclado (Wizard,\n   * List, SearchList): las dos compensaciones se suman y el campo enfocado\n   * termina empujado fuera de la pantalla.\n   * @default true\n   */\n  keyboardAvoiding?: boolean;\n}\n\nconst useStyles = createStyles((theme) => ({\n  wrapper: { flex: 1, backgroundColor: theme.colors.background },\n  container: { flex: 1 },\n  contentContainer: { flexGrow: 1 },\n}));\n\n/**\n * Screen\n * Contenedor raíz de pantalla: fondo del theme, safe area (via insets del\n * UIProvider), teclado y scroll opcional resueltos de forma consistente.\n */\nexport const Screen = memo(({\n  children,\n  style,\n  scrollable = true,\n  contentContainerStyle,\n  edges = ['top', 'bottom'],\n  keyboardAvoiding = true,\n}: ScreenProps) => {\n  const insets = useInsets();\n  const styles = useStyles();\n  const applyTop = edges.includes('top');\n  const applyBottom = edges.includes('bottom');\n\n  const KeyboardWrapper: React.ComponentType<any> = keyboardAvoiding ? KeyboardAvoidingView : View;\n  const keyboardProps = keyboardAvoiding\n    ? {\n        behavior: Platform.OS === 'ios' ? ('padding' as const) : ('height' as const),\n        keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 20,\n      }\n    : {};\n\n  return (\n    <View style={[styles.wrapper, style]}>\n      <KeyboardWrapper style={styles.container} {...keyboardProps}>\n        {scrollable ? (\n          <ScrollView\n            style={styles.container}\n            contentInsetAdjustmentBehavior=\"automatic\"\n            automaticallyAdjustKeyboardInsets\n            contentContainerStyle={[\n              styles.contentContainer,\n              { paddingTop: applyTop ? insets.top : 0 },\n              Platform.OS === 'android' && applyBottom && { paddingBottom: insets.bottom },\n              contentContainerStyle,\n            ]}\n            keyboardShouldPersistTaps=\"handled\"\n          >\n            {children}\n          </ScrollView>\n        ) : (\n          <View style={[styles.container, { paddingTop: applyTop ? insets.top : 0, paddingBottom: applyBottom ? insets.bottom : 0 }]}>\n            {children}\n          </View>\n        )}\n      </KeyboardWrapper>\n    </View>\n  );\n});\nScreen.displayName = 'Screen';\n"
+      "content": "import React, { memo } from 'react';\nimport { KeyboardAvoidingView, Platform, ScrollView, View, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useInsets } from '../theme/UIProvider';\n\nexport type ScreenEdge = 'top' | 'bottom';\n\nexport interface ScreenProps {\n  children: React.ReactNode;\n  style?: ViewStyle;\n  scrollable?: boolean;\n  contentContainerStyle?: ViewStyle;\n  /** Qué insets de safe area aplicar. @default ['top', 'bottom'] */\n  edges?: ScreenEdge[];\n  /**\n   * Compensa el teclado: en iOS con scroll lo hace el propio ScrollView, en el\n   * resto de los casos con un KeyboardAvoidingView. Ponelo en false cuando\n   * el contenido ya trae su propio scroller que maneja el teclado (Wizard,\n   * List, SearchList): las dos compensaciones se suman y el campo enfocado\n   * termina empujado fuera de la pantalla.\n   * @default true\n   */\n  keyboardAvoiding?: boolean;\n}\n\nconst useStyles = createStyles((theme) => ({\n  wrapper: { flex: 1, backgroundColor: theme.colors.background },\n  container: { flex: 1 },\n  contentContainer: { flexGrow: 1 },\n}));\n\n/**\n * Screen\n * Contenedor raíz de pantalla: fondo del theme, safe area (via insets del\n * UIProvider), teclado y scroll opcional resueltos de forma consistente.\n */\nexport const Screen = memo(({\n  children,\n  style,\n  scrollable = true,\n  contentContainerStyle,\n  edges = ['top', 'bottom'],\n  keyboardAvoiding = true,\n}: ScreenProps) => {\n  const insets = useInsets();\n  const styles = useStyles();\n  const applyTop = edges.includes('top');\n  const applyBottom = edges.includes('bottom');\n\n  // En iOS el ScrollView de abajo ya sube el campo enfocado con\n  // automaticallyAdjustKeyboardInsets; envolverlo además en un\n  // KeyboardAvoidingView compensa el teclado dos veces y el input termina\n  // empujado fuera del borde superior. Android no tiene ese prop, así que ahí\n  // el KeyboardAvoidingView sigue siendo el único mecanismo.\n  const avoidWithView = keyboardAvoiding && !(scrollable && Platform.OS === 'ios');\n\n  const KeyboardWrapper: React.ComponentType<any> = avoidWithView ? KeyboardAvoidingView : View;\n  const keyboardProps = avoidWithView\n    ? {\n        behavior: Platform.OS === 'ios' ? ('padding' as const) : ('height' as const),\n        keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 20,\n      }\n    : {};\n\n  return (\n    <View style={[styles.wrapper, style]}>\n      <KeyboardWrapper style={styles.container} {...keyboardProps}>\n        {scrollable ? (\n          <ScrollView\n            style={styles.container}\n            contentInsetAdjustmentBehavior=\"automatic\"\n            automaticallyAdjustKeyboardInsets\n            contentContainerStyle={[\n              styles.contentContainer,\n              { paddingTop: applyTop ? insets.top : 0 },\n              Platform.OS === 'android' && applyBottom && { paddingBottom: insets.bottom },\n              contentContainerStyle,\n            ]}\n            keyboardShouldPersistTaps=\"handled\"\n          >\n            {children}\n          </ScrollView>\n        ) : (\n          <View style={[styles.container, { paddingTop: applyTop ? insets.top : 0, paddingBottom: applyBottom ? insets.bottom : 0 }]}>\n            {children}\n          </View>\n        )}\n      </KeyboardWrapper>\n    </View>\n  );\n});\nScreen.displayName = 'Screen';\n"
     }
   ],
   "registryDependencies": [