@retray-dev/ui-kit 5.2.0 → 5.4.0

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