orn-ui 0.2.9 → 0.3.0

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "core": {
-    "bytes": 37332
+    "bytes": 75729
   },
   "components": [
     {
@@ -16,7 +16,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 1844
+      "bytes": 4555
     },
     {
       "name": "Button",
@@ -26,9 +26,10 @@
         "Button"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "transition"
       ],
-      "bytes": 6790
+      "bytes": 10380
     },
     {
       "name": "IconButton",
@@ -39,9 +40,10 @@
       ],
       "registryDependencies": [
         "core",
-        "pressable-scale"
+        "pressable-scale",
+        "transition"
       ],
-      "bytes": 1744
+      "bytes": 3020
     },
     {
       "name": "Input",
@@ -53,7 +55,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 5455
+      "bytes": 13674
     },
     {
       "name": "Checkbox",
@@ -63,9 +65,10 @@
         "Checkbox"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "transition"
       ],
-      "bytes": 2847
+      "bytes": 4557
     },
     {
       "name": "Badge",
@@ -77,7 +80,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2183
+      "bytes": 2936
     },
     {
       "name": "Card",
@@ -89,7 +92,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 711
+      "bytes": 1777
     },
     {
       "name": "Divider",
@@ -101,7 +104,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 489
+      "bytes": 1712
     },
     {
       "name": "Gradient",
@@ -113,19 +116,20 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 3852
+      "bytes": 6615
     },
     {
       "name": "Avatar",
       "slug": "avatar",
       "category": "atoms",
       "exportedNames": [
-        "Avatar"
+        "Avatar",
+        "initialsOf"
       ],
       "registryDependencies": [
         "core"
       ],
-      "bytes": 1012
+      "bytes": 4274
     },
     {
       "name": "Image",
@@ -139,7 +143,7 @@
         "core",
         "spinner"
       ],
-      "bytes": 4566
+      "bytes": 6629
     },
     {
       "name": "Spinner",
@@ -151,7 +155,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 4640
+      "bytes": 7139
     },
     {
       "name": "Skeleton",
@@ -161,9 +165,10 @@
         "Skeleton"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "transition"
       ],
-      "bytes": 3550
+      "bytes": 4658
     },
     {
       "name": "Transition",
@@ -176,7 +181,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 6569
+      "bytes": 7026
     },
     {
       "name": "ShinyText",
@@ -189,7 +194,7 @@
         "core",
         "transition"
       ],
-      "bytes": 7848
+      "bytes": 7882
     },
     {
       "name": "EmptyState",
@@ -199,9 +204,11 @@
         "EmptyState"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "button",
+        "transition"
       ],
-      "bytes": 1925
+      "bytes": 3894
     },
     {
       "name": "KeyValueRow",
@@ -213,7 +220,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 1764
+      "bytes": 3434
     },
     {
       "name": "Fab",
@@ -224,9 +231,10 @@
       ],
       "registryDependencies": [
         "core",
-        "pressable-scale"
+        "pressable-scale",
+        "transition"
       ],
-      "bytes": 1788
+      "bytes": 3696
     },
     {
       "name": "PressableScale",
@@ -236,9 +244,10 @@
         "PressableScale"
       ],
       "registryDependencies": [
-        "core"
+        "core",
+        "transition"
       ],
-      "bytes": 1706
+      "bytes": 2545
     },
     {
       "name": "Stepper",
@@ -251,7 +260,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 6745
+      "bytes": 9001
     },
     {
       "name": "OptionCard",
@@ -262,9 +271,10 @@
       ],
       "registryDependencies": [
         "core",
-        "pressable-scale"
+        "pressable-scale",
+        "transition"
       ],
-      "bytes": 4152
+      "bytes": 5678
     },
     {
       "name": "InfoRow",
@@ -277,7 +287,7 @@
         "core",
         "avatar"
       ],
-      "bytes": 1967
+      "bytes": 3038
     },
     {
       "name": "FormActions",
@@ -288,9 +298,10 @@
       ],
       "registryDependencies": [
         "core",
-        "button"
+        "button",
+        "transition"
       ],
-      "bytes": 1524
+      "bytes": 2778
     },
     {
       "name": "AvatarHeader",
@@ -302,7 +313,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2492
+      "bytes": 4476
     },
     {
       "name": "SegmentedControl",
@@ -314,7 +325,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2884
+      "bytes": 7315
     },
     {
       "name": "Steps",
@@ -326,7 +337,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 8628
+      "bytes": 12197
     },
     {
       "name": "SymmetricGrid",
@@ -338,7 +349,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 2773
+      "bytes": 3411
     },
     {
       "name": "Timeline",
@@ -352,7 +363,7 @@
         "pressable-scale",
         "transition"
       ],
