@retray-dev/ui-kit 5.2.0 → 6.0.0

package/src/components/MonthPicker/MonthPicker.tsx

@@ -5,10 +5,12 @@ import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 
-const MONTH_NAMES = [
-  'January', 'February', 'March', 'April', 'May', 'June',
-  'July', 'August', 'September', 'October', 'November', 'December',
-]
+const MONTH_NAMES: Record<string, string[]> = {
+  en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  es: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
+  pt: ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'],
+  fr: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
+}
 
 export interface MonthPickerValue {
   /** Month number 1–12 */
@@ -19,12 +21,22 @@ export interface MonthPickerValue {
 export interface MonthPickerProps {
   value: MonthPickerValue
   onChange: (value: MonthPickerValue) => void
+  /** BCP 47 locale tag. Built-in: 'en' | 'es' | 'pt' | 'fr'. For other locales supply formatLabel. */
+  locale?: string
+  /** Custom label formatter. Takes precedence over locale. */
+  formatLabel?: (value: MonthPickerValue) => string
   style?: ViewStyle
 }
 
-export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
+export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style }: MonthPickerProps) {
   const { colors } = useTheme()
 
+  const getLabel = (): string => {
+    if (formatLabel) return formatLabel(value)
+    const names = MONTH_NAMES[locale] ?? MONTH_NAMES.en
+    return `${names[value.month - 1]} ${value.year}`
+  }
+
   const handlePrev = () => {
     hapticSelection()
     if (value.month === 1) {
@@ -54,7 +66,7 @@ export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
         <Entypo name="chevron-left" size={22} color={colors.foreground} />
       </TouchableOpacity>
       <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
-        {MONTH_NAMES[value.month - 1]} {value.year}
+        {getLabel()}
       </Text>
       <TouchableOpacity
         style={styles.arrow}

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,102 +1,214 @@
-import React, { useEffect, useRef } from 'react'
-import { View, Text, StyleSheet, ViewStyle } 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
+  /**
+   * 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,
+  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 showHeader = !!(title || effectiveSubtitle || showCloseButton)
 
-  const headerNode = (title || description) ? (
+  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 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}>
-        {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>
   )
 }
@@ -111,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)

package/src/components/Textarea/Textarea.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 const webInputResetStyle: any =
   Platform.OS === 'web'
@@ -16,6 +17,12 @@ export interface TextareaProps extends TextInputProps {
   hint?: string
   /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
   rows?: number
+  /** Icon name from @expo/vector-icons rendered inside top-left corner. */
+  prefixIcon?: string
+  /** Custom icon node rendered top-left. */
+  prefixIconNode?: React.ReactNode
+  /** Override prefix icon color. Defaults to foregroundMuted. */
+  prefixIconColor?: string
   /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
   containerStyle?: ViewStyle
 }
@@ -25,6 +32,9 @@ export function Textarea({
   error,
   hint,
   rows = 4,
+  prefixIcon,
+  prefixIconNode,
+  prefixIconColor,
   containerStyle,
   style,
   onFocus,
@@ -34,40 +44,53 @@ export function Textarea({
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
 
+  const resolvedPrefixIcon = prefixIcon
+    ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted)
+    : prefixIconNode
+
   return (
     <View style={[styles.container, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <TextInput
-        multiline
-        numberOfLines={rows}
-        textAlignVertical="top"
+      <View
         style={[
-          styles.input,
+          styles.inputWrapper,
           {
             borderColor: error
               ? colors.destructive
               : focused
                 ? (colors.ring ?? colors.primary)
                 : colors.border,
-            color: colors.foreground,
             backgroundColor: colors.background,
-            minHeight: rows * vs(30),
           },
-          webInputResetStyle,
-          style,
         ]}
-        onFocus={(e) => {
-          setFocused(true)
-          onFocus?.(e)
-        }}
-        onBlur={(e) => {
-          setFocused(false)
-          onBlur?.(e)
-        }}
-        placeholderTextColor={colors.foregroundMuted}
-        allowFontScaling={true}
-        {...props}
-      />
+      >
+        {resolvedPrefixIcon ? <View style={styles.prefixIcon}>{resolvedPrefixIcon}</View> : null}
+        <TextInput
+          multiline
+          numberOfLines={rows}
+          textAlignVertical="top"
+          style={[
+            styles.input,
+            {
+              color: colors.foreground,
+              minHeight: rows * vs(30),
+            },
+            webInputResetStyle,
+            style,
+          ]}
+          onFocus={(e) => {
+            setFocused(true)
+            onFocus?.(e)
+          }}
+          onBlur={(e) => {
+            setFocused(false)
+            onBlur?.(e)
+          }}
+          placeholderTextColor={colors.foregroundMuted}
+          allowFontScaling={true}
+          {...props}
+        />
+      </View>
       {error ? (
         <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
@@ -80,23 +103,37 @@ export function Textarea({
 
 const styles = StyleSheet.create({
   container: {
-    gap: vs(8),
+    gap: vs(4),
   },
   label: {
     fontFamily: 'Poppins-Medium',
     fontSize: ms(13),
+    lineHeight: vs(18),
+    marginBottom: vs(2),
   },
-  input: {
-    fontFamily: 'Poppins-Regular',
-    borderWidth: 2,
-    borderRadius: ms(8),
+  inputWrapper: {
+    borderWidth: 1,
+    borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
-    fontSize: ms(15),
-    includeFontPadding: false,
+    gap: s(8),
+  },
+  prefixIcon: {
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    paddingTop: vs(2),
+  },
+  input: {
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(14),
+    lineHeight: vs(22),
+    padding: 0,
+    margin: 0,
   },
   helperText: {
     fontFamily: 'Poppins-Regular',
-    fontSize: ms(13),
+    fontSize: ms(12),
+    lineHeight: vs(16),
+    marginTop: vs(4),
   },
 })