orn-ui 0.1.0 → 0.2.0

package/registry/date-picker.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "organisms/DatePicker.tsx",
-      "content": "import React, { memo, useMemo, useState } from 'react';\nimport { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { IconButton } from '../atoms/IconButton';\n\nexport const DEFAULT_MONTH_NAMES = [\n  'January', 'February', 'March', 'April', 'May', 'June',\n  'July', 'August', 'September', 'October', 'November', 'December',\n];\n\n/** Índice 0 = domingo, para alinear con Date.getDay(). */\nexport const DEFAULT_WEEKDAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n\nexport interface DateRange {\n  start: Date;\n  /** Falta mientras el rango está a medio elegir (sólo se tocó el inicio). */\n  end?: Date;\n}\n\nexport interface DatePickerProps {\n  /**\n   * 'single' elige una fecha; 'range' elige un intervalo con dos toques.\n   * @default 'single'\n   */\n  mode?: 'single' | 'range';\n  /** Fecha elegida en mode=\"single\". */\n  value?: Date;\n  /** Se llama en mode=\"single\". */\n  onChange?: (date: Date) => void;\n  /** Rango elegido en mode=\"range\". */\n  range?: DateRange;\n  /** Se llama en mode=\"range\", tanto al fijar el inicio como al cerrar el rango. */\n  onRangeChange?: (range: DateRange) => void;\n  minDate?: Date;\n  maxDate?: Date;\n  /** Mes mostrado al abrir si no hay `value`. @default hoy */\n  defaultMonth?: Date;\n  monthNames?: string[];\n  weekdayNames?: string[];\n  /** 0 = domingo, 1 = lunes. @default 0 */\n  firstDayOfWeek?: 0 | 1;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n/** Compara sólo año/mes/día, ignorando hora — dos Date del mismo día son \"iguales\". */\nfunction isSameDay(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\n}\n\nfunction startOfDay(d: Date): Date {\n  return new Date(d.getFullYear(), d.getMonth(), d.getDate());\n}\n\n/** Estrictamente entre start y end, sin incluir los extremos. */\nfunction isBetween(day: Date, start: Date, end: Date): boolean {\n  const t = startOfDay(day).getTime();\n  return t > startOfDay(start).getTime() && t < startOfDay(end).getTime();\n}\n\nfunction isOutOfRange(day: Date, minDate?: Date, maxDate?: Date): boolean {\n  const t = startOfDay(day).getTime();\n  if (minDate && t < startOfDay(minDate).getTime()) return true;\n  if (maxDate && t > startOfDay(maxDate).getTime()) return true;\n  return false;\n}\n\n/**\n * Devuelve la grilla del mes: 6 filas de 7 celdas. Las celdas fuera del mes\n * son null, así el layout no salta de alto entre meses (un mes puede\n * necesitar 4, 5 o 6 filas según en qué día caiga el 1).\n */\nexport function buildMonthGrid(year: number, month: number, firstDayOfWeek: 0 | 1): (Date | null)[][] {\n  const first = new Date(year, month, 1);\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n  const leading = (first.getDay() - firstDayOfWeek + 7) % 7;\n\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < leading; i++) cells.push(null);\n  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d));\n  while (cells.length < 42) cells.push(null);\n\n  const rows: (Date | null)[][] = [];\n  for (let r = 0; r < 6; r++) rows.push(cells.slice(r * 7, r * 7 + 7));\n  return rows;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: {\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    padding: theme.tokens.spacing.md,\n  },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.tokens.spacing.sm },\n  monthLabel: { fontSize: theme.tokens.fontSize.lg, fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.text },\n  weekRow: { flexDirection: 'row' },\n  weekday: {\n    flex: 1,\n    textAlign: 'center',\n    fontSize: theme.tokens.fontSize.xs,\n    fontWeight: theme.tokens.fontWeight.semibold,\n    color: theme.colors.textLight,\n    paddingVertical: theme.tokens.spacing.sm,\n  },\n  row: { flexDirection: 'row' },\n  cell: { flex: 1, aspectRatio: 1, alignItems: 'center', justifyContent: 'center' },\n  dayButton: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },\n  dayText: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },\n  daySelected: { backgroundColor: theme.colors.primary },\n  dayTextSelected: { color: theme.colors.white, fontWeight: theme.tokens.fontWeight.bold },\n  // El resaltado del tramo intermedio va en la celda (cuadrada, sin gaps) y\n  // no en el botón redondo, así la barra del rango se ve continua.\n  cellInRange: { backgroundColor: theme.colors.primary + '1f' },\n  cellRangeStart: { borderTopLeftRadius: 18, borderBottomLeftRadius: 18 },\n  cellRangeEnd: { borderTopRightRadius: 18, borderBottomRightRadius: 18 },\n  dayTextInRange: { color: theme.colors.primary, fontWeight: theme.tokens.fontWeight.semibold },\n  dayToday: { borderWidth: 1, borderColor: theme.colors.primary },\n  dayTextDisabled: { color: theme.colors.textLight, opacity: 0.4 },\n}));\n\n/**\n * DatePicker\n * Calendario mensual dibujado con View/Text puros — sin\n * @react-native-community/datetimepicker ni ningún picker nativo, para\n * mantener la librería en cero dependencias y verse igual en iOS y Android.\n */\nexport const DatePicker = memo(\n  ({\n    mode = 'single',\n    value,\n    onChange,\n    range,\n    onRangeChange,\n    minDate,\n    maxDate,\n    defaultMonth,\n    monthNames = DEFAULT_MONTH_NAMES,\n    weekdayNames = DEFAULT_WEEKDAY_NAMES,\n    firstDayOfWeek = 0,\n    style,\n    testID,\n  }: DatePickerProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const isRange = mode === 'range';\n\n    const handlePress = (day: Date) => {\n      if (!isRange) {\n        onChange?.(day);\n        return;\n      }\n      // Primer toque (o rango ya cerrado, o toque antes del inicio): arranca\n      // un rango nuevo. Segundo toque en adelante: lo cierra.\n      if (!range?.start || range.end || startOfDay(day) < startOfDay(range.start)) {\n        onRangeChange?.({ start: day });\n      } else {\n        onRangeChange?.({ start: range.start, end: day });\n      }\n    };\n\n    const initial = value ?? range?.start ?? defaultMonth ?? new Date();\n    const [visibleMonth, setVisibleMonth] = useState(() => new Date(initial.getFullYear(), initial.getMonth(), 1));\n\n    const today = useMemo(() => new Date(), []);\n    const grid = useMemo(\n      () => buildMonthGrid(visibleMonth.getFullYear(), visibleMonth.getMonth(), firstDayOfWeek),\n      [visibleMonth, firstDayOfWeek]\n    );\n\n    const orderedWeekdays = useMemo(\n      () => (firstDayOfWeek === 0 ? weekdayNames : [...weekdayNames.slice(1), weekdayNames[0]!]),\n      [weekdayNames, firstDayOfWeek]\n    );\n\n    const shiftMonth = (delta: number) =>\n      setVisibleMonth((m) => new Date(m.getFullYear(), m.getMonth() + delta, 1));\n\n    const monthLabel = `${monthNames[visibleMonth.getMonth()]} ${visibleMonth.getFullYear()}`;\n\n    return (\n      <View style={[styles.container, style]} testID={testID}>\n        <View style={styles.header}>\n          <IconButton iconName=\"chevron-left\" accessibilityLabel=\"Previous month\" onPress={() => shiftMonth(-1)} />\n          <Text allowFontScaling={allowFontScaling} style={styles.monthLabel} accessibilityRole=\"header\">\n            {monthLabel}\n          </Text>\n          <IconButton iconName=\"chevron-right\" accessibilityLabel=\"Next month\" onPress={() => shiftMonth(1)} />\n        </View>\n\n        <View style={styles.weekRow}>\n          {orderedWeekdays.map((w, i) => (\n            <Text allowFontScaling={allowFontScaling} key={`${w}-${i}`} style={styles.weekday}>\n              {w}\n            </Text>\n          ))}\n        </View>\n\n        {grid.map((row, rowIndex) => (\n          <View style={styles.row} key={rowIndex}>\n            {row.map((day, cellIndex) => {\n              if (!day) return <View style={styles.cell} key={cellIndex} />;\n\n              const isStart = isRange && !!range?.start && isSameDay(day, range.start);\n              const isEnd = isRange && !!range?.end && isSameDay(day, range.end);\n              const inRange =\n                isRange && !!range?.start && !!range.end && isBetween(day, range.start, range.end);\n              const selected = isRange ? isStart || isEnd : !!value && isSameDay(day, value);\n\n              const disabled = isOutOfRange(day, minDate, maxDate);\n              const isToday = isSameDay(day, today);\n              return (\n                <View\n                  style={[\n                    styles.cell,\n                    (inRange || (isStart && !!range?.end) || isEnd) && styles.cellInRange,\n                    isStart && !!range?.end && styles.cellRangeStart,\n                    isEnd && styles.cellRangeEnd,\n                  ]}\n                  key={cellIndex}\n                >\n                  <TouchableOpacity\n                    style={[styles.dayButton, selected && styles.daySelected, !selected && isToday && styles.dayToday]}\n                    onPress={() => handlePress(day)}\n                    disabled={disabled}\n                    activeOpacity={0.7}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel={`${monthNames[day.getMonth()]} ${day.getDate()}, ${day.getFullYear()}`}\n                    accessibilityState={{ selected, disabled }}\n                  >\n                    <Text\n                      allowFontScaling={allowFontScaling}\n                      style={[\n                        styles.dayText,\n                        inRange && styles.dayTextInRange,\n                        selected && styles.dayTextSelected,\n                        disabled && styles.dayTextDisabled,\n                      ]}\n                    >\n                      {day.getDate()}\n                    </Text>\n                  </TouchableOpacity>\n                </View>\n              );\n            })}\n          </View>\n        ))}\n      </View>\n    );\n  }\n);\nDatePicker.displayName = 'DatePicker';\n"
+      "content": "import React, { memo, useMemo, useState } from 'react';\nimport { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { IconButton } from '../atoms/IconButton';\n\nexport const DEFAULT_MONTH_NAMES = [\n  'January', 'February', 'March', 'April', 'May', 'June',\n  'July', 'August', 'September', 'October', 'November', 'December',\n];\n\n/** Índice 0 = domingo, para alinear con Date.getDay(). */\nexport const DEFAULT_WEEKDAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n\nexport interface DateRange {\n  start: Date;\n  /** Falta mientras el rango está a medio elegir (sólo se tocó el inicio). */\n  end?: Date;\n}\n\nexport interface DatePickerProps {\n  /**\n   * 'single' elige una fecha; 'range' elige un intervalo con dos toques.\n   * @default 'single'\n   */\n  mode?: 'single' | 'range';\n  /** Fecha elegida en mode=\"single\". */\n  value?: Date;\n  /** Se llama en mode=\"single\". */\n  onChange?: (date: Date) => void;\n  /** Rango elegido en mode=\"range\". */\n  range?: DateRange;\n  /** Se llama en mode=\"range\", tanto al fijar el inicio como al cerrar el rango. */\n  onRangeChange?: (range: DateRange) => void;\n  minDate?: Date;\n  maxDate?: Date;\n  /** Mes mostrado al abrir si no hay `value`. @default hoy */\n  defaultMonth?: Date;\n  monthNames?: string[];\n  weekdayNames?: string[];\n  /** 0 = domingo, 1 = lunes. @default 0 */\n  firstDayOfWeek?: 0 | 1;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n/** Compara sólo año/mes/día, ignorando hora — dos Date del mismo día son \"iguales\". */\nfunction isSameDay(a: Date, b: Date): boolean {\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\n}\n\nfunction startOfDay(d: Date): Date {\n  return new Date(d.getFullYear(), d.getMonth(), d.getDate());\n}\n\n/** Estrictamente entre start y end, sin incluir los extremos. */\nfunction isBetween(day: Date, start: Date, end: Date): boolean {\n  const t = startOfDay(day).getTime();\n  return t > startOfDay(start).getTime() && t < startOfDay(end).getTime();\n}\n\nfunction isOutOfRange(day: Date, minDate?: Date, maxDate?: Date): boolean {\n  const t = startOfDay(day).getTime();\n  if (minDate && t < startOfDay(minDate).getTime()) return true;\n  if (maxDate && t > startOfDay(maxDate).getTime()) return true;\n  return false;\n}\n\n/**\n * Devuelve la grilla del mes: 6 filas de 7 celdas. Las celdas fuera del mes\n * son null, así el layout no salta de alto entre meses (un mes puede\n * necesitar 4, 5 o 6 filas según en qué día caiga el 1).\n */\nexport function buildMonthGrid(year: number, month: number, firstDayOfWeek: 0 | 1): (Date | null)[][] {\n  const first = new Date(year, month, 1);\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n  const leading = (first.getDay() - firstDayOfWeek + 7) % 7;\n\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < leading; i++) cells.push(null);\n  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d));\n  while (cells.length < 42) cells.push(null);\n\n  const rows: (Date | null)[][] = [];\n  for (let r = 0; r < 6; r++) rows.push(cells.slice(r * 7, r * 7 + 7));\n  return rows;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: {\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    padding: theme.tokens.spacing.md,\n  },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.tokens.spacing.sm },\n  monthLabel: { fontSize: theme.tokens.fontSize.lg, fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.text },\n  weekRow: { flexDirection: 'row' },\n  weekday: {\n    flex: 1,\n    textAlign: 'center',\n    fontSize: theme.tokens.fontSize.xs,\n    fontWeight: theme.tokens.fontWeight.semibold,\n    color: theme.colors.textLight,\n    paddingVertical: theme.tokens.spacing.sm,\n  },\n  row: { flexDirection: 'row' },\n  cell: { flex: 1, aspectRatio: 1, alignItems: 'center', justifyContent: 'center' },\n  dayButton: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },\n  dayText: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },\n  daySelected: { backgroundColor: theme.colors.primary },\n  dayTextSelected: { color: theme.colors.onPrimary, fontWeight: theme.tokens.fontWeight.bold },\n  // El resaltado del tramo intermedio va en la celda (cuadrada, sin gaps) y\n  // no en el botón redondo, así la barra del rango se ve continua.\n  cellInRange: { backgroundColor: theme.colors.primarySoft },\n  cellRangeStart: { borderTopLeftRadius: 18, borderBottomLeftRadius: 18 },\n  cellRangeEnd: { borderTopRightRadius: 18, borderBottomRightRadius: 18 },\n  dayTextInRange: { color: theme.colors.primaryText, fontWeight: theme.tokens.fontWeight.semibold },\n  dayToday: { borderWidth: 1, borderColor: theme.colors.primary },\n  dayTextDisabled: { color: theme.colors.textLight, opacity: 0.4 },\n}));\n\n/**\n * DatePicker\n * Calendario mensual dibujado con View/Text puros — sin\n * @react-native-community/datetimepicker ni ningún picker nativo, para\n * mantener la librería en cero dependencias y verse igual en iOS y Android.\n */\nexport const DatePicker = memo(\n  ({\n    mode = 'single',\n    value,\n    onChange,\n    range,\n    onRangeChange,\n    minDate,\n    maxDate,\n    defaultMonth,\n    monthNames = DEFAULT_MONTH_NAMES,\n    weekdayNames = DEFAULT_WEEKDAY_NAMES,\n    firstDayOfWeek = 0,\n    style,\n    testID,\n  }: DatePickerProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const isRange = mode === 'range';\n\n    const handlePress = (day: Date) => {\n      if (!isRange) {\n        onChange?.(day);\n        return;\n      }\n      // Primer toque (o rango ya cerrado, o toque antes del inicio): arranca\n      // un rango nuevo. Segundo toque en adelante: lo cierra.\n      if (!range?.start || range.end || startOfDay(day) < startOfDay(range.start)) {\n        onRangeChange?.({ start: day });\n      } else {\n        onRangeChange?.({ start: range.start, end: day });\n      }\n    };\n\n    const initial = value ?? range?.start ?? defaultMonth ?? new Date();\n    const [visibleMonth, setVisibleMonth] = useState(() => new Date(initial.getFullYear(), initial.getMonth(), 1));\n\n    const today = useMemo(() => new Date(), []);\n    const grid = useMemo(\n      () => buildMonthGrid(visibleMonth.getFullYear(), visibleMonth.getMonth(), firstDayOfWeek),\n      [visibleMonth, firstDayOfWeek]\n    );\n\n    const orderedWeekdays = useMemo(\n      () => (firstDayOfWeek === 0 ? weekdayNames : [...weekdayNames.slice(1), weekdayNames[0]!]),\n      [weekdayNames, firstDayOfWeek]\n    );\n\n    const shiftMonth = (delta: number) =>\n      setVisibleMonth((m) => new Date(m.getFullYear(), m.getMonth() + delta, 1));\n\n    const monthLabel = `${monthNames[visibleMonth.getMonth()]} ${visibleMonth.getFullYear()}`;\n\n    return (\n      <View style={[styles.container, style]} testID={testID}>\n        <View style={styles.header}>\n          <IconButton iconName=\"chevron-left\" accessibilityLabel=\"Previous month\" onPress={() => shiftMonth(-1)} />\n          <Text allowFontScaling={allowFontScaling} style={styles.monthLabel} accessibilityRole=\"header\">\n            {monthLabel}\n          </Text>\n          <IconButton iconName=\"chevron-right\" accessibilityLabel=\"Next month\" onPress={() => shiftMonth(1)} />\n        </View>\n\n        <View style={styles.weekRow}>\n          {orderedWeekdays.map((w, i) => (\n            <Text allowFontScaling={allowFontScaling} key={`${w}-${i}`} style={styles.weekday}>\n              {w}\n            </Text>\n          ))}\n        </View>\n\n        {grid.map((row, rowIndex) => (\n          <View style={styles.row} key={rowIndex}>\n            {row.map((day, cellIndex) => {\n              if (!day) return <View style={styles.cell} key={cellIndex} />;\n\n              const isStart = isRange && !!range?.start && isSameDay(day, range.start);\n              const isEnd = isRange && !!range?.end && isSameDay(day, range.end);\n              const inRange =\n                isRange && !!range?.start && !!range.end && isBetween(day, range.start, range.end);\n              const selected = isRange ? isStart || isEnd : !!value && isSameDay(day, value);\n\n              const disabled = isOutOfRange(day, minDate, maxDate);\n              const isToday = isSameDay(day, today);\n              return (\n                <View\n                  style={[\n                    styles.cell,\n                    (inRange || (isStart && !!range?.end) || isEnd) && styles.cellInRange,\n                    isStart && !!range?.end && styles.cellRangeStart,\n                    isEnd && styles.cellRangeEnd,\n                  ]}\n                  key={cellIndex}\n                >\n                  <TouchableOpacity\n                    style={[styles.dayButton, selected && styles.daySelected, !selected && isToday && styles.dayToday]}\n                    onPress={() => handlePress(day)}\n                    disabled={disabled}\n                    activeOpacity={0.7}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel={`${monthNames[day.getMonth()]} ${day.getDate()}, ${day.getFullYear()}`}\n                    accessibilityState={{ selected, disabled }}\n                  >\n                    <Text\n                      allowFontScaling={allowFontScaling}\n                      style={[\n                        styles.dayText,\n                        inRange && styles.dayTextInRange,\n                        selected && styles.dayTextSelected,\n                        disabled && styles.dayTextDisabled,\n                      ]}\n                    >\n                      {day.getDate()}\n                    </Text>\n                  </TouchableOpacity>\n                </View>\n              );\n            })}\n          </View>\n        ))}\n      </View>\n    );\n  }\n);\nDatePicker.displayName = 'DatePicker';\n"
     }
   ],
   "registryDependencies": [

package/registry/fab.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/Fab.tsx",
-      "content": "import React, { memo } from 'react';\nimport { type GestureResponderEvent, type StyleProp, type ViewStyle } from 'react-native';\nimport { PressableScale } from './PressableScale';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\nimport { createStyles } from '../theme/createStyles';\nimport { useColors } from '../theme/UIProvider';\n\nexport interface FabProps {\n  onPress: (e: GestureResponderEvent) => void;\n  iconName?: IconName;\n  icon?: React.ReactNode;\n  size?: number;\n  bottom?: number;\n  right?: number;\n  color?: string;\n  style?: StyleProp<ViewStyle>;\n  accessibilityLabel: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  fab: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    ...theme.tokens.shadow.lg,\n  },\n}));\n\n/**\n * Fab\n * Botón flotante circular. `bottom`/`right` en vez del `tabBarHeight`\n * obligatorio de la versión original — el consumidor decide su propio\n * offset (con o sin tab bar).\n */\nexport const Fab = memo(\n  ({ onPress, iconName = 'plus', icon, size = 60, bottom = 20, right = 20, color, style, accessibilityLabel }: FabProps) => {\n    const styles = useStyles();\n    const colors = useColors();\n    return (\n      <PressableScale\n        onPress={onPress}\n        style={[\n          styles.fab,\n          {\n            width: size,\n            height: size,\n            borderRadius: size / 2,\n            bottom,\n            right,\n            backgroundColor: color ?? colors.primary,\n          },\n          style,\n        ]}\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel}\n      >\n        {icon ?? <Icon name={iconName} size={size * 0.5} color={colors.white} />}\n      </PressableScale>\n    );\n  }\n);\nFab.displayName = 'Fab';\n"
+      "content": "import React, { memo } from 'react';\nimport { type GestureResponderEvent, type StyleProp, type ViewStyle } from 'react-native';\nimport { PressableScale } from './PressableScale';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\nimport { createStyles } from '../theme/createStyles';\nimport { useColors } from '../theme/UIProvider';\n\nexport interface FabProps {\n  onPress: (e: GestureResponderEvent) => void;\n  iconName?: IconName;\n  icon?: React.ReactNode;\n  size?: number;\n  bottom?: number;\n  right?: number;\n  color?: string;\n  style?: StyleProp<ViewStyle>;\n  accessibilityLabel: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  fab: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    ...theme.tokens.shadow.lg,\n  },\n}));\n\n/**\n * Fab\n * Botón flotante circular. `bottom`/`right` en vez del `tabBarHeight`\n * obligatorio de la versión original — el consumidor decide su propio\n * offset (con o sin tab bar).\n */\nexport const Fab = memo(\n  ({ onPress, iconName = 'plus', icon, size = 60, bottom = 20, right = 20, color, style, accessibilityLabel }: FabProps) => {\n    const styles = useStyles();\n    const colors = useColors();\n    return (\n      <PressableScale\n        onPress={onPress}\n        style={[\n          styles.fab,\n          {\n            width: size,\n            height: size,\n            borderRadius: size / 2,\n            bottom,\n            right,\n            backgroundColor: color ?? colors.primary,\n          },\n          style,\n        ]}\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel}\n      >\n        {icon ?? <Icon name={iconName} size={size * 0.5} color={colors.onPrimary} />}\n      </PressableScale>\n    );\n  }\n);\nFab.displayName = 'Fab';\n"
     }
   ],
   "registryDependencies": [

package/registry/image.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "atoms/Image.tsx",
-      "content": "import React, { memo, useCallback, useEffect, useState } from 'react';\nimport {\n  Image as RNImage,\n  Platform,\n  StyleSheet,\n  View,\n  type ImageErrorEventData,\n  type ImageResizeMode,\n  type ImageSourcePropType,\n  type NativeSyntheticEvent,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { Spinner } from './Spinner';\n\nexport interface ImageProps {\n  source: ImageSourcePropType;\n  width?: number;\n  height?: number;\n  /** @default 'cover' */\n  resizeMode?: ImageResizeMode;\n  /** Radio de las esquinas, mismo patrón que Avatar/Card. @default 0 */\n  radius?: number;\n  /** Qué mostrar mientras carga. `false` para no mostrar nada. @default true (spinner chico) */\n  loading?: React.ReactNode | boolean;\n  /** Qué mostrar si la carga falla. @default un placeholder gris, sin contenido */\n  fallback?: React.ReactNode;\n  /**\n   * 'high' dispara Image.prefetch() al montar, antes de que <Image> arranque\n   * su propio ciclo de carga — pensado para la imagen above-the-fold de una\n   * pantalla (la primera que el usuario ve). Sin costo si ya está en caché.\n   * @default 'normal'\n   */\n  priority?: 'low' | 'normal' | 'high';\n  style?: StyleProp<ViewStyle>;\n  onLoadEnd?: () => void;\n  onError?: (error: NativeSyntheticEvent<ImageErrorEventData>) => void;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { overflow: 'hidden', backgroundColor: theme.colors.border + '30' },\n  overlay: { alignItems: 'center', justifyContent: 'center' },\n  fallback: { flex: 1, backgroundColor: theme.colors.border + '30' },\n}));\n\nfunction sourceUri(source: ImageSourcePropType): string | undefined {\n  return typeof source === 'object' && source !== null && 'uri' in source ? source.uri : undefined;\n}\n\n/**\n * Image\n * Wrapper cero-dependencias sobre <Image> de RN: agrega estado de carga y\n * error (con los mismos placeholders que el resto de la librería), y expone\n * `priority=\"high\"` para adelantar la descarga vía Image.prefetch(). El\n * cache real (disco/memoria) lo maneja el motor de imágenes nativo de RN —\n * esto no lo reimplementa, solo no lo deja apagado por accidente: en iOS\n * fuerza `cache=\"force-cache\"` (usa el disco aunque el header HTTP no lo\n * pida); en Android el cache de disco de la imagen nativa ya está siempre\n * activo, no hay knob equivalente que tocar.\n */\nexport const Image = memo(\n  ({\n    source,\n    width,\n    height,\n    resizeMode = 'cover',\n    radius = 0,\n    loading = true,\n    fallback,\n    priority = 'normal',\n    style,\n    onLoadEnd,\n    onError,\n    testID,\n  }: ImageProps) => {\n    const styles = useStyles();\n    const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading');\n    const uri = sourceUri(source);\n\n    useEffect(() => {\n      // Resetea el estado si cambia la imagen (misma instancia de Image,\n      // source distinto: p.ej. avatar de un usuario a otro en la misma fila).\n      setStatus('loading');\n    }, [uri ?? source]);\n\n    useEffect(() => {\n      if (priority === 'high' && uri) {\n        RNImage.prefetch(uri).catch(() => {});\n      }\n    }, [priority, uri]);\n\n    const handleError = useCallback(\n      (e: NativeSyntheticEvent<ImageErrorEventData>) => {\n        setStatus('error');\n        onError?.(e);\n      },\n      [onError]\n    );\n\n    const handleLoadEnd = useCallback(() => {\n      setStatus('loaded');\n      onLoadEnd?.();\n    }, [onLoadEnd]);\n\n    return (\n      <View style={[styles.container, { width, height, borderRadius: radius }, style]} testID={testID}>\n        {status !== 'error' && (\n          <RNImage\n            source={source}\n            resizeMode={resizeMode}\n            style={StyleSheet.absoluteFill}\n            fadeDuration={Platform.OS === 'android' ? 150 : undefined}\n            {...(Platform.OS === 'ios' ? { cache: 'force-cache' as const } : null)}\n            onLoadEnd={handleLoadEnd}\n            onError={handleError}\n          />\n        )}\n        {status === 'loading' && loading !== false && (\n          <View style={[StyleSheet.absoluteFill, styles.overlay]}>\n            {loading === true ? <Spinner size=\"small\" fullscreen={false} /> : loading}\n          </View>\n        )}\n        {status === 'error' && (fallback ?? <View style={styles.fallback} />)}\n      </View>\n    );\n  }\n);\nImage.displayName = 'Image';\n\n/**\n * Precarga una URL antes de montar el componente (p.ej. al recibir la\n * respuesta de un listado, antes de navegar al detalle). Re-exporta\n * Image.prefetch de RN — no hay nada zero-dep que agregarle encima.\n */\nexport const prefetchImage = RNImage.prefetch;\n"
+      "content": "import React, { memo, useCallback, useEffect, useState } from 'react';\nimport {\n  Image as RNImage,\n  Platform,\n  StyleSheet,\n  View,\n  type ImageErrorEventData,\n  type ImageResizeMode,\n  type ImageSourcePropType,\n  type NativeSyntheticEvent,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { Spinner } from './Spinner';\n\nexport interface ImageProps {\n  source: ImageSourcePropType;\n  width?: number;\n  height?: number;\n  /** @default 'cover' */\n  resizeMode?: ImageResizeMode;\n  /** Radio de las esquinas, mismo patrón que Avatar/Card. @default 0 */\n  radius?: number;\n  /** Qué mostrar mientras carga. `false` para no mostrar nada. @default true (spinner chico) */\n  loading?: React.ReactNode | boolean;\n  /** Qué mostrar si la carga falla. @default un placeholder gris, sin contenido */\n  fallback?: React.ReactNode;\n  /**\n   * 'high' dispara Image.prefetch() al montar, antes de que <Image> arranque\n   * su propio ciclo de carga — pensado para la imagen above-the-fold de una\n   * pantalla (la primera que el usuario ve). Sin costo si ya está en caché.\n   * @default 'normal'\n   */\n  priority?: 'low' | 'normal' | 'high';\n  style?: StyleProp<ViewStyle>;\n  onLoadEnd?: () => void;\n  onError?: (error: NativeSyntheticEvent<ImageErrorEventData>) => void;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { overflow: 'hidden', backgroundColor: theme.colors.skeleton },\n  overlay: { alignItems: 'center', justifyContent: 'center' },\n  fallback: { flex: 1, backgroundColor: theme.colors.skeleton },\n}));\n\nfunction sourceUri(source: ImageSourcePropType): string | undefined {\n  return typeof source === 'object' && source !== null && 'uri' in source ? source.uri : undefined;\n}\n\n/**\n * Image\n * Wrapper cero-dependencias sobre <Image> de RN: agrega estado de carga y\n * error (con los mismos placeholders que el resto de la librería), y expone\n * `priority=\"high\"` para adelantar la descarga vía Image.prefetch(). El\n * cache real (disco/memoria) lo maneja el motor de imágenes nativo de RN —\n * esto no lo reimplementa, solo no lo deja apagado por accidente: en iOS\n * fuerza `cache=\"force-cache\"` (usa el disco aunque el header HTTP no lo\n * pida); en Android el cache de disco de la imagen nativa ya está siempre\n * activo, no hay knob equivalente que tocar.\n */\nexport const Image = memo(\n  ({\n    source,\n    width,\n    height,\n    resizeMode = 'cover',\n    radius = 0,\n    loading = true,\n    fallback,\n    priority = 'normal',\n    style,\n    onLoadEnd,\n    onError,\n    testID,\n  }: ImageProps) => {\n    const styles = useStyles();\n    const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading');\n    const uri = sourceUri(source);\n\n    useEffect(() => {\n      // Resetea el estado si cambia la imagen (misma instancia de Image,\n      // source distinto: p.ej. avatar de un usuario a otro en la misma fila).\n      setStatus('loading');\n    }, [uri ?? source]);\n\n    useEffect(() => {\n      if (priority === 'high' && uri) {\n        RNImage.prefetch(uri).catch(() => {});\n      }\n    }, [priority, uri]);\n\n    const handleError = useCallback(\n      (e: NativeSyntheticEvent<ImageErrorEventData>) => {\n        setStatus('error');\n        onError?.(e);\n      },\n      [onError]\n    );\n\n    const handleLoadEnd = useCallback(() => {\n      setStatus('loaded');\n      onLoadEnd?.();\n    }, [onLoadEnd]);\n\n    return (\n      <View style={[styles.container, { width, height, borderRadius: radius }, style]} testID={testID}>\n        {status !== 'error' && (\n          <RNImage\n            source={source}\n            resizeMode={resizeMode}\n            style={StyleSheet.absoluteFill}\n            fadeDuration={Platform.OS === 'android' ? 150 : undefined}\n            {...(Platform.OS === 'ios' ? { cache: 'force-cache' as const } : null)}\n            onLoadEnd={handleLoadEnd}\n            onError={handleError}\n          />\n        )}\n        {status === 'loading' && loading !== false && (\n          <View style={[StyleSheet.absoluteFill, styles.overlay]}>\n            {loading === true ? <Spinner size=\"small\" fullscreen={false} /> : loading}\n          </View>\n        )}\n        {status === 'error' && (fallback ?? <View style={styles.fallback} />)}\n      </View>\n    );\n  }\n);\nImage.displayName = 'Image';\n\n/**\n * Precarga una URL antes de montar el componente (p.ej. al recibir la\n * respuesta de un listado, antes de navegar al detalle). Re-exporta\n * Image.prefetch de RN — no hay nada zero-dep que agregarle encima.\n */\nexport const prefetchImage = RNImage.prefetch;\n"
     }
   ],
   "registryDependencies": [

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "core": {
-    "bytes": 24213
+    "bytes": 35122
   },
   "components": [
     {
@@ -28,7 +28,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 6614
+      "bytes": 6790
     },
     {
       "name": "IconButton",
@@ -53,7 +53,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 5439
+      "bytes": 5447
     },
     {
       "name": "Checkbox",
@@ -65,7 +65,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2632
+      "bytes": 2847
     },
     {
       "name": "Badge",
@@ -77,7 +77,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2030
+      "bytes": 2172
     },
     {
       "name": "Card",
@@ -113,7 +113,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 1015
+      "bytes": 1012
     },
     {
       "name": "Image",
@@ -127,7 +127,7 @@
         "core",
         "spinner"
       ],
-      "bytes": 4620
+      "bytes": 4610
     },
     {
       "name": "Spinner",
@@ -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",
@@ -176,7 +201,7 @@
         "core",
         "pressable-scale"
       ],
-      "bytes": 1784
+      "bytes": 1788
     },
     {
       "name": "PressableScale",
@@ -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": 3005
+      "bytes": 4156
     },
     {
       "name": "InfoRow",
@@ -250,19 +277,19 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2486
+      "bytes": 2487
     },
     {
-      "name": "ThemeToggle",
-      "slug": "theme-toggle",
+      "name": "SegmentedControl",
+      "slug": "segmented-control",
       "category": "molecules",
       "exportedNames": [
-        "ThemeToggle"
+        "SegmentedControl"
       ],
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2440
+      "bytes": 2884
     },
     {
       "name": "Steps",
@@ -274,7 +301,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 7306
+      "bytes": 7314
     },
     {
       "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": 5348
+      "bytes": 12122
     },
     {
       "name": "Alert",
@@ -326,7 +358,7 @@
         "core",
         "button"
       ],
