@retray-dev/ui-kit 9.2.0 → 9.3.1

package/dist/index.mjs

@@ -1,14 +1,15 @@
+export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
 export { Text } from './chunk-WJLKJMKR.mjs';
-export { Textarea } from './chunk-EH745HE5.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 { Switch } from './chunk-QKH5ZOD5.mjs';
 export { TabBar } from './chunk-MLF3EZFW.mjs';
-export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
 export { Pressable } from './chunk-MBMXYJJV.mjs';
 export { PricingCard } from './chunk-4I7D47FH.mjs';
 export { Progress } from './chunk-OB4JUQ3O.mjs';
@@ -17,14 +18,14 @@ 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 { LabelValue } from './chunk-A4MDAP7G.mjs';
 export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-T4I5WVHA.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 { 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';
@@ -32,6 +33,7 @@ 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 { 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';
@@ -39,10 +41,8 @@ export { Checkbox } from './chunk-AV4EMIRH.mjs';
 export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
 export { ConfirmDialog } from './chunk-FZZLPJ6B.mjs';
 export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput } from './chunk-KNSENOV4.mjs';
-export { Input } from './chunk-LVYEU5ZK.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-6MKGPAR2.mjs';
 export { AppHeader } from './chunk-AZJF2BLK.mjs';
@@ -56,7 +56,6 @@ 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "9.2.0",
+  "version": "9.3.1",
   "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",
@@ -41,6 +45,7 @@
     "lint:all": "pnpm lint && pnpm --filter retray-ui-kit-example lint",
     "format:all": "pnpm format && pnpm --filter retray-ui-kit-example format",
     "verify": "pnpm typecheck && pnpm lint && pnpm test && pnpm build",
+    "test:fonts": "./scripts/test-consumer-fonts.sh",
     "deploy": "pnpm typecheck && pnpm build && npm publish --access public"
   },
   "keywords": [
@@ -72,7 +77,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,7 +14,9 @@
  * }
  */
 // `.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).
+// The build step copies all .otf files into dist/assets/fonts/ so these paths
+// resolve correctly without any ../traversal that Metro would reject.
 declare const require: (path: string) => number
 
 export const SohneFonts = {

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 };