@retray-dev/ui-kit 1.0.0 → 1.5.0

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 }]}>

package/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
 export interface TabItem {
@@ -9,6 +10,10 @@ export interface TabItem {
 
 export interface TabsProps {
   tabs: TabItem[]
+  /**
+   * Controlled active tab value. When omitted the component manages state internally
+   * (uncontrolled), defaulting to the first tab.
+   */
   value?: string
   onValueChange?: (value: string) => void
   children?: React.ReactNode
@@ -22,6 +27,53 @@ export interface TabsContentProps {
   style?: ViewStyle
 }
 
+function TabTrigger({
+  tab,
+  isActive,
+  onPress,
+  onLayout,
+}: {
+  tab: TabItem
+  isActive: boolean
+  onPress: () => void
+  onLayout: (e: any) => void
+}) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    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 (
+    <TouchableOpacity
+      style={styles.trigger}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onLayout={onLayout}
+      activeOpacity={1}
+      touchSoundDisabled={true}
+    >
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <Text
+          style={[
+            styles.triggerLabel,
+            { color: isActive ? colors.foreground : colors.mutedForeground },
+            isActive && styles.activeTriggerLabel,
+          ]}
+        >
+          {tab.label}
+        </Text>
+      </Animated.View>
+    </TouchableOpacity>
+  )
+}
+
 export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps) {
   const [internal, setInternal] = useState(tabs[0]?.value ?? '')
   const { colors } = useTheme()
@@ -37,8 +89,18 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
     if (!layout) return
     if (animate) {
       Animated.parallel([
-        Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false, speed: 20, bounciness: 0 }),
-        Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, speed: 20, bounciness: 0 }),
+        Animated.spring(pillX, {
+          toValue: layout.x,
+          useNativeDriver: false,
+          speed: 20,
+          bounciness: 0,
+        }),
+        Animated.spring(pillWidth, {
+          toValue: layout.width,
+          useNativeDriver: false,
+          speed: 20,
+          bounciness: 0,
+        }),
       ]).start()
     } else {
       pillX.setValue(layout.x)
@@ -53,6 +115,7 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
   }, [active])
 
   const handlePress = (v: string) => {
+    Haptics.selectionAsync()
     if (!value) setInternal(v)
     onValueChange?.(v)
   }
@@ -79,35 +142,22 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
             },
           ]}
         />
-        {tabs.map((tab) => {
-          const isActive = tab.value === active
-          return (
-            <TouchableOpacity
-              key={tab.value}
-              style={styles.trigger}
-              onPress={() => handlePress(tab.value)}
-              activeOpacity={0.7}
-              onLayout={(e) => {
-                const { x, width } = e.nativeEvent.layout
-                tabLayouts.current[tab.value] = { x, width }
-                if (tab.value === active) {
-                  animatePill(tab.value, false)
-                  initialised.current = true
-                }
-              }}
-            >
-              <Text
-                style={[
-                  styles.triggerLabel,
-                  { color: isActive ? colors.foreground : colors.mutedForeground },
-                  isActive && styles.activeTriggerLabel,
-                ]}
-              >
-                {tab.label}
-              </Text>
-            </TouchableOpacity>
-          )
-        })}
+        {tabs.map((tab) => (
+          <TabTrigger
+            key={tab.value}
+            tab={tab}
+            isActive={tab.value === active}
+            onPress={() => handlePress(tab.value)}
+            onLayout={(e) => {
+              const { x, width } = e.nativeEvent.layout
+              tabLayouts.current[tab.value] = { x, width }
+              if (tab.value === active) {
+                animatePill(tab.value, false)
+                initialised.current = true
+              }
+            }}
+          />
+        ))}
       </View>
       {children}
     </View>
@@ -133,6 +183,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     borderRadius: 6,
     alignItems: 'center',
+    justifyContent: 'center',
     zIndex: 1,
   },
   triggerLabel: {

package/src/components/Textarea/Textarea.tsx

@@ -1,23 +1,36 @@
 import React, { useState } from 'react'
-import { TextInput, View, Text, StyleSheet, TextInputProps } from 'react-native'
+import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 
 export interface TextareaProps extends TextInputProps {
   label?: string
+  /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
   error?: string
+  /** Helper text shown below the textarea when there is no error. */
   hint?: string
+  /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
   rows?: number
+  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
+  containerStyle?: ViewStyle
 }
 
-export function Textarea({ label, error, hint, rows = 4, style, onFocus, onBlur, ...props }: TextareaProps) {
+export function Textarea({
+  label,
+  error,
+  hint,
+  rows = 4,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  ...props
+}: TextareaProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
 
   return (
-    <View style={styles.container}>
-      {label ? (
-        <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
-      ) : null}
+    <View style={[styles.container, containerStyle]}>
+      {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
       <TextInput
         multiline
         numberOfLines={rows}
@@ -32,17 +45,23 @@ export function Textarea({ label, error, hint, rows = 4, style, onFocus, onBlur,
           },
           style,
         ]}
-        onFocus={(e) => { setFocused(true); onFocus?.(e) }}
-        onBlur={(e) => { setFocused(false); onBlur?.(e) }}
+        onFocus={(e) => {
+          setFocused(true)
+          onFocus?.(e)
+        }}
+        onBlur={(e) => {
+          setFocused(false)
+          onBlur?.(e)
+        }}
         placeholderTextColor={colors.mutedForeground}
         allowFontScaling={true}
         {...props}
       />
       {error ? (
-        <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
+        <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
       {!error && hint ? (
-        <Text style={[styles.helperText, { color: colors.mutedForeground }]}>{hint}</Text>
+        <Text style={[styles.helperText, { color: colors.mutedForeground }]} allowFontScaling={true}>{hint}</Text>
       ) : null}
     </View>
   )