@retray-dev/ui-kit 5.4.0 → 6.1.0

package/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,228 @@
+import React, { useRef } from 'react'
+import {
+  TouchableOpacity,
+  Animated,
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  Platform,
+} from 'react-native'
+import { Entypo } from '@expo/vector-icons'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { RADIUS } from '../../tokens'
+
+const nativeDriver = Platform.OS !== 'web'
+
+export type MenuItemVariant = 'plain' | 'card'
+
+export interface MenuItemProps {
+  label: string
+  /** Secondary text rendered below the label. */
+  subtitle?: string
+  /**
+   * Icon name from `@expo/vector-icons` rendered on the left.
+   * See https://icons.expo.fyi.
+   */
+  iconName?: string
+  /** Custom icon node rendered on the left. */
+  icon?: React.ReactNode
+  /** Override icon color. Defaults to `foreground`. */
+  iconColor?: string
+  /**
+   * Custom content rendered on the right.
+   * When provided, replaces the default chevron.
+   * Use for checkboxes, switches, badges, or other controls.
+   */
+  rightRender?: React.ReactNode
+  /**
+   * Show chevron on the right. Defaults to `true`.
+   * Ignored when `rightRender` is provided.
+   */
+  showChevron?: boolean
+  onPress: () => void
+  disabled?: boolean
+  /**
+   * - `plain` (default): no background — sits inside a parent surface.
+   * - `card`: standalone surface with background + border.
+   */
+  variant?: MenuItemVariant
+  /** Visual separator line at the bottom. */
+  showSeparator?: boolean
+  /** Style applied to the outer container. */
+  style?: ViewStyle
+  /** Style applied to the label Text. */
+  labelStyle?: TextStyle
+}
+
+export function MenuItem({
+  label,
+  subtitle,
+  iconName,
+  icon,
+  iconColor,
+  rightRender,
+  showChevron = true,
+  onPress,
+  disabled = false,
+  variant = 'plain',
+  showSeparator = false,
+  style,
+  labelStyle,
+}: MenuItemProps) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (disabled) return
+    Animated.spring(scale, {
+      toValue: 0.97,
+      useNativeDriver: nativeDriver,
+      stiffness: 350,
+      damping: 28,
+      mass: 0.9,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver,
+      stiffness: 220,
+      damping: 20,
+      mass: 0.9,
+    }).start()
+  }
+
+  const handlePress = () => {
+    hapticSelection()
+    onPress()
+  }
+
+  const resolvedIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, 22, iconColor ?? colors.foreground)
+    : icon
+
+  const cardStyle: ViewStyle =
+    variant === 'card'
+      ? {
+          backgroundColor: colors.card,
+          borderRadius: RADIUS.md,
+          borderWidth: 1,
+          borderColor: colors.border,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.06,
+          shadowRadius: 6,
+          elevation: 2,
+        }
+      : {}
+
+  return (
+    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled]}>
+      <TouchableOpacity
+        style={[styles.container, cardStyle, style]}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+      >
+        {resolvedIcon ? (
+          <View style={styles.iconContainer}>{resolvedIcon}</View>
+        ) : null}
+
+        <View style={styles.labelContainer}>
+          <Text
+            style={[styles.label, { color: colors.foreground }, labelStyle]}
+            numberOfLines={1}
+            allowFontScaling={true}
+          >
+            {label}
+          </Text>
+          {subtitle ? (
+            <Text
+              style={[styles.subtitle, { color: colors.foregroundMuted }]}
+              numberOfLines={1}
+              allowFontScaling={true}
+            >
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+
+        {rightRender !== undefined ? (
+          <View 
+            style={styles.rightContainer}
+            onStartShouldSetResponder={() => true}
+            onResponderRelease={() => {}}
+          >
+            {rightRender}
+          </View>
+        ) : showChevron ? (
+          <Entypo name="chevron-right" size={18} color={colors.foregroundMuted} />
+        ) : null}
+      </TouchableOpacity>
+
+      {showSeparator ? (
+        <View
+          style={[
+            styles.separator,
+            {
+              backgroundColor: colors.border,
+              marginLeft: resolvedIcon ? s(22) + s(12) : 0,
+              opacity: 0.6,
+            },
+          ]}
+        />
+      ) : null}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 0,
+    paddingVertical: vs(16),
+    minHeight: vs(54),
+    gap: s(12),
+  },
+  iconContainer: {
+    width: s(22),
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  labelContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  label: {
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(15),
+  },
+  subtitle: {
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(12),
+    marginTop: vs(1),
+  },
+  rightContainer: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginRight: 0,
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+})

