orn-ui 0.2.2 → 0.2.4

package/registry/steps.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "molecules/Steps.tsx",
-      "content": "import React, { memo } from 'react';\nimport { ScrollView, Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\n\nexport interface StepItem {\n  label: string;\n  description?: string;\n}\n\nexport type StepStatus = 'completed' | 'current' | 'pending';\n\nexport interface StepsProps {\n  steps: StepItem[];\n  /** Índice del paso actual (0-based). Los anteriores quedan 'completed'. */\n  current: number;\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Qué muestra el círculo de un paso ya completado: un check, o su número.\n   * @default 'check'\n   */\n  completedIndicator?: 'check' | 'number';\n  /** Si se pasa, cada paso es tocable y reporta su índice. */\n  onStepPress?: (index: number) => void;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst CIRCLE = 32;\n/** Ancho mínimo de una columna horizontal: por debajo, las etiquetas se parten. */\nconst STEP_MIN_WIDTH = 76;\n\nconst useStyles = createStyles((theme) => ({\n  rowContainer: { flexDirection: 'row', alignItems: 'flex-start' },\n  columnContainer: { flexDirection: 'column' },\n\n  // horizontal\n  // ScrollView trae flexGrow: 1 de fábrica y se comía todo el alto disponible\n  // del contenedor, dejando los pasos pegados arriba de una caja enorme.\n  hScrollView: { flexGrow: 0, flexShrink: 0 },\n  hScroll: { flexGrow: 1, flexDirection: 'row', alignItems: 'flex-start' },\n  // `minWidth` es lo que evita que RN parta palabras a la mitad\n  // (\"Almacé / n\"): antes que apretar la columna por debajo de una palabra\n  // corriente, la fila se vuelve scrollable.\n  hStep: { flex: 1, minWidth: STEP_MIN_WIDTH, alignItems: 'center', gap: theme.tokens.spacing.sm },\n  hLabels: { alignItems: 'center', gap: 2, paddingHorizontal: 4 },\n  // El conector toma una fracción chica del ancho: compitiendo de igual a\n  // igual con los pasos (flex: 1) cada etiqueta se quedaba con 1/(2n-1) del\n  // total.\n  hConnector: { height: 2, flex: 0.3, minWidth: 12, marginTop: CIRCLE / 2 - 1 },\n  hLabel: { fontSize: theme.tokens.fontSize.sm },\n  hDescription: { fontSize: theme.tokens.fontSize.xs },\n\n  // vertical\n  vStep: { flexDirection: 'row', gap: theme.tokens.spacing.md },\n  vIndicatorColumn: { alignItems: 'center' },\n  vConnector: { width: 2, flex: 1, minHeight: 20, marginVertical: 4 },\n  vLabels: { flex: 1, gap: 2, paddingBottom: theme.tokens.spacing.lg },\n\n  circle: {\n    width: CIRCLE,\n    height: CIRCLE,\n    borderRadius: CIRCLE / 2,\n    borderWidth: 2,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  circleNumber: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.semibold },\n  label: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.text },\n  labelCentered: { textAlign: 'center' },\n  description: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight },\n  descriptionCentered: { textAlign: 'center' },\n}));\n\nfunction statusOf(index: number, current: number): StepStatus {\n  if (index < current) return 'completed';\n  if (index === current) return 'current';\n  return 'pending';\n}\n\n/**\n * Steps\n * Indicador de progreso multi-paso. Base visual de `Wizard`, pero utilizable\n * suelto para mostrar el avance de un flujo que se navega de otra forma.\n */\nexport const Steps = memo(\n  ({ steps, current, orientation = 'horizontal', completedIndicator = 'check', onStepPress, style }: StepsProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const isVertical = orientation === 'vertical';\n\n    const colorsFor = (status: StepStatus) => {\n      if (status === 'completed') return { bg: colors.primary, border: colors.primary, fg: colors.onPrimary };\n      if (status === 'current') return { bg: 'transparent', border: colors.primary, fg: colors.primaryText };\n      return { bg: 'transparent', border: colors.border, fg: colors.textLight };\n    };\n\n    const renderCircle = (index: number, status: StepStatus) => {\n      const c = colorsFor(status);\n      const showCheck = status === 'completed' && completedIndicator === 'check';\n      return (\n        <View style={[styles.circle, { backgroundColor: c.bg, borderColor: c.border }]}>\n          {showCheck ? (\n            <Icon name=\"check\" size={18} color={c.fg} />\n          ) : (\n            <Text allowFontScaling={allowFontScaling} style={[styles.circleNumber, { color: c.fg }]}>\n              {index + 1}\n            </Text>\n          )}\n        </View>\n      );\n    };\n\n    const renderLabels = (step: StepItem, status: StepStatus, centered: boolean) => (\n      <View style={centered ? styles.hLabels : styles.vLabels}>\n        <Text\n          allowFontScaling={allowFontScaling}\n          style={[\n            styles.label,\n            centered && styles.labelCentered,\n            centered && styles.hLabel,\n            status === 'pending' && { color: colors.textLight },\n          ]}\n        >\n          {step.label}\n        </Text>\n        {!!step.description && (\n          <Text\n            allowFontScaling={allowFontScaling}\n            style={[styles.description, centered && styles.descriptionCentered, centered && styles.hDescription]}\n          >\n            {step.description}\n          </Text>\n        )}\n      </View>\n    );\n\n    const stepAccessibility = (index: number, step: StepItem, status: StepStatus) => ({\n      accessibilityRole: (onStepPress ? 'button' : 'text') as 'button' | 'text',\n      accessibilityLabel: `Step ${index + 1}: ${step.label}`,\n      accessibilityState: { selected: status === 'current', disabled: false },\n    });\n\n    if (isVertical) {\n      return (\n        <View style={[styles.columnContainer, style]}>\n          {steps.map((step, index) => {\n            const status = statusOf(index, current);\n            const isLast = index === steps.length - 1;\n            const Wrapper: any = onStepPress ? TouchableOpacity : View;\n            return (\n              <Wrapper\n                key={step.label}\n                style={styles.vStep}\n                onPress={onStepPress ? () => onStepPress(index) : undefined}\n                activeOpacity={0.7}\n                {...stepAccessibility(index, step, status)}\n              >\n                <View style={styles.vIndicatorColumn}>\n                  {renderCircle(index, status)}\n                  {!isLast && (\n                    <View\n                      style={[\n                        styles.vConnector,\n                        { backgroundColor: index < current ? colors.primary : colors.border },\n                      ]}\n                    />\n                  )}\n                </View>\n                {renderLabels(step, status, false)}\n              </Wrapper>\n            );\n          })}\n        </View>\n      );\n    }\n\n    return (\n      <ScrollView\n        testID=\"steps-row\"\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        // Con espacio de sobra los pasos se reparten la fila igual que antes\n        // (flexGrow); cuando no entran, se desplaza en vez de apretar el texto.\n        style={[styles.hScrollView, style]}\n        contentContainerStyle={styles.hScroll}\n      >\n        {steps.map((step, index) => {\n          const status = statusOf(index, current);\n          const isLast = index === steps.length - 1;\n          const Wrapper: any = onStepPress ? TouchableOpacity : View;\n          return (\n            <React.Fragment key={step.label}>\n              <Wrapper\n                style={styles.hStep}\n                onPress={onStepPress ? () => onStepPress(index) : undefined}\n                activeOpacity={0.7}\n                {...stepAccessibility(index, step, status)}\n              >\n                {renderCircle(index, status)}\n                {renderLabels(step, status, true)}\n              </Wrapper>\n              {!isLast && (\n                <View\n                  style={[styles.hConnector, { backgroundColor: index < current ? colors.primary : colors.border }]}\n                />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </ScrollView>\n    );\n  }\n);\nSteps.displayName = 'Steps';\n"
+      "content": "import React, { memo } from 'react';\nimport { ScrollView, Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\n\nexport interface StepItem {\n  label: string;\n  description?: string;\n}\n\nexport type StepStatus = 'completed' | 'current' | 'pending';\n\nexport interface StepsProps {\n  steps: StepItem[];\n  /** Índice del paso actual (0-based). Los anteriores quedan 'completed'. */\n  current: number;\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Qué muestra el círculo de un paso ya completado: un check, o su número.\n   * @default 'check'\n   */\n  completedIndicator?: 'check' | 'number';\n  /** Si se pasa, cada paso es tocable y reporta su índice. */\n  onStepPress?: (index: number) => void;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst CIRCLE = 32;\n/** Ancho mínimo de una columna horizontal: por debajo, las etiquetas se parten. */\nconst STEP_MIN_WIDTH = 76;\n\nconst useStyles = createStyles((theme) => ({\n  rowContainer: { flexDirection: 'row', alignItems: 'flex-start' },\n  columnContainer: { flexDirection: 'column' },\n\n  // horizontal\n  // ScrollView trae flexGrow: 1 de fábrica y se comía todo el alto disponible\n  // del contenedor, dejando los pasos pegados arriba de una caja enorme.\n  hScrollView: { flexGrow: 0, flexShrink: 0 },\n  hScroll: { flexGrow: 1, flexDirection: 'row', alignItems: 'flex-start' },\n  // `minWidth` es lo que evita que RN parta palabras a la mitad\n  // (\"Almacé / n\"): antes que apretar la columna por debajo de una palabra\n  // corriente, la fila se vuelve scrollable.\n  hStep: { flex: 1, minWidth: STEP_MIN_WIDTH, alignItems: 'center', gap: theme.tokens.spacing.sm },\n  hLabels: { alignItems: 'center', gap: 2, paddingHorizontal: 4 },\n  // El conector toma una fracción chica del ancho: compitiendo de igual a\n  // igual con los pasos (flex: 1) cada etiqueta se quedaba con 1/(2n-1) del\n  // total.\n  hConnector: { height: 2, flex: 0.3, minWidth: 12, marginTop: CIRCLE / 2 - 1 },\n  hLabel: { fontSize: theme.tokens.fontSize.sm },\n  hDescription: { fontSize: theme.tokens.fontSize.xs },\n\n  // vertical\n  vStep: { flexDirection: 'row', gap: theme.tokens.spacing.md },\n  vIndicatorColumn: { alignItems: 'center' },\n  vConnector: { width: 2, flex: 1, minHeight: 20, marginVertical: 4 },\n  vLabels: { flex: 1, gap: 2, paddingBottom: theme.tokens.spacing.lg },\n\n  circle: {\n    width: CIRCLE,\n    height: CIRCLE,\n    borderRadius: CIRCLE / 2,\n    borderWidth: 2,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  circleNumber: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.semibold },\n  label: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.text },\n  labelCentered: { textAlign: 'center' },\n  description: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight },\n  descriptionCentered: { textAlign: 'center' },\n}));\n\nfunction statusOf(index: number, current: number): StepStatus {\n  if (index < current) return 'completed';\n  if (index === current) return 'current';\n  return 'pending';\n}\n\n/**\n * Steps\n * Indicador de progreso multi-paso. Base visual de `Wizard`, pero utilizable\n * suelto para mostrar el avance de un flujo que se navega de otra forma.\n */\nexport const Steps = memo(\n  ({ steps, current, orientation = 'horizontal', completedIndicator = 'check', onStepPress, style }: StepsProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const isVertical = orientation === 'vertical';\n\n    const colorsFor = (status: StepStatus) => {\n      if (status === 'completed') return { bg: colors.primary, border: colors.primary, fg: colors.onPrimary };\n      if (status === 'current') return { bg: 'transparent', border: colors.primary, fg: colors.primaryText };\n      return { bg: 'transparent', border: colors.border, fg: colors.textLight };\n    };\n\n    const renderCircle = (index: number, status: StepStatus) => {\n      const c = colorsFor(status);\n      const showCheck = status === 'completed' && completedIndicator === 'check';\n      return (\n        <View style={[styles.circle, { backgroundColor: c.bg, borderColor: c.border }]}>\n          {showCheck ? (\n            <Icon name=\"check\" size={18} color={c.fg} />\n          ) : (\n            <Text allowFontScaling={allowFontScaling} style={[styles.circleNumber, { color: c.fg }]}>\n              {index + 1}\n            </Text>\n          )}\n        </View>\n      );\n    };\n\n    const renderLabels = (step: StepItem, status: StepStatus, centered: boolean) => (\n      <View style={centered ? styles.hLabels : styles.vLabels}>\n        <Text\n          allowFontScaling={allowFontScaling}\n          style={[\n            styles.label,\n            centered && styles.labelCentered,\n            centered && styles.hLabel,\n            status === 'pending' && { color: colors.textLight },\n          ]}\n        >\n          {step.label}\n        </Text>\n        {!!step.description && (\n          <Text\n            allowFontScaling={allowFontScaling}\n            style={[styles.description, centered && styles.descriptionCentered, centered && styles.hDescription]}\n          >\n            {step.description}\n          </Text>\n        )}\n      </View>\n    );\n\n    const stepAccessibility = (index: number, step: StepItem, status: StepStatus) => ({\n      accessibilityRole: (onStepPress ? 'button' : 'text') as 'button' | 'text',\n      accessibilityLabel: `Step ${index + 1}: ${step.label}`,\n      accessibilityState: { selected: status === 'current', disabled: false },\n    });\n\n    if (isVertical) {\n      return (\n        <View style={[styles.columnContainer, style]}>\n          {steps.map((step, index) => {\n            const status = statusOf(index, current);\n            const isLast = index === steps.length - 1;\n            const Wrapper = onStepPress ? TouchableOpacity : View;\n            // Sólo tocable si hay onStepPress: pasarle onPress/activeOpacity\n            // a un View plano no crashea, pero los deja como ruido silencioso.\n            const interactiveProps = onStepPress\n              ? { onPress: () => onStepPress(index), activeOpacity: 0.7 }\n              : undefined;\n            return (\n              <Wrapper\n                key={`${step.label}-${index}`}\n                style={styles.vStep}\n                {...interactiveProps}\n                {...stepAccessibility(index, step, status)}\n              >\n                <View style={styles.vIndicatorColumn}>\n                  {renderCircle(index, status)}\n                  {!isLast && (\n                    <View\n                      style={[\n                        styles.vConnector,\n                        { backgroundColor: index < current ? colors.primary : colors.border },\n                      ]}\n                    />\n                  )}\n                </View>\n                {renderLabels(step, status, false)}\n              </Wrapper>\n            );\n          })}\n        </View>\n      );\n    }\n\n    return (\n      <ScrollView\n        testID=\"steps-row\"\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        // Con espacio de sobra los pasos se reparten la fila igual que antes\n        // (flexGrow); cuando no entran, se desplaza en vez de apretar el texto.\n        style={[styles.hScrollView, style]}\n        contentContainerStyle={styles.hScroll}\n      >\n        {steps.map((step, index) => {\n          const status = statusOf(index, current);\n          const isLast = index === steps.length - 1;\n          const Wrapper = onStepPress ? TouchableOpacity : View;\n          const interactiveProps = onStepPress\n            ? { onPress: () => onStepPress(index), activeOpacity: 0.7 }\n            : undefined;\n          return (\n            <React.Fragment key={`${step.label}-${index}`}>\n              <Wrapper\n                style={styles.hStep}\n                {...interactiveProps}\n                {...stepAccessibility(index, step, status)}\n              >\n                {renderCircle(index, status)}\n                {renderLabels(step, status, true)}\n              </Wrapper>\n              {!isLast && (\n                <View\n                  style={[styles.hConnector, { backgroundColor: index < current ? colors.primary : colors.border }]}\n                />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </ScrollView>\n    );\n  }\n);\nSteps.displayName = 'Steps';\n"
     }
   ],
   "registryDependencies": [

package/registry/symmetric-grid.json

@@ -0,0 +1,18 @@
+{
+  "name": "SymmetricGrid",
+  "slug": "symmetric-grid",
+  "type": "component",
+  "category": "molecules",
+  "exportedNames": [
+    "SymmetricGrid"
+  ],
+  "files": [
+    {
+      "path": "molecules/SymmetricGrid.tsx",
+      "content": "import React, { useMemo } from 'react';\nimport { View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\n\nexport interface SymmetricGridProps<T> {\n  data: T[];\n  renderItem: (item: T, index: number) => React.ReactElement;\n  keyExtractor: (item: T, index: number) => string;\n  /** Columnas por fila. @default 2 */\n  columns?: number;\n  /** Separación entre celdas, en ambos ejes. @default theme.tokens.spacing.md */\n  gap?: number;\n  /**\n   * Última fila incompleta: centrada (simétrica) en vez de pegada a la\n   * izquierda con un hueco a la derecha. @default true\n   */\n  balanceLastRow?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  grid: { gap: theme.tokens.spacing.md },\n  row: { flexDirection: 'row', gap: theme.tokens.spacing.md },\n  rowBalanced: { justifyContent: 'center' },\n  rowFull: { justifyContent: 'flex-start' },\n  cell: { flexGrow: 0, flexShrink: 0 },\n}));\n\nfunction chunk<T>(data: T[], size: number): T[][] {\n  const rows: T[][] = [];\n  for (let i = 0; i < data.length; i += size) rows.push(data.slice(i, i + size));\n  return rows;\n}\n\n/**\n * SymmetricGrid\n * Ley de Prägnanz (buena forma): agrupa en filas parejas de N columnas.\n * La última fila, cuando queda incompleta, se centra por defecto en vez de\n * quedar pegada a un borde — eso es lo que la lee como \"fila corta\" y no\n * como un layout roto con un hueco a un lado.\n */\nexport function SymmetricGrid<T>({\n  data,\n  renderItem,\n  keyExtractor,\n  columns = 2,\n  gap,\n  balanceLastRow = true,\n  style,\n}: SymmetricGridProps<T>) {\n  const styles = useStyles();\n  const rows = useMemo(() => chunk(data, columns), [data, columns]);\n  const cellWidth = `${100 / columns}%` as const;\n\n  return (\n    <View style={[styles.grid, gap !== undefined && { gap }, style]}>\n      {rows.map((row, rowIndex) => {\n        const isLastRow = rowIndex === rows.length - 1;\n        const isIncomplete = row.length < columns;\n        const centered = isLastRow && isIncomplete && balanceLastRow;\n\n        return (\n          <View\n            // `columns` en la key: si cambia, las filas no reusan nodos DOM\n            // de una fila armada con otra cantidad de columnas.\n            key={`row-${columns}-${rowIndex}`}\n            style={[styles.row, centered ? styles.rowBalanced : styles.rowFull, gap !== undefined && { gap }]}\n          >\n            {row.map((item, colIndex) => {\n              const index = rowIndex * columns + colIndex;\n              return (\n                <View key={keyExtractor(item, index)} style={[styles.cell, { width: cellWidth }]}>\n                  {renderItem(item, index)}\n                </View>\n              );\n            })}\n          </View>\n        );\n      })}\n    </View>\n  );\n}\n"
+    }
+  ],
+  "registryDependencies": [
+    "core"
+  ]
+}

package/src/molecules/Steps.tsx

@@ -149,13 +149,17 @@ export const Steps = memo(
           {steps.map((step, index) => {
             const status = statusOf(index, current);
             const isLast = index === steps.length - 1;
-            const Wrapper: any = onStepPress ? TouchableOpacity : View;
+            const Wrapper = onStepPress ? TouchableOpacity : View;
+            // Sólo tocable si hay onStepPress: pasarle onPress/activeOpacity
+            // a un View plano no crashea, pero los deja como ruido silencioso.
+            const interactiveProps = onStepPress
+              ? { onPress: () => onStepPress(index), activeOpacity: 0.7 }
+              : undefined;
             return (
               <Wrapper
-                key={step.label}
+                key={`${step.label}-${index}`}
                 style={styles.vStep}
-                onPress={onStepPress ? () => onStepPress(index) : undefined}
-                activeOpacity={0.7}
+                {...interactiveProps}
                 {...stepAccessibility(index, step, status)}
               >
                 <View style={styles.vIndicatorColumn}>
@@ -190,13 +194,15 @@ export const Steps = memo(
         {steps.map((step, index) => {
           const status = statusOf(index, current);
           const isLast = index === steps.length - 1;
-          const Wrapper: any = onStepPress ? TouchableOpacity : View;
+          const Wrapper = onStepPress ? TouchableOpacity : View;
+          const interactiveProps = onStepPress
+            ? { onPress: () => onStepPress(index), activeOpacity: 0.7 }
+            : undefined;
           return (
-            <React.Fragment key={step.label}>
+            <React.Fragment key={`${step.label}-${index}`}>
               <Wrapper
                 style={styles.hStep}
-                onPress={onStepPress ? () => onStepPress(index) : undefined}
-                activeOpacity={0.7}
+                {...interactiveProps}
                 {...stepAccessibility(index, step, status)}
               >
                 {renderCircle(index, status)}

package/src/molecules/SymmetricGrid.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+
+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?: number;
+  /** Separación entre celdas, en ambos ejes. @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
+   */
+  balanceLastRow?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const useStyles = createStyles((theme) => ({
+  grid: { gap: theme.tokens.spacing.md },
+  row: { flexDirection: 'row', gap: theme.tokens.spacing.md },
+  rowBalanced: { justifyContent: 'center' },
+  rowFull: { justifyContent: 'flex-start' },
+  cell: { flexGrow: 0, flexShrink: 0 },
+}));
+
+function chunk<T>(data: T[], size: number): T[][] {
+  const rows: T[][] = [];
+  for (let i = 0; i < data.length; i += size) rows.push(data.slice(i, i + size));
+  return rows;
+}
+
+/**
+ * SymmetricGrid
+ * Ley de Prägnanz (buena forma): agrupa en filas parejas de N columnas.
+ * La última fila, cuando queda incompleta, se centra por defecto en vez de
+ * quedar pegada a un borde — eso es lo que la lee como "fila corta" y no
+ * como un layout roto con un hueco a un lado.
+ */
+export function SymmetricGrid<T>({
+  data,
+  renderItem,
+  keyExtractor,
+  columns = 2,
+  gap,
+  balanceLastRow = true,
+  style,
+}: SymmetricGridProps<T>) {
+  const styles = useStyles();
+  const rows = useMemo(() => chunk(data, columns), [data, columns]);
+  const cellWidth = `${100 / columns}%` as const;
+
+  return (
+    <View style={[styles.grid, gap !== undefined && { gap }, style]}>
+      {rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === rows.length - 1;
+        const isIncomplete = row.length < columns;
+        const centered = isLastRow && isIncomplete && balanceLastRow;
+
+        return (
+          <View
+            // `columns` en la key: si cambia, las filas no reusan nodos DOM
+            // de una fila armada con otra cantidad de columnas.
+            key={`row-${columns}-${rowIndex}`}
+            style={[styles.row, centered ? styles.rowBalanced : styles.rowFull, gap !== undefined && { gap }]}
+          >
+            {row.map((item, colIndex) => {
+              const index = rowIndex * columns + colIndex;
+              return (
+                <View key={keyExtractor(item, index)} style={[styles.cell, { width: cellWidth }]}>
+                  {renderItem(item, index)}
+                </View>
+              );
+            })}
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/molecules/index.ts

@@ -12,3 +12,5 @@ export { SegmentedControl } from './SegmentedControl';
 export type { SegmentedControlProps, SegmentedControlOption } from './SegmentedControl';
 export { Steps } from './Steps';
 export type { StepsProps, StepItem, StepStatus } from './Steps';
+export { SymmetricGrid } from './SymmetricGrid';
+export type { SymmetricGridProps } from './SymmetricGrid';

package/src/organisms/AlertProvider.tsx

@@ -63,14 +63,21 @@ const HIDDEN: InternalState = { visible: false, title: '', type: 'info', buttons
 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);
+  // Si alert()/confirm() se llaman de nuevo mientras ya hay uno abierto, el
+  // pedido anterior se resuelve (no se descarta) antes de mostrar el nuevo:
+  // evita que su promise quede colgada para siempre.
+  const settlePending = useCallback(() => {
     resolverRef.current?.(undefined);
     resolverRef.current = null;
   }, []);
 
+  const hide = useCallback(() => {
+    setState(HIDDEN);
+    settlePending();
+  }, [settlePending]);
+
   const alertFn = useCallback((options: AlertOptions): Promise<void> => {
+    settlePending();
     return new Promise((resolve) => {
       resolverRef.current = resolve;
       setState({
@@ -90,9 +97,10 @@ export function AlertProvider({ children }: { children: React.ReactNode }) {
         ],
       });
     });
-  }, []);
+  }, [settlePending]);
 
   const confirmFn = useCallback((options: ConfirmOptions): Promise<boolean> => {
+    settlePending();
     return new Promise((resolve) => {
       resolverRef.current = resolve;
       setState({
@@ -124,7 +132,7 @@ export function AlertProvider({ children }: { children: React.ReactNode }) {
         ],
       });
     });
-  }, []);
+  }, [settlePending]);
 
   const value = useMemo<AlertContextValue>(() => ({ alert: alertFn, confirm: confirmFn, hide }), [alertFn, confirmFn, hide]);
 

package/src/organisms/BottomSheet.tsx

@@ -13,7 +13,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useColors, useInsets } from '../theme/UIProvider';
+import { useColors, useModalSafeAreaBoundary } from '../theme/UIProvider';
 import { Title } from '../atoms/Text';
 import { IconButton } from '../atoms/IconButton';
 import { Transition } from '../atoms/Transition';
@@ -107,20 +107,28 @@ export const BottomSheet = memo(
   }: BottomSheetProps) => {
     const styles = useStyles();
     const colors = useColors();
-    const insets = useInsets();
+    const ModalSafeAreaBoundary = useModalSafeAreaBoundary();
     const [mounted, setMounted] = useState(visible);
     const [keyboardOpen, setKeyboardOpen] = useState(false);
     const progress = useRef(new Animated.Value(0)).current;
+    // El PanResponder de más abajo se crea una sola vez; leer `onClose`
+    // directo del closure daría siempre el de ese primer render. El ref
+    // refleja la última prop sin importar cuándo se creó la closure.
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
 
     useEffect(() => {
-      if (visible) {
-        setMounted(true);
-        Animated.timing(progress, { toValue: 1, duration: 250, useNativeDriver: true }).start();
-      } else {
-        Animated.timing(progress, { toValue: 0, duration: 200, useNativeDriver: true }).start(({ finished }) => {
-          if (finished) setMounted(false);
-        });
-      }
+      const animation = visible
+        ? Animated.timing(progress, { toValue: 1, duration: 250, useNativeDriver: true })
+        : Animated.timing(progress, { toValue: 0, duration: 200, useNativeDriver: true });
+      if (visible) setMounted(true);
+      animation.start(({ finished }) => {
+        if (!visible && finished) setMounted(false);
+      });
+      // Si el efecto vuelve a correr (o el componente se desmonta) antes de
+      // que termine, se corta: si no, un `finished` tardío podría llamar
+      // `setMounted` sobre un componente ya desmontado.
+      return () => animation.stop();
     }, [visible, progress]);
 
     useEffect(() => {
@@ -142,7 +150,7 @@ export const BottomSheet = memo(
         },
         onPanResponderRelease: (_, gesture) => {
           if (gesture.dy > DISMISS_THRESHOLD) {
-            onClose();
+            onCloseRef.current();
           } else {
             Animated.timing(progress, { toValue: 1, duration: 150, useNativeDriver: true }).start();
           }
@@ -203,42 +211,48 @@ export const BottomSheet = memo(
             />
           </Transition>
 
-          <Transition
-            value={progress}
-            preset="slide-up"
-            distance={SCREEN_HEIGHT}
-            testID={testID}
-            style={[
-              styles.sheet,
-              { maxHeight: resolvedMaxHeight, paddingBottom: Math.max(insets.bottom, 20) },
-              containerStyle,
-            ]}
-          >
-            {draggable && (
-              <View style={styles.handleArea} testID="bottom-sheet-handle" {...panResponder.panHandlers}>
-                <View style={styles.handle} />
-              </View>
-            )}
+          {/* Insets medidos dentro de esta ventana nativa (el Modal nativo que
+              usa BottomSheet por debajo), no los de la raíz de la app. */}
+          <ModalSafeAreaBoundary>
+            {(insets) => (
+              <Transition
+                value={progress}
+                preset="slide-up"
+                distance={SCREEN_HEIGHT}
+                testID={testID}
+                style={[
+                  styles.sheet,
+                  { maxHeight: resolvedMaxHeight, paddingBottom: Math.max(insets.bottom, 20) },
+                  containerStyle,
+                ]}
+              >
+                {draggable && (
+                  <View style={styles.handleArea} testID="bottom-sheet-handle" {...panResponder.panHandlers}>
+                    <View style={styles.handle} />
+                  </View>
+                )}
 
-            {hasHeader && (
-              <View style={[styles.header, !draggable && styles.headerSpaced]}>
-                <Title style={styles.title} numberOfLines={1}>
-                  {title}
-                </Title>
-                <IconButton
-                  iconName="close"
-                  size={24}
-                  color={colors.text}
-                  onPress={onClose}
-                  accessibilityLabel={closeAccessibilityLabel}
-                />
-              </View>
-            )}
+                {hasHeader && (
+                  <View style={[styles.header, !draggable && styles.headerSpaced]}>
+                    <Title style={styles.title} numberOfLines={1}>
+                      {title}
+                    </Title>
+                    <IconButton
+                      iconName="close"
+                      size={24}
+                      color={colors.text}
+                      onPress={onClose}
+                      accessibilityLabel={closeAccessibilityLabel}
+                    />
+                  </View>
+                )}
 
-            {body}
+                {body}
 
-            {pinnedFooter}
-          </Transition>
+                {pinnedFooter}
+              </Transition>
+            )}
+          </ModalSafeAreaBoundary>
         </KeyboardAvoidingView>
       </Modal>
     );

package/src/organisms/Modal.tsx

@@ -11,7 +11,8 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useColors, useInsets } from '../theme/UIProvider';
+import { useColors, useModalSafeAreaBoundary } from '../theme/UIProvider';
+import type { EdgeInsets } from '../theme/insets';
 import { Title } from '../atoms/Text';
 import { IconButton } from '../atoms/IconButton';
 import { Transition, type TransitionPreset } from '../atoms/Transition';
@@ -96,7 +97,7 @@ export const Modal = memo(
     const isOverlay = variant === 'overlay';
     const isFullScreen = variant === 'fullScreen';
     const isAnimatedVariant = isOverlay || isFull;
-    const insets = useInsets();
+    const ModalSafeAreaBoundary = useModalSafeAreaBoundary();
     const colors = useColors();
     const styles = useStyles();
 
@@ -176,59 +177,66 @@ export const Modal = memo(
         hardwareAccelerated={hardwareAccelerated}
       >
         <KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={keyboardOffset} style={styles.flex1}>
-          {isOverlay ? (
-            <View style={styles.overlayContainer}>
-              {/* Sin accessibilityLabel propio: el header ya expone un botón "Close"
-                  accesible; duplicar el label aquí generaría dos elementos con el
-                  mismo nombre para lectores de pantalla. Tocar afuera es un atajo
-                  puramente táctil. */}
-              <Transition
-                visible={visible}
-                preset="fade"
-                duration={200}
-                keepMounted
-                style={[{ ...StyleSheetAbsoluteFill }, styles.backdrop]}
-              >
-                <Pressable style={StyleSheetAbsoluteFill} onPress={onClose} testID="modal-backdrop" />
-              </Transition>
-
-              <Transition
-                visible={visible}
-                preset={cardPreset}
-                distance={cardDistance}
-                duration={250}
-                onExited={() => setMounted(false)}
-                style={[styles.overlayCard, containerStyle]}
-              >
-                {renderHeader()}
-                {renderMainContent()}
-                {renderFooter()}
-              </Transition>
-            </View>
-          ) : isFull ? (
-            <Transition
-              visible={visible}
-              preset={cardPreset}
-              distance={cardDistance}
-              duration={250}
-              onExited={() => setMounted(false)}
-              style={[styles.fullWrapper, containerStyle]}
-            >
-              <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-                {renderHeader()}
-                {renderMainContent()}
-                {renderFooter()}
-              </View>
-            </Transition>
-          ) : (
-            <View style={[styles.fullWrapper, containerStyle]}>
-              <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-                {renderHeader()}
-                {renderMainContent()}
-                {renderFooter()}
-              </View>
-            </View>
-          )}
+          {/* Insets medidos dentro de esta ventana nativa del Modal, no los de
+              la raíz de la app — pueden diferir (Android siempre abre una
+              ventana propia; iOS según `presentationStyle`). */}
+          <ModalSafeAreaBoundary>
+            {(insets: EdgeInsets) =>
+              isOverlay ? (
+                <View style={styles.overlayContainer}>
+                  {/* Sin accessibilityLabel propio: el header ya expone un botón "Close"
+                      accesible; duplicar el label aquí generaría dos elementos con el
+                      mismo nombre para lectores de pantalla. Tocar afuera es un atajo
+                      puramente táctil. */}
+                  <Transition
+                    visible={visible}
+                    preset="fade"
+                    duration={200}
+                    keepMounted
+                    style={[{ ...StyleSheetAbsoluteFill }, styles.backdrop]}
+                  >
+                    <Pressable style={StyleSheetAbsoluteFill} onPress={onClose} testID="modal-backdrop" />
+                  </Transition>
+
+                  <Transition
+                    visible={visible}
+                    preset={cardPreset}
+                    distance={cardDistance}
+                    duration={250}
+                    onExited={() => setMounted(false)}
+                    style={[styles.overlayCard, containerStyle]}
+                  >
+                    {renderHeader()}
+                    {renderMainContent()}
+                    {renderFooter()}
+                  </Transition>
+                </View>
+              ) : isFull ? (
+                <Transition
+                  visible={visible}
+                  preset={cardPreset}
+                  distance={cardDistance}
+                  duration={250}
+                  onExited={() => setMounted(false)}
+                  style={[styles.fullWrapper, containerStyle]}
+                >
+                  <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+                    {renderHeader()}
+                    {renderMainContent()}
+                    {renderFooter()}
+                  </View>
+                </Transition>
+              ) : (
+                <View style={[styles.fullWrapper, containerStyle]}>
+                  <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+                    {renderHeader()}
+                    {renderMainContent()}
+                    {renderFooter()}
+                  </View>
+                </View>
+              )
+            }
+          </ModalSafeAreaBoundary>
         </KeyboardAvoidingView>
       </RNModal>
     );

package/src/organisms/NavigationBar.tsx

@@ -50,7 +50,10 @@ const useStyles = createStyles((theme) => ({
     position: 'absolute',
     top: theme.tokens.spacing.xs,
     bottom: theme.tokens.spacing.xs,
-    left: theme.tokens.spacing.sm,
+    // El indicador se posiciona contra el borde de la barra, no contra su caja
+    // interna: al `left` hay que sumarle el padding horizontal para que quede
+    // centrado sobre la pestaña y no corrido hacia la izquierda.
+    left: theme.tokens.spacing.xs + theme.tokens.spacing.sm,
     borderRadius: theme.tokens.radius.lg,
     backgroundColor: theme.colors.primarySoft,
   },