-      "bytes": 6138
+      "bytes": 6240
     },
     {
       "name": "AlertProvider",
@@ -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": 4779
+      "bytes": 6039
     },
     {
       "name": "SearchList",
@@ -380,11 +416,12 @@
         "core",
         "input",
         "empty-state",
+        "skeleton",
         "spinner",
         "icon-button",
         "pressable-scale"
       ],
-      "bytes": 5861
+      "bytes": 9327
     },
     {
       "name": "Toast",
@@ -394,9 +431,10 @@
         "Toast"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "transition"
       ],
-      "bytes": 4411
+      "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": 10093
+      "bytes": 10098
     },
     {
       "name": "DateField",
@@ -442,10 +484,11 @@
         "title",
         "icon-button",
         "pressable-scale",
+        "transition",
         "date-picker",
         "button"
       ],
-      "bytes": 4545
+      "bytes": 4553
     },
     {
       "name": "Wizard",
@@ -457,9 +500,35 @@
       "registryDependencies": [
         "core",
         "steps",
-        "button"
+        "button",
+        "transition"
+      ],
+      "bytes": 5591
+    },
+    {
+      "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": 7378
     }
   ]
 }

package/registry/input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/Input.tsx",
-      "content": "import React, { memo, useRef, useState } from 'react';\nimport {\n  ActivityIndicator,\n  Animated,\n  Text,\n  TextInput,\n  TouchableOpacity,\n  View,\n  type StyleProp,\n  type TextInputProps,\n  type ViewStyle,\n} 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 InputProps extends Omit<TextInputProps, 'style'> {\n  label?: string;\n  /** Muestra un asterisco junto al label. Puramente visual, no valida nada. */\n  required?: boolean;\n  error?: string;\n  containerStyle?: StyleProp<ViewStyle>;\n  style?: TextInputProps['style'];\n  leftIconName?: IconName;\n  rightIconName?: IconName;\n  onRightIconPress?: () => void;\n  isPassword?: boolean;\n  isLoading?: boolean;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { marginBottom: theme.tokens.spacing.lg, width: '100%' },\n  label: {\n    marginBottom: theme.tokens.spacing.sm,\n    fontSize: theme.tokens.fontSize.md,\n    fontWeight: theme.tokens.fontWeight.medium,\n    color: theme.colors.text,\n  },\n  required: { color: theme.colors.error },\n  inputWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    backgroundColor: theme.colors.inputBackground,\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 2,\n    minHeight: 50,\n  },\n  input: {\n    flex: 1,\n    paddingVertical: theme.tokens.spacing.md,\n    paddingHorizontal: theme.tokens.spacing.lg,\n    fontSize: theme.tokens.fontSize.lg,\n    color: theme.colors.text,\n  },\n  leftIcon: { marginLeft: theme.tokens.spacing.lg, marginRight: -theme.tokens.spacing.xs },\n  rightIcon: { padding: theme.tokens.spacing.sm + 2, marginRight: theme.tokens.spacing.xs },\n  errorText: { marginTop: theme.tokens.spacing.xs, fontSize: theme.tokens.fontSize.sm, color: theme.colors.error },\n}));\n\n/**\n * Input\n * El borde anima color entre border/primary/error con Animated (no\n * useNativeDriver: los navegadores de color en RN sin Fabric solo son\n * confiables en el hilo de JS; el costo es despreciable, se anima un borde).\n */\nexport const Input = memo(\n  ({\n    label,\n    required = false,\n    error,\n    containerStyle,\n    leftIconName,\n    rightIconName,\n    onRightIconPress,\n    isPassword = false,\n    isLoading = false,\n    style,\n    onFocus,\n    onBlur,\n    testID,\n    ...props\n  }: InputProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const [isFocused, setIsFocused] = useState(false);\n    const [showPassword, setShowPassword] = useState(false);\n    const focusProgress = useRef(new Animated.Value(0)).current;\n\n    const handleFocus: TextInputProps['onFocus'] = (e) => {\n      setIsFocused(true);\n      Animated.timing(focusProgress, { toValue: 1, duration: 200, useNativeDriver: false }).start();\n      onFocus?.(e);\n    };\n\n    const handleBlur: TextInputProps['onBlur'] = (e) => {\n      setIsFocused(false);\n      Animated.timing(focusProgress, { toValue: 0, duration: 200, useNativeDriver: false }).start();\n      onBlur?.(e);\n    };\n\n    const borderColor = error\n      ? colors.error\n      : focusProgress.interpolate({ outputRange: [colors.border, colors.primary], inputRange: [0, 1] });\n\n    return (\n      <View style={[styles.container, containerStyle]} testID={testID}>\n        {label && (\n          <Text allowFontScaling={allowFontScaling} style={styles.label}>\n            {label}\n            {required && <Text style={styles.required}> *</Text>}\n          </Text>\n        )}\n\n        <Animated.View style={[styles.inputWrapper, { borderColor }]}>\n          {leftIconName && <Icon name={leftIconName} size={20} color={colors.textLight} style={styles.leftIcon} />}\n\n          <TextInput\n            style={[styles.input, style]}\n            placeholderTextColor={colors.textLight}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            secureTextEntry={isPassword && !showPassword}\n            allowFontScaling={allowFontScaling}\n            textAlignVertical=\"center\"\n            accessibilityLabel={label ?? props.placeholder}\n            {...props}\n          />\n\n          {isLoading ? (\n            <View style={styles.rightIcon}>\n              <ActivityIndicator size=\"small\" color={colors.primary} />\n            </View>\n          ) : isPassword ? (\n            <TouchableOpacity\n              onPress={() => setShowPassword((v) => !v)}\n              style={styles.rightIcon}\n              accessibilityRole=\"button\"\n              accessibilityLabel={showPassword ? 'Hide password' : 'Show password'}\n            >\n              <Icon name={showPassword ? 'eye-off' : 'eye'} size={20} color={colors.textLight} />\n            </TouchableOpacity>\n          ) : rightIconName ? (\n            <TouchableOpacity\n              onPress={onRightIconPress}\n              style={styles.rightIcon}\n              disabled={!onRightIconPress}\n              accessibilityRole=\"button\"\n              accessibilityLabel=\"Clear\"\n            >\n              <Icon name={rightIconName} size={20} color={colors.textLight} />\n            </TouchableOpacity>\n          ) : null}\n        </Animated.View>\n\n        {!!error && (\n          <Text allowFontScaling={allowFontScaling} style={styles.errorText}>\n            {error}\n          </Text>\n        )}\n      </View>\n    );\n  }\n);\nInput.displayName = 'Input';\n"
+      "content": "import React, { memo, useRef, useState } from 'react';\nimport {\n  ActivityIndicator,\n  Animated,\n  Text,\n  TextInput,\n  TouchableOpacity,\n  View,\n  type StyleProp,\n  type TextInputProps,\n  type ViewStyle,\n} 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 InputProps extends Omit<TextInputProps, 'style'> {\n  label?: string;\n  /** Muestra un asterisco junto al label. Puramente visual, no valida nada. */\n  required?: boolean;\n  error?: string;\n  containerStyle?: StyleProp<ViewStyle>;\n  style?: TextInputProps['style'];\n  leftIconName?: IconName;\n  rightIconName?: IconName;\n  onRightIconPress?: () => void;\n  isPassword?: boolean;\n  isLoading?: boolean;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { marginBottom: theme.tokens.spacing.lg, width: '100%' },\n  label: {\n    marginBottom: theme.tokens.spacing.sm,\n    fontSize: theme.tokens.fontSize.md,\n    fontWeight: theme.tokens.fontWeight.medium,\n    color: theme.colors.text,\n  },\n  required: { color: theme.colors.errorText },\n  inputWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    backgroundColor: theme.colors.inputBackground,\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 2,\n    minHeight: 50,\n  },\n  input: {\n    flex: 1,\n    paddingVertical: theme.tokens.spacing.md,\n    paddingHorizontal: theme.tokens.spacing.lg,\n    fontSize: theme.tokens.fontSize.lg,\n    color: theme.colors.text,\n  },\n  leftIcon: { marginLeft: theme.tokens.spacing.lg, marginRight: -theme.tokens.spacing.xs },\n  rightIcon: { padding: theme.tokens.spacing.sm + 2, marginRight: theme.tokens.spacing.xs },\n  errorText: { marginTop: theme.tokens.spacing.xs, fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },\n}));\n\n/**\n * Input\n * El borde anima color entre border/primary/error con Animated (no\n * useNativeDriver: los navegadores de color en RN sin Fabric solo son\n * confiables en el hilo de JS; el costo es despreciable, se anima un borde).\n */\nexport const Input = memo(\n  ({\n    label,\n    required = false,\n    error,\n    containerStyle,\n    leftIconName,\n    rightIconName,\n    onRightIconPress,\n    isPassword = false,\n    isLoading = false,\n    style,\n    onFocus,\n    onBlur,\n    testID,\n    ...props\n  }: InputProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const [isFocused, setIsFocused] = useState(false);\n    const [showPassword, setShowPassword] = useState(false);\n    const focusProgress = useRef(new Animated.Value(0)).current;\n\n    const handleFocus: TextInputProps['onFocus'] = (e) => {\n      setIsFocused(true);\n      Animated.timing(focusProgress, { toValue: 1, duration: 200, useNativeDriver: false }).start();\n      onFocus?.(e);\n    };\n\n    const handleBlur: TextInputProps['onBlur'] = (e) => {\n      setIsFocused(false);\n      Animated.timing(focusProgress, { toValue: 0, duration: 200, useNativeDriver: false }).start();\n      onBlur?.(e);\n    };\n\n    const borderColor = error\n      ? colors.error\n      : focusProgress.interpolate({ outputRange: [colors.border, colors.primary], inputRange: [0, 1] });\n\n    return (\n      <View style={[styles.container, containerStyle]} testID={testID}>\n        {label && (\n          <Text allowFontScaling={allowFontScaling} style={styles.label}>\n            {label}\n            {required && <Text style={styles.required}> *</Text>}\n          </Text>\n        )}\n\n        <Animated.View style={[styles.inputWrapper, { borderColor }]}>\n          {leftIconName && <Icon name={leftIconName} size={20} color={colors.textLight} style={styles.leftIcon} />}\n\n          <TextInput\n            style={[styles.input, style]}\n            placeholderTextColor={colors.textLight}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            secureTextEntry={isPassword && !showPassword}\n            allowFontScaling={allowFontScaling}\n            textAlignVertical=\"center\"\n            accessibilityLabel={label ?? props.placeholder}\n            {...props}\n          />\n\n          {isLoading ? (\n            <View style={styles.rightIcon}>\n              <ActivityIndicator size=\"small\" color={colors.primary} />\n            </View>\n          ) : isPassword ? (\n            <TouchableOpacity\n              onPress={() => setShowPassword((v) => !v)}\n              style={styles.rightIcon}\n              accessibilityRole=\"button\"\n              accessibilityLabel={showPassword ? 'Hide password' : 'Show password'}\n            >\n              <Icon name={showPassword ? 'eye-off' : 'eye'} size={20} color={colors.textLight} />\n            </TouchableOpacity>\n          ) : rightIconName ? (\n            <TouchableOpacity\n              onPress={onRightIconPress}\n              style={styles.rightIcon}\n              disabled={!onRightIconPress}\n              accessibilityRole=\"button\"\n              accessibilityLabel=\"Clear\"\n            >\n              <Icon name={rightIconName} size={20} color={colors.textLight} />\n            </TouchableOpacity>\n          ) : null}\n        </Animated.View>\n\n        {!!error && (\n          <Text allowFontScaling={allowFontScaling} style={styles.errorText}>\n            {error}\n          </Text>\n        )}\n      </View>\n    );\n  }\n);\nInput.displayName = 'Input';\n"
     }
   ],
   "registryDependencies": [

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.background + 'CC',\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"
     }
   ]
 }