orn-ui 0.2.9 → 0.3.0

package/registry/empty-state.json

@@ -9,10 +9,12 @@
   "files": [
     {
       "path": "atoms/EmptyState.tsx",
-      "content": "import React, { memo } from 'react';\nimport { Text, View, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport interface EmptyStateProps {\n  title?: string;\n  description?: string;\n  iconName?: IconName;\n  icon?: React.ReactNode;\n  style?: ViewStyle;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: theme.tokens.spacing.xxl - 4,\n    minHeight: 200,\n  },\n  title: {\n    fontSize: theme.tokens.fontSize.lg,\n    fontWeight: theme.tokens.fontWeight.semibold,\n    color: theme.colors.textLight,\n    marginTop: theme.tokens.spacing.md - 2,\n    textAlign: 'center',\n  },\n  description: {\n    fontSize: theme.tokens.fontSize.md,\n    color: theme.colors.textLight,\n    marginTop: theme.tokens.spacing.xs + 1,\n    textAlign: 'center',\n  },\n}));\n\nexport const EmptyState = memo(\n  ({ title, description, iconName = 'search', icon, style }: EmptyStateProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const labels = useLabels();\n    const allowFontScaling = useAllowFontScaling();\n    const resolvedTitle = title ?? labels.noResultsTitle;\n    const resolvedDescription = description ?? labels.noResultsDescription;\n    return (\n      <View style={[styles.container, style]} accessible accessibilityRole=\"text\">\n        {icon ?? <Icon name={iconName} size={48} color={colors.textLight} />}\n        <Text allowFontScaling={allowFontScaling} style={styles.title}>\n          {resolvedTitle}\n        </Text>\n        <Text allowFontScaling={allowFontScaling} style={styles.description}>\n          {resolvedDescription}\n        </Text>\n      </View>\n    );\n  }\n);\nEmptyState.displayName = 'EmptyState';\n"
+      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\nimport { Button, type ButtonVariant } from './Button';\n\nexport interface EmptyStateAction {\n  label: string;\n  onPress: () => void;\n  /** @default 'primary' */\n  variant?: ButtonVariant;\n}\n\nexport interface EmptyStateProps {\n  /** Main line. @default labels.noResultsTitle */\n  title?: string;\n  /** Supporting line under the title. @default labels.noResultsDescription */\n  description?: string;\n  /** Built-in or custom icon name. Ignored when `icon` is passed. @default 'search' */\n  iconName?: IconName;\n  /** Any node in place of the icon (an Image, an illustration). */\n  icon?: React.ReactNode;\n  /** The next step, shown as a button under the text (e.g. \"Add client\"). */\n  action?: EmptyStateAction;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n/** Icon size: the block's focal point without competing with the title. */\nconst ICON_SIZE = 48;\n/** Minimum height: the block doesn't get squashed inside a short empty list. */\nconst MIN_HEIGHT = 200;\n\nconst useStyles = createStyles((theme) => ({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: theme.tokens.spacing.xl,\n    minHeight: MIN_HEIGHT,\n  },\n  title: {\n    fontSize: theme.tokens.fontSize.lg,\n    fontWeight: theme.tokens.fontWeight.semibold,\n    lineHeight: theme.tokens.lineHeight.lg,\n    color: theme.colors.text,\n    marginTop: theme.tokens.spacing.md,\n    textAlign: 'center',\n  },\n  description: {\n    fontSize: theme.tokens.fontSize.md,\n    lineHeight: theme.tokens.lineHeight.md,\n    color: theme.colors.textLight,\n    marginTop: theme.tokens.spacing.xs,\n    textAlign: 'center',\n  },\n  message: { alignItems: 'center' },\n  action: { marginTop: theme.tokens.spacing.lg },\n}));\n\n/**\n * EmptyState\n * Centered icon + title + description for a list or screen with no data.\n *\n * Gestalt, proximity: title and description sit close together (`spacing.xs`)\n * and the icon one step further (`spacing.md`), so they read as a message\n * with its image and not as three loose pieces. Similarity: the title in\n * `text` and the description in `textLight` mark the hierarchy. The action,\n * if any, is set further apart (`spacing.lg`): it is the next step, not part\n * of the message.\n * The message is a single accessibility node (title and description together;\n * the icon is decorative) and the button a separate, focusable one.\n */\nexport const EmptyState = memo(\n  ({ title, description, iconName = 'search', icon, action, style, testID }: EmptyStateProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const labels = useLabels();\n    const allowFontScaling = useAllowFontScaling();\n    const resolvedTitle = title ?? labels.noResultsTitle;\n    const resolvedDescription = description ?? labels.noResultsDescription;\n    return (\n      <View style={[styles.container, style]} testID={testID}>\n        <View style={styles.message} accessible accessibilityRole=\"text\">\n          {icon ?? <Icon name={iconName} size={ICON_SIZE} color={colors.textLight} />}\n          <Text allowFontScaling={allowFontScaling} style={styles.title}>\n            {resolvedTitle}\n          </Text>\n          <Text allowFontScaling={allowFontScaling} style={styles.description}>\n            {resolvedDescription}\n          </Text>\n        </View>\n        {action && (\n          <Button\n            title={action.label}\n            onPress={action.onPress}\n            variant={action.variant ?? 'primary'}\n            style={styles.action}\n          />\n        )}\n      </View>\n    );\n  }\n);\nEmptyState.displayName = 'EmptyState';\n"
     }
   ],
   "registryDependencies": [
-    "core"
+    "core",
+    "button",
+    "transition"
   ]
 }

package/registry/fab.json

@@ -9,11 +9,12 @@
   "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.onPrimary} />}\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 { onColor } from '../icons/defaultIcons';\nimport type { IconName } from '../icons/types';\nimport { createStyles } from '../theme/createStyles';\nimport { useColors, useInsets, useTheme } from '../theme/UIProvider';\n\nexport interface FabProps {\n  /** Called when the button is pressed. */\n  onPress: (e: GestureResponderEvent) => void;\n  /** Built-in or custom icon name. Ignored when `icon` is passed. @default 'plus' */\n  iconName?: IconName;\n  /** Any node in place of the icon. */\n  icon?: React.ReactNode;\n  /** Diameter in pt. @default 60 */\n  size?: number;\n  /** Distance from the bottom edge, on top of the safe area. @default tokens.spacing.xl (20) */\n  bottom?: number;\n  /** Distance from the right edge, on top of the safe area. @default tokens.spacing.xl (20) */\n  right?: number;\n  /**\n   * Adds the safe-area insets to `bottom`/`right`, so the button clears the\n   * home indicator. Pass false above a NavigationBar or tab bar, which\n   * already covers that edge. @default true\n   */\n  safeArea?: boolean;\n  /** Fill color. The icon switches to black or white for contrast. @default theme.colors.primary */\n  color?: string;\n  style?: StyleProp<ViewStyle>;\n  /** Required: the button has no visible text. */\n  accessibilityLabel: string;\n  testID?: string;\n}\n\n/** Default diameter: comfortably above the 44pt touch minimum (Fitts). */\nconst DEFAULT_SIZE = 60;\n/** The glyph takes up half the circle. */\nconst ICON_RATIO = 0.5;\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 * Circular floating button for the screen's main action.\n * `bottom`/`right` instead of the required `tabBarHeight` of the original\n * version — the consumer decides its own offset (with or without a tab bar).\n *\n * Gestalt, figure/ground: it is the only thing that floats (`lg` shadow) and\n * carries the accent, so it stands apart from the content passing beneath it\n * (Von Restorff: one per screen). Fitts: large and in the thumb's corner,\n * above the safe area so it doesn't compete with the home gesture.\n */\nexport const Fab = memo(\n  ({\n    onPress,\n    iconName = 'plus',\n    icon,\n    size = DEFAULT_SIZE,\n    bottom,\n    right,\n    safeArea = true,\n    color,\n    style,\n    accessibilityLabel,\n    testID,\n  }: FabProps) => {\n    const styles = useStyles();\n    const colors = useColors();\n    const theme = useTheme();\n    const insets = useInsets();\n    const fill = color ?? colors.primary;\n    // With the theme color, its `onPrimary`; with a custom one, black or white\n    // depending on contrast (a cyan with a white icon was unreadable).\n    const glyph = color ? onColor(color) : colors.onPrimary;\n    const edge = theme.tokens.spacing.xl;\n\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: (bottom ?? edge) + (safeArea ? insets.bottom : 0),\n            right: (right ?? edge) + (safeArea ? insets.right : 0),\n            backgroundColor: fill,\n          },\n          style,\n        ]}\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel}\n        testID={testID}\n      >\n        {icon ?? <Icon name={iconName} size={size * ICON_RATIO} color={glyph} />}\n      </PressableScale>\n    );\n  }\n);\nFab.displayName = 'Fab';\n"
     }
   ],
   "registryDependencies": [
     "core",
-    "pressable-scale"
+    "pressable-scale",
+    "transition"
   ]
 }

