@retray-dev/ui-kit 1.0.0 → 1.6.0

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
+import React, { useRef } from 'react'
+import { TouchableOpacity, Animated, View, Text, StyleSheet, ViewStyle } from 'react-native'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -17,6 +17,67 @@ export interface RadioGroupProps {
   style?: ViewStyle
 }
 
+function RadioItem({
+  option,
+  selected,
+  onSelect,
+}: {
+  option: RadioOption
+  selected: boolean
+  onSelect: () => void
+}) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (option.disabled) return
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+  }
+
+  return (
+    <Animated.View style={{ transform: [{ scale }] }}>
+      <TouchableOpacity
+        style={styles.row}
+        onPress={() => {
+          if (!option.disabled) {
+            Haptics.selectionAsync()
+            onSelect()
+          }
+        }}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        disabled={option.disabled}
+      >
+        <View
+          style={[
+            styles.radio,
+            {
+              borderColor: selected ? colors.primary : colors.border,
+              opacity: option.disabled ? 0.45 : 1,
+            },
+          ]}
+        >
+          {selected ? <View style={[styles.dot, { backgroundColor: colors.primary }]} /> : null}
+        </View>
+        <Text
+          style={[
+            styles.label,
+            { color: option.disabled ? colors.mutedForeground : colors.foreground },
+          ]}
+        >
+          {option.label}
+        </Text>
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
 export function RadioGroup({
   options,
   value,
@@ -24,50 +85,16 @@ export function RadioGroup({
   orientation = 'vertical',
   style,
 }: RadioGroupProps) {
-  const { colors } = useTheme()
-
   return (
-    <View
-      style={[
-        styles.container,
-        orientation === 'horizontal' && styles.horizontal,
-        style,
-      ]}
-    >
-      {options.map((option) => {
-        const selected = option.value === value
-        return (
-          <TouchableOpacity
-            key={option.value}
-            style={styles.row}
-            onPress={() => { if (!option.disabled) { Haptics.selectionAsync(); onValueChange?.(option.value) } }}
-            activeOpacity={0.7}
-            disabled={option.disabled}
-          >
-            <View
-              style={[
-                styles.radio,
-                {
-                  borderColor: selected ? colors.primary : colors.border,
-                  opacity: option.disabled ? 0.45 : 1,
-                },
-              ]}
-            >
-              {selected ? (
-                <View style={[styles.dot, { backgroundColor: colors.primary }]} />
-              ) : null}
-            </View>
-            <Text
-              style={[
-                styles.label,
-                { color: option.disabled ? colors.mutedForeground : colors.foreground },
-              ]}
-            >
-              {option.label}
-            </Text>
-          </TouchableOpacity>
-        )
-      })}
+    <View style={[styles.container, orientation === 'horizontal' && styles.horizontal, style]}>
+      {options.map((option) => (
+        <RadioItem
+          key={option.value}
+          option={option}
+          selected={option.value === value}
+          onSelect={() => onValueChange?.(option.value)}
+        />
+      ))}
     </View>
   )
 }

package/src/components/Select/Select.tsx

@@ -1,13 +1,11 @@
-import React, { useState } from 'react'
+import React, { useRef, useCallback } from 'react'
+import { View, Text, TouchableOpacity, Animated, StyleSheet, ViewStyle } from 'react-native'
 import {
-  Modal,
-  View,
-  Text,
-  TouchableOpacity,
-  FlatList,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native'
+  BottomSheetModal,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -21,8 +19,10 @@ 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,27 +39,57 @@ export function Select({
   style,
 }: SelectProps) {
   const { colors } = useTheme()
-  const [open, setOpen] = useState(false)
+  const bottomSheetRef = useRef<BottomSheetModal>(null)
+  const scale = useRef(new Animated.Value(1)).current
 
   const selected = options.find((o) => o.value === value)
 
+  const handlePressIn = () => {
+    if (disabled) return
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+  }
+
+  const handleOpen = () => {
+    if (!disabled) {
+      Haptics.selectionAsync()
+      bottomSheetRef.current?.present()
+    }
+  }
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior="close"
+      />
+    ),
+    []
+  )
+
   return (
     <View style={[styles.container, style]}>
-      {label ? (
-        <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
-      ) : null}
+      {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,
-            opacity: disabled ? 0.45 : 1,
           },
         ]}
-        onPress={() => { if (!disabled) { Haptics.selectionAsync(); setOpen(true) } }}
-        activeOpacity={0.7}
+        onPress={handleOpen}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        touchSoundDisabled={true}
       >
         <Text
           style={[
@@ -72,54 +102,61 @@ export function Select({
         </Text>
         <Text style={[styles.chevron, { color: colors.mutedForeground }]}>▾</Text>
       </TouchableOpacity>
+      </Animated.View>
 
       {error ? (
         <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
       ) : null}
 
-      <Modal transparent visible={open} onRequestClose={() => setOpen(false)} animationType="fade">
-        <TouchableOpacity style={styles.overlay} onPress={() => setOpen(false)} activeOpacity={1}>
-          <View style={[styles.list, { backgroundColor: colors.card, borderColor: colors.border }]}>
-            <FlatList
-              data={options}
-              keyExtractor={(item) => item.value}
-              renderItem={({ item }) => {
-                const isSelected = item.value === value
-                return (
-                  <TouchableOpacity
-                    style={[
-                      styles.option,
-                      isSelected && { backgroundColor: colors.accent },
-                      item.disabled && styles.disabledOption,
-                    ]}
-                    onPress={() => {
-                      if (!item.disabled) {
-                        Haptics.selectionAsync()
-                        onValueChange?.(item.value)
-                        setOpen(false)
-                      }
-                    }}
-                    activeOpacity={0.7}
-                  >
-                    <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>
-                )
-              }}
-            />
-          </View>
-        </TouchableOpacity>
-      </Modal>
+      <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>
   )
 }
@@ -153,27 +190,36 @@ const styles = StyleSheet.create({
   helperText: {
     fontSize: 12,
   },
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    justifyContent: 'center',
-    padding: 24,
+  sheetBackground: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
   },
-  list: {
-    borderRadius: 12,
-    borderWidth: 1,
-    maxHeight: 300,
-    overflow: 'hidden',
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+  },
+  sheetContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 32,
+  },
+  sheetTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    paddingVertical: 12,
+    paddingHorizontal: 4,
   },
   option: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 12,
-    paddingVertical: 10,
+    paddingVertical: 14,
+    borderRadius: 8,
   },
   optionText: {
     fontSize: 15,
+    flex: 1,
   },
   disabledOption: {
     opacity: 0.45,
@@ -181,5 +227,6 @@ const styles = StyleSheet.create({
   checkmark: {
     fontSize: 14,
     fontWeight: '600',
+    marginLeft: 8,
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -18,7 +18,12 @@ export interface SheetProps {
   title?: string
   description?: string
   children?: React.ReactNode
+  /**
+   * Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
+   * absolute point values (`300`). Defaults to `['50%']`.
+   */
   snapPoints?: (string | number)[]
+  /** Style for the inner `BottomSheetView` content container. */
   style?: ViewStyle
 }
 
@@ -63,13 +68,15 @@ export function Sheet({
       enablePanDownToClose
     >
       <BottomSheetView style={[styles.content, style]}>
-        {(title || description) ? (
+        {title || description ? (
           <View style={styles.header}>
             {title ? (
               <Text style={[styles.title, { color: colors.cardForeground }]}>{title}</Text>
             ) : null}
             {description ? (
-              <Text style={[styles.description, { color: colors.mutedForeground }]}>{description}</Text>
+              <Text style={[styles.description, { color: colors.mutedForeground }]}>
+                {description}
+              </Text>
             ) : null}
           </View>
         ) : null}

package/src/components/Skeleton/Skeleton.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef } from 'react'
-import { Animated, StyleSheet, ViewStyle } from 'react-native'
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, StyleSheet, View, ViewStyle } from 'react-native'
+import { LinearGradient } from 'expo-linear-gradient'
 import { useTheme } from '../../theme'
 
 export interface SkeletonProps {
@@ -10,31 +11,53 @@ export interface SkeletonProps {
 }
 
 export function Skeleton({ width = '100%', height = 16, borderRadius = 6, style }: SkeletonProps) {
-  const { colors } = useTheme()
-  const opacity = useRef(new Animated.Value(1)).current
+  const { colors, colorScheme } = useTheme()
+  const shimmerAnim = useRef(new Animated.Value(0)).current
+  const [containerWidth, setContainerWidth] = useState(300)
+
+  const shimmerHighlight =
+    colorScheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)'
 
   useEffect(() => {
     const animation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, { toValue: 0.4, duration: 800, useNativeDriver: true }),
-        Animated.timing(opacity, { toValue: 1, duration: 800, useNativeDriver: true }),
-      ])
+      Animated.timing(shimmerAnim, {
+        toValue: 1,
+        duration: 1200,
+        useNativeDriver: true,
+      })
     )
     animation.start()
     return () => animation.stop()
-  }, [opacity])
+  }, [shimmerAnim])
+
+  const translateX = shimmerAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth],
+  })
 
   return (
-    <Animated.View
+    <View
       style={[
         styles.base,
-        { width: width as any, height, borderRadius, backgroundColor: colors.muted, opacity },
+        { width: width as any, height, borderRadius, backgroundColor: colors.muted },
         style,
       ]}
-    />
+      onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+    >
+      <Animated.View style={[StyleSheet.absoluteFill, { transform: [{ translateX }] }]}>
+        <LinearGradient
+          colors={['transparent', shimmerHighlight, 'transparent']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={StyleSheet.absoluteFill}
+        />
+      </Animated.View>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  base: {},
+  base: {
+    overflow: 'hidden',
+  },
 })

package/src/components/Slider/Slider.tsx

@@ -4,11 +4,15 @@ 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
   disabled?: boolean
   style?: ViewStyle
@@ -86,10 +90,7 @@ export function Slider({
     >
       <View style={[styles.track, { backgroundColor: colors.muted }]}>
         <View
-          style={[
-            styles.range,
-            { width: `${percent}%` as any, backgroundColor: colors.primary },
-          ]}
+          style={[styles.range, { width: `${percent}%` as any, backgroundColor: colors.primary }]}
         />
       </View>
       <View

package/src/components/Spinner/Spinner.tsx

@@ -17,11 +17,5 @@ const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
 
 export function Spinner({ size = 'md', color, ...props }: SpinnerProps) {
   const { colors } = useTheme()
-  return (
-    <ActivityIndicator
-      size={sizeMap[size]}
-      color={color ?? colors.primary}
-      {...props}
-    />
-  )
+  return <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
 }

package/src/components/Switch/Switch.tsx

@@ -43,9 +43,13 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
 
   return (
     <TouchableOpacity
-      onPress={() => { Haptics.selectionAsync(); onCheckedChange?.(!checked) }}
+      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 }]}>