@retray-dev/ui-kit 1.5.0 → 1.6.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference
+# @retray-dev/ui-kit — Component Reference (v1.6.0)
 
 This file is the AI reference for this package. It is shipped inside the npm package so consuming projects can import it into their `CLAUDE.md` with:
 
@@ -74,7 +74,7 @@ function MyComponent() {
 
 ## Theme Tokens
 
-All 18 tokens are available via `useTheme().colors`.
+All 20 tokens are available via `useTheme().colors`.
 
 | Token | Light | Dark | Semantic Role |
 |-------|-------|------|---------------|
@@ -95,6 +95,8 @@ All 18 tokens are available via `useTheme().colors`.
 | `border` | `#e5e5e5` | `#2a2a2a` | Borders and dividers |
 | `input` | `#e5e5e5` | `#2a2a2a` | Input field border color |
 | `ring` | `#a3a3a3` | `#d4d4d4` | Focus ring color |
+| `success` | `#16a34a` | `#22c55e` | Success state (Toast success variant) |
+| `successForeground` | `#ffffff` | `#ffffff` | Text on success background |
 
 ---
 
@@ -145,6 +147,8 @@ All 18 tokens are available via `useTheme().colors`.
 | loading | `boolean` | `false` | Replaces label with a spinner and forces disabled state |
 | fullWidth | `boolean` | `false` | Stretches to container width (`alignSelf: 'stretch'`) |
 | disabled | `boolean` | — | Reduces opacity to 0.45 |
+| icon | `React.ReactNode` | — | Icon rendered alongside the label |
+| iconPosition | `'left' \| 'right'` | `'left'` | Side the icon appears on |
 
 **Variants:**
 - `primary`: filled with `primary` token — main actions
@@ -160,6 +164,7 @@ All 18 tokens are available via `useTheme().colors`.
 <Button label="Cancel" variant="ghost" onPress={onCancel} />
 <Button label="Delete" variant="outline" size="sm" />
 <Button label="Submitting..." loading fullWidth />
+<Button label="Share" icon={<ShareIcon size={16} />} iconPosition="right" />
 ```
 
 ---
@@ -187,6 +192,50 @@ All 18 tokens are available via `useTheme().colors`.
 
 ---
 
+### CurrencyInput
+
+**Import:** `import { CurrencyInput } from '@retray-dev/ui-kit'`
+**When to use:** Monetary or numeric inputs that need thousands formatting while typing. Wraps `Input` — shares the same visual design, label, error, and hint behavior.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| value | `string` | — | Controlled display value (includes prefix, e.g. `'$1,234'`) |
+| onChangeText | `(formatted: string) => void` | — | Called with the formatted display string |
+| onChangeValue | `(raw: number) => void` | — | Called with the parsed number (no separators, no prefix) |
+| prefix | `string` | `'$'` | Symbol prepended to the formatted value |
+| thousandsSeparator | `'.' \| ','` | `'.'` | Character used to separate groups of three digits |
+| label | `string` | — | Label above the input |
+| error | `string` | — | Error text below; turns border red |
+| hint | `string` | — | Helper text below (hidden when `error` is set) |
+| placeholder | `string` | `'$0'` | Defaults to `prefix + '0'` |
+| editable | `boolean` | — | Pass `false` to disable editing |
+| containerStyle | `ViewStyle` | — | Style for the outer container |
+
+**Example:**
+```tsx
+const [display, setDisplay] = useState('')
+const [amount, setAmount] = useState(0)
+
+<CurrencyInput
+  label="Amount"
+  value={display}
+  onChangeText={setDisplay}
+  onChangeValue={setAmount}
+  hint={`Parsed: ${amount}`}
+/>
+
+// European format (dot as thousands separator)
+<CurrencyInput
+  prefix="€"
+  thousandsSeparator="."
+  value={display}
+  onChangeText={setDisplay}
+  onChangeValue={setAmount}
+/>
+```
+
+---
+
 ### Textarea
 
 **Import:** `import { Textarea } from '@retray-dev/ui-kit'`

package/README.md

@@ -2,7 +2,7 @@
 
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
-- 23 components across 5 categories
+- 24 components across 5 categories
 - Light/dark theme with 18 color tokens and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -101,7 +101,7 @@ const { colors, colorScheme } = useTheme()
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`                       |
 | Surfaces    | `Card`, `Alert`, `EmptyState`                                                                   |
-| Form        | `Button`, `Input`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
+| Form        | `Button`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Overlays    | `Sheet`                                                                                         |
 | Feedback    | `Toast` / `ToastProvider` / `useToast`                                                          |

package/dist/index.d.mts

@@ -367,4 +367,23 @@ interface ToastProviderProps {
 }
 declare function ToastProvider({ children }: ToastProviderProps): React.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ColorScheme, EmptyState, type EmptyStateProps, Input, type InputProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, useTheme, useToast };
