@retray-dev/ui-kit 1.8.0 → 2.5.0

package/src/components/Select/Select.tsx

@@ -1,14 +1,14 @@
-import React, { useRef, useCallback } from 'react'
-import { View, Text, TouchableOpacity, Animated, StyleSheet, ViewStyle } from 'react-native'
-import {
-  BottomSheetModal,
-  BottomSheetView,
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-} from '@gorhom/bottom-sheet'
+import React, { useRef, useState } from 'react'
+import { View, Text, TouchableOpacity, Modal, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
+import { Picker } from '@react-native-picker/picker'
+import { Entypo } from '@expo/vector-icons'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
+const isIOS = Platform.OS === 'ios'
+const isAndroid = Platform.OS === 'android'
+const isWeb = Platform.OS === 'web'
+
 export interface SelectOption {
   label: string
   value: string
@@ -19,10 +19,8 @@ export interface SelectProps {
   options: SelectOption[]
   value?: string
   onValueChange?: (value: string) => void
-  /** Text shown when no option is selected. Defaults to `'Select an option'`. */
   placeholder?: string
   label?: string
-  /** Red helper text; also changes trigger border to `destructive` color. */
   error?: string
   disabled?: boolean
   style?: ViewStyle
@@ -39,8 +37,10 @@ export function Select({
   style,
 }: SelectProps) {
   const { colors } = useTheme()
-  const bottomSheetRef = useRef<BottomSheetModal>(null)
   const scale = useRef(new Animated.Value(1)).current
+  const [pickerVisible, setPickerVisible] = useState(false)
+  const [pendingValue, setPendingValue] = useState<string | undefined>(value)
+  const pickerRef = useRef<React.ElementRef<typeof Picker>>(null)
 
   const selected = options.find((o) => o.value === value)
 
@@ -54,179 +54,247 @@ export function Select({
   }
 
   const handleOpen = () => {
-    if (!disabled) {
-      Haptics.selectionAsync()
-      bottomSheetRef.current?.present()
+    if (disabled) return
+    Haptics.selectionAsync()
+    if (isIOS) {
+      setPendingValue(value)
+      setPickerVisible(true)
+    } else if (isAndroid) {
+      ;(pickerRef.current as any)?.focus()
     }
   }
 
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-        pressBehavior="close"
-      />
-    ),
-    []
-  )
+  const handleDismiss = () => {
+    setPickerVisible(false)
+  }
+
+  const handleConfirm = () => {
+    if (pendingValue !== undefined && pendingValue !== '') {
+      Haptics.selectionAsync()
+      onValueChange?.(pendingValue)
+    }
+    setPickerVisible(false)
+  }
 
   return (
     <View style={[styles.container, style]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text> : null}
 
-      <Animated.View style={{ transform: [{ scale }], opacity: disabled ? 0.45 : 1 }}>
-      <TouchableOpacity
-        style={[
-          styles.trigger,
-          {
-            borderColor: error ? colors.destructive : colors.border,
-            backgroundColor: colors.background,
-          },
-        ]}
-        onPress={handleOpen}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-      >
-        <Text
+      {/* Trigger button — shown on iOS and Android only */}
+      {!isWeb ? (
+        <Animated.View style={{ transform: [{ scale }], opacity: disabled ? 0.45 : 1 }}>
+          <TouchableOpacity
+            style={[
+              styles.trigger,
+              {
+                borderColor: error ? colors.destructive : colors.border,
+                backgroundColor: colors.background,
+              },
+            ]}
+            onPress={handleOpen}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={1}
+            touchSoundDisabled={true}
+          >
+            <Text
+              style={[
+                styles.triggerText,
+                { color: selected ? colors.foreground : colors.mutedForeground },
+              ]}
+              numberOfLines={1}
+              allowFontScaling={true}
+            >
+              {selected?.label ?? placeholder}
+            </Text>
+            <Entypo name="chevron-with-circle-down" size={20} color={colors.mutedForeground} />
+          </TouchableOpacity>
+        </Animated.View>
+      ) : null}
+
+      {/* iOS: Modal with wheel Picker */}
+      {isIOS ? (
+        <Modal
+          visible={pickerVisible}
+          transparent
+          animationType="slide"
+          onRequestClose={handleDismiss}
+        >
+          <TouchableOpacity style={styles.iosBackdrop} activeOpacity={1} onPress={handleDismiss} />
+          <View style={[styles.iosSheet, { backgroundColor: colors.card }]}>
+            <View style={[styles.iosToolbar, { borderBottomColor: colors.border }]}>
+              {label ? (
+                <Text style={[styles.iosToolbarTitle, { color: colors.foreground }]} allowFontScaling={true}>
+                  {label}
+                </Text>
+              ) : (
+                <View />
+              )}
+              <TouchableOpacity onPress={handleConfirm} style={styles.iosDoneBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                <Text style={[styles.iosDoneBtnText, { color: colors.primary }]} allowFontScaling={true}>
+                  Done
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <Picker
+              selectedValue={pendingValue ?? ''}
+              onValueChange={(val) => setPendingValue(val as string)}
+              itemStyle={{ color: colors.foreground }}
+            >
+              {!value ? (
+                <Picker.Item label={placeholder} value="" color={colors.mutedForeground} enabled={false} />
+              ) : null}
+              {options.map((o) => (
+                <Picker.Item
+                  key={o.value}
+                  label={o.label}
+                  value={o.value}
+                  enabled={!o.disabled}
+                  color={o.disabled ? colors.mutedForeground : colors.foreground}
+                />
+              ))}
+            </Picker>
+          </View>
+        </Modal>
+      ) : null}
+
+      {/* Android: hidden Picker opened programmatically via focus() */}
+      {isAndroid ? (
+        <Picker
+          ref={pickerRef}
+          selectedValue={value ?? ''}
+          onValueChange={(val) => {
+            if (val !== '') {
+              Haptics.selectionAsync()
+              onValueChange?.(val as string)
+            }
+          }}
+          mode="dialog"
+          enabled={!disabled}
+          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}
+            />
+          ))}
+        </Picker>
+      ) : null}
+
+      {/* Web: Picker renders as native <select> */}
+      {isWeb ? (
+        <Picker
+          selectedValue={value ?? ''}
+          onValueChange={(val) => {
+            if (val !== '') {
+              onValueChange?.(val as string)
+            }
+          }}
+          enabled={!disabled}
           style={[
-            styles.triggerText,
-            { color: selected ? colors.foreground : colors.mutedForeground },
+            styles.webPicker,
+            {
+              borderColor: error ? colors.destructive : colors.border,
+              color: selected ? colors.foreground : colors.mutedForeground,
+              backgroundColor: colors.background,
+              opacity: disabled ? 0.45 : 1,
+            },
           ]}
-          numberOfLines={1}
         >
-          {selected?.label ?? placeholder}
-        </Text>
-        <Text style={[styles.chevron, { color: colors.mutedForeground }]}>▾</Text>
-      </TouchableOpacity>
-      </Animated.View>
+          <Picker.Item label={placeholder} value="" enabled={false} />
+          {options.map((o) => (
+            <Picker.Item
+              key={o.value}
+              label={o.label}
+              value={o.value}
+              enabled={!o.disabled}
+            />
+          ))}
+        </Picker>
+      ) : null}
 
       {error ? (
         <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
       ) : null}
-
-      <BottomSheetModal
-        ref={bottomSheetRef}
-        enableDynamicSizing
-        enablePanDownToClose
-        backdropComponent={renderBackdrop}
-        backgroundStyle={[styles.sheetBackground, { backgroundColor: colors.card }]}
-        handleIndicatorStyle={[styles.sheetHandle, { backgroundColor: colors.border }]}
-      >
-        <BottomSheetView style={styles.sheetContent}>
-          {label ? (
-            <Text style={[styles.sheetTitle, { color: colors.foreground }]}>{label}</Text>
-          ) : null}
-          {options.map((item) => {
-            const isSelected = item.value === value
-            return (
-              <TouchableOpacity
-                key={item.value}
-                style={[
-                  styles.option,
-                  isSelected && { backgroundColor: colors.accent },
-                  item.disabled && styles.disabledOption,
-                ]}
-                onPress={() => {
-                  if (!item.disabled) {
-                    Haptics.selectionAsync()
-                    onValueChange?.(item.value)
-                    bottomSheetRef.current?.dismiss()
-                  }
-                }}
-                activeOpacity={0.7}
-                touchSoundDisabled={true}
-              >
-                <Text
-                  style={[
-                    styles.optionText,
-                    { color: item.disabled ? colors.mutedForeground : colors.foreground },
-                    isSelected && { fontWeight: '500' },
-                  ]}
-                >
-                  {item.label}
-                </Text>
-                {isSelected ? (
-                  <Text style={[styles.checkmark, { color: colors.primary }]}>✓</Text>
-                ) : null}
-              </TouchableOpacity>
-            )
-          })}
-        </BottomSheetView>
-      </BottomSheetModal>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    gap: 6,
+    gap: 8,
   },
   label: {
     fontSize: 15,
     fontWeight: '500',
-    marginBottom: 2,
   },
   trigger: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.04,
+    shadowRadius: 2,
+    elevation: 1,
   },
   triggerText: {
     fontSize: 17,
     flex: 1,
   },
   chevron: {
-    fontSize: 16,
     marginLeft: 8,
   },
   helperText: {
     fontSize: 13,
   },