package/registry/form-actions.json

@@ -9,11 +9,12 @@
   "files": [
     {
       "path": "molecules/FormActions.tsx",
-      "content": "import React, { memo } from 'react';\nimport { View, type StyleProp, type ViewStyle } from 'react-native';\nimport { Button } from '../atoms/Button';\nimport type { IconName } from '../icons/types';\nimport { useLabels } from '../theme/UIProvider';\n\nexport interface FormActionsProps {\n  /** If omitted, only the secondary button is shown. */\n  primaryLabel?: string;\n  onPrimaryPress?: () => void;\n  primaryDisabled?: boolean;\n  primaryLoading?: boolean;\n  primaryLeftIconName?: IconName;\n  secondaryLabel?: string;\n  onSecondaryPress: () => void;\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * FormActions\n * Par de botones: uno primario (guardar/editar) y uno ghost (cerrar/cancelar).\n * Uso típico: al final de un form, o en el footer de un Modal.\n */\nexport const FormActions = memo(\n  ({\n    primaryLabel,\n    onPrimaryPress,\n    primaryDisabled = false,\n    primaryLoading = false,\n    primaryLeftIconName,\n    secondaryLabel,\n    onSecondaryPress,\n    style,\n  }: FormActionsProps) => {\n    const labels = useLabels();\n    return (\n      <View style={[{ gap: 12 }, style]}>\n        {primaryLabel && onPrimaryPress && (\n          <Button\n            title={primaryLabel}\n            onPress={onPrimaryPress}\n            disabled={primaryDisabled}\n            loading={primaryLoading}\n            leftIconName={primaryLeftIconName}\n          />\n        )}\n        <Button title={secondaryLabel ?? labels.close} onPress={onSecondaryPress} variant=\"ghost\" />\n      </View>\n    );\n  }\n);\nFormActions.displayName = 'FormActions';\n"
+      "content": "import React, { memo } from 'react';\nimport { View, type StyleProp, type ViewStyle } from 'react-native';\nimport { Button } from '../atoms/Button';\nimport type { IconName } from '../icons/types';\nimport { useLabels } from '../theme/UIProvider';\nimport { createStyles } from '../theme/createStyles';\n\nexport interface FormActionsProps {\n  /** Label of the main action (\"Save\"). The primary button shows only with both this and `onPrimaryPress`. */\n  primaryLabel?: string;\n  /** Main action. */\n  onPrimaryPress?: () => void;\n  /** Blocks the main action, e.g. while the form is invalid. @default false */\n  primaryDisabled?: boolean;\n  /**\n   * The main action is running: shows a spinner and ignores presses, so it\n   * can't be sent twice. The secondary button stays usable. @default false\n   */\n  primaryLoading?: boolean;\n  /** Icon before the primary label. */\n  primaryLeftIconName?: IconName;\n  /** Label of the ghost button. @default labels.close */\n  secondaryLabel?: string;\n  /** Close / cancel action. */\n  onSecondaryPress: () => void;\n  style?: StyleProp<ViewStyle>;\n  /** Root testID; the buttons get `<testID>-primary` and `<testID>-secondary`. */\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  root: { gap: theme.tokens.spacing.md },\n}));\n\n/**\n * FormActions\n * Pair of buttons: a primary one (save/edit) and a ghost one (close/cancel).\n * Typical use: at the end of a form, or in a Modal's footer.\n *\n * Gestalt, proximity: both buttons sit close together and apart from the\n * fields, so they read as the form's closing actions. Von Restorff: only the\n * primary is filled; the secondary is ghost, so the main path is obvious and\n * the two never compete (Hick: one clear choice). Fitts: full width, primary\n * first, closest to the content it acts on.\n */\nexport const FormActions = memo(\n  ({\n    primaryLabel,\n    onPrimaryPress,\n    primaryDisabled = false,\n    primaryLoading = false,\n    primaryLeftIconName,\n    secondaryLabel,\n    onSecondaryPress,\n    style,\n    testID,\n  }: FormActionsProps) => {\n    const labels = useLabels();\n    const styles = useStyles();\n    return (\n      <View style={[styles.root, style]} testID={testID}>\n        {!!primaryLabel && !!onPrimaryPress && (\n          <Button\n            title={primaryLabel}\n            onPress={onPrimaryPress}\n            disabled={primaryDisabled}\n            loading={primaryLoading}\n            leftIconName={primaryLeftIconName}\n            testID={testID && `${testID}-primary`}\n          />\n        )}\n        <Button\n          title={secondaryLabel ?? labels.close}\n          onPress={onSecondaryPress}\n          variant=\"ghost\"\n          testID={testID && `${testID}-secondary`}\n        />\n      </View>\n    );\n  }\n);\nFormActions.displayName = 'FormActions';\n"
     }
   ],
   "registryDependencies": [
     "core",
-    "button"
+    "button",
+    "transition"
   ]
 }