package/src/components/MenuItem/index.ts

@@ -0,0 +1,2 @@
+export { MenuItem } from './MenuItem'
+export type { MenuItemProps, MenuItemVariant } from './MenuItem'

package/src/components/Select/Select.tsx

@@ -109,7 +109,7 @@ export function Select({
             >
               {selected?.label ?? placeholder}
             </Text>
-            <Entypo name="chevron-with-circle-down" size={20} color={colors.foregroundMuted} />
+            <Entypo name="chevron-down" size={20} color={colors.foregroundMuted} />
           </TouchableOpacity>
         </Animated.View>
       ) : null}

package/src/components/Separator/Separator.tsx

@@ -25,9 +25,11 @@ const styles = StyleSheet.create({
   horizontal: {
     height: 1,
     width: '100%',
+    opacity: 0.7,
   },
   vertical: {
     width: 1,
     height: '100%',
+    opacity: 0.7,
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -1,118 +1,214 @@
-import React, { useEffect, useRef } from 'react'
-import { View, Text, StyleSheet, ViewStyle, KeyboardAvoidingView, Platform } from 'react-native'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, Platform } from 'react-native'
 import {
   BottomSheetModal,
   BottomSheetView,
   BottomSheetScrollView,
   BottomSheetBackdrop,
   BottomSheetModalProvider,
+  BottomSheetTextInput,
+  BottomSheetFooter,
   type BottomSheetBackdropProps,
+  type BottomSheetFooterProps,
 } from '@gorhom/bottom-sheet'
-import { impactLight } from '../../utils/haptics'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { AntDesign } from '@expo/vector-icons'
+import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 
+const SCREEN_HEIGHT = Dimensions.get('window').height
+const DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85
+const isAndroid = Platform.OS === 'android'
+
 export { BottomSheetModalProvider }
+// Re-export BottomSheetTextInput as SheetTextInput for consumer convenience
+export { BottomSheetTextInput as SheetTextInput }
 
 export interface SheetProps {
   open: boolean
   onClose: () => void
   title?: string
+  /** Secondary text below title. */
+  subtitle?: string
+  /** @deprecated Use `subtitle` instead. */
   description?: string
+  /** Show an X close button in the header. */
+  showCloseButton?: boolean
   children?: React.ReactNode
   /** Style for the inner content container. */
   style?: ViewStyle
-  /** Render children inside BottomSheetScrollView so gestures are handled correctly on both platforms. */
+  /** Style for the content wrapper (outside the scroll container). */
+  contentStyle?: ViewStyle
+  /** Render children inside BottomSheetScrollView. */
   scrollable?: boolean
   /** Cap sheet height (dp). Children scroll when content exceeds this value. */
   maxHeight?: number
-  /** Wrap content in KeyboardAvoidingView. Defaults to platform-appropriate behavior when set. */
-  keyboardBehavior?: 'padding' | 'height' | 'position' | 'none'
-  /** Extra vertical offset for the keyboard avoiding view. */
-  keyboardOffset?: number
+  /**
+   * Keyboard behavior — how the sheet responds to keyboard appearance.
+   * - 'interactive': offset sheet by keyboard size (default, works on both platforms)
+   * - 'fillParent': extend sheet to fill parent view (can cause restore issues with dynamic sizing)
+   * - 'extend': extend sheet to maximum snap point
+   * 
+   * Default: 'interactive' on both platforms.
+   */
+  keyboardBehavior?: 'extend' | 'fillParent' | 'interactive'
+  /**
+   * Keyboard blur behavior — what happens when keyboard dismisses.
+   * - 'none': do nothing
+   * - 'restore': restore sheet to previous position (default)
+   */
+  keyboardBlurBehavior?: 'none' | 'restore'
+  /**
+   * Blur keyboard when user starts dragging the sheet down.
+   * Default: true (recommended for better UX)
+   */
+  enableBlurKeyboardOnGesture?: boolean
+  /**
+   * Android-only: defines keyboard input mode.
+   * - 'adjustPan': pan the sheet content (default, fixes restore issues with dynamic sizing)
+   * - 'adjustResize': resize the sheet container (can cause transparent gap on dismiss)
+   */
+  android_keyboardInputMode?: 'adjustPan' | 'adjustResize'
+  /** Sticky footer rendered below the scroll area. */
+  footer?: React.ReactNode
+  /**
+   * Array of snap points for the sheet (e.g., ['50%', '85%'] or [200, 500]).
+   * When provided, disables enableDynamicSizing.
+   * When omitted, sheet uses dynamic sizing (auto-fits content).
+   */
+  snapPoints?: (string | number)[]
 }
 
 export function Sheet({
   open,
   onClose,
   title,
+  subtitle,
   description,
+  showCloseButton = false,
   children,
   style,
+  contentStyle,
   scrollable,
   maxHeight,
   keyboardBehavior,
-  keyboardOffset = 0,
+  keyboardBlurBehavior = 'restore',
+  enableBlurKeyboardOnGesture = true,
+  android_keyboardInputMode = 'adjustPan',
+  footer,
+  snapPoints,
 }: SheetProps) {
   const { colors } = useTheme()
+  const insets = useSafeAreaInsets()
   const ref = useRef<BottomSheetModal>(null)
+  
+  // 'interactive' + 'adjustPan' works properly with enableDynamicSizing on both platforms
+  // 'fillParent' + 'adjustResize' causes restore issues (transparent gap when keyboard dismisses)
+  const effectiveKeyboardBehavior = keyboardBehavior ?? 'interactive'
 
   useEffect(() => {
     if (open) {
-      impactLight()
+      impactMedium()
       ref.current?.present()
     } else {
       ref.current?.dismiss()
     }
   }, [open])
 
-  const renderBackdrop = (props: BottomSheetBackdropProps) => (
+  const renderBackdrop = useCallback((props: BottomSheetBackdropProps) => (
     <BottomSheetBackdrop
       {...props}
       disappearsOnIndex={-1}
       appearsOnIndex={0}
       pressBehavior="close"
     />
-  )
+  ), [])
+
+  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
+    if (!footer) return null
+    return (
+      <BottomSheetFooter {...props}>
+        {footer}
+      </BottomSheetFooter>
+    )
+  }, [footer])
+
+  const effectiveSubtitle = subtitle ?? description
 
-  const headerNode = (title || description) ? (
+  const showHeader = !!(title || effectiveSubtitle || showCloseButton)
+
+  const headerNode = showHeader ? (
     <View style={styles.header}>
-      {title ? (
-        <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>{title}</Text>
-      ) : null}
-      {description ? (
-        <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-          {description}
+      <View style={styles.headerRow}>
+        {title ? (
+          <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
+            {title}
+          </Text>
+        ) : <View style={{ flex: 1 }} />}
+        {showCloseButton ? (
+          <TouchableOpacity
+            onPress={onClose}
+            style={styles.closeButton}
+            activeOpacity={0.6}
+            touchSoundDisabled={true}
+          >
+            <AntDesign name="close" size={ms(18)} color={colors.foregroundMuted} />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+      {effectiveSubtitle ? (
+        <Text style={[styles.subtitle, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {effectiveSubtitle}
         </Text>
       ) : null}
     </View>
   ) : null
 
   const useScroll = scrollable || !!maxHeight
-
-  const wrapKeyboard = (node: React.ReactNode) => {
-    if (!keyboardBehavior || keyboardBehavior === 'none') return node
-    const behavior = keyboardBehavior ?? Platform.select({ ios: 'padding', android: 'height' }) as 'padding' | 'height'
-    return (
-      <KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={keyboardOffset}>
-        {node}
-      </KeyboardAvoidingView>
-    )
-  }
-
+  const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT
+  
+  // If snapPoints provided, disable dynamic sizing. Otherwise use dynamic sizing.
+  const useDynamicSizing = !snapPoints
+  
   return (
     <BottomSheetModal
       ref={ref}
-      enableDynamicSizing
+      enableDynamicSizing={useDynamicSizing}
+      snapPoints={snapPoints}
+      maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
       onDismiss={onClose}
       backdropComponent={renderBackdrop}
+      footerComponent={footer ? renderFooter : undefined}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
       handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
       enablePanDownToClose
+      topInset={insets.top}
+      keyboardBehavior={effectiveKeyboardBehavior}
+      keyboardBlurBehavior={keyboardBlurBehavior}
+      android_keyboardInputMode={android_keyboardInputMode}
+      enableBlurKeyboardOnGesture={enableBlurKeyboardOnGesture}
     >
-      <BottomSheetView style={maxHeight ? { maxHeight } : undefined}>
-        {wrapKeyboard(useScroll ? (
-          <BottomSheetScrollView contentContainerStyle={[styles.content, style]}>
-            {headerNode}
-            {children}
-          </BottomSheetScrollView>
-        ) : (
-          <BottomSheetView style={[styles.content, style]}>
-            {headerNode}
-            {children}
-          </BottomSheetView>
-        ))}
-      </BottomSheetView>
+      {useScroll ? (
+        <BottomSheetScrollView
+          contentContainerStyle={[
+            styles.scrollContent,
+            style,
+          ]}
+          style={contentStyle}
+          showsVerticalScrollIndicator={true}
+          indicatorStyle="black"
+          persistentScrollbar={isAndroid}
+        >
+          {headerNode}
+          {children}
+        </BottomSheetScrollView>
+      ) : (
+        <BottomSheetView style={[styles.content, contentStyle, style]}>
+          {headerNode}
+          {children}
+        </BottomSheetView>
+      )}
     </BottomSheetModal>
   )
 }
@@ -127,21 +223,38 @@ const styles = StyleSheet.create({
     height: vs(4),
     borderRadius: ms(2),
   },
-  content: {
-    paddingHorizontal: s(24),
-    paddingBottom: vs(32),
-  },
   header: {
-    gap: vs(8),
-    marginBottom: vs(16),
+    paddingHorizontal: s(16),
+    paddingTop: vs(4),
+    paddingBottom: vs(12),
+    gap: vs(4),
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
   },
   title: {
     fontFamily: 'Poppins-SemiBold',
     fontSize: ms(18),
+    flex: 1,
   },
-  description: {
+  subtitle: {
     fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8),
+  },
+  content: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32),
+  },
+  scrollContent: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32),
+    paddingRight: s(16),
+  },
 })

package/src/components/Sheet/index.ts

@@ -1,2 +1,2 @@
-export { Sheet, BottomSheetModalProvider } from './Sheet'
+export { Sheet, BottomSheetModalProvider, SheetTextInput } from './Sheet'
 export type { SheetProps } from './Sheet'

package/src/components/Tabs/Tabs.tsx

@@ -49,11 +49,11 @@ function TabTrigger({
   const scale = useRef(new Animated.Value(1)).current
 
   const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, stiffness: 600, damping: 35, mass: 0.8 }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, stiffness: 280, damping: 22, mass: 0.8 }).start()
   }
 
   const isUnderline = variant === 'underline'
@@ -108,8 +108,8 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
     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, stiffness: 380, damping: 38, mass: 1.0 }),
+        Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, stiffness: 380, damping: 38, mass: 1.0 }),
       ]).start()
     } else {
       pillX.setValue(layout.x)