@retray-dev/ui-kit 13.0.0 → 13.4.0

package/src/components/ImageUpload/ImageUpload.tsx

@@ -28,8 +28,6 @@ export interface ImageUploadProps {
   borderRadius?: number
   /** Aspect ratio for the selected image. Defaults to 'cover'. */
   resizeMode?: 'cover' | 'contain' | 'stretch'
-  /** Whether to allow the user to crop the image after selecting. Defaults to true. */
-  allowsEditing?: boolean
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
@@ -47,7 +45,6 @@ export function ImageUpload({
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = 'cover',
-  allowsEditing = true,
   disabled = false,
   style,
   accessibilityLabel,
@@ -55,32 +52,43 @@ export function ImageUpload({
 }: ImageUploadProps) {
   const { colors } = useTheme()
   const [imageLoaded, setImageLoaded] = useState(false)
+  const [isPicking, setIsPicking] = useState(false)
 
   const handlePress = async () => {
-    if (disabled || loading) return
+    if (disabled || loading || isPicking) return
     impactLight()
 
     onPickerStarting?.()
+    setIsPicking(true)
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let picker: any
     try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      picker = require('expo-image-picker')
-    } catch {
-      if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed.')
-      return
-    }
+      const { launchImageLibrary } = await import('react-native-image-picker')
 
-    const result = await picker.launchImageLibraryAsync({
-      mediaTypes: ['images'],
-      allowsEditing,
-      quality: 0.8,
-    })
+      const result = await new Promise<{
+        didCancel?: boolean
+        errorCode?: string
+        errorMessage?: string
+        assets?: { uri?: string }[]
+      }>((resolve) => {
+        launchImageLibrary(
+          {
+            mediaType: 'photo',
+            quality: 0.8,
+            selectionLimit: 1,
+            includeBase64: false,
+          },
+          resolve,
+        )
+      })
 
-    if (!result.canceled && result.assets?.[0]) {
-      setImageLoaded(false)
-      onChange?.(result.assets[0].uri)
+      if (!result.didCancel && !result.errorCode && result.assets?.[0]?.uri) {
+        setImageLoaded(false)
+        onChange?.(result.assets[0].uri)
+      }
+    } catch {
+      // Module load failed or picker errored — silently return
+    } finally {
+      setIsPicking(false)
     }
   }
 
@@ -128,8 +136,8 @@ export function ImageUpload({
           ) : null}
         </View>
       )}
-      {loading ? (
-        <View style={[styles.loadingOverlay, { backgroundColor: colors.overlay }]}>
+      {loading || isPicking ? (
+        <View style={[styles.loadingOverlay, { backgroundColor: colors.overlay, borderRadius }]}>
           <Spinner size="md" />
         </View>
       ) : null}
@@ -163,12 +171,12 @@ const styles = StyleSheet.create({
   },
   editBadge: {
     position: 'absolute',
-    bottom: vs(8),
-    right: s(8),
+    bottom: vs(14),
+    right: s(14),
   },
   editBadgeInner: {
-    width: s(28),
-    height: s(28),
+    width: s(24),
+    height: s(24),
     borderRadius: 999,
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/{ListGroup/ListGroup.tsx → ItemGroup/ItemGroup.tsx}

@@ -4,52 +4,41 @@ import { useTheme } from '../../theme'
 import { s, vs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
 
-export type ListGroupVariant = 'plain' | 'card'
+export type ItemGroupVariant = 'plain' | 'card'
 
-export interface ListGroupProps {
+export interface ItemGroupProps {
   children: React.ReactNode
-  /**
-   * - `plain` (default): no background, plain ListItems inside.
-   * - `card`: card surface with background + border wrapping plain ListItems.
-   */
-  variant?: ListGroupVariant
+  variant?: ItemGroupVariant
+  childPropKey: 'title' | 'onPress'
   style?: ViewStyle
 }
 
-export interface ListGroupHeaderProps {
+export interface ItemGroupHeaderProps {
   children: React.ReactNode
   style?: ViewStyle
 }
 
-export interface ListGroupFooterProps {
+export interface ItemGroupFooterProps {
   children: React.ReactNode
   style?: ViewStyle
 }
 
-/**
- * ListGroup wraps multiple ListItems and auto-adds separators between them.
- * Use variant="card" for a standalone surface or "plain" for items inside another container.
- */
-export function ListGroup({ children, variant = 'plain', style }: ListGroupProps) {
+export function ItemGroup({ children, variant = 'plain', childPropKey, style }: ItemGroupProps) {
   const { colors } = useTheme()
 
-  // Auto-inject showSeparator={true} to all ListItem children except the last
   const processedChildren = React.Children.map(children, (child, index) => {
     if (!React.isValidElement(child)) return child
-    
-    // Skip ListGroup.Header and ListGroup.Footer
-    if (child.type === ListGroupHeader || child.type === ListGroupFooter) {
+
+    if (child.type === ItemGroupHeader || child.type === ItemGroupFooter) {
       return child
     }
 
-    // Check if it's a ListItem (has title prop as a heuristic)
     const childProps = child.props as Record<string, unknown>
-    const isListItem = 'title' in childProps
-    if (!isListItem) return child
+    const isTargetChild = childPropKey in childProps
+    if (!isTargetChild) return child
 
     const isLast = index === React.Children.count(children) - 1
 
-    // Only add separator if not already explicitly set and not last item
     if (childProps['showSeparator'] === undefined && !isLast) {
       return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
         showSeparator: true,
@@ -82,9 +71,9 @@ export function ListGroup({ children, variant = 'plain', style }: ListGroupProps
   )
 }
 
-export function ListGroupHeader({ children, style }: ListGroupHeaderProps) {
+export function ItemGroupHeader({ children, style }: ItemGroupHeaderProps) {
   const { colors } = useTheme()
-  
+
   if (typeof children === 'string') {
     return (
       <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>
@@ -98,9 +87,9 @@ export function ListGroupHeader({ children, style }: ListGroupHeaderProps) {
   return <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>{children}</View>
 }
 
-export function ListGroupFooter({ children, style }: ListGroupFooterProps) {
+export function ItemGroupFooter({ children, style }: ItemGroupFooterProps) {
   const { colors } = useTheme()
-  
+
   if (typeof children === 'string') {
     return (
       <View style={[styles.footer, style]}>
@@ -114,9 +103,6 @@ export function ListGroupFooter({ children, style }: ListGroupFooterProps) {
   return <View style={[styles.footer, style]}>{children}</View>
 }
 
-ListGroup.Header = ListGroupHeader
-ListGroup.Footer = ListGroupFooter
-
 const styles = StyleSheet.create({
   container: {
     overflow: 'hidden',

package/src/components/ItemGroup/index.ts

@@ -0,0 +1,2 @@
+export { ItemGroup, ItemGroupHeader, ItemGroupFooter } from './ItemGroup'
+export type { ItemGroupProps, ItemGroupVariant, ItemGroupHeaderProps, ItemGroupFooterProps } from './ItemGroup'

package/src/components/ListGroup/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ItemGroup as BaseItemGroup, ItemGroupHeader, ItemGroupFooter } from '../ItemGroup'
+import type { ItemGroupProps, ItemGroupVariant, ItemGroupHeaderProps, ItemGroupFooterProps } from '../ItemGroup'
+
+export type ListGroupVariant = ItemGroupVariant
+
+export interface ListGroupProps extends Omit<ItemGroupProps, 'childPropKey'> {}
+
+export interface ListGroupHeaderProps extends ItemGroupHeaderProps {}
+
+export interface ListGroupFooterProps extends ItemGroupFooterProps {}
+
+export function ListGroup(props: ListGroupProps) {
+  return <BaseItemGroup childPropKey="title" {...props} />
+}
+
+ListGroup.Header = ItemGroupHeader
+ListGroup.Footer = ItemGroupFooter
+
+export { ItemGroupHeader as ListGroupHeader, ItemGroupFooter as ListGroupFooter }

package/src/components/ListItem/ListItem.tsx

@@ -85,6 +85,7 @@ export interface ListItemProps {
   captionStyle?: TextStyle
   /** Accessibility label override. Defaults to the title. */
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 function ListItemBase({
@@ -110,6 +111,7 @@ function ListItemBase({
   subtitleNumberOfLines = 2,
   captionStyle,
   accessibilityLabel,
+  accessibilityHint,
 }: ListItemProps) {
   const { colors } = useTheme()
 
@@ -221,6 +223,7 @@ function ListItemBase({
           activateOnHover
           accessibilityRole="button"
           accessibilityLabel={a11yLabel}
+          accessibilityHint={accessibilityHint}
           accessibilityState={{ disabled: !!disabled }}
         >
           {content}

package/src/components/MenuGroup/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ItemGroup as BaseItemGroup, ItemGroupHeader, ItemGroupFooter } from '../ItemGroup'
+import type { ItemGroupProps, ItemGroupVariant, ItemGroupHeaderProps, ItemGroupFooterProps } from '../ItemGroup'
+
+export type MenuGroupVariant = ItemGroupVariant
+
+export interface MenuGroupProps extends Omit<ItemGroupProps, 'childPropKey'> {}
+
+export interface MenuGroupHeaderProps extends ItemGroupHeaderProps {}
+
+export interface MenuGroupFooterProps extends ItemGroupFooterProps {}
+
+export function MenuGroup(props: MenuGroupProps) {
+  return <BaseItemGroup childPropKey="onPress" {...props} />
+}
+
+MenuGroup.Header = ItemGroupHeader
+MenuGroup.Footer = ItemGroupFooter
+
+export { ItemGroupHeader as MenuGroupHeader, ItemGroupFooter as MenuGroupFooter }

package/src/components/MenuItem/MenuItem.tsx

@@ -55,6 +55,7 @@ export interface MenuItemProps {
   labelStyle?: TextStyle
   /** Accessibility label override. Defaults to label. */
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 function MenuItemBase({
@@ -72,6 +73,7 @@ function MenuItemBase({
   style,
   labelStyle,
   accessibilityLabel,
+  accessibilityHint,
 }: MenuItemProps) {
   const { colors } = useTheme()
 
@@ -112,6 +114,7 @@ function MenuItemBase({
         activateOnHover
         accessibilityRole="button"
         accessibilityLabel={a11yLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled }}
       >
         {resolvedIcon ? (

package/src/components/NumberStepper/NumberStepper.tsx

@@ -19,6 +19,7 @@ export interface NumberStepperProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 const sizeConfig: Record<NumberStepperSize, { button: number; icon: number; valueFontSize: number; valueLineHeight: number; valueMinWidth: number }> = {
@@ -37,6 +38,7 @@ function NumberStepperBase({
   disabled = false,
   style,
   accessibilityLabel,
+  accessibilityHint,
 }: NumberStepperProps) {
   const { colors } = useTheme()
 
@@ -78,6 +80,7 @@ function NumberStepperBase({
         touchSoundDisabled
         accessibilityRole="button"
         accessibilityLabel={`Disminuir, valor actual ${displayValue}`}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: !canDecrement }}
       >
         <Icon name="minus" size={iconSize} color={canDecrement ? colors.foreground : colors.foregroundMuted} />
@@ -115,6 +118,7 @@ function NumberStepperBase({
         touchSoundDisabled
         accessibilityRole="button"
         accessibilityLabel={`Aumentar, valor actual ${displayValue}`}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: !canIncrement }}
       >
         <Icon name="plus" size={iconSize} color={canIncrement ? colors.foreground : colors.foregroundMuted} />

package/src/components/Pressable/Pressable.tsx

@@ -5,42 +5,18 @@ import { PressableCard } from '../../utils/pressable'
 import { PRESS_SCALE } from '../../utils/animations'
 
 export interface PressableProps {
-  /** Children content to render inside the pressable. */
   children: React.ReactNode
-  /** Called when pressed. */
   onPress?: () => void
-  /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
   pressScale?: number
-  /** Enable haptic feedback on press. Defaults to `true`. */
   haptics?: boolean
-  /** Additional style for the wrapper. */
   style?: ViewStyle
-  /** Disable interaction. */
   disabled?: boolean
-  /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
   hoverScale?: number
-  /**
-   * Accessibility role for the pressable element.
-   * Defaults to `"button"`.
-   */
   accessibilityRole?: AccessibilityRole
-  /**
-   * Accessibility state for screen readers.
-   * Used to communicate states like `selected`, `expanded`, `checked`, etc.
-   * Defaults to `{ disabled: !!disabled }`.
-   */
   accessibilityState?: Record<string, unknown>
-  /** Accessibility label for screen readers. */
   accessibilityLabel?: string
 }
 
-/**
- * Generic pressable with a calibrated spring bounce — Apple HIG / Airbnb feel.
- * All animation runs on the UI thread via pressto (Reanimated v4 worklets).
- *
- * Use this for any custom pressable surface that needs consistent press feel
- * (cards, list rows, image tiles, etc).
- */
 export function Pressable({
   children,
   onPress,

package/src/components/ScreenContainer/ScreenContainer.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { View, ScrollView, KeyboardAvoidingView, Platform, StyleSheet, ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../theme'
+import { BREAKPOINTS } from '../../tokens'
+
+export interface ScreenContainerProps {
+  children: React.ReactNode
+  /** Maximum width in points. Defaults to BREAKPOINTS.wide (700). Set to 0 to disable. */
+  maxWidth?: number
+  /** Enable scroll. Default false. */
+  scroll?: boolean
+  /** Background color. Defaults to theme `background`. */
+  backgroundColor?: string
+  /** Padding top override. Defaults to safe area top. */
+  paddingTop?: number
+  /** Padding bottom override. Defaults to safe area bottom. */
+  paddingBottom?: number
+  /** Horizontal padding. Defaults to 0. */
+  paddingHorizontal?: number
+  /** Enable keyboard avoidance. Default false. */
+  keyboard?: boolean
+  style?: ViewStyle
+}
+
+export function ScreenContainer({
+  children,
+  maxWidth = BREAKPOINTS.wide,
+  scroll = false,
+  backgroundColor,
+  paddingTop,
+  paddingBottom,
+  paddingHorizontal,
+  keyboard = false,
+  style: _style,
+}: ScreenContainerProps) {
+  const insets = useSafeAreaInsets()
+  const { colors } = useTheme()
+
+  const wrapperStyle: ViewStyle = {
+    flex: 1,
+    backgroundColor: backgroundColor ?? colors.background,
+    paddingTop: paddingTop ?? insets.top,
+    paddingBottom: paddingBottom ?? insets.bottom,
+    paddingHorizontal: paddingHorizontal ?? 0,
+    ..._style,
+  }
+
+  const inner = (
+    <View style={[styles.inner, { maxWidth: maxWidth || undefined }]}>
+      {children}
+    </View>
+  )
+
+  const content = scroll ? (
+    <ScrollView
+      style={styles.scroll}
+      contentContainerStyle={styles.scrollContent}
+      keyboardShouldPersistTaps="handled"
+    >
+      {inner}
+    </ScrollView>
+  ) : (
+    inner
+  )
+
+  if (keyboard) {
+    return (
+      <KeyboardAvoidingView
+        style={wrapperStyle}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+      >
+        {content}
+      </KeyboardAvoidingView>
+    )
+  }
+
+  return <View style={wrapperStyle}>{content}</View>
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  inner: {
+    flex: 1,
+    alignSelf: 'center',
+    width: '100%',
+  },
+})

package/src/components/ScreenContainer/index.ts

@@ -0,0 +1,2 @@
+export { ScreenContainer } from './ScreenContainer'
+export type { ScreenContainerProps } from './ScreenContainer'

package/src/components/Select/Select.tsx

@@ -28,6 +28,7 @@ export interface SelectProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 export function Select({
@@ -41,6 +42,7 @@ export function Select({
   disabled,
   style,
   accessibilityLabel,
+  accessibilityHint,
 }: SelectProps) {
   const { colors } = useTheme()
   const [pickerVisible, setPickerVisible] = useState(false)
@@ -49,6 +51,25 @@ export function Select({
 
   const selected = options.find((o) => o.value === value)
 
+  function renderPickerItems(includePlaceholder: boolean, itemColor?: string, disabledColor?: string) {
+    return (
+      <>
+        {includePlaceholder ? (
+          <Picker.Item label={placeholder} value="" enabled={false} color={disabledColor} />
+        ) : null}
+        {options.map((o) => (
+          <Picker.Item
+            key={o.value}
+            label={o.label}
+            value={o.value}
+            enabled={!o.disabled}
+            color={o.disabled ? disabledColor : itemColor}
+          />
+        ))}
+      </>
+    )
+  }
+
   const handleOpen = () => {
     if (disabled) return
     hapticSelection()
@@ -93,6 +114,7 @@ export function Select({
           touchSoundDisabled
           accessibilityRole="combobox"
           accessibilityLabel={accessibilityLabel ?? label}
+          accessibilityHint={accessibilityHint}
           accessibilityValue={{ text: selected?.label ?? placeholder }}
           accessibilityState={{ disabled: !!disabled, expanded: pickerVisible }}
         >
@@ -139,18 +161,7 @@ export function Select({
               onValueChange={(val) => setPendingValue(val as string)}
               itemStyle={{ color: colors.foreground }}
             >
-              {!value ? (
-                <Picker.Item label={placeholder} value="" color={colors.foregroundMuted} enabled={false} />
-              ) : null}
-              {options.map((o) => (
-                <Picker.Item
-                  key={o.value}
-                  label={o.label}
-                  value={o.value}
-                  enabled={!o.disabled}
-                  color={o.disabled ? colors.foregroundMuted : colors.foreground}
-                />
-              ))}
+              {renderPickerItems(!value, colors.foreground, colors.foregroundMuted)}
             </Picker>
           </View>
         </Modal>
@@ -172,15 +183,7 @@ export function Select({
           prompt={label}
           style={styles.androidHiddenPicker}
         >
-          {!value ? <Picker.Item label={placeholder} value="" enabled={false} /> : null}
-          {options.map((o) => (
-            <Picker.Item
-              key={o.value}
-              label={o.label}
-              value={o.value}
-              enabled={!o.disabled}
-            />
-          ))}
+          {renderPickerItems(!value)}
         </Picker>
       ) : null}
 
@@ -204,15 +207,7 @@ export function Select({
             },
           ]}
         >
-          <Picker.Item label={placeholder} value="" enabled={false} />
-          {options.map((o) => (
-            <Picker.Item
-              key={o.value}
-              label={o.label}
-              value={o.value}
-              enabled={!o.disabled}
-            />
-          ))}
+          {renderPickerItems(true)}
         </Picker>
       ) : null}
 

package/src/components/SelectableGrid/SelectableGrid.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { View, Text, StyleSheet, ViewStyle, ScrollView } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle, ScrollView, ImageSourcePropType } from 'react-native'
+import { Image } from 'expo-image'
 import { useTheme } from '../../theme'
 import { Icon } from '../../utils/icons'
 import { PressableChip } from '../../utils/pressable'
@@ -12,6 +13,7 @@ export interface SelectableGridItem<T extends string | number = string> {
   label?: string
   iconName?: string
   icon?: React.ReactNode
+  imageUrl?: ImageSourcePropType
   disabled?: boolean
 }
 
@@ -40,10 +42,13 @@ interface CellProps<T extends string | number> {
 
 function Cell<T extends string | number>({ item, selected, width, onPress }: CellProps<T>) {
   const { colors } = useTheme()
+  const hasImage = !!item.imageUrl
 
   const iconColor = selected ? colors.primary : colors.foregroundSubtle
   const iconNode = item.icon ?? (item.iconName ? <Icon name={item.iconName} size={ms(24)} color={iconColor} /> : null)
 
+  const imageSize = width - 4
+
   return (
     <PressableChip
       onPress={onPress}
@@ -54,26 +59,40 @@ function Cell<T extends string | number>({ item, selected, width, onPress }: Cel
       accessibilityRole="button"
       accessibilityState={{ selected, disabled: item.disabled }}
       accessibilityLabel={item.label ?? String(item.value)}
-      style={[
-        { width },
-        styles.cell,
-        {
-          backgroundColor: selected ? colors.primary + '14' : colors.surface,
-          borderColor: selected ? colors.primary : 'transparent',
-        },
-        item.disabled && styles.cellDisabled,
-      ]}
     >
-      {iconNode}
-      {item.label ? (
-        <Text
-          style={[styles.label, { color: selected ? colors.primary : colors.foreground }]}
-          numberOfLines={1}
-          allowFontScaling={true}
-        >
-          {item.label}
-        </Text>
-      ) : null}
+      <View
+        style={[
+          { width },
+          styles.cell,
+          hasImage && styles.cellImage,
+          {
+            borderColor: selected ? colors.primary : 'transparent',
+          },
+          item.disabled && styles.cellDisabled,
+        ]}
+      >
+        {hasImage ? (
+          <Image
+            source={item.imageUrl}
+            style={{ width: imageSize, height: imageSize }}
+            contentFit="cover"
+          />
+        ) : null}
+        {iconNode && !hasImage ? iconNode : null}
+        {item.label ? (
+          <Text
+            style={[
+              styles.label,
+              hasImage && styles.labelImage,
+              { color: selected ? colors.primary : colors.foreground },
+            ]}
+            numberOfLines={2}
+            allowFontScaling={true}
+          >
+            {item.label}
+          </Text>
+        ) : null}
+      </View>
     </PressableChip>
   )
 }
@@ -159,6 +178,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: s(8),
     paddingVertical: vs(10),
   },
+  cellImage: {
+    padding: 0,
+    gap: 0,
+    overflow: 'hidden',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+  },
   cellDisabled: {
     opacity: 0.4,
   },
@@ -168,4 +194,9 @@ const styles = StyleSheet.create({
     lineHeight: mvs(14),
     textAlign: 'center',
   },
+  labelImage: {
+    paddingHorizontal: s(6),
+    paddingBottom: vs(6),
+    paddingTop: vs(3),
+  },
 })