-      "bytes": 17449
+      "bytes": 18305
     },
     {
       "name": "Modal",
@@ -368,7 +379,7 @@
         "pressable-scale",
         "transition"
       ],
-      "bytes": 9294
+      "bytes": 12074
     },
     {
       "name": "BottomSheet",
@@ -384,7 +395,7 @@
         "pressable-scale",
         "transition"
       ],
-      "bytes": 9678
+      "bytes": 12747
     },
     {
       "name": "OptionWheel",
@@ -397,7 +408,7 @@
         "core",
         "transition"
       ],
-      "bytes": 18339
+      "bytes": 18596
     },
     {
       "name": "Select",
@@ -409,7 +420,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 12117
+      "bytes": 14187
     },
     {
       "name": "Alert",
@@ -420,9 +431,10 @@
       ],
       "registryDependencies": [
         "core",
-        "button"
+        "button",
+        "transition"
       ],
-      "bytes": 6240
+      "bytes": 8414
     },
     {
       "name": "AlertProvider",
@@ -438,9 +450,10 @@
       "registryDependencies": [
         "core",
         "alert",
-        "button"
+        "button",
+        "transition"
       ],
-      "bytes": 5834
+      "bytes": 5787
     },
     {
       "name": "Screen",
@@ -452,7 +465,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 3227
+      "bytes": 4537
     },
     {
       "name": "List",
@@ -464,10 +477,12 @@
       "registryDependencies": [
         "core",
         "empty-state",
+        "button",
+        "transition",
         "skeleton",
         "spinner"
       ],
-      "bytes": 5999
+      "bytes": 8602
     },
     {
       "name": "SearchList",
@@ -480,12 +495,14 @@
         "core",
         "input",
         "empty-state",
+        "button",
+        "transition",
         "skeleton",
         "spinner",
         "icon-button",
         "pressable-scale"
       ],
-      "bytes": 9245
+      "bytes": 14954
     },
     {
       "name": "Toast",
@@ -498,7 +515,7 @@
         "core",
         "transition"
       ],
-      "bytes": 4405
+      "bytes": 6071
     },
     {
       "name": "ToastProvider",
@@ -516,7 +533,7 @@
         "toast",
         "transition"
       ],
-      "bytes": 6359
+      "bytes": 6623
     },
     {
       "name": "DatePicker",
@@ -531,9 +548,10 @@
       "registryDependencies": [
         "core",
         "icon-button",
-        "pressable-scale"
+        "pressable-scale",
+        "transition"
       ],
-      "bytes": 13397
+      "bytes": 14573
     },
     {
       "name": "DateField",
@@ -552,7 +570,7 @@
         "date-picker",
         "button"
       ],
-      "bytes": 6476
+      "bytes": 7729
     },
     {
       "name": "Wizard",
@@ -567,7 +585,7 @@
         "button",
         "transition"
       ],
-      "bytes": 5599
+      "bytes": 7806
     },
     {
       "name": "ThemeToggle",
@@ -580,7 +598,7 @@
         "core",
         "segmented-control"
       ],
-      "bytes": 1189
+      "bytes": 1565
     },
     {
       "name": "NavigationBar",
@@ -592,7 +610,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 7867
+      "bytes": 10471
     },
     {
       "name": "ReorderableList",
@@ -604,7 +622,7 @@
       "registryDependencies": [
         "core"
       ],
-      "bytes": 7324
+      "bytes": 8397
     },
     {
       "name": "Slides",
@@ -618,7 +636,7 @@
         "transition",
         "gradient"
       ],
-      "bytes": 21434
+      "bytes": 24056
     },
     {
       "name": "Chart",
@@ -631,7 +649,7 @@
         "core",
         "segmented-control"
       ],
-      "bytes": 90641
+      "bytes": 93020
     }
   ]
 }