package/registry/gradient.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/Gradient.tsx",
-      "content": "import React, { memo, useMemo } from 'react';\nimport { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';\n\nexport type GradientDirection = 'vertical' | 'horizontal' | 'diagonal' | 'diagonal-reverse';\n\nexport interface GradientProps {\n  /** Paradas del degradado. Uno solo pinta plano; ninguno no pinta nada. */\n  colors: string[];\n  /**\n   * 'vertical' va de arriba a abajo, 'horizontal' de izquierda a derecha,\n   * 'diagonal' de arriba-izquierda a abajo-derecha y 'diagonal-reverse' de\n   * arriba-derecha a abajo-izquierda.\n   * @default 'vertical'\n   */\n  direction?: GradientDirection;\n  /**\n   * Bandas por tramo (un tramo = un par de colores consecutivos). Más bandas\n   * = transición más suave y más vistas en el árbol.\n   * @default 24\n   */\n  steps?: number;\n  /** Contenido por encima del degradado. */\n  children?: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst DEFAULT_STEPS = 24;\n\nconst styles = StyleSheet.create({\n  // Recorta el plano rotado de las diagonales y el degradado al borderRadius.\n  root: { overflow: 'hidden' },\n  segment: { flex: 1 },\n  band: { flex: 1 },\n  // Plano √2 centrado: rotado 45° cubre las esquinas sin medir el contenedor.\n  diagonalPlane: { position: 'absolute', top: '-21%', left: '-21%', width: '142%', height: '142%' },\n});\n\n/**\n * Gradient\n * Degradado lineal sin dependencias: React Native no trae uno en el rango\n * soportado (Expo SDK 54–57) y `experimental_backgroundImage` no está en toda\n * esa ventana, así que se compone con bandas.\n *\n * Cada tramo pinta el color inicial y encima N bandas del final con opacidad\n * de 0 a 1. El compositor mezcla alpha linealmente: el resultado es la\n * interpolación sRGB entre paradas sin parsear el color, y por eso vale\n * cualquier formato que acepte RN (hex, `rgba()`, nombre).\n */\nexport const Gradient = memo(\n  ({ colors, direction = 'vertical', steps = DEFAULT_STEPS, children, style, testID }: GradientProps) => {\n    const isRow = direction === 'horizontal';\n    const isDiagonal = direction === 'diagonal' || direction === 'diagonal-reverse';\n    // rotate positivo gira en horario (Y crece hacia abajo): -45° manda el eje\n    // del degradado hacia abajo-derecha.\n    const rotate = direction === 'diagonal' ? '-45deg' : '45deg';\n    const bandCount = Math.max(2, Math.floor(steps));\n\n    const painted = useMemo(() => {\n      if (colors.length === 0) return null;\n      if (colors.length === 1) {\n        return <View style={[StyleSheet.absoluteFill, { backgroundColor: colors[0] }]} />;\n      }\n\n      const segments = colors.slice(0, -1).map((from, index) => {\n        const to = colors[index + 1] as string;\n        return (\n          <View\n            key={`${from}-${to}-${index}`}\n            style={[styles.segment, { backgroundColor: from, flexDirection: isRow ? 'row' : 'column' }]}\n          >\n            {Array.from({ length: bandCount }, (_, band) => (\n              <View key={band} style={[styles.band, { backgroundColor: to, opacity: band / (bandCount - 1) }]} />\n            ))}\n          </View>\n        );\n      });\n\n      const stack = (\n        <View style={[StyleSheet.absoluteFill, { flexDirection: isRow ? 'row' : 'column' }]}>{segments}</View>\n      );\n\n      if (!isDiagonal) return stack;\n      return <View style={[styles.diagonalPlane, { transform: [{ rotate }] }]}>{segments}</View>;\n    }, [colors, isRow, isDiagonal, rotate, bandCount]);\n\n    return (\n      <View testID={testID} style={[styles.root, style]}>\n        {/* pointerEvents va en el pintado, no en la raíz: el degradado no debe\n            robarle los toques a lo que el consumidor ponga encima. */}\n        <View style={StyleSheet.absoluteFill} pointerEvents=\"none\">\n          {painted}\n        </View>\n        {children}\n      </View>\n    );\n  }\n);\nGradient.displayName = 'Gradient';\n"
+      "content": "import React, { memo, useMemo, useState } from 'react';\nimport { StyleSheet, View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from 'react-native';\n\nexport type GradientDirection = 'vertical' | 'horizontal' | 'diagonal' | 'diagonal-reverse';\n\nexport interface GradientProps {\n  /** Gradient stops. A single color paints flat; none paints nothing. */\n  colors: string[];\n  /**\n   * 'vertical' runs top to bottom, 'horizontal' left to right, 'diagonal'\n   * top-left to bottom-right and 'diagonal-reverse' top-right to bottom-left.\n   * @default 'vertical'\n   */\n  direction?: GradientDirection;\n  /**\n   * Bands per segment (a segment = a pair of consecutive colors). More bands\n   * = a smoother transition and more views in the tree.\n   * @default 48\n   */\n  steps?: number;\n  /** Content rendered on top of the gradient. */\n  children?: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst DEFAULT_STEPS = 48;\n\nconst styles = StyleSheet.create({\n  // Clips the rotated plane of the diagonals and the gradient to the borderRadius.\n  root: { overflow: 'hidden' },\n  // Centered √2 plane: covers the corners of a SQUARE container without\n  // measuring it. Only used until the first onLayout; after that the plane is\n  // sized with the real diagonal (see `diagonalBox`).\n  diagonalPlane: { position: 'absolute', top: '-21%', left: '-21%', width: '142%', height: '142%' },\n});\n\n/**\n * Opacities of stacked layers: layer k (from 1 to n-1) starts at k/n and\n * runs to the end of the segment; stacked with \"over\", the total opacity in\n * band k is k/(n-1), same as side-by-side bands. The difference: no layer\n * edge sits next to a gap, so the antialiasing of an edge (especially when\n * rotated) blends with the color of the layer below and not with what is\n * behind the gradient — without the thin lines between bands.\n */\nfunction layerOpacities(n: number): number[] {\n  const out: number[] = [];\n  let prev = 0;\n  for (let k = 1; k < n; k += 1) {\n    const total = k / (n - 1);\n    out.push(prev >= 1 ? 1 : 1 - (1 - total) / (1 - prev));\n    prev = total;\n  }\n  return out;\n}\n\n/** Square with the diagonal as its side, centered: rotated 45° it covers any rectangle. */\nfunction diagonalBox(width: number, height: number): ViewStyle {\n  const side = Math.hypot(width, height);\n  return { position: 'absolute', width: side, height: side, left: (width - side) / 2, top: (height - side) / 2 };\n}\n\n/**\n * Gradient\n * Dependency-free linear gradient: React Native doesn't ship one in the\n * supported range (Expo SDK 54–57) and `experimental_backgroundImage` isn't\n * available across that whole window, so it is composed from bands.\n *\n * Each segment paints the start color and, on top, layers of the end color\n * that accumulate (see `layerOpacities`). The compositor blends alpha linearly:\n * the result is the sRGB interpolation between stops without parsing the\n * color, which is why any format RN accepts works (hex, `rgba()`, name). The\n * layers run to the end of the plane so no thin lines are left between\n * bands, and the diagonals rotate a square the size of the measured diagonal\n * to cover any rectangle, not just squares.\n *\n * Gestalt, figure and ground: content on top must contrast with ALL the\n * stops, not just the first — white text that reads well over the blue at\n * the start can get lost over the light blue at the end.\n */\nexport const Gradient = memo(\n  ({ colors, direction = 'vertical', steps = DEFAULT_STEPS, children, style, testID }: GradientProps) => {\n    const isRow = direction === 'horizontal';\n    const isDiagonal = direction === 'diagonal' || direction === 'diagonal-reverse';\n    // positive rotate turns clockwise (Y grows downward): -45° sends the\n    // gradient axis down-right.\n    const rotate = direction === 'diagonal' ? '-45deg' : '45deg';\n    const bandCount = Math.max(2, Math.floor(steps));\n    const [size, setSize] = useState<{ width: number; height: number } | null>(null);\n    const onLayout = isDiagonal\n      ? (e: LayoutChangeEvent) => {\n          const { width, height } = e.nativeEvent.layout;\n          setSize((prev) => (prev && prev.width === width && prev.height === height ? prev : { width, height }));\n        }\n      : undefined;\n\n    const painted = useMemo(() => {\n      if (colors.length === 0) return null;\n      if (colors.length === 1) {\n        return <View style={[StyleSheet.absoluteFill, { backgroundColor: colors[0] }]} />;\n      }\n\n      const segmentCount = colors.length - 1;\n      const opacities = layerOpacities(bandCount);\n      // From `start` (fraction of the axis) to the end of the plane.\n      const from = (start: number): ViewStyle =>\n        isRow\n          ? { position: 'absolute', top: 0, bottom: 0, right: 0, left: `${start * 100}%` }\n          : { position: 'absolute', left: 0, right: 0, bottom: 0, top: `${start * 100}%` };\n\n      // Segments are stacked too: each one covers the previous from its start,\n      // and since it begins with the color the previous one ended with, the\n      // edge between segments doesn't show the background.\n      const segments = colors.slice(0, -1).map((start, index) => {\n        const to = colors[index + 1] as string;\n        const segStart = index / segmentCount;\n        const segLength = 1 / segmentCount;\n        // The segment runs from segStart to the END of the plane; its layers\n        // sit at fractions of that remaining length.\n        const rest = 1 - segStart;\n        return (\n          <View key={`${start}-${to}-${index}`} style={[from(segStart), { backgroundColor: start }]}>\n            {opacities.map((opacity, k) => (\n              <View\n                key={k}\n                style={[from((((k + 1) / bandCount) * segLength) / rest), { backgroundColor: to, opacity }]}\n              />\n            ))}\n          </View>\n        );\n      });\n\n      if (!isDiagonal) return <View style={StyleSheet.absoluteFill}>{segments}</View>;\n      const plane = size ? diagonalBox(size.width, size.height) : styles.diagonalPlane;\n      return <View style={[plane, { transform: [{ rotate }] }]}>{segments}</View>;\n    }, [colors, isRow, isDiagonal, rotate, bandCount, size]);\n\n    return (\n      <View testID={testID} style={[styles.root, style]} onLayout={onLayout}>\n        {/* pointerEvents goes on the painted layer, not the root: the gradient\n            must not steal touches from whatever the consumer places on top. */}\n        <View style={StyleSheet.absoluteFill} pointerEvents=\"none\">\n          {painted}\n        </View>\n        {children}\n      </View>\n    );\n  }\n);\nGradient.displayName = 'Gradient';\n"
     }
   ],
   "registryDependencies": [

package/registry/icon-button.json

@@ -9,11 +9,12 @@
   "files": [
     {
       "path": "atoms/IconButton.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';\n\nexport interface IconButtonProps {\n  iconName?: IconName;\n  icon?: React.ReactNode;\n  onPress?: (e: GestureResponderEvent) => void;\n  size?: number;\n  color?: string;\n  disabled?: boolean;\n  style?: StyleProp<ViewStyle>;\n  accessibilityLabel: string;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  hitArea: {\n    padding: theme.tokens.spacing.sm,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n}));\n\n/**\n * IconButton\n * Botón de solo ícono con área táctil mínima de 44x44 garantizada por el\n * padding (icon 24 + padding 8*2 = 40; sube a 44 con size>=24 default RN).\n * `accessibilityLabel` es obligatorio: sin texto visible, es la única forma\n * de que un lector de pantalla anuncie qué hace el botón.\n */\nexport const IconButton = memo(\n  ({ iconName, icon, onPress, size = 24, color, disabled, style, accessibilityLabel, testID }: IconButtonProps) => {\n    const styles = useStyles();\n    return (\n      <PressableScale\n        onPress={onPress}\n        disabled={disabled}\n        style={[styles.hitArea, { opacity: disabled ? 0.5 : 1 }, style]}\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel}\n        accessibilityState={{ disabled: !!disabled }}\n        testID={testID}\n      >\n        {icon ?? (iconName && <Icon name={iconName} size={size} color={color} />)}\n      </PressableScale>\n    );\n  }\n);\nIconButton.displayName = 'IconButton';\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 { useTheme } from '../theme/UIProvider';\n\nexport interface IconButtonProps {\n  /** Icon from the library's set. Ignored when `icon` is passed. */\n  iconName?: IconName;\n  /** Custom node in place of the icon. Takes precedence over `iconName`. */\n  icon?: React.ReactNode;\n  /** Called on press. Not called while `disabled`. */\n  onPress?: (e: GestureResponderEvent) => void;\n  /** Icon size in pt. The touch area is padded up to 44pt with `hitSlop`. @default 24 */\n  size?: number;\n  /** Icon color. Defaults to `colors.text`. */\n  color?: string;\n  /** Dims the button by half and ignores presses. */\n  disabled?: boolean;\n  style?: StyleProp<ViewStyle>;\n  /** Required: the button has no visible text, so this is all a screen reader announces. */\n  accessibilityLabel: string;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  hitArea: {\n    padding: theme.tokens.spacing.sm,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n}));\n\n/** Minimum touch area recommended by Apple (44pt) and Material (48dp ≈ 44pt). */\nconst MIN_TOUCH = 44;\n\n/**\n * IconButton\n * Icon-only button. `accessibilityLabel` is required: with no visible text,\n * it is the only way for a screen reader to announce what it does.\n *\n * Fitts: the visible area is icon + `spacing.sm` per side (24 + 16 = 40pt\n * with the default size, 32pt with `size={16}`). `hitSlop` makes up the\n * rest up to 44pt without enlarging the layout, so a row of icons keeps its\n * rhythm and each one is still easy to tap.\n *\n * Gestalt, figure and ground: it has no background of its own, the icon is\n * the figure over whatever is behind it; that is why the default color is\n * `colors.text` (guaranteed AA contrast) and `disabled` dims it by half.\n */\nexport const IconButton = memo(\n  ({ iconName, icon, onPress, size = 24, color, disabled, style, accessibilityLabel, testID }: IconButtonProps) => {\n    const styles = useStyles();\n    const theme = useTheme();\n    const visible = size + theme.tokens.spacing.sm * 2;\n    const extra = Math.max(0, Math.ceil((MIN_TOUCH - visible) / 2));\n    const hitSlop = extra > 0 ? { top: extra, bottom: extra, left: extra, right: extra } : undefined;\n    return (\n      <PressableScale\n        onPress={onPress}\n        disabled={disabled}\n        hitSlop={hitSlop}\n        style={[styles.hitArea, { opacity: disabled ? 0.5 : 1 }, style]}\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel}\n        accessibilityState={{ disabled: !!disabled }}\n        testID={testID}\n      >\n        {icon ?? (iconName && <Icon name={iconName} size={size} color={color} />)}\n      </PressableScale>\n    );\n  }\n);\nIconButton.displayName = 'IconButton';\n"
     }
   ],
   "registryDependencies": [
     "core",
-    "pressable-scale"
+    "pressable-scale",
+    "transition"
   ]
 }

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  /** Corner radius, same pattern as Avatar/Card. @default 0 */\n  radius?: number;\n  /** What to show while loading. `false` to show nothing. @default true (small spinner) */\n  loading?: React.ReactNode | boolean;\n  /** What to show if loading fails. @default a gray placeholder, no content */\n  fallback?: React.ReactNode;\n  /**\n   * 'high' triggers Image.prefetch() on mount, before <Image> starts\n   * its own load cycle — meant for the above-the-fold image of a\n   * screen (the first one the user sees). No cost if it's already cached.\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"
+      "content": "import React, { memo, useCallback, useEffect, useState } from 'react';\nimport {\n  Image as RNImage,\n  Platform,\n  StyleSheet,\n  View,\n  type ImageProps as RNImageProps,\n  type ImageResizeMode,\n  type ImageSourcePropType,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useColors, useTheme } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport { Spinner } from './Spinner';\n\n/**\n * The event RN's Image passes to `onError`. Taken from its own prop type:\n * react-native 0.88 (Expo SDK 58) renamed the exported name\n * (`ImageErrorEventData` -> `ImageErrorEvent`).\n */\ntype ImageErrorEvent = Parameters<NonNullable<RNImageProps['onError']>>[0];\n\nexport interface ImageProps {\n  /** Image to load (same as React Native's `source`). */\n  source: ImageSourcePropType;\n  /** Width of the image slot, in pt. */\n  width?: number;\n  /** Height of the image slot, in pt. */\n  height?: number;\n  /** How the image fits its slot (same as React Native). @default 'cover' */\n  resizeMode?: ImageResizeMode;\n  /** Corner radius, same pattern as Avatar/Card. @default 0 */\n  radius?: number;\n  /** What to show while loading. `false` to show nothing. @default true (small spinner) */\n  loading?: React.ReactNode | boolean;\n  /** What to show if loading fails. @default placeholder with a warning icon */\n  fallback?: React.ReactNode;\n  /**\n   * 'high' triggers Image.prefetch() on mount, before <Image> starts\n   * its own load cycle — meant for the above-the-fold image of a\n   * screen (the first one the user sees). No cost if it's already cached.\n   * @default 'normal'\n   */\n  priority?: 'low' | 'normal' | 'high';\n  style?: StyleProp<ViewStyle>;\n  /** Called when loading finishes, successfully or not (same as RN). */\n  onLoadEnd?: () => void;\n  /** Describes the image for screen readers. Without it the image is decorative. */\n  accessibilityLabel?: string;\n  /** Called when loading fails; the `fallback` is shown. */\n  onError?: (error: ImageErrorEvent) => void;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { overflow: 'hidden' },\n  // Only while loading or on failure: once the image has loaded, a PNG with\n  // transparency (a logo) let this gray show through.\n  placeholder: { backgroundColor: theme.colors.skeleton },\n  overlay: { alignItems: 'center', justifyContent: 'center' },\n  fallback: { flex: 1, backgroundColor: theme.colors.skeleton, alignItems: 'center', justifyContent: 'center' },\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 * Zero-dependency wrapper over RN's <Image>: adds loading and error state\n * (with the same placeholders as the rest of the library), and exposes\n * `priority=\"high\"` to start the download early via Image.prefetch(). The\n * actual cache (disk/memory) is handled by RN's native image engine — this\n * doesn't reimplement it, it just keeps it from being accidentally turned off:\n * on iOS it forces `cache=\"force-cache\"` (uses the disk even when the HTTP\n * header doesn't ask for it); on Android the native image's disk cache is\n * always on, there is no equivalent knob to touch.\n *\n * Gestalt, closure: the container takes its final size from the first frame\n * (`skeleton` background), so the layout doesn't jump when the image arrives\n * and the eye completes the shape it will fill. If loading fails, the same\n * slot shows a warning icon: the state is visible, not a silent gray.\n *\n * Success is detected with `onLoad`, not `onLoadEnd`: RN also calls\n * `onLoadEnd` on failure, and using it for \"loaded\" overwrote the error.\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    accessibilityLabel,\n  }: ImageProps) => {\n    const styles = useStyles();\n    const colors = useColors();\n    const theme = useTheme();\n    const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading');\n    const uri = sourceUri(source);\n\n    useEffect(() => {\n      // Resets the state if the image changes (same Image instance, different\n      // source: e.g. one user's avatar to another's in the same row).\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: ImageErrorEvent) => {\n        setStatus('error');\n        onError?.(e);\n      },\n      [onError]\n    );\n\n    const handleLoad = useCallback(() => {\n      setStatus('loaded');\n    }, []);\n\n    return (\n      <View\n        style={[styles.container, status !== 'loaded' && styles.placeholder, { width, height, borderRadius: radius }, style]}\n        testID={testID}\n        accessible={!!accessibilityLabel}\n        accessibilityRole={accessibilityLabel ? 'image' : undefined}\n        accessibilityLabel={accessibilityLabel}\n      >\n        {status !== 'error' && (\n          <RNImage\n            source={source}\n            resizeMode={resizeMode}\n            style={StyleSheet.absoluteFill}\n            fadeDuration={Platform.OS === 'android' ? theme.tokens.duration.fast : undefined}\n            {...(Platform.OS === 'ios' ? { cache: 'force-cache' as const } : null)}\n            onLoad={handleLoad}\n            onLoadEnd={onLoadEnd}\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' && (\n          // Custom fallback or the default: always centered in the slot.\n          <View style={styles.fallback}>\n            {fallback ?? (\n              <Icon\n                name=\"warning\"\n                size={Math.max(16, Math.min(32, Math.round(Math.min(width ?? 64, height ?? 64) * 0.3)))}\n                color={colors.textLight}\n              />\n            )}\n          </View>\n        )}\n      </View>\n    );\n  }\n);\nImage.displayName = 'Image';\n\n/**\n * Preloads a URL before mounting the component (e.g. on receiving a list\n * response, before navigating to the detail). Re-exports RN's\n * Image.prefetch — there is nothing zero-dep to add on top.\n */\nexport const prefetchImage = RNImage.prefetch;\n"
     }
   ],
   "registryDependencies": [