+interface CurrencyInputProps {
+    value?: string;
+    onChangeText?: (formatted: string) => void;
+    /** Called with the parsed numeric value (no separators, no prefix). */
+    onChangeValue?: (raw: number) => void;
+    /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+    prefix?: string;
+    /** Character used to separate groups of three digits. Defaults to `'.'`. */
+    thousandsSeparator?: '.' | ',';
+    label?: string;
+    /** Red helper text; also changes input border to destructive color. */
+    error?: string;
+    hint?: string;
+    placeholder?: string;
+    editable?: boolean;
+    containerStyle?: ViewStyle;
+}
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, label, error, hint, placeholder, editable, containerStyle, }: CurrencyInputProps): React.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ColorScheme, CurrencyInput, type CurrencyInputProps, EmptyState, type EmptyStateProps, Input, type InputProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, useTheme, useToast };

package/dist/index.d.ts

@@ -367,4 +367,23 @@ interface ToastProviderProps {
 }
 declare function ToastProvider({ children }: ToastProviderProps): React.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ColorScheme, EmptyState, type EmptyStateProps, Input, type InputProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, useTheme, useToast };
+interface CurrencyInputProps {
+    value?: string;
+    onChangeText?: (formatted: string) => void;
+    /** Called with the parsed numeric value (no separators, no prefix). */
+    onChangeValue?: (raw: number) => void;
+    /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+    prefix?: string;
+    /** Character used to separate groups of three digits. Defaults to `'.'`. */
+    thousandsSeparator?: '.' | ',';
+    label?: string;
+    /** Red helper text; also changes input border to destructive color. */
+    error?: string;
+    hint?: string;
+    placeholder?: string;
+    editable?: boolean;
+    containerStyle?: ViewStyle;
+}
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, label, error, hint, placeholder, editable, containerStyle, }: CurrencyInputProps): React.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ColorScheme, CurrencyInput, type CurrencyInputProps, EmptyState, type EmptyStateProps, Input, type InputProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, useTheme, useToast };

package/dist/index.js

@@ -6,6 +6,7 @@ var Haptics11 = require('expo-haptics');
 var expoLinearGradient = require('expo-linear-gradient');
 var ReanimatedAnimated = require('react-native-reanimated');
 var bottomSheet = require('@gorhom/bottom-sheet');
