@retray-dev/ui-kit 13.0.0 → 13.4.0

package/dist/index.mjs

@@ -1,66 +1,80 @@
-export { Toggle } from './chunk-RRKM4MKB.mjs';
-export { Stats } from './chunk-ZKDKKQCE.mjs';
-export { Switch } from './chunk-BTUW5LSG.mjs';
-export { TabBar } from './chunk-U6DEBYU5.mjs';
-export { Tabs, TabsContent } from './chunk-KC5QDYGZ.mjs';
-export { Text } from './chunk-EHGBHFMH.mjs';
-export { Textarea } from './chunk-L3YKPTJQ.mjs';
-export { Select } from './chunk-URIH43IJ.mjs';
-export { SelectableCard, SelectableCardGroup } from './chunk-BULKGOIZ.mjs';
-export { SelectableGrid } from './chunk-MP7GLMIR.mjs';
-export { Separator } from './chunk-EW2FIDSM.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-2QOHHBJC.mjs';
-export { SheetSelect } from './chunk-WIPEDNSD.mjs';
-export { Skeleton } from './chunk-XCIG6HT2.mjs';
-export { Slider } from './chunk-UOKFSFNJ.mjs';
-export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-ITG4JQM3.mjs';
-export { NumberStepper } from './chunk-TETMEKZE.mjs';
-export { Pressable } from './chunk-62BBSSUF.mjs';
-export { PricingCard } from './chunk-K3QX2M26.mjs';
-export { Progress } from './chunk-DBHSUUKU.mjs';
-export { RadioGroup } from './chunk-IJCMPVW5.mjs';
-export { RetrayProvider } from './chunk-ERWJPVX7.mjs';
-export { ToastProvider, sonnerToast as toast, useToast } from './chunk-SZEKQAOY.mjs';
-export { ImageViewer } from './chunk-PGQ6FMXS.mjs';
-export { PagerDots } from './chunk-S44XWTTC.mjs';
-export { LabelValue } from './chunk-DE25XTVQ.mjs';
-export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-OBV72JD4.mjs';
-export { ListItem } from './chunk-6QLBHUEG.mjs';
-export { MediaCard } from './chunk-CM2DG4MR.mjs';
-export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-S2VGME7X.mjs';
-export { MenuItem } from './chunk-E4EQSCKR.mjs';
-export { DetailRow } from './chunk-KAGADD2O.mjs';
-export { EmptyState } from './chunk-FTTI6T5Q.mjs';
-export { ErrorBoundary } from './chunk-ESQDPO5E.mjs';
-export { Form, FormField, FormFooter, FormSection } from './chunk-KPTY7UYQ.mjs';
-export { IconPicker } from './chunk-NGEN2EES.mjs';
-export { ImageUpload } from './chunk-EROPDCB5.mjs';
-export { Spinner } from './chunk-2VIDP72N.mjs';
+export { Toggle } from './chunk-HLWGFBIF.mjs';
+export { VirtualizedList } from './chunk-WFNGSYS4.mjs';
+export { Slider } from './chunk-4PF4LKNT.mjs';
+export { Stats } from './chunk-YOXSXHDE.mjs';
+export { Switch } from './chunk-5TNQ573V.mjs';
+export { TabBar } from './chunk-IFGZUJFH.mjs';
+export { Tabs, TabsContent } from './chunk-BMAAAJWN.mjs';
+export { Text } from './chunk-CYGYC7XT.mjs';
+export { Textarea } from './chunk-7CE6PDCQ.mjs';
+export { ScreenContainer } from './chunk-WR6DCNAE.mjs';
+export { Select } from './chunk-RLPPRIJ7.mjs';
+export { SelectableCard, SelectableCardGroup } from './chunk-FE26TPCI.mjs';
+export { SelectableGrid } from './chunk-T4KMKHTI.mjs';
+export { Separator } from './chunk-BVJAYPAD.mjs';
+export { BottomSheetModalProvider, Sheet, SheetContent, SheetFooter, SheetHeader, BottomSheetTextInput as SheetTextInput } from './chunk-UBTP4NPP.mjs';
+export { SheetSelect } from './chunk-WD5LBXPR.mjs';
+export { Skeleton } from './chunk-S433IOQE.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-QEE3EQ3N.mjs';
+export { NumberStepper } from './chunk-NQYS6RPX.mjs';
+export { Pressable } from './chunk-P5KC3RTG.mjs';
+export { PricingCard } from './chunk-PPKCGCZ3.mjs';
+export { Progress } from './chunk-FOUSI6JD.mjs';
+export { RadioGroup } from './chunk-BQMJQMWY.mjs';
+export { RetrayProvider } from './chunk-XKBB2UZU.mjs';
+export { ToastProvider, sonnerToast as toast, useToast } from './chunk-VSKBODEY.mjs';
+export { ImageUpload } from './chunk-CCEM3HIJ.mjs';
+export { ImageViewer } from './chunk-ZO5BRTCW.mjs';
+export { PagerDots } from './chunk-E4BJ5WXG.mjs';
+import { ItemGroup, ItemGroupHeader, ItemGroupFooter } from './chunk-2DDJ53DK.mjs';
+export { ItemGroupFooter as ListGroupFooter, ItemGroupHeader as ListGroupHeader, ItemGroupFooter as MenuGroupFooter, ItemGroupHeader as MenuGroupHeader } from './chunk-2DDJ53DK.mjs';
+export { LabelValue } from './chunk-3VHFOSZR.mjs';
+export { ListItem } from './chunk-6T2DVIQT.mjs';
+export { MediaCard } from './chunk-MSS3CD6F.mjs';
+export { MenuItem } from './chunk-BTPCY4C7.mjs';
+export { DetailRow } from './chunk-3RIZCKRM.mjs';
+export { EmptyState } from './chunk-W422TEH2.mjs';
+export { ErrorBoundary } from './chunk-DLAOTHHS.mjs';
+export { Form, FormField, FormFooter, FormSection } from './chunk-GR7PKEKD.mjs';
+export { IconPicker } from './chunk-MQAK2W6L.mjs';
+export { Spinner } from './chunk-K3V6OTVB.mjs';
+export { Image } from './chunk-VISIOH33.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-TMH263OK.mjs';
-export { CategoryStrip } from './chunk-5MYNAAFE.mjs';
-export { Checkbox } from './chunk-4ZO5PTKF.mjs';
-export { Chip, ChipGroup } from './chunk-RA6SAAFE.mjs';
-export { ConfirmDialog } from './chunk-V2ZB2XNS.mjs';
-export { CurrencyDisplay } from './chunk-PI6RULJX.mjs';
-export { CurrencyInput } from './chunk-HUSSF6TF.mjs';
-export { Input } from './chunk-4NQFTHN3.mjs';
-export { Accordion } from './chunk-CBIZLRYH.mjs';
-export { AlertBanner } from './chunk-K7TKID3V.mjs';
-export { AppHeader } from './chunk-6CR4S6W2.mjs';
-export { IconButton } from './chunk-ZTPYUU5C.mjs';
-export { Avatar, AvatarGroup } from './chunk-IGU223UM.mjs';
-export { Badge } from './chunk-AZV7KNJI.mjs';
-export { Button } from './chunk-Y6YS33GM.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-UEA2VYGW.mjs';
+export { CategoryStrip } from './chunk-5J7VKFSZ.mjs';
+export { Checkbox } from './chunk-AZRATPNP.mjs';
+export { Chip, ChipGroup } from './chunk-BWLVX2SQ.mjs';
+export { ConfirmDialog } from './chunk-BGXOEFDM.mjs';
+export { useSheetModal } from './chunk-HMKJGVXA.mjs';
+export { CurrencyDisplay } from './chunk-EQYTDFDD.mjs';
+export { CurrencyInput } from './chunk-EQNCMDZC.mjs';
+export { Input } from './chunk-3GE4UFV5.mjs';
+export { Accordion } from './chunk-Y5TPAKOS.mjs';
+export { AlertBanner } from './chunk-K4YFTUMC.mjs';
+export { AppHeader } from './chunk-2J5OZOMX.mjs';
+export { IconButton } from './chunk-ZRUUUVOO.mjs';
+export { Avatar, AvatarGroup } from './chunk-SWUZKVYO.mjs';
+export { Badge } from './chunk-YKWIMVGU.mjs';
+export { Button } from './chunk-AHFEAY6M.mjs';
 import './chunk-M53LC4Q7.mjs';
 import './chunk-IFYMBOEN.mjs';
