@retray-dev/ui-kit 10.0.0 → 10.2.0

package/src/components/ImageUpload/ImageUpload.tsx

@@ -17,6 +17,8 @@ export interface ImageUploadProps {
   loading?: boolean
   /** Text shown when no image is selected. */
   placeholder?: string
+  /** Whether to show the placeholder text. Use false for compact/avatar variants. */
+  showPlaceholderText?: boolean
   /** Width of the upload area. Defaults to full width (undefined). */
   width?: number
   /** Height of the upload area. Defaults to 200. */
@@ -35,6 +37,7 @@ export function ImageUpload({
   onChange,
   loading = false,
   placeholder = 'Tap to add image',
+  showPlaceholderText = true,
   width,
   height = 200,
   borderRadius = RADIUS.lg,
@@ -50,27 +53,39 @@ export function ImageUpload({
     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')
+    // Import ExponentImagePicker (the raw native module proxy) directly to
+    // avoid expo-image-picker's top-level createPermissionHook dependency.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let picker: any
     try {
-      ImagePicker = await import('expo-image-picker')
+      const mod = await import('expo-image-picker/build/ExponentImagePicker')
+      picker = (mod as { default: unknown }).default
     } catch {
-      if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed. Add it as a dependency.')
-      return
+      // Fallback: try the main module
+      try {
+        picker = await import('expo-image-picker')
+      } catch {
+        if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed.')
+        return
+      }
     }
 
     if (Platform.OS !== 'web') {
-      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
-      if (status !== 'granted') return
+      try {
+        const { status } = await picker.requestMediaLibraryPermissionsAsync()
+        if (status !== 'granted') return
+      } catch {
+        // Permission check failed — try picker anyway
+      }
     }
 
-    const result = await ImagePicker.launchImageLibraryAsync({
+    const result = await picker.launchImageLibraryAsync({
       mediaTypes: ['images'],
       allowsEditing: true,
       quality: 0.8,
     })
 
-    if (!result.canceled && result.assets[0]) {
+    if (!result.canceled && result.assets?.[0]) {
       onChange?.(result.assets[0].uri)
     }
   }
@@ -106,9 +121,15 @@ export function ImageUpload({
       ) : (
         <View style={styles.placeholder}>
           <Feather name="image" size={ms(28)} color={colors.foregroundMuted} />
-          <Text style={[styles.placeholderText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-            {placeholder}
-          </Text>
+          {showPlaceholderText ? (
+            <Text
+              style={[styles.placeholderText, { color: colors.foregroundMuted }]}
+              numberOfLines={1}
+              allowFontScaling={true}
+            >
+              {placeholder}
+            </Text>
+          ) : null}
         </View>
       )}
       {loading ? (
@@ -137,6 +158,7 @@ const styles = StyleSheet.create({
   placeholderText: {
     fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
+    textAlign: 'center',
   },
   loadingOverlay: {
     ...StyleSheet.absoluteFillObject,

package/src/components/ImageViewer/ImageViewer.tsx

@@ -2,7 +2,8 @@ import React, { useState, useCallback } from 'react'
 import {
   Modal,
   View,
-  TouchableOpacity,
+  Image,
+  Dimensions,
   StyleSheet,
   useWindowDimensions,
   ImageSourcePropType,
@@ -18,7 +19,7 @@ import Animated, {
   runOnJS,
 } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { renderIcon } from '../../utils/icons'
+import { IconButton } from '../IconButton'
 import { PagerDots } from '../PagerDots'
 import { s, vs } from '../../utils/scaling'
 
@@ -102,13 +103,11 @@ function ZoomableImage({ source, width, height, onZoomChange }: ZoomableImagePro
 
   return (
     <GestureDetector gesture={composed}>
-      <Animated.View style={[{ width, height }, styles.imageWrap]}>
-        <Animated.Image
-          source={source}
-          style={[{ width, height }, animatedStyle]}
-          resizeMode="contain"
-        />
-      </Animated.View>
+      <View style={[{ width, height }, styles.imageWrap]} collapsable={false}>
+        <Animated.View style={[{ width, height }, animatedStyle]}>
+          <Image source={source} style={{ width, height }} resizeMode="contain" />
+        </Animated.View>
+      </View>
     </GestureDetector>
   )
 }
@@ -132,7 +131,9 @@ export interface ImageViewerProps {
  * <ImageViewer images={pages} visible={open} initialIndex={page} onClose={() => setOpen(false)} />
  */
 export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: ImageViewerProps) {
-  const { width, height } = useWindowDimensions()
+  const window = useWindowDimensions()
+  const width = window.width > 0 ? window.width : Dimensions.get('window').width
+  const height = window.height > 0 ? window.height : Dimensions.get('window').height
   const insets = useSafeAreaInsets()
   const [index, setIndex] = useState(initialIndex)
   const [pagingEnabled, setPagingEnabled] = useState(true)
@@ -203,7 +204,7 @@ export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: Imag
         <Animated.View style={[styles.backdrop, backdropStyle]} pointerEvents="none" />
         <Animated.View style={[styles.container, dismissStyle]}>
           <GestureDetector gesture={swipeDown}>
-            <Animated.View style={styles.root}>
+            <View style={styles.root} collapsable={false}>
               <ScrollView
                 ref={scrollRef}
                 horizontal
@@ -223,20 +224,20 @@ export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: Imag
                   />
                 ))}
               </ScrollView>
-            </Animated.View>
+            </View>
           </GestureDetector>
 
-          <TouchableOpacity
-            style={[styles.closeButton, { top: insets.top + vs(8) }]}
-            onPress={onClose}
-            activeOpacity={0.7}
-            touchSoundDisabled={true}
-            accessibilityRole="button"
-            accessibilityLabel="Close"
-            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-          >
-            {renderIcon('x', 26, '#fff')}
-          </TouchableOpacity>
+          <View style={[styles.closeButtonWrapper, { top: insets.top + vs(8) }]}>
+            <IconButton
+              iconName="x"
+              size="md"
+              variant="text"
+              style={{ backgroundColor: 'rgba(255,255,255,0.18)' }}
+              iconColor="#fff"
+              onPress={onClose}
+              accessibilityLabel="Close"
+            />
+          </View>
 
           {images.length > 1 ? (
             <View style={[styles.dots, { bottom: insets.bottom + vs(16) }]} pointerEvents="box-none">
@@ -271,15 +272,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     overflow: 'hidden',
   },
-  closeButton: {
+  closeButtonWrapper: {
     position: 'absolute',
     right: s(12),
-    width: s(40),
-    height: s(40),
-    borderRadius: s(20),
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   dots: {
     position: 'absolute',

package/src/components/NumberStepper/NumberStepper.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { RADIUS } from '../../tokens'
+import { PressableButton } from '../../utils/pressable'
+
+export type NumberStepperSize = 'sm' | 'md' | 'lg'
+
+export interface NumberStepperProps {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  size?: NumberStepperSize
+  disabled?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
+}
+
+const sizeConfig: Record<NumberStepperSize, { button: number; icon: number; valueFontSize: number; valueLineHeight: number; valueMinWidth: number }> = {
+  sm: { button: s(40), icon: 16, valueFontSize: ms(18), valueLineHeight: mvs(24), valueMinWidth: s(32) },
+  md: { button: s(44), icon: 18, valueFontSize: ms(22), valueLineHeight: mvs(28), valueMinWidth: s(36) },
+  lg: { button: s(52), icon: 22, valueFontSize: ms(26), valueLineHeight: mvs(32), valueMinWidth: s(40) },
+}
+
+function NumberStepperBase({
+  value,
+  onValueChange,
+  min = 1,
+  max = 99,
+  step = 1,
+  size = 'md',
+  disabled = false,
+  style,
+  accessibilityLabel,
+}: NumberStepperProps) {
+  const { colors } = useTheme()
+
+  const canDecrement = value > min && !disabled
+  const canIncrement = value < max && !disabled
+
+  const handleDecrement = () => {
+    if (!canDecrement) return
+    impactLight()
+    onValueChange(Math.max(min, value - step))
+  }
+
+  const handleIncrement = () => {
+    if (!canIncrement) return
+    impactLight()
+    onValueChange(Math.min(max, value + step))
+  }
+
+  const { button: buttonSize, icon: iconSize, valueFontSize, valueLineHeight, valueMinWidth } = sizeConfig[size]
+
+  const displayValue = String(value)
+
+  return (
+    <View style={[styles.container, style]}>
+      <PressableButton
+        style={[
+          styles.button,
+          {
+            width: buttonSize,
+            height: buttonSize,
+            backgroundColor: colors.surface,
+            borderColor: colors.border,
+          },
+          !canDecrement && styles.buttonDisabled,
+        ]}
+        enabled={canDecrement}
+        onPress={handleDecrement}
+        rippleColor="transparent"
+        touchSoundDisabled
+        accessibilityRole="button"
+        accessibilityLabel={`Decrease, current value ${displayValue}`}
+        accessibilityState={{ disabled: !canDecrement }}
+      >
+        {renderIcon('minus', iconSize, canDecrement ? colors.foreground : colors.foregroundMuted)}
+      </PressableButton>
+      <Text
+        style={[
+          styles.value,
+          {
+            color: colors.foreground,
+            fontSize: valueFontSize,
+            lineHeight: valueLineHeight,
+            minWidth: valueMinWidth,
+          },
+        ]}
+        allowFontScaling={true}
+        accessibilityLabel={accessibilityLabel ?? `Quantity: ${displayValue}`}
+        accessibilityRole="text"
+      >
+        {displayValue}
+      </Text>
+      <PressableButton
+        style={[
+          styles.button,
+          {
+            width: buttonSize,
+            height: buttonSize,
+            backgroundColor: colors.surface,
+            borderColor: colors.border,
+          },
+          !canIncrement && styles.buttonDisabled,
+        ]}
+        enabled={canIncrement}
+        onPress={handleIncrement}
+        rippleColor="transparent"
+        touchSoundDisabled
+        accessibilityRole="button"
+        accessibilityLabel={`Increase, current value ${displayValue}`}
+        accessibilityState={{ disabled: !canIncrement }}
+      >
+        {renderIcon('plus', iconSize, canIncrement ? colors.foreground : colors.foregroundMuted)}
+      </PressableButton>
+    </View>
+  )
+}
+
+export const NumberStepper = React.memo(NumberStepperBase)
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(12),
+  },
+  button: {
+    borderRadius: RADIUS.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+  },
+  buttonDisabled: {
+    opacity: 0.35,
+  },
+  value: {
+    fontFamily: 'Sohne-Medium',
+    textAlign: 'center',
+  },
+})

package/src/components/NumberStepper/index.ts

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

package/src/components/Sheet/Sheet.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, Platform, Modal, ScrollView, useWindowDimensions, Pressable } from 'react-native'
-import {
-  BottomSheetModal,
+import BottomSheet, {
   BottomSheetView,
   BottomSheetScrollView,
   BottomSheetBackdrop,
@@ -149,7 +148,7 @@ export function Sheet({
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const { width: windowWidth } = useWindowDimensions()
-  const ref = useRef<BottomSheetModal>(null)
+  const ref = useRef<BottomSheet>(null)
   const asDialog = responsive && windowWidth >= BREAKPOINTS.wide
   
   // 'interactive' + 'adjustPan' works properly with enableDynamicSizing on both platforms
@@ -159,9 +158,9 @@ export function Sheet({
   useEffect(() => {
     if (open) {
       impactMedium()
-      ref.current?.present()
+      ref.current?.snapToIndex(0)
     } else {
-      ref.current?.dismiss()
+      ref.current?.close()
     }
   }, [open])
 
@@ -193,7 +192,7 @@ export function Sheet({
   const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader
 
   const headerNode = customHeader ? customHeader : (showHeader ? (
-    <View style={styles.header} accessibilityRole="header">
+    <View style={[styles.header, { backgroundColor: colors.card }]} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
           <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
@@ -270,12 +269,13 @@ export function Sheet({
   const useDynamicSizing = !snapPoints
   
   return (
-    <BottomSheetModal
+    <BottomSheet
       ref={ref}
+      index={-1}
+      onClose={onClose}
       enableDynamicSizing={useDynamicSizing}
       snapPoints={snapPoints}
       maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
-      onDismiss={onClose}
       backdropComponent={renderBackdrop}
       footerComponent={effectiveFooter ? renderFooter : undefined}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
@@ -297,6 +297,7 @@ export function Sheet({
           showsVerticalScrollIndicator={true}
           indicatorStyle="black"
           persistentScrollbar={isAndroid}
+          stickyHeaderIndices={headerNode ? [0] : undefined}
         >
           {headerNode}
           {contentNode}
@@ -307,7 +308,7 @@ export function Sheet({
           {contentNode}
         </BottomSheetView>
       )}
-    </BottomSheetModal>
+    </BottomSheet>
   )
 }
 

package/src/components/Switch/Switch.tsx

@@ -14,6 +14,8 @@ const THUMB_OFFSET = s(3)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 const ICON_SIZE    = s(13)
 
+const DISABLED_OPACITY = 0.45
+
 export interface SwitchProps {
   checked?: boolean
   onCheckedChange?: (checked: boolean) => void
@@ -24,9 +26,10 @@ export interface SwitchProps {
 
 export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
   const { colors } = useTheme()
+  const isDisabled = !!disabled
 
   return (
-    <View style={[{ opacity: disabled ? 0.45 : 1, alignSelf: 'flex-start' }, style]}>
+    <View style={[{ alignSelf: 'flex-start' }, style]}>
       <TouchableOpacity
         onPress={() => {
           hapticSelection()
@@ -37,20 +40,15 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
         touchSoundDisabled={true}
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
-        accessibilityState={{ checked, disabled: !!disabled }}
+        accessibilityState={{ checked, disabled: isDisabled }}
         style={styles.touchable}
       >
-        <EaseView
-          style={styles.track}
-          animate={{ backgroundColor: checked ? colors.primary : colors.surfaceStrong }}
-          transition={COLOR_TRANSITION}
-        >
-          {/*
-            AUDIT FIX: the off-state track used surfaceStrong (~#ebebeb in light mode)
-            with no border — nearly invisible on white page/card surfaces. A 1.5px border
-            that fades out as the track fills gives the off state clear visual definition
-            without adding visual weight to the on state.
-          */}
+        <View style={styles.trackContainer}>
+          <EaseView
+            style={[styles.track, isDisabled && styles.disabledTrack]}
+            animate={{ backgroundColor: checked ? colors.primary : colors.surfaceStrong }}
+            transition={COLOR_TRANSITION}
+          />
           <EaseView
             style={[styles.trackBorder, { borderWidth: 1.5 }]}
             pointerEvents="none"
@@ -62,14 +60,22 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
             animate={{ translateX: checked ? THUMB_TRAVEL : 0 }}
             transition={SPRING_ELASTIC}
           >
-            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 1 : 0 }} transition={OPACITY_TRANSITION}>
+            <EaseView
+              style={styles.iconWrapper}
+              animate={{ opacity: checked ? (isDisabled ? DISABLED_OPACITY : 1) : 0 }}
+              transition={OPACITY_TRANSITION}
+            >
               <Feather name="check" size={ICON_SIZE} color={colors.primary} />
             </EaseView>
-            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 0 : 1 }} transition={OPACITY_TRANSITION}>
+            <EaseView
+              style={styles.iconWrapper}
+              animate={{ opacity: checked ? 0 : (isDisabled ? DISABLED_OPACITY : 1) }}
+              transition={OPACITY_TRANSITION}
+            >
               <Feather name="x" size={ICON_SIZE} color={colors.foregroundMuted} />
             </EaseView>
           </EaseView>
-        </EaseView>
+        </View>
       </TouchableOpacity>
     </View>
   )
@@ -79,11 +85,18 @@ const styles = StyleSheet.create({
   touchable: {
     alignSelf: 'flex-start',
   },
-  track: {
+  trackContainer: {
+    position: 'relative',
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
+  },
+  track: {
+    ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2,
   },
+  disabledTrack: {
+    opacity: DISABLED_OPACITY,
+  },
   trackBorder: {
     ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2,

package/src/index.ts

@@ -55,12 +55,14 @@ export * from './components/TabBar'
 export * from './components/ImageViewer'
 export * from './components/SheetSelect'
 export * from './components/ImageUpload'
+export * from './components/IconPicker'
+export * from './components/NumberStepper'
 // 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'.
 
 // Icon utility
-export { Icon, renderIcon, configureIconFamilies } from './utils/icons'
+export { Icon, renderIcon, configureIconFamilies, getValidIconNames } from './utils/icons'
 
 // Typography utilities
 export { getResponsiveFontSize } from './utils/typography'