-  sheetBackground: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-  },
-  sheetHandle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2,
-  },
-  sheetContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 36,
+  iosBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
   },
-  sheetTitle: {
-    fontSize: 17,
-    fontWeight: '600',
-    paddingVertical: 16,
-    paddingHorizontal: 4,
+  iosSheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingBottom: 32,
   },
-  option: {
+  iosToolbar: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderRadius: 12,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
   },
-  optionText: {
+  iosToolbarTitle: {
     fontSize: 17,
-    flex: 1,
+    fontWeight: '600',
   },
-  disabledOption: {
-    opacity: 0.45,
+  iosDoneBtn: {
+    padding: 4,
   },
-  checkmark: {
-    fontSize: 16,
+  iosDoneBtnText: {
+    fontSize: 17,
     fontWeight: '600',
-    marginLeft: 8,
+  },
+  androidHiddenPicker: {
+    height: 0,
+    opacity: 0,
+    position: 'absolute',
+  },
+  webPicker: {
+    borderWidth: 1.5,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 17,
   },
 })

package/src/components/Slider/Slider.tsx

@@ -1,19 +1,20 @@
-import React, { useRef, useState } from 'react'
-import { View, PanResponder, StyleSheet, LayoutChangeEvent, ViewStyle } from 'react-native'
+import React, { useRef } from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import RNSlider from '@react-native-community/slider'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
 export interface SliderProps {
-  /** Current value. Controlled when provided; falls back to internal state otherwise. */
   value?: number
   minimumValue?: number
   maximumValue?: number
-  /** Snap interval. `0` (default) means continuous (no snapping). */
   step?: number
-  /** Called on every move while dragging. */
   onValueChange?: (value: number) => void
-  /** Called once when the user releases the thumb. */
   onSlidingComplete?: (value: number) => void
+  label?: string
+  showValue?: boolean
+  formatValue?: (value: number) => string
+  accessibilityLabel?: string
   disabled?: boolean
   style?: ViewStyle
 }
@@ -25,119 +26,82 @@ export function Slider({
   step = 0,
   onValueChange,
   onSlidingComplete,
+  label,
+  showValue = false,
+  formatValue = (v: number) => v.toFixed(2),
+  accessibilityLabel,
   disabled,
   style,
 }: SliderProps) {
   const { colors } = useTheme()
-  const trackWidth = useRef(0)
   const lastSteppedValue = useRef(value)
-  const [internalValue, setInternalValue] = useState(value)
-  const currentValue = value ?? internalValue
 
-  const clamp = (v: number) => Math.min(Math.max(v, minimumValue), maximumValue)
-
-  const snapToStep = (v: number) => {
-    if (!step) return v
-    return Math.round((v - minimumValue) / step) * step + minimumValue
-  }
-
-  const xToValue = (x: number): number => {
-    const ratio = Math.min(Math.max(x / trackWidth.current, 0), 1)
-    const raw = ratio * (maximumValue - minimumValue) + minimumValue
-    return clamp(snapToStep(raw))
+  const handleValueChange = (v: number) => {
+    if (step && v !== lastSteppedValue.current) {
+      lastSteppedValue.current = v
+      Haptics.selectionAsync()
+    }
+    onValueChange?.(v)
   }
 
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabled,
-      onMoveShouldSetPanResponder: () => !disabled,
-      onPanResponderGrant: (e) => {
-        const x = e.nativeEvent.locationX
-        const newValue = xToValue(x)
-        setInternalValue(newValue)
-        onValueChange?.(newValue)
-      },
-      onPanResponderMove: (e) => {
-        const x = e.nativeEvent.locationX
-        const newValue = xToValue(x)
-        if (newValue !== lastSteppedValue.current) {
-          lastSteppedValue.current = newValue
-          Haptics.selectionAsync()
-        }
-        setInternalValue(newValue)
-        onValueChange?.(newValue)
-      },
-      onPanResponderRelease: (e) => {
-        const x = e.nativeEvent.locationX
-        const newValue = xToValue(x)
-        setInternalValue(newValue)
-        onSlidingComplete?.(newValue)
-      },
-    })
-  ).current
-
-  const onLayout = (e: LayoutChangeEvent) => {
-    trackWidth.current = e.nativeEvent.layout.width
-  }
-
-  const percent = ((currentValue - minimumValue) / (maximumValue - minimumValue)) * 100
-
   return (
-    <View
-      style={[styles.container, disabled && styles.disabled, style]}
-      {...panResponder.panHandlers}
-      onLayout={onLayout}
-    >
-      <View style={[styles.track, { backgroundColor: colors.muted }]}>
-        <View
-          style={[styles.range, { width: `${percent}%` as any, backgroundColor: colors.primary }]}
+    <View style={[styles.wrapper, style]} accessibilityLabel={accessibilityLabel}>
+      {label || showValue ? (
+        <View style={styles.header}>
+          {label ? (
+            <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
+              {label}
+            </Text>
+          ) : null}
+          {showValue ? (
+            <Text style={[styles.valueText, { color: colors.mutedForeground }]} allowFontScaling={true}>
+              {formatValue(value)}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+      <View style={disabled ? styles.disabled : undefined}>
+        <RNSlider
+          value={value}
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step || 0}
+          disabled={disabled}
+          onValueChange={handleValueChange}
+          onSlidingComplete={onSlidingComplete}
+          minimumTrackTintColor={colors.primary}
+          maximumTrackTintColor={colors.muted}
+          thumbTintColor={colors.primary}
+          style={styles.slider}
+          accessibilityLabel={accessibilityLabel}
         />
       </View>
-      <View
-        style={[
-          styles.thumb,
-          {
-            left: `${percent}%` as any,
-            backgroundColor: colors.primary,
-            borderColor: colors.background,
-            transform: [{ translateX: -14 }],
-          },
-        ]}
-        pointerEvents="none"
-      />
     </View>
   )
 }
 
 const styles = StyleSheet.create({
-  container: {
-    height: 32,
-    justifyContent: 'center',
-    position: 'relative',
+  wrapper: {
+    gap: 8,
   },
-  disabled: {
-    opacity: 0.45,
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
-  track: {
-    height: 6,
-    borderRadius: 3,
-    overflow: 'hidden',
-    width: '100%',
+  label: {
+    fontSize: 15,
+    fontWeight: '500',
   },
-  range: {
-    height: '100%',
-    borderRadius: 3,
+  valueText: {
+    fontSize: 14,
+    fontWeight: '500',
   },
-  thumb: {
-    position: 'absolute',
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    borderWidth: 2,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2,
+  slider: {
+    width: '100%',
+    height: 40,
+  },
+  disabled: {
+    opacity: 0.45,
   },
 })

package/src/components/Switch/Switch.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { TouchableOpacity, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
+import { TouchableOpacity, Animated, StyleSheet, ViewStyle, Platform, View } from 'react-native'
 
 const nativeDriver = Platform.OS !== 'web'
 import * as Haptics from 'expo-haptics'
@@ -44,25 +44,27 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
   })
 
   return (
-    <TouchableOpacity
-      onPress={() => {
-        Haptics.selectionAsync()
-        onCheckedChange?.(!checked)
-      }}
-      disabled={disabled}
-      activeOpacity={0.8}
-      touchSoundDisabled={true}
-      style={[styles.wrapper, { opacity: disabled ? 0.45 : 1 }, style]}
-    >
-      <Animated.View style={[styles.track, { backgroundColor: trackColor }]}>
-        <Animated.View
-          style={[
-            styles.thumb,
-            { backgroundColor: colors.primaryForeground, transform: [{ translateX }] },
-          ]}
-        />
-      </Animated.View>
-    </TouchableOpacity>
+    <View style={[{ opacity: disabled ? 0.45 : 1 }, style]}>
+      <TouchableOpacity
+        onPress={() => {
+          Haptics.selectionAsync()
+          onCheckedChange?.(!checked)
+        }}
+        disabled={disabled}
+        activeOpacity={0.8}
+        touchSoundDisabled={true}
+        style={styles.wrapper}
+      >
+        <Animated.View style={[styles.track, { backgroundColor: trackColor }]}>
+          <Animated.View
+            style={[
+              styles.thumb,
+              { backgroundColor: colors.primaryForeground, transform: [{ translateX }] },
+            ]}
+          />
+        </Animated.View>
+      </TouchableOpacity>
+    </View>
   )
 }