-export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync } from './chunk-ARONDO7M.mjs';
-export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
-export { Icon } from './chunk-MZ6WRTD2.mjs';
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, hexToRgb, useTheme, withAlpha } from './chunk-KSSVIFYR.mjs';
+export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync } from './chunk-CTUFFKGS.mjs';
+export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-DYYPDQA2.mjs';
+export { Icon } from './chunk-24JTXQ2M.mjs';
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, hexToRgb, useTheme, withAlpha } from './chunk-ZQGCQ7SA.mjs';
 import './chunk-2CE3TQVY.mjs';
-import './chunk-Y6FXYEAI.mjs';
-import { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+function ListGroup(props) {
+  return /* @__PURE__ */ React.createElement(ItemGroup, { childPropKey: "title", ...props });
+}
+ListGroup.Header = ItemGroupHeader;
+ListGroup.Footer = ItemGroupFooter;
+function MenuGroup(props) {
+  return /* @__PURE__ */ React.createElement(ItemGroup, { childPropKey: "onPress", ...props });
+}
+MenuGroup.Header = ItemGroupHeader;
+MenuGroup.Footer = ItemGroupFooter;
 
 // src/utils/typography.ts
 function getResponsiveFontSize(text, maxSize, steps = [
@@ -78,18 +92,12 @@ function getResponsiveFontSize(text, maxSize, steps = [
 function useConfirmDialog(options) {
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
-  const mountedRef = useRef(true);
   const onConfirmRef = useRef(options.onConfirm);
   const onCancelRef = useRef(options.onCancel);
   useEffect(() => {
     onConfirmRef.current = options.onConfirm;
     onCancelRef.current = options.onCancel;
   });
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
   const open = useCallback(() => setVisible(true), []);
   const handleConfirm = useCallback(async () => {
     setLoading(true);
@@ -97,10 +105,8 @@ function useConfirmDialog(options) {
       await onConfirmRef.current();
     } catch {
     } finally {
-      if (mountedRef.current) {
-        setLoading(false);
-        setVisible(false);
-      }
+      setLoading(false);
+      setVisible(false);
     }
   }, []);
   const handleCancel = useCallback(() => {
@@ -110,4 +116,4 @@ function useConfirmDialog(options) {
   return { visible, loading, open, onConfirm: handleConfirm, onCancel: handleCancel };
 }
 
-export { getResponsiveFontSize, useConfirmDialog };
+export { ListGroup, MenuGroup, getResponsiveFontSize, useConfirmDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "13.0.0",
+  "version": "13.4.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -26,11 +26,12 @@
     "dist",
     "src",
     "scripts",
-    "COMPONENTS.md",
     "CONSUMER.md",
     "EXAMPLES.md",
     "FONTS.md",
-    "DESIGN.md"
+    "DESIGN.md",
+    "SKILL.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "postinstall": "node scripts/copy-fonts.js",
@@ -66,8 +67,9 @@
     "expo-font": ">=14.0.0",
     "expo-haptics": ">=14.0.0",
     "expo-image": ">=3.0.0",
-    "expo-image-picker": ">=15.0.0",
+    "react-native-image-picker": ">=7.0.0",
     "expo-linear-gradient": ">=13.0.0",
+    "expo-modules-core": ">=3.0.0",
     "expo-sensors": ">=13.0.0",
     "pressto": ">=0.6.0",
     "react": ">=17",
@@ -89,14 +91,15 @@
     "expo-sensors": {
       "optional": true
     },
-"expo-image-picker": {
-      "optional": true
-    },
+
     "react-native-ease": {
       "optional": false
     },
     "pressto": {
       "optional": false
+    },
+    "react-native-image-picker": {
+      "optional": true
     }
   },
   "pnpm": {
@@ -133,21 +136,21 @@
     "expo-haptics": "~15.0.8",
     "expo-image": "~3.0.11",
     "expo-linear-gradient": "~15.0.8",
-    "expo-sensors": "~15.0.7",
+    "expo-sensors": "~15.0.8",
     "jest-expo": "~54.0.17",
-    "pressto": "^0.6.1",
+    "pressto": "^0.7.0",
     "prettier": "^3.8.3",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-ease": "^0.7.2",
+    "react-native-ease": "^0.7.3",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "5.6.2",
     "react-native-screens": "4.16.0",
     "react-native-size-matters": "^0.4.2",
-    "react-native-svg": "15.12.1",
+    "react-native-svg": "15.15.5",
     "react-native-worklets": "~0.5.1",
-    "sonner-native": "0.23.1",
+    "sonner-native": "0.26.3",
     "test-renderer": "^1.2.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",

package/src/components/Accordion/Accordion.tsx

@@ -8,7 +8,6 @@ import {
 import Animated, {
   Easing,
   useSharedValue,
-  useDerivedValue,
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated'
@@ -30,12 +29,14 @@ export interface AccordionItem {
   icon?: React.ReactNode
   /** Override icon color. Defaults to foregroundMuted. */
   iconColor?: string
+  /**
   /**
    * Action buttons rendered after the trigger content but before the chevron.
    * Automatically touch-isolated — taps on actions won't toggle the accordion.
    * Use this instead of embedding interactive elements inside `trigger`.
    */
   triggerActions?: React.ReactNode
+  accessibilityHint?: string
 }
 
 export interface AccordionProps {
@@ -74,29 +75,21 @@ function AccordionItemComponent({
     isExpanded.value = isOpen
   }, [isOpen, isExpanded])
 
-  // Derived animated height — height * Number(isExpanded) gives 0 when closed and
-  // the measured height when open. `withTiming` wraps it so every change animates.
-  const derivedHeight = useDerivedValue(() =>
-    withTiming(height.value * Number(isExpanded.value), {
-      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
-      easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease),
-    })
-  )
-
-  const derivedRotation = useDerivedValue(() =>
-    withTiming(isExpanded.value ? 1 : 0, {
+  const bodyStyle = useAnimatedStyle(() => ({
+    height: withTiming(height.value * Number(isExpanded.value), {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
       easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease),
-    })
-  )
-
-  const bodyStyle = useAnimatedStyle(() => ({
-    height: derivedHeight.value,
+    }),
     overflow: 'hidden',
   }))
 
   const rotationStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${derivedRotation.value * 180}deg` }],
+    transform: [{
+      rotate: `${withTiming(isExpanded.value ? 1 : 0, {
+        duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+        easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease),
+      }) * 180}deg`,
+    }],
   }))
 
   return (
@@ -111,6 +104,7 @@ function AccordionItemComponent({
         accessibilityRole="button"
         accessibilityState={{ expanded: isOpen }}
         accessibilityLabel={typeof item.trigger === 'string' ? item.trigger : undefined}
+        accessibilityHint={item.accessibilityHint}
         style={styles.trigger}
       >
         <View style={styles.triggerContent}>

package/src/components/AppHeader/AppHeader.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ViewStyle, useWindowDimensions } from 'react-na
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
 import { IconButton } from '../IconButton'
+import { Icon } from '../../utils/icons'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { BREAKPOINTS } from '../../tokens'
 
@@ -15,7 +16,9 @@ export interface AppHeaderProps {
   onBack?: () => void
   /** Icon name for the back button. Defaults to `'chevron-left'`. */
   backIconName?: string
-  /** Custom left content — overrides the back button. */
+  /** Icon name for a decorative icon shown left of the title, after the back button. Ignored when `left` is provided. */
+  iconName?: string
+  /** Custom left content — overrides the back button and `iconName`. */
   left?: React.ReactNode
   /** Custom right content (actions). */
   right?: React.ReactNode
@@ -40,12 +43,14 @@ export interface AppHeaderProps {
  *
  * @example
  * <AppHeader title="Settings" onBack={navigation.goBack} right={<IconButton iconName="more-horizontal" variant="text" />} />
+ * <AppHeader title="Perfil" iconName="user" onBack={navigation.goBack} />
  */
 export function AppHeader({
   title,
   subtitle,
   onBack,
   backIconName = 'chevron-left',
+  iconName,
   left,
   right,
   titleAlign = 'auto',
@@ -61,15 +66,24 @@ export function AppHeader({
   const isWide = width >= BREAKPOINTS.wide
   const centered = titleAlign === 'center' || (titleAlign === 'auto' && isWide)
 
-  const leftNode = left ?? (onBack ? (
-    <IconButton
-      iconName={backIconName}
-      variant="text"
-      size="md"
-      onPress={onBack}
-      accessibilityLabel="Atrás"
-    />
-  ) : null)
+  const leftNode = left ?? (
+    <>
+      {onBack ? (
+        <IconButton
+          iconName={backIconName}
+          variant="text"
+          size="md"
+          onPress={onBack}
+          accessibilityLabel="Atrás"
+        />
+      ) : null}
+      {iconName && !left ? (
+        <View style={styles.iconSlot}>
+          <Icon name={iconName} size={20} color={colors.foreground} />
+        </View>
+      ) : null}
+    </>
+  )
 
   const titleBlock = (
     <View style={[styles.titleBlock, centered && styles.titleBlockCentered]} pointerEvents="none">
@@ -143,9 +157,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
+    paddingLeft: s(8),
+    gap: s(4),
   },
   sideRight: {
     justifyContent: 'flex-end',
+    paddingRight: s(8),
   },
   titleBlock: {
     flex: 1,
@@ -166,6 +183,12 @@ const styles = StyleSheet.create({
     fontSize: ms(13),
     lineHeight: mvs(16),
   },
+  iconSlot: {
+    width: s(44),
+    height: s(44),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   textCentered: {
     textAlign: 'center',
   },

package/src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ export interface CheckboxProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 export function Checkbox({
@@ -23,6 +24,7 @@ export function Checkbox({
   disabled,
   style,
   accessibilityLabel,
+  accessibilityHint,
 }: CheckboxProps) {
   const { colors } = useTheme()
 
@@ -43,6 +45,7 @@ export function Checkbox({
       touchSoundDisabled
       accessibilityRole="checkbox"
       accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint}
       accessibilityState={{ checked, disabled: !!disabled }}
     >
       <EaseView

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useId } from 'react'
+import React, { useCallback, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import {
   BottomSheetModal,
@@ -8,8 +8,9 @@ import {
 } from '@gorhom/bottom-sheet'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Feather } from '@expo/vector-icons'
-import { impactMedium, notificationSuccess, selectionAsync as hapticSelection } from '../../utils/haptics'
+import { notificationSuccess, selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { useSheetModal } from '../../hooks/useSheetModal'
 import { Button } from '../Button'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 
@@ -24,6 +25,7 @@ export interface ConfirmDialogProps {
   showCloseButton?: boolean
   onConfirm: () => void
   onCancel: () => void
+  accessibilityHint?: string
 }
 
 export function ConfirmDialog({
@@ -37,30 +39,13 @@ export function ConfirmDialog({
   showCloseButton = false,
   onConfirm,
   onCancel,
+  accessibilityHint,
 }: ConfirmDialogProps) {
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
-  const ref = useRef<BottomSheetModal>(null)
-  const wasOpened = useRef(false)
-  const isPresentedRef = useRef(false)
+  const { ref, handleDismiss } = useSheetModal(visible, onCancel)
   const name = useId()
 
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false
-    onCancel()
-  }, [onCancel])
-
-  useEffect(() => {
-    if (visible && !isPresentedRef.current) {
-      impactMedium()
-      ref.current?.present()
-      wasOpened.current = true
-      isPresentedRef.current = true
-    } else if (!visible && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss()
-    }
-  }, [visible])
-
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
@@ -122,6 +107,7 @@ export function ConfirmDialog({
               notificationSuccess()
               onConfirm()
             }}
+            accessibilityHint={accessibilityHint}
             icon={
               <Feather
                 name={confirmVariant === 'destructive' ? 'trash-2' : 'check'}

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -8,6 +8,8 @@ import { impactLight } from '../../utils/haptics'
 
 export interface ErrorFallbackProps {
   error: Error
+  /** Stack trace from the error boundary. */
+  componentStack: string
   /** Reset the boundary and attempt to re-render children. */
   reset: () => void
 }
@@ -97,13 +99,14 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
     const { error } = this.state
     if (error) {
       const { fallback, title, message } = this.props
+      const componentStack = error.stack ?? ''
       if (typeof fallback === 'function') {
-        return fallback({ error, reset: this.reset })
+        return fallback({ error, componentStack, reset: this.reset })
       }
       if (fallback !== undefined) {
         return fallback
       }
-      return <DefaultErrorFallback error={error} reset={this.reset} title={title} message={message} />
+      return <DefaultErrorFallback error={error} componentStack={componentStack} reset={this.reset} title={title} message={message} />
     }
     return this.props.children
   }

package/src/components/Image/Image.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { View, type ImageStyle } from 'react-native'
+import { Image as ExpoImage, type ImageProps as ExpoImageProps } from 'expo-image'
+import { useTheme } from '../../theme'
+
+export interface ImageProps extends Omit<ExpoImageProps, 'source' | 'style'> {
+  /** Image source URI. */
+  src?: string | null
+  /** Custom fallback shown when image fails to load or src is null. */
+  fallback?: React.ReactNode
+  /** Aspect ratio width/height — e.g. 16/9, 4/3. Sets container height proportionally. */
+  aspectRatio?: number
+  /** Border radius override. Defaults to 0. */
+  borderRadius?: number
+  style?: ImageStyle
+}
+
+export function Image({ src, fallback, aspectRatio, borderRadius = 0, style, ...props }: ImageProps) {
+  const { colors } = useTheme()
+  const [failed, setFailed] = useState(false)
+
+  if (!src || failed) {
+    return fallback ? (
+      <View style={[style, { overflow: 'hidden' }]}>{fallback}</View>
+    ) : (
+      <View
+        style={[
+          { backgroundColor: colors.skeleton, overflow: 'hidden' },
+          borderRadius ? { borderRadius } : undefined,
+          aspectRatio ? { aspectRatio } : undefined,
+          style,
+        ]}
+      />
+    )
+  }
+
+  const imageStyle: ImageStyle = {
+    ...(aspectRatio ? { aspectRatio, width: '100%' as const } : {}),
+    ...(borderRadius ? { borderRadius } : {}),
+  }
+
+  return (
+    <ExpoImage
+      source={{ uri: src }}
+      style={[imageStyle, style]}
+      onError={() => setFailed(true)}
+      {...props}
+    />
+  )
+}

package/src/components/Image/index.ts

@@ -0,0 +1,2 @@
+export { Image } from './Image'
+export type { ImageProps } from './Image'