+var reactNativeWorklets = require('react-native-worklets');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 
@@ -1617,7 +1618,7 @@ function ToastNotification({ item, onDismiss }) {
     const timer = setTimeout(() => {
       translateY.value = ReanimatedAnimated.withTiming(-80, { duration: 200 });
       opacity.value = ReanimatedAnimated.withTiming(0, { duration: 200 }, (done) => {
-        if (done) ReanimatedAnimated.runOnJS(onDismiss)();
+        if (done) reactNativeWorklets.scheduleOnRN(onDismiss);
       });
     }, item.duration ?? 3e3);
     return () => clearTimeout(timer);
@@ -1629,7 +1630,7 @@ function ToastNotification({ item, onDismiss }) {
     if (shouldDismiss) {
       const direction = translateX.value > 0 ? 1 : -1;
       translateX.value = ReanimatedAnimated.withTiming(direction * 500, { duration: 200 }, (done) => {
-        if (done) ReanimatedAnimated.runOnJS(onDismiss)();
+        if (done) reactNativeWorklets.scheduleOnRN(onDismiss);
       });
       opacity.value = ReanimatedAnimated.withTiming(0, { duration: 150 });
     } else {
@@ -1710,6 +1711,48 @@ var styles21 = reactNative.StyleSheet.create({
     fontSize: 12
   }
 });
+function formatCurrency(raw, separator) {
+  const digits = raw.replace(/\D/g, "");
+  if (!digits) return "";
+  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+}
+function CurrencyInput({
+  value,
+  onChangeText,
+  onChangeValue,
+  prefix = "$",
+  thousandsSeparator = ".",
+  label,
+  error,
+  hint,
+  placeholder,
+  editable,
+  containerStyle
+}) {
+  const handleChange = (text) => {
+    const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
+    const formatted = formatCurrency(withoutPrefix, thousandsSeparator);
+    const display = formatted ? `${prefix}${formatted}` : "";
+    onChangeText?.(display);
+    const separatorRegex = new RegExp(`\\${thousandsSeparator}`, "g");
+    const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
+    onChangeValue?.(isNaN(raw) ? 0 : raw);
+  };
+  return /* @__PURE__ */ React23__default.default.createElement(
+    Input,
+    {
+      value,
+      onChangeText: handleChange,
+      keyboardType: "numeric",
+      label,
+      error,
+      hint,
+      placeholder: placeholder ?? `${prefix}0`,
+      editable,
+      containerStyle
+    }
+  );
+}
 
 Object.defineProperty(exports, "BottomSheetModalProvider", {
   enumerable: true,
@@ -1727,6 +1770,7 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.CurrencyInput = CurrencyInput;
 exports.EmptyState = EmptyState;
 exports.Input = Input;
 exports.Progress = Progress;

package/dist/index.mjs

@@ -2,9 +2,10 @@ import React23, { createContext, useMemo, useContext, useRef, useState, useEffec
 import { StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, PanResponder } from 'react-native';
 import * as Haptics11 from 'expo-haptics';
 import { LinearGradient } from 'expo-linear-gradient';
-import ReanimatedAnimated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS, withSpring } from 'react-native-reanimated';
+import ReanimatedAnimated, { useSharedValue, useAnimatedStyle, withTiming, Easing, withSpring } from 'react-native-reanimated';
 import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { scheduleOnRN } from 'react-native-worklets';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -1592,7 +1593,7 @@ function ToastNotification({ item, onDismiss }) {
     const timer = setTimeout(() => {
       translateY.value = withTiming(-80, { duration: 200 });
       opacity.value = withTiming(0, { duration: 200 }, (done) => {
-        if (done) runOnJS(onDismiss)();
+        if (done) scheduleOnRN(onDismiss);
       });
     }, item.duration ?? 3e3);
     return () => clearTimeout(timer);
@@ -1604,7 +1605,7 @@ function ToastNotification({ item, onDismiss }) {
     if (shouldDismiss) {
       const direction = translateX.value > 0 ? 1 : -1;
       translateX.value = withTiming(direction * 500, { duration: 200 }, (done) => {
-        if (done) runOnJS(onDismiss)();
+        if (done) scheduleOnRN(onDismiss);
       });
       opacity.value = withTiming(0, { duration: 150 });
     } else {
@@ -1685,5 +1686,47 @@ var styles21 = StyleSheet.create({
     fontSize: 12
   }
 });
+function formatCurrency(raw, separator) {
+  const digits = raw.replace(/\D/g, "");
+  if (!digits) return "";
+  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+}
+function CurrencyInput({
+  value,
+  onChangeText,
+  onChangeValue,
+  prefix = "$",
+  thousandsSeparator = ".",
+  label,
+  error,
+  hint,
+  placeholder,
+  editable,
+  containerStyle
+}) {
+  const handleChange = (text) => {
+    const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
+    const formatted = formatCurrency(withoutPrefix, thousandsSeparator);
+    const display = formatted ? `${prefix}${formatted}` : "";
+    onChangeText?.(display);
+    const separatorRegex = new RegExp(`\\${thousandsSeparator}`, "g");
+    const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
+    onChangeValue?.(isNaN(raw) ? 0 : raw);
+  };
+  return /* @__PURE__ */ React23.createElement(
+    Input,
+    {
+      value,
+      onChangeText: handleChange,
+      keyboardType: "numeric",
+      label,
+      error,
+      hint,
+      placeholder: placeholder ?? `${prefix}0`,
+      editable,
+      containerStyle
+    }
+  );
+}
 
-export { Accordion, Alert, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, EmptyState, Input, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, useTheme, useToast };
+export { Accordion, Alert, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CurrencyInput, EmptyState, Input, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -44,7 +44,7 @@
     "@gorhom/bottom-sheet": ">=5.0.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-worklets": ">=0.5.0",
+    "react-native-worklets": ">=0.8.0",
     "react-native-safe-area-context": ">=4.0.0"
   },
   "pnpm": {
@@ -52,7 +52,7 @@
       "fast-xml-parser": "^5.5.7",
       "react": "19.1.0",
       "react-native": "0.81.5",
-      "react-native-worklets": "0.5.1"
+      "react-native-worklets": "0.8.1"
     },
     "onlyBuiltDependencies": [
       "esbuild"
@@ -65,9 +65,9 @@
     "expo-linear-gradient": "~14.1.5",
     "react": "18.2.0",
     "react-native": "0.74.0",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-worklets": "~0.5.0",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-reanimated": "~4.3.0",
+    "react-native-worklets": "~0.8.1",
     "react-native-safe-area-context": "~5.6.2",
     "eslint": "^9.0.0",
     "@eslint/js": "^9.0.0",

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { ViewStyle } from 'react-native'
+import { Input } from '../Input'
+
+export interface CurrencyInputProps {
+  value?: string
+  onChangeText?: (formatted: string) => void
+  /** Called with the parsed numeric value (no separators, no prefix). */
+  onChangeValue?: (raw: number) => void
+  /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+  prefix?: string
+  /** Character used to separate groups of three digits. Defaults to `'.'`. */
+  thousandsSeparator?: '.' | ','
+  label?: string
+  /** Red helper text; also changes input border to destructive color. */
+  error?: string
+  hint?: string
+  placeholder?: string
+  editable?: boolean
+  containerStyle?: ViewStyle
+}
+
+function formatCurrency(raw: string, separator: '.' | ','): string {
+  const digits = raw.replace(/\D/g, '')
+  if (!digits) return ''
+  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator)
+}
+
+export function CurrencyInput({
+  value,
+  onChangeText,
+  onChangeValue,
+  prefix = '$',
+  thousandsSeparator = '.',
+  label,
+  error,
+  hint,
+  placeholder,
+  editable,
+  containerStyle,
+}: CurrencyInputProps) {
+  const handleChange = (text: string) => {
+    const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
+    const formatted = formatCurrency(withoutPrefix, thousandsSeparator)
+    const display = formatted ? `${prefix}${formatted}` : ''
+    onChangeText?.(display)
+    const separatorRegex = new RegExp(`\\${thousandsSeparator}`, 'g')
+    const raw = parseFloat(formatted.replace(separatorRegex, '') || '0')
+    onChangeValue?.(isNaN(raw) ? 0 : raw)
+  }
+
+  return (
+    <Input
+      value={value}
+      onChangeText={handleChange}
+      keyboardType="numeric"
+      label={label}
+      error={error}
+      hint={hint}
+      placeholder={placeholder ?? `${prefix}0`}
+      editable={editable}
+      containerStyle={containerStyle}
+    />
+  )
+}

package/src/components/CurrencyInput/index.ts

@@ -0,0 +1,2 @@
+export { CurrencyInput } from './CurrencyInput'
+export type { CurrencyInputProps } from './CurrencyInput'

package/src/components/Toast/Toast.tsx

@@ -5,9 +5,9 @@ import Animated, {
   useAnimatedStyle,
   withSpring,
   withTiming,
-  runOnJS,
   Easing,
 } from 'react-native-reanimated'
+import { scheduleOnRN } from 'react-native-worklets'
 import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import * as Haptics from 'expo-haptics'
@@ -54,7 +54,7 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
     const timer = setTimeout(() => {
       translateY.value = withTiming(-80, { duration: 200 })
       opacity.value = withTiming(0, { duration: 200 }, (done) => {
-        if (done) runOnJS(onDismiss)()
+        if (done) scheduleOnRN(onDismiss)
       })
     }, item.duration ?? 3000)
 
@@ -72,7 +72,7 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
       if (shouldDismiss) {
         const direction = translateX.value > 0 ? 1 : -1
         translateX.value = withTiming(direction * 500, { duration: 200 }, (done) => {
-          if (done) runOnJS(onDismiss)()
+          if (done) scheduleOnRN(onDismiss)
         })
         opacity.value = withTiming(0, { duration: 150 })
       } else {

package/src/index.ts

@@ -27,3 +27,4 @@ export * from './components/Slider'
 export * from './components/Sheet'
 export * from './components/Select'
 export * from './components/Toast'
+export * from './components/CurrencyInput'