package/registry/info-row.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "molecules/InfoRow.tsx",
-      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\nimport { Avatar } from '../atoms/Avatar';\n\nexport interface InfoRowProps {\n  icon: IconName;\n  label: string;\n  value: string | null | undefined;\n  placeholder: string;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  row: { flexDirection: 'row', alignItems: 'center' },\n  icon: { marginRight: theme.tokens.spacing.md },\n  textContainer: { flex: 1 },\n  label: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight, marginBottom: 2 },\n  value: { fontSize: theme.tokens.fontSize.md + 1, color: theme.colors.text, fontWeight: theme.tokens.fontWeight.medium },\n  placeholder: { color: theme.colors.textLight, fontStyle: 'italic' },\n}));\n\n/**\n * InfoRow\n * Ícono circular a la izquierda + label/valor apilado a la derecha. Muestra\n * `placeholder` en itálica si no hay valor. Pensado para modales de detalle.\n */\nexport const InfoRow = memo(({ icon, label, value, placeholder, style }: InfoRowProps) => {\n  const colors = useColors();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n\n  return (\n    <View style={[styles.row, style]}>\n      <Avatar size={40} backgroundColor={colors.inputBackground} style={styles.icon}>\n        <Icon name={icon} size={20} color={colors.textLight} />\n      </Avatar>\n      <View style={styles.textContainer}>\n        <Text allowFontScaling={allowFontScaling} style={styles.label}>\n          {label}\n        </Text>\n        <Text allowFontScaling={allowFontScaling} style={[styles.value, !value && styles.placeholder]}>\n          {value || placeholder}\n        </Text>\n      </View>\n    </View>\n  );\n});\nInfoRow.displayName = 'InfoRow';\n"
+      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\nimport { Avatar } from '../atoms/Avatar';\n\nexport interface InfoRowProps {\n  /** Icon that identifies the kind of data at a glance (decorative for screen readers). */\n  icon: IconName;\n  /** What the value is (\"Email\", \"Address\"). */\n  label: string;\n  /** The data itself. Empty, `null` or `undefined` shows `placeholder`. */\n  value: string | null | undefined;\n  /** Text shown, in italics, when there is no value (\"No phone number\"). */\n  placeholder: string;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst ICON_BADGE = 40;\nconst ICON_SIZE = 20;\n\nconst useStyles = createStyles((theme) => ({\n  row: { flexDirection: 'row', alignItems: 'center', gap: theme.tokens.spacing.md },\n  textContainer: { flex: 1 },\n  label: {\n    fontSize: theme.tokens.fontSize.sm,\n    lineHeight: theme.tokens.lineHeight.sm,\n    color: theme.colors.textLight,\n    marginBottom: theme.tokens.spacing.xxs,\n  },\n  value: {\n    fontSize: theme.tokens.fontSize.md,\n    lineHeight: theme.tokens.lineHeight.md,\n    color: theme.colors.text,\n    fontWeight: theme.tokens.fontWeight.medium,\n  },\n  placeholder: { color: theme.colors.textLight, fontStyle: 'italic', fontWeight: theme.tokens.fontWeight.regular },\n}));\n\n/**\n * InfoRow\n * Circular icon on the left + stacked label/value on the right. Shows\n * `placeholder` in italics when there is no value. Meant for detail modals.\n *\n * Gestalt, proximity: label and value sit 2pt apart and the icon a token\n * further, so each row reads as one fact; stack rows with a larger gap.\n * Similarity: every label shares the small muted style and every value the\n * strong one, so a list of rows scans by column. A missing value changes\n * style (muted italics) so it can't be mistaken for data.\n *\n * Accessibility: the row is a single element (\"Email, jane@example.com\");\n * the icon is decorative.\n */\nexport const InfoRow = memo(({ icon, label, value, placeholder, style, testID }: InfoRowProps) => {\n  const colors = useColors();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n  const shown = value || placeholder;\n\n  return (\n    <View style={[styles.row, style]} accessible accessibilityLabel={`${label}, ${shown}`} testID={testID}>\n      <Avatar size={ICON_BADGE} backgroundColor={colors.inputBackground}>\n        <Icon name={icon} size={ICON_SIZE} color={colors.textLight} />\n      </Avatar>\n      <View style={styles.textContainer}>\n        <Text allowFontScaling={allowFontScaling} style={styles.label}>\n          {label}\n        </Text>\n        <Text allowFontScaling={allowFontScaling} style={[styles.value, !value && styles.placeholder]}>\n          {shown}\n        </Text>\n      </View>\n    </View>\n  );\n});\nInfoRow.displayName = 'InfoRow';\n"
     }
   ],
   "registryDependencies": [

package/registry/input.json

@@ -9,7 +9,11 @@
   "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  /** Shows an asterisk next to the label. Purely visual, doesn't validate anything. */\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"
+      "content": "import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState, type ComponentRef } from 'react';\nimport {\n  AccessibilityInfo,\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, useLabels, useTheme } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\nimport { useKeyboardField } from '../theme/useKeyboardField';\nimport { validateInputValue, type InputRules } from './inputValidation';\n\nexport type { InputRules, InputRuleValue } from './inputValidation';\n\n/** The TextInput instance, plus `validate()` to check the field on demand (e.g. on submit). */\nexport type InputHandle = ComponentRef<typeof TextInput> & {\n  /** Runs the rules, shows the error (if any) and returns it. */\n  validate: () => string | undefined;\n};\n\nexport interface InputProps extends Omit<TextInputProps, 'style'> {\n  /** Text above the field; also its accessible name (falls back to `placeholder`). */\n  label?: string;\n  /** Shows an asterisk next to the label, and an empty value fails validation (`labels.requiredError`). */\n  required?: boolean;\n  /** Error shown under the field. Takes precedence over the built-in validation. */\n  error?: string;\n  /** Built-in validation: length limits, a pattern and/or a custom check. */\n  rules?: InputRules;\n  /**\n   * When the rules run: on leaving the field, on every change, or only through\n   * `ref.validate()`. Once an error shows, it re-checks on every change so it\n   * clears as soon as the value is fixed. @default 'blur'\n   */\n  validateOn?: 'blur' | 'change' | 'submit';\n  /** Called with the error (or undefined) every time the rules run. */\n  onValidate?: (error: string | undefined) => void;\n  /** Style of the outer wrapper (label, field and error). */\n  containerStyle?: StyleProp<ViewStyle>;\n  style?: TextInputProps['style'];\n  /** Icon shown inside the field, to the left of the text. */\n  leftIconName?: IconName;\n  /** Icon button inside the field, on the right. Ignored with `isPassword` or `isLoading`. */\n  rightIconName?: IconName;\n  /** Called when the `rightIconName` button is pressed. Without it the button is disabled. */\n  onRightIconPress?: () => void;\n  /** Accessible name of the `rightIconName` button. @default labels.clear */\n  rightIconAccessibilityLabel?: string;\n  /** Hides the text and adds an eye button to show or hide it. @default false */\n  isPassword?: boolean;\n  /** Shows a small spinner on the right, in place of the right icon. @default false */\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  // 20 icon + md padding (12) per side = 44pt touch area (Fitts).\n  rightIcon: { padding: theme.tokens.spacing.md, marginRight: theme.tokens.spacing.xxs },\n  // Read-only: no fill, so it doesn't look like a field you can tap\n  // (affordance), but the text keeps its contrast to stay readable.\n  readOnly: { backgroundColor: 'transparent' },\n  errorText: { marginTop: theme.tokens.spacing.xs, fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },\n}));\n\n/**\n * Input\n * The border animates its color between border/primary/error with Animated\n * (no useNativeDriver: color drivers in RN without Fabric are only reliable\n * on the JS thread; the cost is negligible, it animates one border).\n *\n * Gestalt:\n * - Proximity: label (`spacing.sm` above) and error (`spacing.xs` below) sit\n *   right next to the field and the next field is `spacing.lg` away: each\n *   label and its error read with their field, not with the neighbor.\n * - Common region: left icon, text and right action share the same border\n *   and background, so they read as a single control.\n * - Focal point: the border turns `primary` on focus and `error` on error;\n *   the error is also written out (not just color).\n *\n * Accessibility: the accessible name includes \"required\" when applicable, the\n * error is announced as a hint, and the eye and right-action buttons have a\n * 44pt touch area and texts from `labels` (translatable).\n *\n * Keyboard: on focus it registers with the root UIProvider's host, which\n * lifts the app just enough for the whole field (label, field and error) to\n * sit above the keyboard — without depending on Screen or a ScrollView. What\n * you type is always visible.\n *\n * Validation: `required` and `rules` run when leaving the field (`validateOn`),\n * the error appears in writing, is announced to the screen reader and, once\n * visible, is revalidated on every change so it disappears as soon as it is\n * fixed. An `error` passed by hand overrides the internal validation.\n */\nexport const Input = memo(\n  forwardRef<InputHandle, InputProps>(({\n    label,\n    required = false,\n    error: errorProp,\n    rules,\n    validateOn = 'blur',\n    onValidate,\n    onChangeText,\n    containerStyle,\n    leftIconName,\n    rightIconName,\n    onRightIconPress,\n    rightIconAccessibilityLabel,\n    isPassword = false,\n    isLoading = false,\n    style,\n    onFocus,\n    onBlur,\n    testID,\n    ...props\n  }, ref) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const labels = useLabels();\n    const theme = useTheme();\n    const readOnly = props.editable === false;\n    const [isFocused, setIsFocused] = useState(false);\n    const [showPassword, setShowPassword] = useState(false);\n    const focusProgress = useRef(new Animated.Value(0)).current;\n    const inputRef = useRef<ComponentRef<typeof TextInput>>(null);\n    const containerRef = useRef<ComponentRef<typeof View>>(null);\n    const [internalError, setInternalError] = useState<string | undefined>(undefined);\n    // Last known value: the controlled one (`value`) or what was typed (uncontrolled).\n    const valueRef = useRef(props.value ?? props.defaultValue ?? '');\n    if (props.value !== undefined) valueRef.current = props.value;\n    const error = errorProp ?? internalError;\n\n    const runValidation = () => {\n      const next = validateInputValue(valueRef.current, { required, rules }, labels);\n      setInternalError(next);\n      onValidate?.(next);\n      return next;\n    };\n\n    useImperativeHandle(ref, () => Object.assign(inputRef.current as ComponentRef<typeof TextInput>, { validate: runValidation }));\n\n    // The new error is announced right away, not only as a hint when returning to the field.\n    useEffect(() => {\n      if (internalError && errorProp === undefined) AccessibilityInfo.announceForAccessibility(internalError);\n    }, [internalError, errorProp]);\n\n    const keyboard = useKeyboardField(containerRef);\n\n    // If the error appears or changes while the field is focused, the block grows:\n    // a readjustment is requested so the error line isn't covered either.\n    useEffect(() => {\n      if (isFocused) keyboard.focus();\n    }, [error, isFocused, keyboard]);\n\n    const handleFocus: TextInputProps['onFocus'] = (e) => {\n      setIsFocused(true);\n      keyboard.focus();\n      Animated.timing(focusProgress, { toValue: 1, duration: theme.tokens.duration.base, useNativeDriver: false }).start();\n      onFocus?.(e);\n    };\n\n    const handleBlur: TextInputProps['onBlur'] = (e) => {\n      setIsFocused(false);\n      keyboard.blur();\n      if (validateOn === 'blur') runValidation();\n      Animated.timing(focusProgress, { toValue: 0, duration: theme.tokens.duration.base, useNativeDriver: false }).start();\n      onBlur?.(e);\n    };\n\n    const handleChangeText = (text: string) => {\n      valueRef.current = text;\n      onChangeText?.(text);\n      if (validateOn === 'change' || internalError) runValidation();\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 ref={containerRef} 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, readOnly && styles.readOnly, { borderColor }]}>\n          {leftIconName && <Icon name={leftIconName} size={20} color={colors.textLight} style={styles.leftIcon} />}\n\n          <TextInput\n            ref={inputRef}\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={\n              label || props.placeholder ? `${label ?? props.placeholder}${required ? `, ${labels.required}` : ''}` : undefined\n            }\n            accessibilityHint={error || undefined}\n            accessibilityState={{ disabled: readOnly, busy: isLoading }}\n            {...props}\n            onChangeText={handleChangeText}\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 ? labels.hidePassword : labels.showPassword}\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={rightIconAccessibilityLabel ?? labels.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"
+    },
+    {
+      "path": "atoms/inputValidation.ts",
+      "content": "import type { Labels } from '../theme/labels';\n\n/** A rule's value, optionally with its own message instead of the default label. */\nexport type InputRuleValue<T> = T | { value: T; message: string };\n\nexport interface InputRules {\n  /** Fewer characters than this is an error. Message: `labels.minLengthError`. */\n  minLength?: InputRuleValue<number>;\n  /** More characters than this is an error. Message: `labels.maxLengthError`. */\n  maxLength?: InputRuleValue<number>;\n  /** The value must match. Message: `labels.patternError`. */\n  pattern?: InputRuleValue<RegExp>;\n  /**\n   * Custom check, run last. Return an error message, or `false` for\n   * `labels.patternError`; anything else means valid.\n   */\n  validate?: (value: string) => string | boolean | null | undefined;\n}\n\nfunction unpack<T>(rule: InputRuleValue<T>): { value: T; message?: string } {\n  return typeof rule === 'object' && rule !== null && 'value' in rule && 'message' in rule\n    ? (rule as { value: T; message: string })\n    : { value: rule as T };\n}\n\n/**\n * Error for the value, or undefined if it is valid. Order: required, min\n * length, max length, pattern, custom validation — a single error is shown,\n * the first one. An empty optional field is valid: the other rules don't run on nothing.\n */\nexport function validateInputValue(\n  value: string,\n  { required, rules }: { required?: boolean; rules?: InputRules },\n  labels: Labels\n): string | undefined {\n  if (value.trim() === '') return required ? labels.requiredError : undefined;\n  if (!rules) return undefined;\n\n  if (rules.minLength !== undefined) {\n    const { value: n, message } = unpack(rules.minLength);\n    if (value.length < n) return message ?? labels.minLengthError.replace('{n}', String(n));\n  }\n  if (rules.maxLength !== undefined) {\n    const { value: n, message } = unpack(rules.maxLength);\n    if (value.length > n) return message ?? labels.maxLengthError.replace('{n}', String(n));\n  }\n  if (rules.pattern !== undefined) {\n    const { value: re, message } = unpack(rules.pattern);\n    // A RegExp with the `g` flag keeps lastIndex between calls: reset it.\n    re.lastIndex = 0;\n    if (!re.test(value)) return message ?? labels.patternError;\n  }\n  if (rules.validate) {\n    const result = rules.validate(value);\n    if (typeof result === 'string' && result !== '') return result;\n    if (result === false) return labels.patternError;\n  }\n  return undefined;\n}\n"
     }
   ],
   "registryDependencies": [

package/registry/key-value-row.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "atoms/KeyValueRow.tsx",
-      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling } from '../theme/UIProvider';\n\nexport interface KeyValueRowProps {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n  labelStyle?: StyleProp<TextStyle>;\n  valueStyle?: StyleProp<TextStyle>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  label: { fontSize: theme.tokens.fontSize.sm, fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.textLight },\n  value: { fontSize: theme.tokens.fontSize.sm, textAlign: 'right', color: theme.colors.text },\n}));\n\n/**\n * KeyValueRow\n * Fila label (izquierda) / value (derecha). Si label/value son string o\n * number, se renderizan con el estilo default; si ya vienen envueltos en un\n * componente de texto propio, se respetan tal cual.\n */\nexport const KeyValueRow = memo(({ label, value, style, labelStyle, valueStyle }: KeyValueRowProps) => {\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n  return (\n    <View style={[styles.row, style]}>\n      {typeof label === 'string' || typeof label === 'number' ? (\n        <Text allowFontScaling={allowFontScaling} style={[styles.label, labelStyle]}>\n          {label}\n        </Text>\n      ) : (\n        label\n      )}\n      {typeof value === 'string' || typeof value === 'number' ? (\n        <Text allowFontScaling={allowFontScaling} style={[styles.value, valueStyle]}>\n          {value}\n        </Text>\n      ) : (\n        value\n      )}\n    </View>\n  );\n});\nKeyValueRow.displayName = 'KeyValueRow';\n"
+      "content": "import React, { memo } from 'react';\nimport { Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling } from '../theme/UIProvider';\n\nexport interface KeyValueRowProps {\n  /** Left side. A string or number gets the default label style; any other node renders as is. */\n  label: React.ReactNode;\n  /** Right side. A string or number gets the default value style (tabular digits); any other node renders as is. */\n  value: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n  /** Only applies when `label` is a string or number. */\n  labelStyle?: StyleProp<TextStyle>;\n  /** Only applies when `value` is a string or number. */\n  valueStyle?: StyleProp<TextStyle>;\n  testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n  row: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    gap: theme.tokens.spacing.md,\n  },\n  // Two texts: aligned on the first line, so a value that wraps onto\n  // several lines still reads next to its label.\n  rowText: { alignItems: 'baseline' },\n  // The label keeps its natural width up to half the row; the value\n  // shrinks and wraps instead of pushing the row off the screen.\n  label: {\n    flexShrink: 0,\n    maxWidth: '50%',\n    fontSize: theme.tokens.fontSize.sm,\n    lineHeight: theme.tokens.lineHeight.sm,\n    fontWeight: theme.tokens.fontWeight.semibold,\n    color: theme.colors.textLight,\n  },\n  value: {\n    flexShrink: 1,\n    fontSize: theme.tokens.fontSize.sm,\n    lineHeight: theme.tokens.lineHeight.sm,\n    textAlign: 'right',\n    color: theme.colors.text,\n    // Fixed-width digits: in a column of amounts the figures line up\n    // across rows.\n    fontVariant: ['tabular-nums'],\n  },\n}));\n\nconst isPrimitive = (node: React.ReactNode): node is string | number =>\n  typeof node === 'string' || typeof node === 'number';\n\n/**\n * KeyValueRow\n * Label (left) / value (right) row. If label/value are a string or number,\n * they render with the default style; if they already come wrapped in a\n * custom component, they are kept as is.\n *\n * Gestalt, alignment and similarity: labels share color and weight and values\n * align to the right edge with tabular digits, so a stack of rows reads as\n * two columns — what on the left, how much on the right.\n * With a text label and value, the row is a single accessibility node\n * (\"Subtotal, $300.00\"); if either is a custom node (a Badge, a button) it\n * isn't merged, so as not to hide what that node announces or lets you tap.\n */\nexport const KeyValueRow = memo(\n  ({ label, value, style, labelStyle, valueStyle, testID }: KeyValueRowProps) => {\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n    const merge = isPrimitive(label) && isPrimitive(value);\n    return (\n      <View style={[styles.row, merge && styles.rowText, style]} accessible={merge || undefined} testID={testID}>\n        {isPrimitive(label) ? (\n          <Text allowFontScaling={allowFontScaling} style={[styles.label, labelStyle]}>\n            {label}\n          </Text>\n        ) : (\n          label\n        )}\n        {isPrimitive(value) ? (\n          <Text allowFontScaling={allowFontScaling} style={[styles.value, valueStyle]}>\n            {value}\n          </Text>\n        ) : (\n          value\n        )}\n      </View>\n    );\n  }\n);\nKeyValueRow.displayName = 'KeyValueRow';\n"
     }
   ],
   "registryDependencies": [

package/registry/list.json

@@ -9,12 +9,14 @@
   "files": [
     {
       "path": "organisms/List.tsx",
-      "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  /** Initial load: while true and there's no data, placeholders are shown. */\n  isLoading: boolean;\n  /** Reload with data already on screen (pull-to-refresh). @default false */\n  isRefreshing?: boolean;\n  isLoadingMore?: boolean;\n  /** Controlled by the consumer: while false, a fullscreen spinner is shown. @default true */\n  isReady?: boolean;\n  loadingText?: string;\n  loadingMoreText?: string;\n\n  /** Ghost rows for the initial load. @default 6 */\n  skeletonCount?: number;\n  /** Custom placeholder, to match the real shape of the item. */\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  /** List component to use (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"
+      "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  /** Items to render. */\n  data: T[];\n  /** Stable key per item. */\n  keyExtractor: (item: T, index: number) => string;\n  /** Renders each row (same as FlatList's `renderItem`). */\n  renderItem: FlatListProps<T>['renderItem'];\n\n  /** Initial load: while true and there's no data, placeholders are shown. */\n  isLoading: boolean;\n  /** Reload with data already on screen (pull-to-refresh). @default false */\n  isRefreshing?: boolean;\n  /** Shows a spinner in the footer while the next page loads. @default false */\n  isLoadingMore?: boolean;\n  /** Controlled by the consumer: while false, a fullscreen spinner is shown. @default true */\n  isReady?: boolean;\n  /** Text of the fullscreen spinner shown while `isReady` is false. @default labels.loading */\n  loadingText?: string;\n  /** Text of the footer spinner shown with `isLoadingMore`. @default labels.loadingMore */\n  loadingMoreText?: string;\n\n  /** Ghost rows for the initial load. @default 6 */\n  skeletonCount?: number;\n  /** Custom placeholder, to match the real shape of the item. */\n  renderSkeletonItem?: () => React.ReactElement;\n\n  /** Called when scrolling gets close to the end (to load the next page). */\n  onEndReached?: () => void;\n  /** How close to the end `onEndReached` fires, in visible lengths of the list. @default 0.3 */\n  onEndReachedThreshold?: number;\n  /** Enables pull-to-refresh and is called when the user pulls. */\n  onRefresh?: () => void;\n\n  /** Title of the empty state. @default labels.noResultsTitle */\n  emptyTitle?: string;\n  /** Supporting line of the empty state. @default labels.noResultsDescription */\n  emptyDescription?: string;\n  /** Icon of the empty state. @default 'search' */\n  emptyIconName?: IconName;\n\n  /** Rendered above the items, inside the scroll. */\n  ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];\n  /** Rendered below the items, before the pagination loader. */\n  ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];\n\n  /** Style of the list's content container (also used by the skeleton). */\n  contentContainerStyle?: ViewStyle;\n  /** Style of the outer wrapper. */\n  containerStyle?: ViewStyle;\n\n  /** List component to use (FlashList, etc). @default FlatList */\n  ListComponent?: React.ComponentType<any>;\n  /** Extra props passed to `ListComponent`; they override the ones set here. */\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 },\n  empty: { marginTop: theme.tokens.spacing.xxxl },\n}));\n\n/** Same as Avatar's default size: the placeholder row matches a typical avatar row. */\nconst SKELETON_AVATAR = 44;\n\nfunction renderHeader(Header: ListProps<unknown>['ListHeaderComponent']) {\n  if (!Header) return null;\n  return typeof Header === 'function' ? <Header /> : (Header as React.ReactElement);\n}\n\n/**\n * List\n * List with loading/pagination/empty states handled, without being tied to\n * expo-router or FlashList: `ListComponent` lets you inject any of them\n * (React Native's own FlatList by default).\n *\n * Design:\n * - Continuity (Gestalt): the first load shows placeholders shaped like the\n *   rows and keeps `ListHeaderComponent` in place, so nothing jumps when the\n *   data arrives.\n * - Doherty threshold: every wait has immediate feedback (placeholders,\n *   pull-to-refresh spinner, footer loader while paging), and \"no results\"\n *   only appears once it is known there is nothing.\n * - Jakob's law: the native pull-to-refresh and infinite scroll people\n *   already know from other apps.\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  // The custom footer and the pagination loader coexist: previously the first\n  // covered the second and the list stopped signaling it was fetching more.\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  // Empty only once it is known there is nothing: during the initial load\n  // placeholders are shown, not \"no results\".\n  const renderEmpty = useCallback(() => {\n    if (isLoading || isRefreshing) return null;\n    return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={styles.empty} />;\n  }, [isLoading, isRefreshing, emptyTitle, emptyDescription, emptyIconName, styles.empty]);\n\n  if (!isReady) {\n    return (\n      <View style={[styles.container, containerStyle]}>\n        <Spinner text={resolvedLoadingText} />\n      </View>\n    );\n  }\n\n  if (isInitialLoading) {\n    return (\n      <View style={[styles.container, containerStyle]}>\n        <View style={[styles.listContent, contentContainerStyle]}>\n        {/* Same padding as the loaded list, and outside the group below so it\n            stays reachable (a search field above the list, say). */}\n        {renderHeader(ListHeaderComponent as ListProps<unknown>['ListHeaderComponent'])}\n        <View\n          testID=\"list-skeleton\"\n          // The placeholders themselves are hidden from screen readers: the\n          // group announces that the list is loading instead of silence.\n          accessible\n          accessibilityRole=\"progressbar\"\n          accessibilityLabel={resolvedLoadingText}\n          accessibilityState={{ busy: true }}\n        >\n          {Array.from({ length: skeletonCount }, (_, i) => (\n            <React.Fragment key={i}>\n              {renderSkeletonItem?.() ?? (\n                <View style={styles.skeletonRow}>\n                  <Skeleton variant=\"circle\" width={SKELETON_AVATAR} />\n                  <View style={styles.skeletonText}>\n                    <Skeleton variant=\"text\" width=\"60%\" />\n                    <Skeleton variant=\"text\" width=\"35%\" />\n                  </View>\n                </View>\n              )}\n            </React.Fragment>\n          ))}\n        </View>\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",
+    "button",
+    "transition",
     "skeleton",
     "spinner"
   ]

package/registry/manifest.json

@@ -69,7 +69,9 @@
     },
     {
       "name": "Avatar",
-      "siblingNames": [],
+      "siblingNames": [
+        "initialsOf"
+      ],
       "category": "atoms",
       "file": "atoms/Avatar.tsx",
       "slug": "avatar"