@retray-dev/ui-kit 9.2.0 → 9.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "9.2.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",
@@ -72,7 +76,7 @@
     "react-native-screens": ">=3.0.0",
     "react-native-size-matters": ">=0.4.0",
     "react-native-svg": ">=15.0.0",
-    "react-native-worklets": "~0.5.1",
+    "react-native-worklets": ">=0.5.1",
     "sonner-native": ">=0.22.0"
   },
   "peerDependenciesMeta": {

package/src/components/Input/Input.tsx

@@ -1,17 +1,12 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform } from 'react-native'
 import { BottomSheetTextInput } from '@gorhom/bottom-sheet'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-  interpolate,
-} from 'react-native-reanimated'
+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'
@@ -43,10 +38,6 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
   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
@@ -71,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}>
@@ -159,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 }]}
@@ -190,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',

package/src/components/ListItem/ListItem.tsx

@@ -5,6 +5,8 @@ import {
   StyleSheet,
   ViewStyle,
   TextStyle,
+  Image,
+  ImageSourcePropType,
 } from 'react-native'
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
@@ -17,6 +19,11 @@ import { PressableRow } from '../../utils/pressable'
 export type ListItemVariant = 'plain' | 'card'
 
 export 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.
@@ -81,6 +88,7 @@ export interface ListItemProps {
 }
 
 function ListItemBase({
+  imageSource,
   leftRender,
   rightRender,
   trailing,
@@ -111,9 +119,12 @@ function ListItemBase({
     onPress?.()
   }
 
-  const effectiveLeft: React.ReactNode = leftIcon
-    ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
-    : leftRender ?? icon
+  // imageSource takes precedence, then leftIcon, then leftRender/icon
+  const effectiveLeft: React.ReactNode = imageSource
+    ? <Image source={imageSource} style={styles.image} />
+    : leftIcon
+      ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
+      : leftRender ?? icon
 
   const effectiveRight: React.ReactNode | string | undefined = rightIcon
     ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)
@@ -241,6 +252,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
+  image: {
+    width: s(40),
+    height: s(40),
+    borderRadius: 8,
+  },
   content: {
     flex: 1,
     gap: vs(4),

package/src/fonts.ts

@@ -14,38 +14,39 @@
  * }
  */
 // `.otf` assets resolve to a Metro asset module id (number) via require() at the
-// consumer's build time. Declared locally so the dts build does not depend on @types/node.
+// consumer's build time. Paths are relative to dist/fonts.js (the compiled output).
+// Both dist/ and src/ are published in the package, so ../src/assets/fonts/ resolves correctly.
 declare const require: (path: string) => number
 
 export const SohneFonts = {
   // Sohne base
-  'Sohne-ExtraLight':         require('./assets/fonts/Sohne-ExtraLight.otf'),
-  'Sohne-ExtraLightItalic':   require('./assets/fonts/Sohne-ExtraLightItalic.otf'),
-  'Sohne-Light':              require('./assets/fonts/Sohne-Light.otf'),
-  'Sohne-LightItalic':        require('./assets/fonts/Sohne-LightItalic.otf'),
-  'Sohne-Regular':            require('./assets/fonts/Sohne-Regular.otf'),
-  'Sohne-Italic':             require('./assets/fonts/Sohne-Italic.otf'),
-  'Sohne-Medium':             require('./assets/fonts/Sohne-Medium.otf'),
-  'Sohne-MediumItalic':       require('./assets/fonts/Sohne-MediumItalic.otf'),
-  'Sohne-SemiBold':           require('./assets/fonts/Sohne-SemiBold.otf'),
-  'Sohne-SemiBoldItalic':     require('./assets/fonts/Sohne-SemiBoldItalic.otf'),
-  'Sohne-Bold':               require('./assets/fonts/Sohne-Bold.otf'),
-  'Sohne-BoldItalic':         require('./assets/fonts/Sohne-BoldItalic.otf'),
-  'Sohne-ExtraBold':          require('./assets/fonts/Sohne-ExtraBold.otf'),
-  'Sohne-ExtraBoldItalic':    require('./assets/fonts/Sohne-ExtraBoldItalic.otf'),
+  '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('./assets/fonts/SohneMono-ExtraLight.otf'),
-  'SohneMono-ExtraLightItalic':   require('./assets/fonts/SohneMono-ExtraLightItalic.otf'),
-  'SohneMono-Light':              require('./assets/fonts/SohneMono-Light.otf'),
-  'SohneMono-LightItalic':        require('./assets/fonts/SohneMono-LightItalic.otf'),
-  'SohneMono-Regular':            require('./assets/fonts/SohneMono-Regular.otf'),
-  'SohneMono-Italic':             require('./assets/fonts/SohneMono-Italic.otf'),
-  'SohneMono-Medium':             require('./assets/fonts/SohneMono-Medium.otf'),
-  'SohneMono-MediumItalic':       require('./assets/fonts/SohneMono-MediumItalic.otf'),
-  'SohneMono-SemiBold':           require('./assets/fonts/SohneMono-SemiBold.otf'),
-  'SohneMono-SemiBoldItalic':     require('./assets/fonts/SohneMono-SemiBoldItalic.otf'),
-  'SohneMono-Bold':               require('./assets/fonts/SohneMono-Bold.otf'),
-  'SohneMono-BoldItalic':         require('./assets/fonts/SohneMono-BoldItalic.otf'),
-  'SohneMono-ExtraBold':          require('./assets/fonts/SohneMono-ExtraBold.otf'),
-  'SohneMono-ExtraBoldItalic':    require('./assets/fonts/SohneMono-ExtraBoldItalic.otf'),
+  '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'),
 } as const

package/dist/chunk-26BCI223.mjs

@@ -1,14 +0,0 @@
-import { TIMINGS, EASINGS } from './chunk-DVK4G2GT.mjs';
-import { useEffect } from 'react';
-import { 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;
-}
-
-export { useColorTransition };