orn-ui 0.1.0

package/registry/index.json

@@ -0,0 +1,465 @@
+{
+  "core": {
+    "bytes": 24213
+  },
+  "components": [
+    {
+      "name": "Title",
+      "slug": "title",
+      "category": "atoms",
+      "exportedNames": [
+        "Title",
+        "Subtitle",
+        "Body",
+        "Caption"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 1844
+    },
+    {
+      "name": "Button",
+      "slug": "button",
+      "category": "atoms",
+      "exportedNames": [
+        "Button"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 6614
+    },
+    {
+      "name": "IconButton",
+      "slug": "icon-button",
+      "category": "atoms",
+      "exportedNames": [
+        "IconButton"
+      ],
+      "registryDependencies": [
+        "core",
+        "pressable-scale"
+      ],
+      "bytes": 1744
+    },
+    {
+      "name": "Input",
+      "slug": "input",
+      "category": "atoms",
+      "exportedNames": [
+        "Input"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 5439
+    },
+    {
+      "name": "Checkbox",
+      "slug": "checkbox",
+      "category": "atoms",
+      "exportedNames": [
+        "Checkbox"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 2632
+    },
+    {
+      "name": "Badge",
+      "slug": "badge",
+      "category": "atoms",
+      "exportedNames": [
+        "Badge"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 2030
+    },
+    {
+      "name": "Card",
+      "slug": "card",
+      "category": "atoms",
+      "exportedNames": [
+        "Card"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 711
+    },
+    {
+      "name": "Divider",
+      "slug": "divider",
+      "category": "atoms",
+      "exportedNames": [
+        "Divider"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 489
+    },
+    {
+      "name": "Avatar",
+      "slug": "avatar",
+      "category": "atoms",
+      "exportedNames": [
+        "Avatar"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 1015
+    },
+    {
+      "name": "Image",
+      "slug": "image",
+      "category": "atoms",
+      "exportedNames": [
+        "Image",
+        "prefetchImage"
+      ],
+      "registryDependencies": [
+        "core",
+        "spinner"
+      ],
+      "bytes": 4620
+    },
+    {
+      "name": "Spinner",
+      "slug": "spinner",
+      "category": "atoms",
+      "exportedNames": [
+        "Spinner"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 4626
+    },
+    {
+      "name": "EmptyState",
+      "slug": "empty-state",
+      "category": "atoms",
+      "exportedNames": [
+        "EmptyState"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 1925
+    },
+    {
+      "name": "KeyValueRow",
+      "slug": "key-value-row",
+      "category": "atoms",
+      "exportedNames": [
+        "KeyValueRow"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 1764
+    },
+    {
+      "name": "Fab",
+      "slug": "fab",
+      "category": "atoms",
+      "exportedNames": [
+        "Fab"
+      ],
+      "registryDependencies": [
+        "core",
+        "pressable-scale"
+      ],
+      "bytes": 1784
+    },
+    {
+      "name": "PressableScale",
+      "slug": "pressable-scale",
+      "category": "atoms",
+      "exportedNames": [
+        "PressableScale"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 1565
+    },
+    {
+      "name": "Stepper",
+      "slug": "stepper",
+      "category": "molecules",
+      "exportedNames": [
+        "Stepper"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 2842
+    },
+    {
+      "name": "OptionCard",
+      "slug": "option-card",
+      "category": "molecules",
+      "exportedNames": [
+        "OptionCard"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 3005
+    },
+    {
+      "name": "InfoRow",
+      "slug": "info-row",
+      "category": "molecules",
+      "exportedNames": [
+        "InfoRow"
+      ],
+      "registryDependencies": [
+        "core",
+        "avatar"
+      ],
+      "bytes": 1967
+    },
+    {
+      "name": "FormActions",
+      "slug": "form-actions",
+      "category": "molecules",
+      "exportedNames": [
+        "FormActions"
+      ],
+      "registryDependencies": [
+        "core",
+        "button"
+      ],
+      "bytes": 1527
+    },
+    {
+      "name": "AvatarHeader",
+      "slug": "avatar-header",
+      "category": "molecules",
+      "exportedNames": [
+        "AvatarHeader"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 2486
+    },
+    {
+      "name": "ThemeToggle",
+      "slug": "theme-toggle",
+      "category": "molecules",
+      "exportedNames": [
+        "ThemeToggle"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 2440
+    },
+    {
+      "name": "Steps",
+      "slug": "steps",
+      "category": "molecules",
+      "exportedNames": [
+        "Steps"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 7306
+    },
+    {
+      "name": "Modal",
+      "slug": "modal",
+      "category": "organisms",
+      "exportedNames": [
+        "Modal"
+      ],
+      "registryDependencies": [
+        "core",
+        "title",
+        "icon-button",
+        "pressable-scale"
+      ],
+      "bytes": 9588
+    },
+    {
+      "name": "BottomSheet",
+      "slug": "bottom-sheet",
+      "category": "organisms",
+      "exportedNames": [
+        "BottomSheet"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 3765
+    },
+    {
+      "name": "Select",
+      "slug": "select",
+      "category": "organisms",
+      "exportedNames": [
+        "Select"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 5348
+    },
+    {
+      "name": "Alert",
+      "slug": "alert",
+      "category": "organisms",
+      "exportedNames": [
+        "Alert"
+      ],
+      "registryDependencies": [
+        "core",
+        "button"
+      ],
+      "bytes": 6138
+    },
+    {
+      "name": "AlertProvider",
+      "slug": "alert-provider",
+      "category": "organisms",
+      "exportedNames": [
+        "AlertProvider",
+        "useAlert"
+      ],
+      "registryDependencies": [
+        "core",
+        "alert",
+        "button"
+      ],
+      "bytes": 3819
+    },
+    {
+      "name": "Screen",
+      "slug": "screen",
+      "category": "organisms",
+      "exportedNames": [
+        "Screen"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 2814
+    },
+    {
+      "name": "List",
+      "slug": "list",
+      "category": "organisms",
+      "exportedNames": [
+        "List"
+      ],
+      "registryDependencies": [
+        "core",
+        "empty-state",
+        "spinner"
+      ],
+      "bytes": 4779
+    },
+    {
+      "name": "SearchList",
+      "slug": "search-list",
+      "category": "organisms",
+      "exportedNames": [
+        "SearchList"
+      ],
+      "registryDependencies": [
+        "core",
+        "input",
+        "empty-state",
+        "spinner",
+        "icon-button",
+        "pressable-scale"
+      ],
+      "bytes": 5861
+    },
+    {
+      "name": "Toast",
+      "slug": "toast",
+      "category": "organisms",
+      "exportedNames": [
+        "Toast"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 4411
+    },
+    {
+      "name": "ToastProvider",
+      "slug": "toast-provider",
+      "category": "organisms",
+      "exportedNames": [
+        "ToastProvider",
+        "useToast"
+      ],
+      "registryDependencies": [
+        "core",
+        "toast"
+      ],
+      "bytes": 4920
+    },
+    {
+      "name": "DatePicker",
+      "slug": "date-picker",
+      "category": "organisms",
+      "exportedNames": [
+        "DatePicker",
+        "buildMonthGrid",
+        "DEFAULT_MONTH_NAMES",
+        "DEFAULT_WEEKDAY_NAMES"
+      ],
+      "registryDependencies": [
+        "core",
+        "icon-button",
+        "pressable-scale"
+      ],
+      "bytes": 10093
+    },
+    {
+      "name": "DateField",
+      "slug": "date-field",
+      "category": "organisms",
+      "exportedNames": [
+        "DateField"
+      ],
+      "registryDependencies": [
+        "core",
+        "modal",
+        "title",
+        "icon-button",
+        "pressable-scale",
+        "date-picker",
+        "button"
+      ],
+      "bytes": 4545
+    },
+    {
+      "name": "Wizard",
+      "slug": "wizard",
+      "category": "organisms",
+      "exportedNames": [
+        "Wizard"
+      ],
+      "registryDependencies": [
+        "core",
+        "steps",
+        "button"
+      ],
+      "bytes": 4569
+    }
+  ]
+}

package/registry/info-row.json

@@ -0,0 +1,19 @@
+{
+  "name": "InfoRow",
+  "slug": "info-row",
+  "type": "component",
+  "category": "molecules",
+  "exportedNames": [
+    "InfoRow"
+  ],
+  "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"
+    }
+  ],
+  "registryDependencies": [
+    "core",
+    "avatar"
+  ]
+}

package/registry/input.json

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

package/registry/key-value-row.json

@@ -0,0 +1,18 @@
+{
+  "name": "KeyValueRow",
+  "slug": "key-value-row",
+  "type": "component",
+  "category": "atoms",
+  "exportedNames": [
+    "KeyValueRow"
+  ],
+  "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"
+    }
+  ],
+  "registryDependencies": [
+    "core"
+  ]
+}

package/registry/list.json

@@ -0,0 +1,20 @@
+{
+  "name": "List",
+  "slug": "list",
+  "type": "component",
+  "category": "organisms",
+  "exportedNames": [
+    "List"
+  ],
+  "files": [
+    {
+      "path": "organisms/List.tsx",
+      "content": "import React, { memo, useCallback } from 'react';\nimport {\n  ActivityIndicator,\n  FlatList,\n  Platform,\n  RefreshControl,\n  Text,\n  View,\n  type FlatListProps,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useColors, useLabels } from '../theme/UIProvider';\nimport { EmptyState } from '../atoms/EmptyState';\nimport { Spinner } from '../atoms/Spinner';\nimport type { IconName } from '../icons/types';\n\nexport interface ListProps<T> {\n  data: T[];\n  keyExtractor: (item: T) => string;\n  renderItem: FlatListProps<T>['renderItem'];\n\n  isLoading: boolean;\n  isLoadingMore?: boolean;\n  /** Controlado por el consumidor: mientras es false, se muestra un spinner de pantalla completa. @default true */\n  isReady?: boolean;\n  loadingText?: string;\n  loadingMoreText?: string;\n\n  onEndReached?: () => void;\n  onEndReachedThreshold?: number;\n  onRefresh?: () => void;\n\n  emptyTitle?: string;\n  emptyDescription?: string;\n  emptyIconName?: IconName;\n\n  ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];\n  ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];\n\n  contentContainerStyle?: ViewStyle;\n  containerStyle?: ViewStyle;\n\n  /** Componente de lista a usar (FlashList, etc). @default FlatList */\n  ListComponent?: React.ComponentType<any>;\n  listProps?: Record<string, unknown>;\n}\n\nconst useStyles = createStyles((theme) => ({\n  container: { flex: 1, backgroundColor: theme.colors.background },\n  loadingOverlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    backgroundColor: theme.colors.background + 'CC',\n    zIndex: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  loadingText: { marginTop: theme.tokens.spacing.md, color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },\n  listContent: { padding: theme.tokens.spacing.md, paddingBottom: Platform.OS === 'android' ? 100 : 80 },\n  footerLoader: { paddingVertical: theme.tokens.spacing.xl, alignItems: 'center' },\n}));\n\n/**\n * List\n * Lista con estados de carga/paginación/vacío resueltos, sin atarse a\n * expo-router ni a FlashList: `ListComponent` permite inyectar cualquiera\n * (por defecto FlatList del propio React Native).\n */\nexport function List<T>({\n  data,\n  keyExtractor,\n  renderItem,\n  isLoading,\n  isLoadingMore = false,\n  isReady = true,\n  loadingText,\n  loadingMoreText,\n  onEndReached,\n  onEndReachedThreshold = 0.3,\n  onRefresh,\n  emptyTitle,\n  emptyDescription,\n  emptyIconName,\n  ListHeaderComponent,\n  ListFooterComponent,\n  contentContainerStyle,\n  containerStyle,\n  ListComponent = FlatList,\n  listProps,\n}: ListProps<T>) {\n  const colors = useColors();\n  const styles = useStyles();\n  const labels = useLabels();\n  const resolvedLoadingText = loadingText ?? labels.loading;\n  const resolvedLoadingMoreText = loadingMoreText ?? labels.loadingMore;\n\n  const renderFooter = useCallback(() => {\n    if (ListFooterComponent) {\n      return typeof ListFooterComponent === 'function' ? <ListFooterComponent /> : (ListFooterComponent as React.ReactElement);\n    }\n    if (!isLoadingMore) return null;\n    return (\n      <View style={styles.footerLoader}>\n        <Spinner text={resolvedLoadingMoreText} fullscreen={false} />\n      </View>\n    );\n  }, [isLoadingMore, resolvedLoadingMoreText, ListFooterComponent, styles.footerLoader]);\n\n  const renderEmpty = useCallback(() => {\n    if (isLoading) return null;\n    return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={{ marginTop: 50 }} />;\n  }, [isLoading, emptyTitle, emptyDescription, emptyIconName]);\n\n  if (!isReady) {\n    return (\n      <View style={styles.container}>\n        <Spinner text={resolvedLoadingText} />\n      </View>\n    );\n  }\n\n  return (\n    <View style={[styles.container, containerStyle]}>\n      {isLoading && data.length === 0 && (\n        <View style={styles.loadingOverlay} pointerEvents=\"none\">\n          <ActivityIndicator size=\"large\" color={colors.primary} />\n          <Text style={styles.loadingText}>{resolvedLoadingText}</Text>\n        </View>\n      )}\n\n      <ListComponent\n        data={data}\n        keyExtractor={keyExtractor}\n        renderItem={renderItem}\n        contentContainerStyle={[styles.listContent, contentContainerStyle]}\n        onEndReached={onEndReached}\n        onEndReachedThreshold={onEndReachedThreshold}\n        ListHeaderComponent={ListHeaderComponent}\n        ListFooterComponent={renderFooter}\n        ListEmptyComponent={renderEmpty}\n        refreshControl={\n          onRefresh ? (\n            <RefreshControl refreshing={isLoading} onRefresh={onRefresh} colors={[colors.primary]} tintColor={colors.primary} />\n          ) : undefined\n        }\n        {...listProps}\n      />\n    </View>\n  );\n}\n"
+    }
+  ],
+  "registryDependencies": [
+    "core",
+    "empty-state",
+    "spinner"
+  ]
+}