@retray-dev/ui-kit 9.1.0 → 9.3.0

package/dist/index.mjs

@@ -1,13 +1,16 @@
+export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
+export { Text } from './chunk-WJLKJMKR.mjs';
+export { Textarea } from './chunk-CZCQZHG6.mjs';
 export { Toggle } from './chunk-KIHCWCWL.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
+export { Separator } from './chunk-MX6HRKMI.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
+export { SheetSelect } from './chunk-URI2WBIV.mjs';
 export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
 export { Slider } from './chunk-JMOZEC77.mjs';
-export { Spinner } from './chunk-WBOOUHSS.mjs';
 export { Switch } from './chunk-QKH5ZOD5.mjs';
 export { TabBar } from './chunk-MLF3EZFW.mjs';
-export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
-export { Text } from './chunk-WJLKJMKR.mjs';
-export { Textarea } from './chunk-EH745HE5.mjs';
+export { Pressable } from './chunk-MBMXYJJV.mjs';
 export { PricingCard } from './chunk-4I7D47FH.mjs';
 export { Progress } from './chunk-OB4JUQ3O.mjs';
 export { RadioGroup } from './chunk-X4G6APW6.mjs';
@@ -15,34 +18,33 @@ export { RetrayProvider } from './chunk-YFZ3ELX5.mjs';
 export { ToastProvider, sonnerToast as toast, useToast } from './chunk-2UYENBLV.mjs';
 export { Select } from './chunk-A3A6KNQN.mjs';
 export { SelectableGrid } from './chunk-NA7PARID.mjs';
-export { Separator } from './chunk-MX6HRKMI.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
+export { LabelValue } from './chunk-A4MDAP7G.mjs';
 export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-BNP626TY.mjs';
+export { ListItem } from './chunk-OHBNABL5.mjs';
 export { MediaCard } from './chunk-VGTDN7SW.mjs';
 export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-IRRY3CRZ.mjs';
 export { MenuItem } from './chunk-ZJKGQMYH.mjs';
 export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
-export { Pressable } from './chunk-MBMXYJJV.mjs';
+export { DetailRow } from './chunk-JB67UOB5.mjs';
 export { EmptyState } from './chunk-6OAZJ577.mjs';
 export { ErrorBoundary } from './chunk-LXJIIOYQ.mjs';
 export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
+export { ImageUpload } from './chunk-Y4GL2MHX.mjs';
+export { Spinner } from './chunk-WBOOUHSS.mjs';
 export { ImageViewer } from './chunk-Z4BVUWW6.mjs';
 export { PagerDots } from './chunk-4K625MVM.mjs';
-export { LabelValue } from './chunk-A4MDAP7G.mjs';
+export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
 export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
 import './chunk-YNROWHQJ.mjs';
 export { Checkbox } from './chunk-AV4EMIRH.mjs';
 export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
-export { ConfirmDialog } from './chunk-7QHVVCB3.mjs';
+export { ConfirmDialog } from './chunk-FZZLPJ6B.mjs';
 export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput } from './chunk-MAC465BB.mjs';
-export { Input } from './chunk-756RAKE4.mjs';
-import './chunk-26BCI223.mjs';
-export { DetailRow } from './chunk-JB67UOB5.mjs';
+export { CurrencyInput } from './chunk-JUXSWN54.mjs';
+export { Input } from './chunk-ZUR7AU5R.mjs';
 export { Accordion } from './chunk-O3HA6TYM.mjs';
-export { AlertBanner } from './chunk-M6ZXVBTK.mjs';
+export { AlertBanner } from './chunk-6MKGPAR2.mjs';
 export { AppHeader } from './chunk-AZJF2BLK.mjs';
 export { IconButton } from './chunk-3U4SSNWP.mjs';
 export { Avatar } from './chunk-JT7HKXRB.mjs';
@@ -54,9 +56,9 @@ import './chunk-DVK4G2GT.mjs';
 export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
 export { Icon, configureIconFamilies, renderIcon } from './chunk-T7XZ7H7Y.mjs';
 export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme } from './chunk-SOYNZDVY.mjs';
