@retray-dev/ui-kit 4.0.0 → 5.2.0

package/src/components/Sheet/Sheet.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import {
   BottomSheetModal,
   BottomSheetView,
+  BottomSheetScrollView,
   BottomSheetBackdrop,
   BottomSheetModalProvider,
   type BottomSheetBackdropProps,
@@ -19,8 +20,12 @@ 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
 }
 
 export function Sheet({
@@ -30,6 +35,8 @@ export function Sheet({
   description,
   children,
   style,
+  scrollable,
+  maxHeight,
 }: SheetProps) {
   const { colors } = useTheme()
   const ref = useRef<BottomSheetModal>(null)
@@ -52,6 +59,21 @@ 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
+
   return (
     <BottomSheetModal
       ref={ref}
@@ -62,20 +84,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.cardForeground }]} allowFontScaling={true}>{title}</Text>
-            ) : null}
-            {description ? (
-              <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>
-                {description}
-              </Text>
-            ) : null}
-          </View>
-        ) : null}
-        {children}
+      <BottomSheetView style={maxHeight ? { maxHeight } : undefined}>
+        {useScroll ? (
+          <BottomSheetScrollView contentContainerStyle={[styles.content, style]}>
+            {headerNode}
+            {children}
+          </BottomSheetScrollView>
+        ) : (
+          <BottomSheetView style={[styles.content, style]}>
+            {headerNode}
+            {children}
+          </BottomSheetView>
+        )}
       </BottomSheetView>
     </BottomSheetModal>
   )

package/src/components/Skeleton/Skeleton.tsx

@@ -2,15 +2,30 @@ 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'
+import { s } from '../../utils/scaling'
+
+// circle: circular avatar placeholder  text: short line preset  base: custom dimensions
+export type SkeletonPreset = 'base' | 'circle' | 'text'
 
 export interface SkeletonProps {
   width?: number | string
   height?: number
   borderRadius?: number
+  /** Preset shape. `'circle'` forces width=height square with full radius. `'text'` renders a short line. */
+  preset?: SkeletonPreset
+  /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
+  diameter?: number
   style?: ViewStyle
 }
 
