@retray-dev/ui-kit 9.1.0 → 9.3.0

package/dist/ImageUpload.js

@@ -0,0 +1,399 @@
+'use strict';
+
+var React3 = require('react');
+var reactNative = require('react-native');
+var vectorIcons = require('@expo/vector-icons');
+var reactNativeSizeMatters = require('react-native-size-matters');
+var pressto = require('pressto');
+var reactNativeReanimated = require('react-native-reanimated');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+
+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');
+});
+var _haptics = null;
+var _hapticsLoaded = false;
+async function getHaptics() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_hapticsLoaded) {
+    _hapticsLoaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
+  }
+  return _haptics;
+}
+var _pulsar = null;
+var _pulsarChecked = false;
+var _pulsarAvailable = false;
+function isPulsarNativeRegistered() {
+  try {
+    const g = globalThis;
+    if (typeof g.__turboModuleProxy === "function") {
+      return g.__turboModuleProxy("RNPulsar") != null;
+    }
+    return reactNative.NativeModules?.RNPulsar != null;
+  } catch {
+    return false;
+  }
+}
+function getPulsar() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_pulsarChecked) {
+    _pulsarChecked = true;
+    try {
+      if (isPulsarNativeRegistered()) {
+        _pulsar = __require("react-native-pulsar");
+        _pulsarAvailable = true;
+      }
+    } catch {
+      _pulsar = null;
+      _pulsarAvailable = false;
+    }
+  }
+  return _pulsarAvailable ? _pulsar : null;
+}
+function impactLight() {
+  if (reactNative.Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Light);
+    } else {
+      getPulsar()?.Presets.System.impactLight();
+    }
+  });
+}
+
+// src/theme/colorUtils.ts
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  if (full.length !== 6) return null;
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16)
+  };
+}
+function componentToHex(c) {
+  return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
+}
+function rgbToHex(r, g, b) {
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+function withAlphaOnWhite(hex, alpha) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const r = rgb.r * alpha + 255 * (1 - alpha);
+  const g = rgb.g * alpha + 255 * (1 - alpha);
+  const b = rgb.b * alpha + 255 * (1 - alpha);
+  return rgbToHex(r, g, b);
+}
+function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
+  const rgb = hexToRgb(hex);
+  const bg = hexToRgb(bgHex);
+  if (!rgb || !bg) return hex;
+  const r = rgb.r * alpha + bg.r * (1 - alpha);
+  const g = rgb.g * alpha + bg.g * (1 - alpha);
+  const b = rgb.b * alpha + bg.b * (1 - alpha);
+  return rgbToHex(r, g, b);
+}
+function mixWithBackground(fgHex, bgHex, opacity) {
+  const fg = hexToRgb(fgHex);
+  const bg = hexToRgb(bgHex);
+  if (!fg || !bg) return fgHex;
+  const r = fg.r * opacity + bg.r * (1 - opacity);
+  const g = fg.g * opacity + bg.g * (1 - opacity);
+  const b = fg.b * opacity + bg.b * (1 - opacity);
+  return rgbToHex(r, g, b);
+}
+function lighten(hex, amount) {
+  return withAlphaOnWhite(hex, 1 - amount);
+}
+function darken(hex, amount) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
+}
+
+// src/theme/colors.ts
+var defaultLight = {
+  background: "#ffffff",
+  foreground: "#1a1a1a",
+  card: "#ffffff",
+  primary: "#1a1a1a",
+  primaryForeground: "#ffffff",
+  // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
+  accent: "#d4561d",
+  accentForeground: "#ffffff",
+  border: "#dddddd",
+  // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
+  destructive: "#c72828",
+  destructiveForeground: "#ffffff",
+  success: "#1a7a45",
+  successForeground: "#ffffff",
+  // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
+  warning: "#9a5200",
+  warningForeground: "#ffffff"
+};
+function deriveColors(t, scheme) {
+  const dark = scheme === "dark";
+  const bg = t.background;
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
+  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
+  const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
+  const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
+  const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
+  const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
+  const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
+  const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
+  const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
+  return {
+    ...t,
+    foregroundSubtle,
+    foregroundMuted,
+    surface,
+    surfaceStrong,
+    destructiveTint,
+    destructiveBorder,
+    successTint,
+    successBorder,
+    warningTint,
+    warningBorder,
+    overlay: t.overlay ?? "rgba(0,0,0,0.45)",
+    accentResolved: t.accent ?? t.primary,
+    accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
+    ring: t.accent ?? t.primary,
+    input: t.border,
+    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
+  };
+}
+
+// src/theme/ThemeProvider.tsx
+var ThemeContext = React3.createContext({
+  colors: deriveColors(defaultLight, "light"),
+  colorScheme: "light"
+});
+function useTheme() {
+  const context = React3.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+var isWeb = reactNative.Platform.OS === "web";
+var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
+var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
+var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
+var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
+
+// src/tokens.ts
+var RADIUS = {
+  lg: 20};
+var sizeMap = {
+  sm: "small",
+  md: "small",
+  lg: "large"
+};
+var labelFontSize = {
+  sm: ms(11),
+  md: ms(13),
+  lg: ms(14)
+};
+function Spinner({ size = "md", color, label, ...props }) {
+  const { colors } = useTheme();
+  const a11yLabel = label || "Loading";
+  if (label) {
+    return /* @__PURE__ */ React3__default.default.createElement(
+      reactNative.View,
+      {
+        style: styles.wrapper,
+        accessibilityRole: "progressbar",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: { busy: true }
+      },
+      /* @__PURE__ */ React3__default.default.createElement(reactNative.ActivityIndicator, { size: sizeMap[size], color: color ?? colors.primary, ...props }),
+      /* @__PURE__ */ React3__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [styles.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }],
+          allowFontScaling: true
+        },
+        label
+      )
+    );
+  }
+  return /* @__PURE__ */ React3__default.default.createElement(
+    reactNative.ActivityIndicator,
+    {
+      size: sizeMap[size],
+      color: color ?? colors.primary,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: { busy: true },
+      ...props
+    }
+  );
+}
+var styles = reactNative.StyleSheet.create({
+  wrapper: {
+    alignItems: "center",
+    gap: vs(6)
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    lineHeight: mvs(18)
+  }
+});
+({
+  /** Material-style ease-out — natural deceleration for state changes. */
+  standard: reactNativeReanimated.Easing.bezier(0.2, 0, 0, 1),
+  /** Strong ease-out for expanding surfaces (Accordion open). */
+  expand: reactNativeReanimated.Easing.bezier(0.23, 1, 0.32, 1),
+  /** Quick ease-in for collapsing. */
+  collapse: reactNativeReanimated.Easing.in(reactNativeReanimated.Easing.ease)
+});
+var PRESS_SCALE = {
+  button: 0.95,
+  card: 0.98,
+  row: 0.97,
+  chip: 0.94
+};
+pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.button) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+var PressableCard = pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.card) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.row) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.chip) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.button) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+
+// src/components/ImageUpload/ImageUpload.tsx
+function ImageUpload({
+  value,
+  onChange,
+  loading = false,
+  placeholder = "Tap to add image",
+  width,
+  height = 200,
+  borderRadius = RADIUS.lg,
+  resizeMode = "cover",
+  disabled = false,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const handlePress = async () => {
+    if (disabled || loading) return;
+    impactLight();
+    let ImagePicker;
+    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 (reactNative.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 = {
+    width,
+    height,
+    borderRadius,
+    borderWidth: value ? 0 : 1,
+    borderStyle: "dashed",
+    borderColor: colors.border,
+    backgroundColor: value ? "transparent" : colors.surface,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ React3__default.default.createElement(
+    PressableCard,
+    {
+      onPress: handlePress,
+      enabled: !disabled && !loading,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? (value ? "Change image" : placeholder),
+      accessibilityState: { disabled: disabled || loading },
+      style: [containerStyle, style]
+    },
+    value ? /* @__PURE__ */ React3__default.default.createElement(
+      reactNative.Image,
+      {
+        source: { uri: value },
+        style: [reactNative.StyleSheet.absoluteFillObject, { borderRadius }],
+        resizeMode
+      }
+    ) : /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.placeholder }, /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Feather, { name: "image", size: ms(28), color: colors.foregroundMuted }), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.placeholderText, { color: colors.foregroundMuted }], allowFontScaling: true }, placeholder)),
+    loading ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles2.loadingOverlay, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React3__default.default.createElement(Spinner, { size: "md" })) : null,
+    value && !loading ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.editBadge, pointerEvents: "none" }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles2.editBadgeInner, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Feather, { name: "edit-2", size: ms(12), color: "#fff" }))) : null
+  );
+}
+var styles2 = reactNative.StyleSheet.create({
+  placeholder: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: vs(8)
+  },
+  placeholderText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13)
+  },
+  loadingOverlay: {
+    ...reactNative.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"
+  }
+});
+
+exports.ImageUpload = ImageUpload;