-export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';
+import { useState, useCallback } from 'react';
 
 // src/utils/typography.ts
 function getResponsiveFontSize(text, maxSize, steps = [
@@ -71,5 +73,41 @@ function getResponsiveFontSize(text, maxSize, steps = [
   }
   return maxSize - 8;
 }
+function useConfirmDialog(options) {
+  const [visible, setVisible] = useState(false);
+  const [target, setTarget] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const open = useCallback((t) => {
+    setTarget(t ?? null);
+    setVisible(true);
+  }, []);
+  const handleConfirm = useCallback(async () => {
+    setLoading(true);
+    try {
+      await options.onConfirm();
+    } finally {
+      setLoading(false);
+      setVisible(false);
+      setTarget(null);
+    }
+  }, [options]);
+  const handleCancel = useCallback(() => {
+    setVisible(false);
+    setTarget(null);
+    options.onCancel?.();
+  }, [options]);
+  return {
+    visible,
+    target,
+    loading,
+    open,
+    dialogProps: {
+      visible,
+      loading,
+      onConfirm: handleConfirm,
+      onCancel: handleCancel
+    }
+  };
+}
 
-export { getResponsiveFontSize };
+export { getResponsiveFontSize, useConfirmDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "9.1.0",
+  "version": "9.3.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -11,7 +11,11 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./fonts": "./src/fonts.ts",
+    "./fonts": {
+      "types": "./dist/fonts.d.ts",
+      "import": "./dist/fonts.mjs",
+      "require": "./dist/fonts.js"
+    },
     "./*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*.mjs",
@@ -22,7 +26,10 @@
     "dist",
     "src",
     "COMPONENTS.md",
-    "EXAMPLES.md"
+    "CONSUMER.md",
+    "EXAMPLES.md",
+    "FONTS.md",
+    "DESIGN.md"
   ],
   "scripts": {
     "build": "tsup",
@@ -55,6 +62,7 @@
     "@shopify/react-native-skia": ">=1.0.0",
     "expo-font": ">=14.0.0",
     "expo-haptics": ">=14.0.0",
+    "expo-image-picker": ">=15.0.0",
     "expo-linear-gradient": ">=13.0.0",
     "expo-sensors": ">=13.0.0",
     "pressto": ">=0.6.0",
@@ -63,13 +71,13 @@
     "react-native-ease": ">=0.7.0",
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-pulsar": ">=1.6.0",
-    "react-native-reanimated": ">=4.0.0",
+    "react-native-reanimated": ">=4.0.0 <5.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-screens": ">=3.0.0",
     "react-native-size-matters": ">=0.4.0",
     "react-native-svg": ">=15.0.0",
-    "react-native-worklets": ">=0.5.0",
-    "sonner-native": ">=0.20.0"
+    "react-native-worklets": ">=0.5.1",
+    "sonner-native": ">=0.22.0"
   },
   "peerDependenciesMeta": {
     "@shopify/react-native-skia": {
@@ -80,6 +88,15 @@
     },
     "react-native-pulsar": {
       "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
+    },
+    "react-native-ease": {
+      "optional": false
+    },
+    "pressto": {
+      "optional": false
     }
   },
   "pnpm": {

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { View, Text, StyleSheet, ViewStyle } from 'react-native'
-import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons'
+import { View, Text, StyleSheet, ViewStyle, TouchableOpacity } from 'react-native'
+import { FontAwesome5, MaterialIcons, Entypo, Feather } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
@@ -15,10 +15,12 @@ export interface AlertBannerProps {
   icon?: React.ReactNode
   iconName?: string
   iconColor?: string
+  /** Called when the user taps the dismiss (×) button. If omitted, no button is shown. */
+  onDismiss?: () => void
   style?: ViewStyle
 }
 
-export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, style }: AlertBannerProps) {
+export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, onDismiss, style }: AlertBannerProps) {
   const { colors, colorScheme } = useTheme()
 
   // Match Toast richColors appearance — saturated semantic colors
@@ -81,6 +83,17 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
           <Text style={[styles.description, { color: colors.foreground, opacity: 0.85 }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
+      {onDismiss ? (
+        <TouchableOpacity
+          onPress={onDismiss}
+          style={styles.dismissButton}
+          activeOpacity={0.6}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+        >
+          <Feather name="x" size={ms(16)} color={colors.foregroundMuted} />
+        </TouchableOpacity>
+      ) : null}
     </View>
   )
 }
@@ -109,4 +122,9 @@ const styles = StyleSheet.create({
     fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
   },
+  dismissButton: {
+    padding: s(4),
+    marginTop: vs(-2),
+    marginRight: -s(4),
+  },
 })

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -19,6 +19,8 @@ export interface ConfirmDialogProps {
   confirmLabel?: string
   cancelLabel?: string
   confirmVariant?: 'primary' | 'destructive'
+  /** Show a loading spinner in the confirm button (e.g. while async action completes). */
+  loading?: boolean
   onConfirm: () => void
   onCancel: () => void
 }
