@retray-dev/ui-kit 5.1.0 → 5.4.0

package/src/components/Sheet/Sheet.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef } from 'react'
-import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle, KeyboardAvoidingView, Platform } from 'react-native'
 import {
   BottomSheetModal,
   BottomSheetView,
+  BottomSheetScrollView,
   BottomSheetBackdrop,
   BottomSheetModalProvider,
   type BottomSheetBackdropProps,
@@ -19,8 +20,16 @@ export interface SheetProps {
   title?: string
   description?: string
   children?: React.ReactNode
-  /** Style for the inner `BottomSheetView` content container. */
+  /** Style for the inner content container. */
   style?: ViewStyle
+  /** Render children inside BottomSheetScrollView so gestures are handled correctly on both platforms. */
+  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
 }
 
 export function Sheet({
@@ -30,6 +39,10 @@ export function Sheet({
   description,
   children,
   style,
+  scrollable,
+  maxHeight,
+  keyboardBehavior,
+  keyboardOffset = 0,
 }: SheetProps) {
   const { colors } = useTheme()
   const ref = useRef<BottomSheetModal>(null)
@@ -52,6 +65,31 @@ export function Sheet({
     />
   )
 
+  const headerNode = (title || description) ? (
+    <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}
+        </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>
+    )
+  }
+
   return (
     <BottomSheetModal
       ref={ref}
@@ -62,20 +100,18 @@ export function Sheet({
       handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
       enablePanDownToClose
     >
-      <BottomSheetView style={[styles.content, style]}>
-        {title || description ? (
-          <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}
-              </Text>
-            ) : null}
-          </View>
-        ) : null}
-        {children}
+      <BottomSheetView style={maxHeight ? { maxHeight } : undefined}>
+        {wrapKeyboard(useScroll ? (
+          <BottomSheetScrollView contentContainerStyle={[styles.content, style]}>
+            {headerNode}
+            {children}
+          </BottomSheetScrollView>
+        ) : (
+          <BottomSheetView style={[styles.content, style]}>
+            {headerNode}
+            {children}
+          </BottomSheetView>
+        ))}
       </BottomSheetView>
     </BottomSheetModal>
   )

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),
   },
 })

package/src/index.ts

@@ -5,6 +5,7 @@ export { defaultLight, defaultDark, deriveColors } from './theme'
 
 // Components
 export * from './components/Button'
+export * from './components/ButtonGroup'
 export * from './components/IconButton'
 export * from './components/Text'
 export * from './components/Input'
@@ -40,9 +41,13 @@ export * from './components/MonthPicker'
 export * from './components/MediaCard'
 export * from './components/CategoryStrip'
 export * from './components/Pressable'
+export * from './components/DetailRow'
 
 // Icon utility
 export { Icon, renderIcon } from './utils/icons'
+
+// Typography utilities
+export { getResponsiveFontSize } from './utils/typography'
 export type { IconProps, IconFamily } from './utils/icons'
 
 // Design tokens

package/src/tokens.ts

@@ -180,7 +180,7 @@ export const TYPOGRAPHY = {
     fontFamily: 'Poppins-Medium',
     fontSize: 16,
     fontWeight: '500' as const,
-    lineHeight: 20,
+    lineHeight: 22,
     letterSpacing: 0,
   },
   'button-sm': {

package/src/utils/typography.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns a font size that steps down as formatted text grows longer.
+ * Designed for currency/numeric displays where long values overflow.
+ *
+ * @param text - The formatted string (e.g. "$1.250.000")
+ * @param maxSize - Base (maximum) font size in points
+ * @param steps - Custom step config [{ maxLen, subtract }] — sorted ascending by maxLen
+ */
+export function getResponsiveFontSize(
+  text: string,
+  maxSize: number,
+  steps: { maxLen: number; subtract: number }[] = [
+    { maxLen: 10, subtract: 0 },
+    { maxLen: 12, subtract: 4 },
+    { maxLen: 14, subtract: 6 },
+  ],
+): number {
+  const len = text.length
+  const sorted = [...steps].sort((a, b) => a.maxLen - b.maxLen)
+  for (const step of sorted) {
+    if (len <= step.maxLen) return maxSize - step.subtract
+  }
+  return maxSize - 8
+}