-export function Skeleton({ width = '100%', height = 16, borderRadius = 6, style }: SkeletonProps) {
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  borderRadius = 6,
+  preset = 'base',
+  diameter = 40,
+  style,
+}: SkeletonProps) {
   const { colors, colorScheme } = useTheme()
   const shimmerAnim = useRef(new Animated.Value(0)).current
   const [containerWidth, setContainerWidth] = useState(300)
@@ -20,11 +35,7 @@ export function Skeleton({ width = '100%', height = 16, borderRadius = 6, style
 
   useEffect(() => {
     const animation = Animated.loop(
-      Animated.timing(shimmerAnim, {
-        toValue: 1,
-        duration: 1200,
-        useNativeDriver: true,
-      })
+      Animated.timing(shimmerAnim, { toValue: 1, duration: 1200, useNativeDriver: true })
     )
     animation.start()
     return () => animation.stop()
@@ -35,11 +46,27 @@ export function Skeleton({ width = '100%', height = 16, borderRadius = 6, style
     outputRange: [-containerWidth, containerWidth],
   })
 
+  // Resolve dimensions by preset
+  const resolvedWidth: number | string =
+    preset === 'circle' ? s(diameter)
+    : preset === 'text'   ? '60%'
+    : width
+
+  const resolvedHeight: number =
+    preset === 'circle' ? s(diameter)
+    : preset === 'text'   ? 14
+    : height
+
+  const resolvedRadius: number =
+    preset === 'circle' ? 9999
+    : preset === 'text'   ? 4
+    : borderRadius
+
   return (
     <View
       style={[
         styles.base,
-        { width: width as any, height, borderRadius, backgroundColor: colors.muted },
+        { width: resolvedWidth as any, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
         style,
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}

package/src/components/Slider/Slider.tsx

@@ -55,7 +55,7 @@ export function Slider({
             </Text>
           ) : null}
           {showValue ? (
-            <Text style={[styles.valueText, { color: colors.mutedForeground }]} allowFontScaling={true}>
+            <Text style={[styles.valueText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
               {formatValue(value)}
             </Text>
           ) : null}
@@ -71,7 +71,7 @@ export function Slider({
           onValueChange={handleValueChange}
           onSlidingComplete={onSlidingComplete}
           minimumTrackTintColor={colors.primary}
-          maximumTrackTintColor={colors.muted}
+          maximumTrackTintColor={colors.surface}
           thumbTintColor={colors.primary}
           style={styles.slider}
           accessibilityLabel={accessibilityLabel}

package/src/components/Spinner/Spinner.tsx

@@ -31,7 +31,7 @@ export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
       <View style={styles.wrapper}>
         <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
         <Text
-          style={[styles.label, { color: colors.mutedForeground, fontSize: labelFontSize[size] }]}
+          style={[styles.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }]}
           allowFontScaling={true}
         >
           {label}

package/src/components/Switch/Switch.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef } from 'react'
 import { TouchableOpacity, Animated, StyleSheet, ViewStyle, Platform, View } from 'react-native'
+import { Feather } from '@expo/vector-icons'
 
 const nativeDriver = Platform.OS !== 'web'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
-import { s, vs } from '../../utils/scaling'
+import { s } from '../../utils/scaling'
 
 const TRACK_WIDTH = s(52)
 const TRACK_HEIGHT = s(30)
@@ -19,10 +20,14 @@ export interface SwitchProps {
   style?: ViewStyle
 }
 
+const ICON_SIZE = s(13)
+
 export function Switch({ checked = false, onCheckedChange, disabled, style }: SwitchProps) {
   const { colors } = useTheme()
   const translateX = useRef(new Animated.Value(checked ? THUMB_TRAVEL : 0)).current
   const trackOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
+  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
+  const crossOpacity = useRef(new Animated.Value(checked ? 0 : 1)).current
 
   useEffect(() => {
     Animated.parallel([
@@ -36,12 +41,22 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
         duration: 150,
         useNativeDriver: false,
       }),
+      Animated.timing(checkOpacity, {
+        toValue: checked ? 1 : 0,
+        duration: 120,
+        useNativeDriver: true,
+      }),
+      Animated.timing(crossOpacity, {
+        toValue: checked ? 0 : 1,
+        duration: 120,
+        useNativeDriver: true,
+      }),
     ]).start()
-  }, [checked, translateX, trackOpacity])
+  }, [checked, translateX, trackOpacity, checkOpacity, crossOpacity])
 
   const trackColor = trackOpacity.interpolate({
     inputRange: [0, 1],
-    outputRange: [colors.muted, colors.primary],
+    outputRange: [colors.surface, colors.primary],
   })
 
   return (
@@ -62,7 +77,14 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
               styles.thumb,
               { backgroundColor: colors.primaryForeground, transform: [{ translateX }] },
             ]}
-          />
+          >
+            <Animated.View style={[styles.iconWrapper, { opacity: checkOpacity }]}>
+              <Feather name="check" size={ICON_SIZE} color={colors.primary} />
+            </Animated.View>
+            <Animated.View style={[styles.iconWrapper, { opacity: crossOpacity }]}>
+              <Feather name="x" size={ICON_SIZE} color={colors.foregroundMuted} />
+            </Animated.View>
+          </Animated.View>
         </Animated.View>
       </TouchableOpacity>
     </View>
@@ -90,5 +112,10 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.15,
     shadowRadius: 2,
     elevation: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconWrapper: {
+    position: 'absolute',
   },
 })

package/src/components/Tabs/Tabs.tsx

@@ -12,12 +12,13 @@ export interface TabItem {
   icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
+// pill: animated sliding pill background (default)
+// underline: 2px bottom border on active tab — Airbnb product-tab style
+export type TabsVariant = 'pill' | 'underline'
+
 export interface TabsProps {
   tabs: TabItem[]
-  /**
-   * Controlled active tab value. When omitted the component manages state internally
-   * (uncontrolled), defaulting to the first tab.
-   */
+  variant?: TabsVariant
   value?: string
   onValueChange?: (value: string) => void
   children?: React.ReactNode
@@ -36,11 +37,13 @@ function TabTrigger({
   isActive,
   onPress,
   onLayout,
+  variant,
 }: {
   tab: TabItem
   isActive: boolean
   onPress: () => void
   onLayout: (e: any) => void
+  variant: TabsVariant
 }) {
   const { colors } = useTheme()
   const scale = useRef(new Animated.Value(1)).current
@@ -53,9 +56,15 @@ function TabTrigger({
     Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
+  const isUnderline = variant === 'underline'
+
   return (
     <TouchableOpacity
-      style={styles.trigger}
+      style={[
+        styles.trigger,
+        isUnderline && styles.triggerUnderline,
+        isUnderline && isActive && { borderBottomColor: colors.primary },
+      ]}
       onPress={onPress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
@@ -71,8 +80,8 @@ function TabTrigger({
           <Text
             style={[
               styles.triggerLabel,
-              { color: isActive ? colors.foreground : colors.mutedForeground },
-              isActive && styles.activeTriggerLabel,
+              { color: isActive ? colors.foreground : colors.foregroundMuted },
+              isActive && (isUnderline ? styles.activeTriggerLabelUnderline : styles.activeTriggerLabel),
             ]}
             allowFontScaling={true}
           >
@@ -84,7 +93,7 @@ function TabTrigger({
   )
 }
 
-export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps) {
+export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, style }: TabsProps) {
   const [internal, setInternal] = useState(tabs[0]?.value ?? '')
   const { colors } = useTheme()
   const active = value ?? internal
@@ -99,18 +108,8 @@ 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)
@@ -119,9 +118,7 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
   }
 
   useEffect(() => {
-    if (initialised.current) {
-      animatePill(active, true)
-    }
+    if (initialised.current) animatePill(active, true)
   }, [active])
 
   const handlePress = (v: string) => {
@@ -132,32 +129,37 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
 
   return (
     <View style={style}>
-      <View style={[styles.list, { backgroundColor: colors.muted }]}>
-        <Animated.View
-          style={[
-            styles.pill,
-            {
-              backgroundColor: colors.background,
-              position: 'absolute',
-              top: 4,
-              bottom: 4,
-              left: pillX,
-              width: pillWidth,
-              borderRadius: 8,
-              shadowColor: '#000',
-              shadowOffset: { width: 0, height: 1 },
-              shadowOpacity: 0.1,
-              shadowRadius: 2,
-              elevation: 2,
-            },
-          ]}
-        />
+      <View style={[
+        variant === 'pill' ? [styles.list, { backgroundColor: colors.surface }] : styles.listUnderline,
+      ]}>
+        {variant === 'pill' && (
+          <Animated.View
+            style={[
+              styles.pill,
+              {
+                backgroundColor: colors.background,
+                position: 'absolute',
+                top: 4,
+                bottom: 4,
+                left: pillX,
+                width: pillWidth,
+                borderRadius: 8,
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.08,
+                shadowRadius: 2,
+                elevation: 2,
+              },
+            ]}
+          />
+        )}
         {tabs.map((tab) => (
           <TabTrigger
             key={tab.value}
             tab={tab}
             isActive={tab.value === active}
             onPress={() => handlePress(tab.value)}
+            variant={variant}
             onLayout={(e) => {
               const { x, width } = e.nativeEvent.layout
               tabLayouts.current[tab.value] = { x, width }
@@ -182,20 +184,32 @@ export function TabsContent({ value, activeValue, children, style }: TabsContent
 const styles = StyleSheet.create({
   list: {
     flexDirection: 'row',
-    borderRadius: ms(12),
+    borderRadius: 12,
     padding: s(4),
     gap: s(4),
   },
+  listUnderline: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+  },
   pill: {},
   trigger: {
     flex: 1,
     paddingVertical: vs(7),
     paddingHorizontal: s(10),
-    borderRadius: ms(6),
+    borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
   },
+  triggerUnderline: {
+    flex: 0,
+    paddingVertical: vs(12),
+    paddingHorizontal: s(16),
+    borderRadius: 0,
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent',
+  },
   triggerInner: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -209,4 +223,8 @@ const styles = StyleSheet.create({
   activeTriggerLabel: {
     fontFamily: 'Poppins-Medium',
   },
+  activeTriggerLabelUnderline: {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: ms(14),
+  },
 })

package/src/components/Text/Text.tsx

@@ -1,32 +1,81 @@
 import React from 'react'
 import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { TYPOGRAPHY } from '../../tokens'
 import { ms, mvs } from '../../utils/scaling'
 
-export type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label'
+export type TextVariant =
+  | 'display-hero'
+  | 'display-xl'
+  | 'display-lg'
+  | 'display-md'
+  | 'display-sm'
+  | 'title-md'
+  | 'title-sm'
+  | 'body-md'
+  | 'body-sm'
+  | 'caption'
+  | 'caption-sm'
+  | 'badge-text'
+  | 'micro-label'
+  | 'uppercase-tag'
+  | 'button-lg'
+  | 'button-sm'
 
 export interface TextProps extends RNTextProps {
   variant?: TextVariant
   color?: string
 }
 
+// Apply scaling to font/line-height values while preserving all other token props
 const variantStyles: Record<TextVariant, TextStyle> = {
-  h1:      { fontFamily: 'Poppins-Bold',     fontSize: ms(40), lineHeight: mvs(52) },
-  h2:      { fontFamily: 'Poppins-Bold',     fontSize: ms(28), lineHeight: mvs(36) },
-  h3:      { fontFamily: 'Poppins-SemiBold', fontSize: ms(22), lineHeight: mvs(30) },
-  body:    { fontFamily: 'Poppins-Regular',  fontSize: ms(17), lineHeight: mvs(26) },
-  caption: { fontFamily: 'Poppins-Regular',  fontSize: ms(13), lineHeight: mvs(20) },
-  label:   { fontFamily: 'Poppins-Medium',   fontSize: ms(15), lineHeight: mvs(22) },
+  'display-hero': { ...TYPOGRAPHY['display-hero'], fontSize: ms(TYPOGRAPHY['display-hero'].fontSize), lineHeight: mvs(TYPOGRAPHY['display-hero'].lineHeight) },
+  'display-xl':   { ...TYPOGRAPHY['display-xl'],   fontSize: ms(TYPOGRAPHY['display-xl'].fontSize),   lineHeight: mvs(TYPOGRAPHY['display-xl'].lineHeight) },
+  'display-lg':   { ...TYPOGRAPHY['display-lg'],   fontSize: ms(TYPOGRAPHY['display-lg'].fontSize),   lineHeight: mvs(TYPOGRAPHY['display-lg'].lineHeight) },
+  'display-md':   { ...TYPOGRAPHY['display-md'],   fontSize: ms(TYPOGRAPHY['display-md'].fontSize),   lineHeight: mvs(TYPOGRAPHY['display-md'].lineHeight) },
+  'display-sm':   { ...TYPOGRAPHY['display-sm'],   fontSize: ms(TYPOGRAPHY['display-sm'].fontSize),   lineHeight: mvs(TYPOGRAPHY['display-sm'].lineHeight) },
+  'title-md':     { ...TYPOGRAPHY['title-md'],     fontSize: ms(TYPOGRAPHY['title-md'].fontSize),     lineHeight: mvs(TYPOGRAPHY['title-md'].lineHeight) },
+  'title-sm':     { ...TYPOGRAPHY['title-sm'],     fontSize: ms(TYPOGRAPHY['title-sm'].fontSize),     lineHeight: mvs(TYPOGRAPHY['title-sm'].lineHeight) },
+  'body-md':      { ...TYPOGRAPHY['body-md'],      fontSize: ms(TYPOGRAPHY['body-md'].fontSize),      lineHeight: mvs(TYPOGRAPHY['body-md'].lineHeight) },
+  'body-sm':      { ...TYPOGRAPHY['body-sm'],      fontSize: ms(TYPOGRAPHY['body-sm'].fontSize),      lineHeight: mvs(TYPOGRAPHY['body-sm'].lineHeight) },
+  caption:        { ...TYPOGRAPHY['caption'],      fontSize: ms(TYPOGRAPHY['caption'].fontSize),      lineHeight: mvs(TYPOGRAPHY['caption'].lineHeight) },
+  'caption-sm':   { ...TYPOGRAPHY['caption-sm'],   fontSize: ms(TYPOGRAPHY['caption-sm'].fontSize),   lineHeight: mvs(TYPOGRAPHY['caption-sm'].lineHeight) },
+  'badge-text':   { ...TYPOGRAPHY['badge-text'],   fontSize: ms(TYPOGRAPHY['badge-text'].fontSize),   lineHeight: mvs(TYPOGRAPHY['badge-text'].lineHeight) },
+  'micro-label':  { ...TYPOGRAPHY['micro-label'],  fontSize: ms(TYPOGRAPHY['micro-label'].fontSize),  lineHeight: mvs(TYPOGRAPHY['micro-label'].lineHeight) },
+  'uppercase-tag':{ ...TYPOGRAPHY['uppercase-tag'],fontSize: ms(TYPOGRAPHY['uppercase-tag'].fontSize),lineHeight: mvs(TYPOGRAPHY['uppercase-tag'].lineHeight) },
+  'button-lg':    { ...TYPOGRAPHY['button-lg'],    fontSize: ms(TYPOGRAPHY['button-lg'].fontSize),    lineHeight: mvs(TYPOGRAPHY['button-lg'].lineHeight) },
+  'button-sm':    { ...TYPOGRAPHY['button-sm'],    fontSize: ms(TYPOGRAPHY['button-sm'].fontSize),    lineHeight: mvs(TYPOGRAPHY['button-sm'].lineHeight) },
 }
 
-export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {
+// Default color by variant — hierarchy matches Airbnb ink/body/muted pattern
+const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroundSubtle' | 'foregroundMuted'>> = {
+  'display-hero': 'foreground',
+  'display-xl':   'foreground',
+  'display-lg':   'foreground',
+  'display-md':   'foreground',
+  'display-sm':   'foreground',
+  'title-md':     'foreground',
+  'title-sm':     'foreground',
+  'body-md':      'foregroundSubtle',  // running text — slightly softer
+  'body-sm':      'foregroundSubtle',
+  caption:        'foregroundMuted',
+  'caption-sm':   'foregroundMuted',
+  'badge-text':   'foreground',
+  'micro-label':  'foreground',
+  'uppercase-tag':'foregroundMuted',
+  'button-lg':    'foreground',
+  'button-sm':    'foreground',
+}
+
+export function Text({ variant = 'body-md', color, style, children, ...props }: TextProps) {
   const { colors } = useTheme()
 
-  const defaultColor = variant === 'caption' ? colors.mutedForeground : colors.foreground
+  const colorKey = defaultColorVariant[variant] ?? 'foreground'
+  const resolvedColor = color ?? colors[colorKey]
 
   return (
     <RNText
-      style={[variantStyles[variant], { color: color ?? defaultColor }, style]}
+      style={[variantStyles[variant], { color: resolvedColor }, style]}
       allowFontScaling={true}
       {...props}
     >

package/src/components/Textarea/Textarea.tsx

@@ -64,7 +64,7 @@ export function Textarea({
           setFocused(false)
           onBlur?.(e)
         }}
-        placeholderTextColor={colors.mutedForeground}
+        placeholderTextColor={colors.foregroundMuted}
         allowFontScaling={true}
         {...props}
       />
@@ -72,7 +72,7 @@ export function Textarea({
         <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
       {!error && hint ? (
-        <Text style={[styles.helperText, { color: colors.mutedForeground }]} allowFontScaling={true}>{hint}</Text>
+        <Text style={[styles.helperText, { color: colors.foregroundMuted }]} allowFontScaling={true}>{hint}</Text>
       ) : null}
     </View>
   )
@@ -88,11 +88,12 @@ const styles = StyleSheet.create({
   },
   input: {
     fontFamily: 'Poppins-Regular',
-    borderWidth: 1,
+    borderWidth: 2,
     borderRadius: ms(8),
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     fontSize: ms(15),
+    includeFontPadding: false,
   },
   helperText: {
     fontFamily: 'Poppins-Regular',