@@ -30,6 +32,7 @@ export function ConfirmDialog({
   confirmLabel = 'Confirm',
   cancelLabel = 'Cancel',
   confirmVariant = 'primary',
+  loading = false,
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
@@ -78,6 +81,8 @@ export function ConfirmDialog({
             label={confirmLabel}
             variant={confirmVariant}
             fullWidth
+            loading={loading}
+            disabled={loading}
             onPress={() => { notificationSuccess(); onConfirm() }}
             icon={
               <Feather

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -22,6 +22,8 @@ export interface CurrencyInputProps {
   editable?: boolean
   containerStyle?: ViewStyle
   style?: TextStyle
+  /** Use inside a Sheet/BottomSheet — passes sheetMode to the underlying Input. */
+  sheetMode?: boolean
 }
 
 function formatCurrency(raw: string, separator: '.' | ','): string {
@@ -44,6 +46,7 @@ export function CurrencyInput({
   editable,
   containerStyle,
   style,
+  sheetMode,
 }: CurrencyInputProps) {
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
@@ -83,6 +86,7 @@ export function CurrencyInput({
       containerStyle={containerStyle}
       inputWrapperStyle={isLarge ? { paddingVertical: vs(16), minHeight: 72 } : undefined}
       style={[inputStyle, style]}
+      sheetMode={sheetMode}
     />
   )
 }

package/src/components/ImageUpload/ImageUpload.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import { View, Text, Image, StyleSheet, ViewStyle, Platform } from 'react-native'
+import { Feather } from '@expo/vector-icons'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+import { Spinner } from '../Spinner'
+import { PressableCard } from '../../utils/pressable'
+
+export interface ImageUploadProps {
+  /** Current image URI. Pass null/undefined to show placeholder. */
+  value?: string | null
+  /** Called with the selected image URI. Receives null when image is cleared. */
+  onChange?: (uri: string | null) => void
+  /** Show a loading spinner over the image (e.g. while uploading). */
+  loading?: boolean
+  /** Text shown when no image is selected. */
+  placeholder?: string
+  /** Width of the upload area. Defaults to full width (undefined). */
+  width?: number
+  /** Height of the upload area. Defaults to 200. */
+  height?: number
+  /** Border radius of the upload area. Defaults to RADIUS.lg. */
+  borderRadius?: number
+  /** Aspect ratio for the selected image. Defaults to 'cover'. */
+  resizeMode?: 'cover' | 'contain' | 'stretch'
+  disabled?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
+}
+
+export function ImageUpload({
+  value,
+  onChange,
+  loading = false,
+  placeholder = 'Tap to add image',
+  width,
+  height = 200,
+  borderRadius = RADIUS.lg,
+  resizeMode = 'cover',
+  disabled = false,
+  style,
+  accessibilityLabel,
+}: ImageUploadProps) {
+  const { colors } = useTheme()
+
+  const handlePress = async () => {
+    if (disabled || loading) return
+    impactLight()
+
+    // Dynamic import so expo-image-picker is optional at module load time.
+    // Consumers who don't use ImageUpload never pull this dep.
+    let ImagePicker: typeof import('expo-image-picker')
+    try {
+      ImagePicker = await import('expo-image-picker')
+    } catch {
+      if (__DEV__) console.warn('[ImageUpload] expo-image-picker not installed. Add it as a dependency.')
+      return
+    }
+
+    if (Platform.OS !== 'web') {
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
+      if (status !== 'granted') return
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 0.8,
+    })
+
+    if (!result.canceled && result.assets[0]) {
+      onChange?.(result.assets[0].uri)
+    }
+  }
+
+  const containerStyle: ViewStyle = {
+    width,
+    height,
+    borderRadius,
+    borderWidth: value ? 0 : 1,
+    borderStyle: 'dashed',
+    borderColor: colors.border,
+    backgroundColor: value ? 'transparent' : colors.surface,
+    overflow: 'hidden',
+  }
+
+  return (
+    <PressableCard
+      onPress={handlePress}
+      enabled={!disabled && !loading}
+      rippleColor="transparent"
+      touchSoundDisabled
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? (value ? 'Change image' : placeholder)}
+      accessibilityState={{ disabled: disabled || loading }}
+      style={[containerStyle, style]}
+    >
+      {value ? (
+        <Image
+          source={{ uri: value }}
+          style={[StyleSheet.absoluteFillObject, { borderRadius }]}
+          resizeMode={resizeMode}
+        />
+      ) : (
+        <View style={styles.placeholder}>
+          <Feather name="image" size={ms(28)} color={colors.foregroundMuted} />
+          <Text style={[styles.placeholderText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+            {placeholder}
+          </Text>
+        </View>
+      )}
+      {loading ? (
+        <View style={[styles.loadingOverlay, { backgroundColor: colors.overlay }]}>
+          <Spinner size="md" />
+        </View>
+      ) : null}
+      {value && !loading ? (
+        <View style={styles.editBadge} pointerEvents="none">
+          <View style={[styles.editBadgeInner, { backgroundColor: colors.overlay }]}>
+            <Feather name="edit-2" size={ms(12)} color="#fff" />
+          </View>
+        </View>
+      ) : null}
+    </PressableCard>
+  )
+}
+
+const styles = StyleSheet.create({
+  placeholder: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: vs(8),
+  },
+  placeholderText: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  editBadge: {
+    position: 'absolute',
+    bottom: vs(8),
+    right: s(8),
+  },
+  editBadgeInner: {
+    width: s(28),
+    height: s(28),
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/ImageUpload/index.ts

@@ -0,0 +1 @@
+export * from './ImageUpload'

package/src/components/Input/Input.tsx

@@ -1,16 +1,12 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-  interpolate,
-} from 'react-native-reanimated'
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet'
+import { EaseView } from 'react-native-ease'
 import { AntDesign } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { TIMINGS } from '../../utils/animations'
+import { COLOR_TRANSITION } from '../../utils/animations'
 
 const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
@@ -33,17 +29,15 @@ export interface InputProps extends TextInputProps {
   type?: 'text' | 'password'
   containerStyle?: ViewStyle
   inputWrapperStyle?: ViewStyle
+  /** Use inside a Sheet/BottomSheet — swaps TextInput for BottomSheetTextInput to fix keyboard handling. */
+  sheetMode?: boolean
 }
 
-export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps) {
+export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, sheetMode = false, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
 
-  const focusProgress = useColorTransition(focused, {
-    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
-  })
-
   const isDisabled = disabled || editable === false
   const isPassword = type === 'password'
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry
@@ -68,29 +62,23 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
     ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted)
     : suffix
 
-  // Border drawn on an absolute overlay so the 1px→2px weight change never
-  // resizes the layout box (which would reflow content / shift the interface).
-  // Wrapper keeps borderWidth: 0; overlay grows inward and is non-interactive.
-  const borderAnimStyle = useAnimatedStyle(() => ({
-    borderColor: error
-      ? colors.destructive
-      : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
-    borderWidth: error
-      ? 2
-      : interpolate(focusProgress.value, [0, 1], [1, 2]),
-  }))
+  // Border color animated via EaseView. Width is static (1px normal, 2px error)
+  // to avoid worklets 0.9.x interpolation issues with borderWidth.
+  const borderColor = error ? colors.destructive : (focused ? colors.primary : colors.border)
 
   return (
     <View style={[styles.container, isDisabled && styles.containerDisabled, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <Animated.View
+      <EaseView
         style={[
           styles.inputWrapper,
           { backgroundColor: isDisabled ? colors.surface : colors.background },
+          error && styles.inputWrapperError,
           inputWrapperStyle,
         ]}
+        animate={{ borderColor }}
+        transition={COLOR_TRANSITION}
       >
-        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
         {effectivePrefix ? (
           typeof effectivePrefix === 'string' ? (
             <Text style={[styles.prefixText, { color: colors.foregroundMuted }, prefixStyle]} allowFontScaling={true}>
@@ -100,28 +88,53 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
             <View style={styles.prefixContainer}>{effectivePrefix}</View>
           )
         ) : null}
-        <TextInput
-          style={[
-            styles.input,
-            { color: colors.foreground },
-            webInputResetStyle,
-            style,
-          ]}
-          onFocus={(e) => {
-            setFocused(true)
-            onFocus?.(e)
-          }}
-          onBlur={(e) => {
-            setFocused(false)
-            onBlur?.(e)
-          }}
-          placeholderTextColor={colors.foregroundMuted}
-          allowFontScaling={true}
-          secureTextEntry={effectiveSecure}
-          editable={isDisabled ? false : editable}
-          accessibilityLabel={accessibilityLabel ?? label}
-          {...props}
-        />
+        {sheetMode ? (
+          <BottomSheetTextInput
+            style={[
+              styles.input,
+              { color: colors.foreground },
+              webInputResetStyle as TextStyle,
+              style,
+            ]}
+            onFocus={(e) => {
+              setFocused(true)
+              onFocus?.(e)
+            }}
+            onBlur={(e) => {
+              setFocused(false)
+              onBlur?.(e)
+            }}
+            placeholderTextColor={colors.foregroundMuted}
+            allowFontScaling={true}
+            secureTextEntry={effectiveSecure}
+            editable={isDisabled ? false : editable}
+            accessibilityLabel={accessibilityLabel ?? label}
+            {...props}
+          />
+        ) : (
+          <TextInput
+            style={[
+              styles.input,
+              { color: colors.foreground },
+              webInputResetStyle,
+              style,
+            ]}
+            onFocus={(e) => {
+              setFocused(true)
+              onFocus?.(e)
+            }}
+            onBlur={(e) => {
+              setFocused(false)
+              onBlur?.(e)
+            }}
+            placeholderTextColor={colors.foregroundMuted}
+            allowFontScaling={true}
+            secureTextEntry={effectiveSecure}
+            editable={isDisabled ? false : editable}
+            accessibilityLabel={accessibilityLabel ?? label}
+            {...props}
+          />
+        )}
         {effectiveSuffix ? (
           typeof effectiveSuffix === 'string' ? (
             <Text style={[styles.suffixText, { color: colors.foregroundMuted }, suffixStyle]} allowFontScaling={true}>
@@ -131,7 +144,7 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
             <View style={styles.suffixContainer}>{effectiveSuffix}</View>
           )
         ) : null}
-      </Animated.View>
+      </EaseView>
       {error ? (
         <Text
           style={[styles.helperText, { color: colors.destructive }]}
@@ -162,16 +175,14 @@ const styles = StyleSheet.create({
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    // Border lives on borderOverlay (absolute) so its 1px→2px focus change
-    // never resizes this box. Wrapper itself carries no border.
     borderRadius: 8,
+    borderWidth: 1,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     minHeight: 48,
   },
-  borderOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    borderRadius: 8,
+  inputWrapperError: {
+    borderWidth: 2,
   },
   input: {
     fontFamily: 'Sohne-Regular',