@retray-dev/ui-kit 9.2.0 → 9.3.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v9.2.0)
+# @retray-dev/ui-kit — Component Reference (v9.3.0)
 
 This file is the AI reference for this package. Add all three lines below to your project's `CLAUDE.md` to give Claude full context — components, setup guide, and usage examples:
 
@@ -2647,6 +2647,7 @@ dismiss(id)
 | title | `string` | required | Primary text |
 | subtitle | `string` | — | Secondary line below title |
 | caption | `string` | — | Tertiary line below subtitle |
+| imageSource | `ImageSourcePropType` | — | Image for left slot (40×40, radius 8). Takes precedence over `leftRender`/`leftIcon` |
 | leftRender | `ReactNode` | — | Content in the fixed 44×44pt left slot |
 | rightRender | `string \| ReactNode` | — | Content on the right edge. Strings auto-styled as muted text |
 | leftIcon | `string` | — | Icon name for left slot. Takes precedence over `leftRender` |

package/dist/CurrencyInput.js

@@ -3,7 +3,7 @@
 var React3 = require('react');
 var reactNative = require('react-native');
 var bottomSheet = require('@gorhom/bottom-sheet');
-var Animated = require('react-native-reanimated');
+var reactNativeEase = require('react-native-ease');
 var vectorIcons = require('@expo/vector-icons');
 var reactNativeSizeMatters = require('react-native-size-matters');
 var AntDesign = require('@expo/vector-icons/AntDesign');
@@ -12,11 +12,11 @@ var Feather = require('@expo/vector-icons/Feather');
 var FontAwesome5 = require('@expo/vector-icons/FontAwesome5');
 var MaterialIcons = require('@expo/vector-icons/MaterialIcons');
 var Ionicons = require('@expo/vector-icons/Ionicons');
+var reactNativeReanimated = require('react-native-reanimated');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React3__default = /*#__PURE__*/_interopDefault(React3);
-var Animated__default = /*#__PURE__*/_interopDefault(Animated);
 var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
 var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
 var Feather__default = /*#__PURE__*/_interopDefault(Feather);
@@ -191,38 +191,27 @@ function renderIcon(name, size, color) {
 }
 var TIMINGS = {
   /** Color/opacity transitions on toggles, checkboxes, switches. */
-  state: { duration: 160 },
-  /** Focus ring on inputs. */
-  focusIn: { duration: 140 },
-  focusOut: { duration: 100 }};
-var EASINGS = {
+  state: { duration: 160 }};
+({
   /** Material-style ease-out — natural deceleration for state changes. */
-  standard: Animated.Easing.bezier(0.2, 0, 0, 1),
+  standard: reactNativeReanimated.Easing.bezier(0.2, 0, 0, 1),
   /** Strong ease-out for expanding surfaces (Accordion open). */
-  expand: Animated.Easing.bezier(0.23, 1, 0.32, 1),
+  expand: reactNativeReanimated.Easing.bezier(0.23, 1, 0.32, 1),
   /** Quick ease-in for collapsing. */
-  collapse: Animated.Easing.in(Animated.Easing.ease)
+  collapse: reactNativeReanimated.Easing.in(reactNativeReanimated.Easing.ease)
+});
+var COLOR_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
 };
 
