@retray-dev/ui-kit 13.0.0 → 13.2.0

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useId } from 'react'
+import React, { useCallback, useEffect, useRef, useState, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import {
   BottomSheetModal,
@@ -24,6 +24,7 @@ export interface ConfirmDialogProps {
   showCloseButton?: boolean
   onConfirm: () => void
   onCancel: () => void
+  accessibilityHint?: string
 }
 
 export function ConfirmDialog({
@@ -37,29 +38,43 @@ export function ConfirmDialog({
   showCloseButton = false,
   onConfirm,
   onCancel,
+  accessibilityHint,
 }: ConfirmDialogProps) {
+  type DialogState = 'idle' | 'presenting' | 'presented' | 'dismissing'
+
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const ref = useRef<BottomSheetModal>(null)
-  const wasOpened = useRef(false)
-  const isPresentedRef = useRef(false)
+  const dialogState = useRef<DialogState>('idle')
+  const onCancelRef = useRef(onCancel)
   const name = useId()
+  const [tick, setTick] = useState(0)
 
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false
-    onCancel()
+  useEffect(() => {
+    onCancelRef.current = onCancel
   }, [onCancel])
 
+  const handleDismiss = useCallback(() => {
+    dialogState.current = 'idle'
+    onCancelRef.current?.()
+    setTick((t) => t + 1)
+  }, [])
+
   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()
+    if (visible) {
+      if (dialogState.current === 'idle') {
+        dialogState.current = 'presenting'
+        impactMedium()
+        ref.current?.present()
+        dialogState.current = 'presented'
+      }
+    } else {
+      if (dialogState.current === 'presented' || dialogState.current === 'presenting') {
+        dialogState.current = 'dismissing'
+        ref.current?.dismiss()
+      }
     }
-  }, [visible])
+  }, [visible, tick])
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
@@ -122,6 +137,7 @@ export function ConfirmDialog({
               notificationSuccess()
               onConfirm()
             }}
+            accessibilityHint={accessibilityHint}
             icon={
               <Feather
                 name={confirmVariant === 'destructive' ? 'trash-2' : 'check'}

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,7 +136,7 @@ export function ImageUpload({
           ) : null}
         </View>
       )}
-      {loading ? (
+      {loading || isPicking ? (
         <View style={[styles.loadingOverlay, { backgroundColor: colors.overlay }]}>
           <Spinner size="md" />
         </View>
@@ -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/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/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/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)
@@ -93,6 +95,7 @@ export function Select({
           touchSoundDisabled
           accessibilityRole="combobox"
           accessibilityLabel={accessibilityLabel ?? label}
+          accessibilityHint={accessibilityHint}
           accessibilityValue={{ text: selected?.label ?? placeholder }}
           accessibilityState={{ disabled: !!disabled, expanded: pickerVisible }}
         >

package/src/components/SelectableGrid/SelectableGrid.tsx

@@ -58,7 +58,6 @@ function Cell<T extends string | number>({ item, selected, width, onPress }: Cel
         { width },
         styles.cell,
         {
-          backgroundColor: selected ? colors.primary + '14' : colors.surface,
           borderColor: selected ? colors.primary : 'transparent',
         },
         item.disabled && styles.cellDisabled,

package/src/components/Sheet/Sheet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useId } from 'react'
+import React, { useCallback, useEffect, useRef, useState, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
 import {
   BottomSheetModal,
@@ -95,28 +95,41 @@ export function Sheet({
   footer,
   snapPoints,
 }: SheetProps) {
+  type SheetState = 'idle' | 'presenting' | 'presented' | 'dismissing'
+
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const ref = useRef<BottomSheetModal>(null)
-  const wasOpened = useRef(false)
-  const isPresentedRef = useRef(false)
+  const sheetState = useRef<SheetState>('idle')
+  const onCloseRef = useRef(onClose)
   const name = useId()
+  const [tick, setTick] = useState(0)
 
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false
-    onClose?.()
+  useEffect(() => {
+    onCloseRef.current = onClose
   }, [onClose])
 
+  const handleDismiss = useCallback(() => {
+    sheetState.current = 'idle'
+    onCloseRef.current?.()
+    setTick((t) => t + 1)
+  }, [])
+
   useEffect(() => {
-    if (open && !isPresentedRef.current) {
-      impactMedium()
-      ref.current?.present()
-      wasOpened.current = true
-      isPresentedRef.current = true
-    } else if (!open && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss()
+    if (open) {
+      if (sheetState.current === 'idle') {
+        sheetState.current = 'presenting'
+        impactMedium()
+        ref.current?.present()
+        sheetState.current = 'presented'
+      }
+    } else {
+      if (sheetState.current === 'presented' || sheetState.current === 'presenting') {
+        sheetState.current = 'dismissing'
+        ref.current?.dismiss()
+      }
     }
-  }, [open])
+  }, [open, tick])
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (

package/src/components/Sheet/index.ts

@@ -1,2 +1,2 @@
-export { Sheet, BottomSheetModalProvider, SheetTextInput } from './Sheet'
-export type { SheetProps } from './Sheet'
+export { Sheet, SheetHeader, SheetContent, SheetFooter, BottomSheetModalProvider, SheetTextInput } from './Sheet'
+export type { SheetProps, SheetHeaderProps, SheetContentProps, SheetFooterProps } from './Sheet'

package/src/components/Slider/Slider.tsx

@@ -16,6 +16,7 @@ export interface SliderProps {
   showValue?: boolean
   formatValue?: (value: number) => string
   accessibilityLabel?: string
+  accessibilityHint?: string
   disabled?: boolean
   style?: ViewStyle
 }
@@ -31,6 +32,7 @@ export function Slider({
   showValue = false,
   formatValue = (v: number) => v.toFixed(2),
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   style,
 }: SliderProps) {
@@ -50,6 +52,7 @@ export function Slider({
       style={[styles.wrapper, style]}
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint}
       accessibilityValue={{
         min: minimumValue,
         max: maximumValue,

package/src/components/Switch/Switch.tsx

@@ -23,9 +23,10 @@ export interface SwitchProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
-export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
+export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel, accessibilityHint }: SwitchProps) {
   const { colors } = useTheme()
   const isDisabled = !!disabled
 
@@ -41,6 +42,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
         touchSoundDisabled
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ checked, disabled: isDisabled }}
         style={styles.touchable}
       >

package/src/components/Text/Text.tsx

@@ -77,6 +77,7 @@ function warnIfFontsMissing(): void {
   if (fontWarned || typeof __DEV__ === 'undefined' || !__DEV__) return
   fontWarned = true
   if (!expoFontIsLoaded('Sohne-Regular')) {
+    // eslint-disable-next-line no-console
     console.warn('[retray-ui-kit] Sohne fonts not loaded — text falls back to system font.')
   }
 }

package/dist/chunk-Y6FXYEAI.mjs

@@ -1,8 +0,0 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-export { __require };