package/dist/ImageUpload.mjs

@@ -0,0 +1,9 @@
+export { ImageUpload } from './chunk-Y4GL2MHX.mjs';
+import './chunk-WBOOUHSS.mjs';
+import './chunk-3DKJ2GIC.mjs';
+import './chunk-EJ7ZPXOH.mjs';
+import './chunk-DVK4G2GT.mjs';
+import './chunk-QY3X2UYR.mjs';
+import './chunk-SOYNZDVY.mjs';
+import './chunk-2CE3TQVY.mjs';
+import './chunk-Y6FXYEAI.mjs';

package/dist/Input.d.mts

@@ -17,7 +17,9 @@ 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;
 }
-declare function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, sheetMode, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps): React.JSX.Element;
 
 export { Input, type InputProps };

package/dist/Input.d.ts

@@ -17,7 +17,9 @@ 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;
 }
-declare function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, sheetMode, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps): React.JSX.Element;
 
 export { Input, type InputProps };

package/dist/Input.js

@@ -2,7 +2,8 @@
 
 var React3 = require('react');
 var reactNative = require('react-native');
-var Animated = require('react-native-reanimated');
+var bottomSheet = require('@gorhom/bottom-sheet');
+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');
@@ -11,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);
@@ -190,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, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }) {
+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;
@@ -237,22 +227,45 @@ 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,
-    /* @__PURE__ */ React3__default.default.createElement(
+    sheetMode ? /* @__PURE__ */ React3__default.default.createElement(
+      bottomSheet.BottomSheetTextInput,
+      {
+        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
+      }
+    ) : /* @__PURE__ */ React3__default.default.createElement(
       reactNative.TextInput,
       {
         style: [
@@ -302,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-756RAKE4.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.
@@ -53,12 +58,14 @@ interface ListItemProps {
     titleStyle?: TextStyle;
     /** Style applied to the subtitle Text. */
     subtitleStyle?: TextStyle;
+    /** Max lines for the subtitle. Defaults to 2. */
+    subtitleNumberOfLines?: number;
     /** Style applied to the caption Text. */
     captionStyle?: TextStyle;
     /** 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, 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.
@@ -53,12 +58,14 @@ interface ListItemProps {
     titleStyle?: TextStyle;
     /** Style applied to the subtitle Text. */
     subtitleStyle?: TextStyle;
+    /** Max lines for the subtitle. Defaults to 2. */
+    subtitleNumberOfLines?: number;
     /** Style applied to the caption Text. */
     captionStyle?: TextStyle;
     /** 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, 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 };