-// src/utils/useColorTransition.ts
-function useColorTransition(active, options = {}) {
-  const { duration = TIMINGS.state.duration } = options;
-  const progress = Animated.useSharedValue(active ? 1 : 0);
-  React3.useEffect(() => {
-    progress.value = Animated.withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
-  }, [active, duration, progress]);
-  return progress;
-}
-
 // src/components/Input/Input.tsx
 var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
 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 }) {
   const { colors } = useTheme();
   const [focused, setFocused] = React3.useState(false);
   const [showPassword, setShowPassword] = React3.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;
@@ -238,20 +227,19 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
     },
     /* @__PURE__ */ React3__default.default.createElement(vectorIcons.AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
   ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
-  const borderAnimStyle = Animated.useAnimatedStyle(() => ({
-    borderColor: error ? colors.destructive : Animated.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
-    borderWidth: error ? 2 : Animated.interpolate(focusProgress.value, [0, 1], [1, 2])
-  }));
+  const borderColor = error ? colors.destructive : focused ? colors.primary : colors.border;
   return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.container, isDisabled && styles.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React3__default.default.createElement(
-    Animated__default.default.View,
+    reactNativeEase.EaseView,
     {
       style: [
         styles.inputWrapper,
         { backgroundColor: isDisabled ? colors.surface : colors.background },
+        error && styles.inputWrapperError,
         inputWrapperStyle
-      ]
+      ],
+      animate: { borderColor },
+      transition: COLOR_TRANSITION
     },
-    /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: [styles.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.prefixContainer }, effectivePrefix) : null,
     sheetMode ? /* @__PURE__ */ React3__default.default.createElement(
       bottomSheet.BottomSheetTextInput,
@@ -327,16 +315,14 @@ var styles = reactNative.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: {
-    ...reactNative.StyleSheet.absoluteFillObject,
-    borderRadius: 8
+  inputWrapperError: {
+    borderWidth: 2
   },
   input: {
     fontFamily: "Sohne-Regular",

package/dist/CurrencyInput.mjs

@@ -1,6 +1,5 @@
-export { CurrencyInput } from './chunk-KNSENOV4.mjs';
-import './chunk-LVYEU5ZK.mjs';
-import './chunk-26BCI223.mjs';
+export { CurrencyInput } from './chunk-JUXSWN54.mjs';
+import './chunk-ZUR7AU5R.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-T7XZ7H7Y.mjs';
 import './chunk-SOYNZDVY.mjs';

package/dist/Input.js

@@ -3,7 +3,7 @@
 var React3 = require('react');
 var reactNative = require('react-native');
 var bottomSheet = require('@gorhom/bottom-sheet');
-var Animated = require('react-native-reanimated');
+var reactNativeEase = require('react-native-ease');
 var vectorIcons = require('@expo/vector-icons');
 var reactNativeSizeMatters = require('react-native-size-matters');
 var AntDesign = require('@expo/vector-icons/AntDesign');
@@ -12,11 +12,11 @@ var Feather = require('@expo/vector-icons/Feather');
 var FontAwesome5 = require('@expo/vector-icons/FontAwesome5');
 var MaterialIcons = require('@expo/vector-icons/MaterialIcons');
 var Ionicons = require('@expo/vector-icons/Ionicons');
+var reactNativeReanimated = require('react-native-reanimated');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React3__default = /*#__PURE__*/_interopDefault(React3);
-var Animated__default = /*#__PURE__*/_interopDefault(Animated);
 var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
 var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
 var Feather__default = /*#__PURE__*/_interopDefault(Feather);
@@ -191,38 +191,27 @@ function renderIcon(name, size, color) {
 }
 var TIMINGS = {
   /** Color/opacity transitions on toggles, checkboxes, switches. */
-  state: { duration: 160 },
-  /** Focus ring on inputs. */
-  focusIn: { duration: 140 },
-  focusOut: { duration: 100 }};
-var EASINGS = {
+  state: { duration: 160 }};
+({
   /** Material-style ease-out — natural deceleration for state changes. */
-  standard: Animated.Easing.bezier(0.2, 0, 0, 1),
+  standard: reactNativeReanimated.Easing.bezier(0.2, 0, 0, 1),
   /** Strong ease-out for expanding surfaces (Accordion open). */
-  expand: Animated.Easing.bezier(0.23, 1, 0.32, 1),
+  expand: reactNativeReanimated.Easing.bezier(0.23, 1, 0.32, 1),
   /** Quick ease-in for collapsing. */
-  collapse: Animated.Easing.in(Animated.Easing.ease)
+  collapse: reactNativeReanimated.Easing.in(reactNativeReanimated.Easing.ease)
+});
+var COLOR_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
 };
 
-// src/utils/useColorTransition.ts
-function useColorTransition(active, options = {}) {
-  const { duration = TIMINGS.state.duration } = options;
-  const progress = Animated.useSharedValue(active ? 1 : 0);
-  React3.useEffect(() => {
-    progress.value = Animated.withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
-  }, [active, duration, progress]);
-  return progress;
-}
-
 // src/components/Input/Input.tsx
 var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
 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 }) {
   const { colors } = useTheme();
   const [focused, setFocused] = React3.useState(false);
   const [showPassword, setShowPassword] = React3.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;
@@ -238,20 +227,19 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
     },
     /* @__PURE__ */ React3__default.default.createElement(vectorIcons.AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
   ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
-  const borderAnimStyle = Animated.useAnimatedStyle(() => ({
-    borderColor: error ? colors.destructive : Animated.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
-    borderWidth: error ? 2 : Animated.interpolate(focusProgress.value, [0, 1], [1, 2])
-  }));
+  const borderColor = error ? colors.destructive : focused ? colors.primary : colors.border;
   return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.container, isDisabled && styles.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React3__default.default.createElement(
-    Animated__default.default.View,
+    reactNativeEase.EaseView,
     {
       style: [
         styles.inputWrapper,
         { backgroundColor: isDisabled ? colors.surface : colors.background },
+        error && styles.inputWrapperError,
         inputWrapperStyle
-      ]
+      ],
+      animate: { borderColor },
+      transition: COLOR_TRANSITION
     },
-    /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: [styles.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.prefixContainer }, effectivePrefix) : null,
     sheetMode ? /* @__PURE__ */ React3__default.default.createElement(
       bottomSheet.BottomSheetTextInput,
@@ -327,16 +315,14 @@ var styles = reactNative.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: {
-    ...reactNative.StyleSheet.absoluteFillObject,
-    borderRadius: 8
+  inputWrapperError: {
+    borderWidth: 2
   },
   input: {
     fontFamily: "Sohne-Regular",

package/dist/Input.mjs

@@ -1,5 +1,4 @@
-export { Input } from './chunk-LVYEU5ZK.mjs';
-import './chunk-26BCI223.mjs';
+export { Input } from './chunk-ZUR7AU5R.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-T7XZ7H7Y.mjs';
 import './chunk-SOYNZDVY.mjs';

package/dist/ListItem.d.mts

@@ -1,8 +1,13 @@
 import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ImageSourcePropType, ViewStyle, TextStyle } from 'react-native';
 
 type ListItemVariant = 'plain' | 'card';
 interface ListItemProps {
+    /**
+     * Image source for the left slot. If provided, renders an Image (40×40, borderRadius 8).
+     * Takes precedence over `leftRender` and `leftIcon`.
+     */
+    imageSource?: ImageSourcePropType;
     /**
      * Arbitrary content rendered on the left (avatar, icon, image, etc.).
      * Rendered inside a 44×44 aligned container.
@@ -60,7 +65,7 @@ interface ListItemProps {
     /** Accessibility label override. Defaults to the title. */
     accessibilityLabel?: string;
 }
-declare function ListItemBase({ leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, subtitleNumberOfLines, captionStyle, accessibilityLabel, }: ListItemProps): React.JSX.Element;
+declare function ListItemBase({ imageSource, leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, subtitleNumberOfLines, captionStyle, accessibilityLabel, }: ListItemProps): React.JSX.Element;
 declare const ListItem: React.MemoExoticComponent<typeof ListItemBase>;
 
 export { ListItem, type ListItemProps };

package/dist/ListItem.d.ts

@@ -1,8 +1,13 @@
 import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ImageSourcePropType, ViewStyle, TextStyle } from 'react-native';
 
 type ListItemVariant = 'plain' | 'card';
 interface ListItemProps {
+    /**
+     * Image source for the left slot. If provided, renders an Image (40×40, borderRadius 8).
+     * Takes precedence over `leftRender` and `leftIcon`.
+     */
+    imageSource?: ImageSourcePropType;
     /**
      * Arbitrary content rendered on the left (avatar, icon, image, etc.).
      * Rendered inside a 44×44 aligned container.
@@ -60,7 +65,7 @@ interface ListItemProps {
     /** Accessibility label override. Defaults to the title. */
     accessibilityLabel?: string;
 }
-declare function ListItemBase({ leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, subtitleNumberOfLines, captionStyle, accessibilityLabel, }: ListItemProps): React.JSX.Element;
+declare function ListItemBase({ imageSource, leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, subtitleNumberOfLines, captionStyle, accessibilityLabel, }: ListItemProps): React.JSX.Element;
 declare const ListItem: React.MemoExoticComponent<typeof ListItemBase>;
 
 export { ListItem, type ListItemProps };

package/dist/ListItem.js

@@ -294,6 +294,7 @@ pressto.createAnimatedPressable((progress) => {
 
 // src/components/ListItem/ListItem.tsx
 function ListItemBase({
+  imageSource,
   leftRender,
   rightRender,
   trailing,
@@ -322,7 +323,7 @@ function ListItemBase({
     selectionAsync();
     onPress?.();
   };
-  const effectiveLeft = leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
+  const effectiveLeft = imageSource ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Image, { source: imageSource, style: styles.image }) : leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
   const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted) : rightRender ?? trailing;
   const cardStyle = variant === "card" ? {
     backgroundColor: colors.card,
@@ -403,6 +404,11 @@ var styles = reactNative.StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0
   },
+  image: {
+    width: s(40),
+    height: s(40),
+    borderRadius: 8
+  },
   content: {
     flex: 1,
     gap: vs(4)

package/dist/ListItem.mjs

@@ -1,4 +1,4 @@
-export { ListItem } from './chunk-T4I5WVHA.mjs';
+export { ListItem } from './chunk-OHBNABL5.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';

package/dist/Textarea.mjs

@@ -1,5 +1,4 @@
-export { Textarea } from './chunk-EH745HE5.mjs';
-import './chunk-26BCI223.mjs';
+export { Textarea } from './chunk-CZCQZHG6.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-T7XZ7H7Y.mjs';
 import './chunk-SOYNZDVY.mjs';

package/dist/{chunk-EH745HE5.mjs → chunk-CZCQZHG6.mjs}

@@ -1,12 +1,21 @@
-import { useColorTransition } from './chunk-26BCI223.mjs';
-import { TIMINGS } from './chunk-DVK4G2GT.mjs';
+import { TIMINGS, EASINGS } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Platform, StyleSheet, View, Text, TextInput } from 'react-native';
-import Animated, { useAnimatedStyle, interpolate, interpolateColor } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, interpolate, interpolateColor, useSharedValue, withTiming } from 'react-native-reanimated';
 
+function useColorTransition(active, options = {}) {
+  const { duration = TIMINGS.state.duration } = options;
+  const progress = useSharedValue(active ? 1 : 0);
+  useEffect(() => {
+    progress.value = withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
+  }, [active, duration, progress]);
+  return progress;
+}
+
+// src/components/Textarea/Textarea.tsx
 var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
 function Textarea({
   label,

package/dist/{chunk-KNSENOV4.mjs → chunk-JUXSWN54.mjs}

@@ -1,4 +1,4 @@
-import { Input } from './chunk-LVYEU5ZK.mjs';
+import { Input } from './chunk-ZUR7AU5R.mjs';
 import { ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 

package/dist/{chunk-T4I5WVHA.mjs → chunk-OHBNABL5.mjs}

@@ -5,10 +5,11 @@ import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, s, mvs, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, Image, View, Text } from 'react-native';
 import { Entypo } from '@expo/vector-icons';
 
 function ListItemBase({
+  imageSource,
   leftRender,
   rightRender,
   trailing,
@@ -37,7 +38,7 @@ function ListItemBase({
     selectionAsync();
     onPress?.();
   };
-  const effectiveLeft = leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
+  const effectiveLeft = imageSource ? /* @__PURE__ */ React.createElement(Image, { source: imageSource, style: styles.image }) : leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
   const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted) : rightRender ?? trailing;
   const cardStyle = variant === "card" ? {
     backgroundColor: colors.card,
@@ -118,6 +119,11 @@ var styles = StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0
   },
+  image: {
+    width: s(40),
+    height: s(40),
+    borderRadius: 8
+  },
   content: {
     flex: 1,
     gap: vs(4)

package/dist/{chunk-LVYEU5ZK.mjs → chunk-ZUR7AU5R.mjs}

@@ -1,12 +1,11 @@
-import { useColorTransition } from './chunk-26BCI223.mjs';
-import { TIMINGS } from './chunk-DVK4G2GT.mjs';
+import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';
 import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
-import Animated, { useAnimatedStyle, interpolate, interpolateColor } from 'react-native-reanimated';
+import { EaseView } from 'react-native-ease';
 import { AntDesign } from '@expo/vector-icons';
 
 var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
@@ -14,9 +13,6 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
   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;
@@ -32,20 +28,19 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
     },
     /* @__PURE__ */ React.createElement(AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
   ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
-  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])
-  }));
+  const borderColor = error ? colors.destructive : focused ? colors.primary : colors.border;
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, isDisabled && styles.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(
-    Animated.View,
+    EaseView,
     {
       style: [
         styles.inputWrapper,
         { backgroundColor: isDisabled ? colors.surface : colors.background },
+        error && styles.inputWrapperError,
         inputWrapperStyle
-      ]
+      ],
+      animate: { borderColor },
+      transition: COLOR_TRANSITION
     },
-    /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React.createElement(View, { style: styles.prefixContainer }, effectivePrefix) : null,
     sheetMode ? /* @__PURE__ */ React.createElement(
       BottomSheetTextInput,
@@ -121,16 +116,14 @@ var 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",

package/dist/fonts.d.mts

@@ -0,0 +1,32 @@
+declare const SohneFonts: {
+    readonly 'Sohne-ExtraLight': number;
+    readonly 'Sohne-ExtraLightItalic': number;
+    readonly 'Sohne-Light': number;
+    readonly 'Sohne-LightItalic': number;
+    readonly 'Sohne-Regular': number;
+    readonly 'Sohne-Italic': number;
+    readonly 'Sohne-Medium': number;
+    readonly 'Sohne-MediumItalic': number;
+    readonly 'Sohne-SemiBold': number;
+    readonly 'Sohne-SemiBoldItalic': number;
+    readonly 'Sohne-Bold': number;
+    readonly 'Sohne-BoldItalic': number;
+    readonly 'Sohne-ExtraBold': number;
+    readonly 'Sohne-ExtraBoldItalic': number;
+    readonly 'SohneMono-ExtraLight': number;
+    readonly 'SohneMono-ExtraLightItalic': number;
+    readonly 'SohneMono-Light': number;
+    readonly 'SohneMono-LightItalic': number;
+    readonly 'SohneMono-Regular': number;
+    readonly 'SohneMono-Italic': number;
+    readonly 'SohneMono-Medium': number;
+    readonly 'SohneMono-MediumItalic': number;
+    readonly 'SohneMono-SemiBold': number;
+    readonly 'SohneMono-SemiBoldItalic': number;
+    readonly 'SohneMono-Bold': number;
+    readonly 'SohneMono-BoldItalic': number;
+    readonly 'SohneMono-ExtraBold': number;
+    readonly 'SohneMono-ExtraBoldItalic': number;
+};
+
+export { SohneFonts };

package/dist/fonts.d.ts

@@ -0,0 +1,32 @@
+declare const SohneFonts: {
+    readonly 'Sohne-ExtraLight': number;
+    readonly 'Sohne-ExtraLightItalic': number;
+    readonly 'Sohne-Light': number;
+    readonly 'Sohne-LightItalic': number;
+    readonly 'Sohne-Regular': number;
+    readonly 'Sohne-Italic': number;
+    readonly 'Sohne-Medium': number;
+    readonly 'Sohne-MediumItalic': number;
+    readonly 'Sohne-SemiBold': number;
+    readonly 'Sohne-SemiBoldItalic': number;
+    readonly 'Sohne-Bold': number;
+    readonly 'Sohne-BoldItalic': number;
+    readonly 'Sohne-ExtraBold': number;
+    readonly 'Sohne-ExtraBoldItalic': number;
+    readonly 'SohneMono-ExtraLight': number;
+    readonly 'SohneMono-ExtraLightItalic': number;
+    readonly 'SohneMono-Light': number;
+    readonly 'SohneMono-LightItalic': number;
+    readonly 'SohneMono-Regular': number;
+    readonly 'SohneMono-Italic': number;
+    readonly 'SohneMono-Medium': number;
+    readonly 'SohneMono-MediumItalic': number;
+    readonly 'SohneMono-SemiBold': number;
+    readonly 'SohneMono-SemiBoldItalic': number;
+    readonly 'SohneMono-Bold': number;
+    readonly 'SohneMono-BoldItalic': number;
+    readonly 'SohneMono-ExtraBold': number;
+    readonly 'SohneMono-ExtraBoldItalic': number;
+};
+
+export { SohneFonts };

package/dist/fonts.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/fonts.ts
+var SohneFonts = {
+  // Sohne base
+  "Sohne-ExtraLight": __require("../src/assets/fonts/Sohne-ExtraLight.otf"),
+  "Sohne-ExtraLightItalic": __require("../src/assets/fonts/Sohne-ExtraLightItalic.otf"),
+  "Sohne-Light": __require("../src/assets/fonts/Sohne-Light.otf"),
+  "Sohne-LightItalic": __require("../src/assets/fonts/Sohne-LightItalic.otf"),
+  "Sohne-Regular": __require("../src/assets/fonts/Sohne-Regular.otf"),
+  "Sohne-Italic": __require("../src/assets/fonts/Sohne-Italic.otf"),
+  "Sohne-Medium": __require("../src/assets/fonts/Sohne-Medium.otf"),
+  "Sohne-MediumItalic": __require("../src/assets/fonts/Sohne-MediumItalic.otf"),
+  "Sohne-SemiBold": __require("../src/assets/fonts/Sohne-SemiBold.otf"),
+  "Sohne-SemiBoldItalic": __require("../src/assets/fonts/Sohne-SemiBoldItalic.otf"),
+  "Sohne-Bold": __require("../src/assets/fonts/Sohne-Bold.otf"),
+  "Sohne-BoldItalic": __require("../src/assets/fonts/Sohne-BoldItalic.otf"),
+  "Sohne-ExtraBold": __require("../src/assets/fonts/Sohne-ExtraBold.otf"),
+  "Sohne-ExtraBoldItalic": __require("../src/assets/fonts/Sohne-ExtraBoldItalic.otf"),
+  // SohneMono
+  "SohneMono-ExtraLight": __require("../src/assets/fonts/SohneMono-ExtraLight.otf"),
+  "SohneMono-ExtraLightItalic": __require("../src/assets/fonts/SohneMono-ExtraLightItalic.otf"),
+  "SohneMono-Light": __require("../src/assets/fonts/SohneMono-Light.otf"),
+  "SohneMono-LightItalic": __require("../src/assets/fonts/SohneMono-LightItalic.otf"),
+  "SohneMono-Regular": __require("../src/assets/fonts/SohneMono-Regular.otf"),
+  "SohneMono-Italic": __require("../src/assets/fonts/SohneMono-Italic.otf"),
+  "SohneMono-Medium": __require("../src/assets/fonts/SohneMono-Medium.otf"),
+  "SohneMono-MediumItalic": __require("../src/assets/fonts/SohneMono-MediumItalic.otf"),
+  "SohneMono-SemiBold": __require("../src/assets/fonts/SohneMono-SemiBold.otf"),
+  "SohneMono-SemiBoldItalic": __require("../src/assets/fonts/SohneMono-SemiBoldItalic.otf"),
+  "SohneMono-Bold": __require("../src/assets/fonts/SohneMono-Bold.otf"),
+  "SohneMono-BoldItalic": __require("../src/assets/fonts/SohneMono-BoldItalic.otf"),
+  "SohneMono-ExtraBold": __require("../src/assets/fonts/SohneMono-ExtraBold.otf"),
+  "SohneMono-ExtraBoldItalic": __require("../src/assets/fonts/SohneMono-ExtraBoldItalic.otf")
+};
+
+exports.SohneFonts = SohneFonts;