@retray-dev/ui-kit 9.0.0 → 9.2.0

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -19,6 +19,8 @@ export interface ConfirmDialogProps {
   confirmLabel?: string
   cancelLabel?: string
   confirmVariant?: 'primary' | 'destructive'
+  /** Show a loading spinner in the confirm button (e.g. while async action completes). */
+  loading?: boolean
   onConfirm: () => void
   onCancel: () => void
 }
@@ -30,6 +32,7 @@ export function ConfirmDialog({
   confirmLabel = 'Confirm',
   cancelLabel = 'Cancel',
   confirmVariant = 'primary',
+  loading = false,
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
@@ -78,6 +81,8 @@ export function ConfirmDialog({
             label={confirmLabel}
             variant={confirmVariant}
             fullWidth
+            loading={loading}
+            disabled={loading}
             onPress={() => { notificationSuccess(); onConfirm() }}
             icon={
               <Feather

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -22,6 +22,8 @@ export interface CurrencyInputProps {
   editable?: boolean
   containerStyle?: ViewStyle
   style?: TextStyle
+  /** Use inside a Sheet/BottomSheet — passes sheetMode to the underlying Input. */
+  sheetMode?: boolean
 }
 
 function formatCurrency(raw: string, separator: '.' | ','): string {
@@ -44,6 +46,7 @@ export function CurrencyInput({
   editable,
   containerStyle,
   style,
+  sheetMode,
 }: CurrencyInputProps) {
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
@@ -83,6 +86,7 @@ export function CurrencyInput({
       containerStyle={containerStyle}
       inputWrapperStyle={isLarge ? { paddingVertical: vs(16), minHeight: 72 } : undefined}
       style={[inputStyle, style]}
+      sheetMode={sheetMode}
     />
   )
 }

package/src/components/ImageUpload/ImageUpload.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import { View, Text, Image, StyleSheet, ViewStyle, Platform } from 'react-native'
+import { Feather } from '@expo/vector-icons'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+import { Spinner } from '../Spinner'
+import { PressableCard } from '../../utils/pressable'
+
+export interface ImageUploadProps {
+  /** Current image URI. Pass null/undefined to show placeholder. */
+  value?: string | null
+  /** Called with the selected image URI. Receives null when image is cleared. */
+  onChange?: (uri: string | null) => void
+  /** Show a loading spinner over the image (e.g. while uploading). */
+  loading?: boolean
+  /** Text shown when no image is selected. */
+  placeholder?: string
+  /** Width of the upload area. Defaults to full width (undefined). */
+  width?: number
+  /** Height of the upload area. Defaults to 200. */
+  height?: number
+  /** Border radius of the upload area. Defaults to RADIUS.lg. */
+  borderRadius?: number
+  /** Aspect ratio for the selected image. Defaults to 'cover'. */
+  resizeMode?: 'cover' | 'contain' | 'stretch'
+  disabled?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
+}
+
+export function ImageUpload({
+  value,
+  onChange,
+  loading = false,
+  placeholder = 'Tap to add image',
+  width,
+  height = 200,
+  borderRadius = RADIUS.lg,
+  resizeMode = 'cover',
+  disabled = false,
+  style,
+  accessibilityLabel,
+}: ImageUploadProps) {
+  const { colors } = useTheme()
+
+  const handlePress = async () => {
+    if (disabled || loading) return
+    impactLight()
+
+    // Dynamic import so expo-image-picker is optional at module load time.
+    // Consumers who don't use ImageUpload never pull this dep.
+    let ImagePicker: typeof import('expo-image-picker')
+    try {
+      ImagePicker = await import('expo-image-picker')
+    } catch {
+      if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed. Add it as a dependency.')
+      return
+    }
+
+    if (Platform.OS !== 'web') {
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
+      if (status !== 'granted') return
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 0.8,
+    })
+
+    if (!result.canceled && result.assets[0]) {
+      onChange?.(result.assets[0].uri)
+    }
+  }
+
+  const containerStyle: ViewStyle = {
+    width,
+    height,
+    borderRadius,
+    borderWidth: value ? 0 : 1,
+    borderStyle: 'dashed',
+    borderColor: colors.border,
+    backgroundColor: value ? 'transparent' : colors.surface,
+    overflow: 'hidden',
+  }
+
+  return (
+    <PressableCard
+      onPress={handlePress}
+      enabled={!disabled && !loading}
+      rippleColor="transparent"
+      touchSoundDisabled
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? (value ? 'Change image' : placeholder)}
+      accessibilityState={{ disabled: disabled || loading }}
+      style={[containerStyle, style]}
+    >
+      {value ? (
+        <Image
+          source={{ uri: value }}
+          style={[StyleSheet.absoluteFillObject, { borderRadius }]}
+          resizeMode={resizeMode}
+        />
+      ) : (
+        <View style={styles.placeholder}>
+          <Feather name="image" size={ms(28)} color={colors.foregroundMuted} />
+          <Text style={[styles.placeholderText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+            {placeholder}
+          </Text>
+        </View>
+      )}
+      {loading ? (
+        <View style={[styles.loadingOverlay, { backgroundColor: colors.overlay }]}>
+          <Spinner size="md" />
+        </View>
+      ) : null}
+      {value && !loading ? (
+        <View style={styles.editBadge} pointerEvents="none">
+          <View style={[styles.editBadgeInner, { backgroundColor: colors.overlay }]}>
+            <Feather name="edit-2" size={ms(12)} color="#fff" />
+          </View>
+        </View>
+      ) : null}
+    </PressableCard>
+  )
+}
+
+const styles = StyleSheet.create({
+  placeholder: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: vs(8),
+  },
+  placeholderText: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  editBadge: {
+    position: 'absolute',
+    bottom: vs(8),
+    right: s(8),
+  },
+  editBadgeInner: {
+    width: s(28),
+    height: s(28),
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/ImageUpload/index.ts

@@ -0,0 +1 @@
+export * from './ImageUpload'

package/src/components/Input/Input.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform } from 'react-native'
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet'
 import Animated, {
   useAnimatedStyle,
   interpolateColor,
@@ -33,9 +34,11 @@ export interface InputProps extends TextInputProps {
   type?: 'text' | 'password'
   containerStyle?: ViewStyle
   inputWrapperStyle?: ViewStyle
+  /** Use inside a Sheet/BottomSheet — swaps TextInput for BottomSheetTextInput to fix keyboard handling. */
+  sheetMode?: boolean
 }
 
-export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps) {
+export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, sheetMode = false, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
@@ -100,28 +103,53 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
             <View style={styles.prefixContainer}>{effectivePrefix}</View>
           )
         ) : null}
-        <TextInput
-          style={[
-            styles.input,
-            { color: colors.foreground },
-            webInputResetStyle,
-            style,
-          ]}
-          onFocus={(e) => {
-            setFocused(true)
-            onFocus?.(e)
-          }}
-          onBlur={(e) => {
-            setFocused(false)
-            onBlur?.(e)
-          }}
-          placeholderTextColor={colors.foregroundMuted}
-          allowFontScaling={true}
-          secureTextEntry={effectiveSecure}
-          editable={isDisabled ? false : editable}
-          accessibilityLabel={accessibilityLabel ?? label}
-          {...props}
-        />
+        {sheetMode ? (
+          <BottomSheetTextInput
+            style={[
+              styles.input,
+              { color: colors.foreground },
+              webInputResetStyle as TextStyle,
+              style,
+            ]}
+            onFocus={(e) => {
+              setFocused(true)
+              onFocus?.(e)
+            }}
+            onBlur={(e) => {
+              setFocused(false)
+              onBlur?.(e)
+            }}
+            placeholderTextColor={colors.foregroundMuted}
+            allowFontScaling={true}
+            secureTextEntry={effectiveSecure}
+            editable={isDisabled ? false : editable}
+            accessibilityLabel={accessibilityLabel ?? label}
+            {...props}
+          />
+        ) : (
+          <TextInput
+            style={[
+              styles.input,
+              { color: colors.foreground },
+              webInputResetStyle,
+              style,
+            ]}
+            onFocus={(e) => {
+              setFocused(true)
+              onFocus?.(e)
+            }}
+            onBlur={(e) => {
+              setFocused(false)
+              onBlur?.(e)
+            }}
+            placeholderTextColor={colors.foregroundMuted}
+            allowFontScaling={true}
+            secureTextEntry={effectiveSecure}
+            editable={isDisabled ? false : editable}
+            accessibilityLabel={accessibilityLabel ?? label}
+            {...props}
+          />
+        )}
         {effectiveSuffix ? (
           typeof effectiveSuffix === 'string' ? (
             <Text style={[styles.suffixText, { color: colors.foregroundMuted }, suffixStyle]} allowFontScaling={true}>

package/src/components/ListItem/ListItem.tsx

@@ -72,6 +72,8 @@ export interface ListItemProps {
   titleStyle?: TextStyle
   /** Style applied to the subtitle Text. */
   subtitleStyle?: TextStyle
+  /** Max lines for the subtitle. Defaults to 2. */
+  subtitleNumberOfLines?: number
   /** Style applied to the caption Text. */
   captionStyle?: TextStyle
   /** Accessibility label override. Defaults to the title. */
@@ -98,6 +100,7 @@ function ListItemBase({
   style,
   titleStyle,
   subtitleStyle,
+  subtitleNumberOfLines = 2,
   captionStyle,
   accessibilityLabel,
 }: ListItemProps) {
@@ -150,7 +153,7 @@ function ListItemBase({
         {subtitle ? (
           <Text
             style={[styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle]}
-            numberOfLines={2}
+            numberOfLines={subtitleNumberOfLines}
             allowFontScaling={true}
           >
             {subtitle}

package/src/components/SheetSelect/SheetSelect.tsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { View, Text, ScrollView, StyleSheet, ViewStyle } from 'react-native'
+import { EaseView } from 'react-native-ease'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { COLOR_TRANSITION } from '../../utils/animations'
+import { PressableChip } from '../../utils/pressable'
+import { RADIUS } from '../../tokens'
+
+export interface SheetSelectOption {
+  label: string
+  value: string | number
+  iconName?: string
+  disabled?: boolean
+}
+
+export interface SheetSelectProps {
+  options: SheetSelectOption[]
+  value?: string | number | (string | number)[]
+  onValueChange?: (value: string | number | (string | number)[]) => void
+  /** Allow multiple simultaneous selections. Defaults to false (radio). */
+  multiSelect?: boolean
+  label?: string
+  error?: string
+  /** Wrap chips into multiple rows instead of a single horizontal scroll. Defaults to false. */
+  wrap?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
+}
+
+function SheetSelectChip({
+  option,
+  selected,
+  onPress,
+}: {
+  option: SheetSelectOption
+  selected: boolean
+  onPress: () => void
+}) {
+  const { colors } = useTheme()
+
+  const handlePress = () => {
+    hapticSelection()
+    onPress()
+  }
+
+  const iconColor = selected ? colors.primaryForeground : colors.foreground
+  const resolvedIcon = option.iconName ? renderIcon(option.iconName, ms(13), iconColor) : null
+
+  return (
+    <PressableChip
+      onPress={option.disabled ? undefined : handlePress}
+      rippleColor="transparent"
+      touchSoundDisabled
+      accessibilityRole="button"
+      accessibilityLabel={option.disabled ? `${option.label}, unavailable` : option.label}
+      accessibilityState={{ selected, disabled: option.disabled }}
+    >
+      <EaseView
+        style={[styles.chip, option.disabled && styles.chipDisabled]}
+        animate={{
+          backgroundColor: selected ? colors.primary : colors.surface,
+          borderColor: selected ? colors.primary : colors.border,
+        }}
+        transition={COLOR_TRANSITION}
+      >
+        {resolvedIcon ? <View style={styles.chipIcon}>{resolvedIcon}</View> : null}
+        <Text
+          style={[styles.chipLabel, { color: selected ? colors.primaryForeground : colors.foreground }]}
+          allowFontScaling={true}
+        >
+          {option.label}
+        </Text>
+      </EaseView>
+    </PressableChip>
+  )
+}
+
+export function SheetSelect({
+  options,
+  value,
+  onValueChange,
+  multiSelect = false,
+  label,
+  error,
+  wrap = false,
+  style,
+  accessibilityLabel,
+}: SheetSelectProps) {
+  const { colors } = useTheme()
+
+  const isSelected = (optionValue: string | number): boolean => {
+    if (Array.isArray(value)) return value.includes(optionValue)
+    return optionValue === value
+  }
+
+  const handlePress = (optionValue: string | number) => {
+    if (!multiSelect) {
+      onValueChange?.(optionValue)
+      return
+    }
+    const currentArray = Array.isArray(value) ? value : value != null ? [value] : []
+    const alreadySelected = currentArray.includes(optionValue)
+    const newArray: (string | number)[] = alreadySelected
+      ? currentArray.filter((v) => v !== optionValue)
+      : [...currentArray, optionValue]
+    onValueChange?.(newArray)
+  }
+
+  const chips = options.map((opt) => (
+    <SheetSelectChip
+      key={opt.value}
+      option={opt}
+      selected={isSelected(opt.value)}
+      onPress={() => handlePress(opt.value)}
+    />
+  ))
+
+  return (
+    <View style={[styles.container, style]} accessibilityLabel={accessibilityLabel}>
+      {label ? (
+        <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
+          {label}
+        </Text>
+      ) : null}
+      {wrap ? (
+        <View style={styles.wrapContainer}>{chips}</View>
+      ) : (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.scrollContent}
+        >
+          {chips}
+        </ScrollView>
+      )}
+      {error ? (
+        <Text style={[styles.error, { color: colors.destructive }]} allowFontScaling={true} accessibilityLiveRegion="polite">
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: vs(8),
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(14),
+  },
+  scrollContent: {
+    flexDirection: 'row',
+    gap: s(8),
+  },
+  wrapContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: s(8),
+  },
+  chip: {
+    borderRadius: RADIUS.full,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(10),
+    minHeight: 44,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: s(5),
+  },
+  chipDisabled: {
+    opacity: 0.4,
+  },
+  chipIcon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chipLabel: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+  },
+  error: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+  },
+})

package/src/components/SheetSelect/index.ts

@@ -0,0 +1 @@
+export * from './SheetSelect'

package/src/hooks/useConfirmDialog.ts

@@ -0,0 +1,67 @@
+import { useState, useCallback } from 'react'
+
+export interface UseConfirmDialogOptions {
+  onConfirm: () => void | Promise<void>
+  onCancel?: () => void
+}
+
+export interface UseConfirmDialogResult<T> {
+  /** Pass to ConfirmDialog `visible` prop. */
+  visible: boolean
+  /** The value passed to `open()` — available during the confirmation flow. */
+  target: T | null
+  /** Whether `onConfirm` is currently executing. Pass to ConfirmDialog `loading` prop. */
+  loading: boolean
+  /** Open the dialog, optionally with an associated value (e.g. the item to delete). */
+  open: (target?: T) => void
+  /** Handlers to pass directly to ConfirmDialog. */
+  dialogProps: {
+    visible: boolean
+    loading: boolean
+    onConfirm: () => void
+    onCancel: () => void
+  }
+}
+
+export function useConfirmDialog<T = undefined>(
+  options: UseConfirmDialogOptions,
+): UseConfirmDialogResult<T> {
+  const [visible, setVisible] = useState(false)
+  const [target, setTarget] = useState<T | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const open = useCallback((t?: T) => {
+    setTarget(t ?? null)
+    setVisible(true)
+  }, [])
+
+  const handleConfirm = useCallback(async () => {
+    setLoading(true)
+    try {
+      await options.onConfirm()
+    } finally {
+      setLoading(false)
+      setVisible(false)
+      setTarget(null)
+    }
+  }, [options])
+
+  const handleCancel = useCallback(() => {
+    setVisible(false)
+    setTarget(null)
+    options.onCancel?.()
+  }, [options])
+
+  return {
+    visible,
+    target,
+    loading,
+    open,
+    dialogProps: {
+      visible,
+      loading,
+      onConfirm: handleConfirm,
+      onCancel: handleCancel,
+    },
+  }
+}

package/src/index.ts

@@ -53,6 +53,8 @@ export * from './components/SelectableGrid'
 export * from './components/PricingCard'
 export * from './components/TabBar'
 export * from './components/ImageViewer'
+export * from './components/SheetSelect'
+export * from './components/ImageUpload'
 // HolographicCard is intentionally NOT re-exported here — it depends on the
 // optional peer @shopify/react-native-skia, so it must stay out of the main
 // barrel's module graph. Deep-import it: '@retray-dev/ui-kit/HolographicCard'.
@@ -76,6 +78,10 @@ export {
   richHaptics,
 } from './utils/haptics'
 
+// Hooks
+export { useConfirmDialog } from './hooks/useConfirmDialog'
+export type { UseConfirmDialogOptions, UseConfirmDialogResult } from './hooks/useConfirmDialog'
+
 // Design tokens
 export {
   SPACING,