@retray-dev/ui-kit 9.0.0 → 9.2.0

package/EXAMPLES.md

@@ -605,7 +605,7 @@ function SettingsScreen() {
           title={name}
           subtitle={email}
           rightRender={<Badge label="Pro" variant="success" size="sm" />}
-          onPress={() => toast.success('Profile tapped')}
+          onPress={() => toast({ title: 'Profile tapped' })}
         />
         <ListItem
           leftIcon="calendar"
@@ -634,18 +634,18 @@ function SettingsScreen() {
           label="Personal Information"
           subtitle="Name, email, phone"
           iconName="user"
-          onPress={() => toast('Personal Info')}
+          onPress={() => toast({ title: 'Personal Info' })}
         />
         <MenuItem
           label="Security & Privacy"
           iconName="shield"
-          onPress={() => toast('Security')}
+          onPress={() => toast({ title: 'Security' })}
         />
         <MenuItem
           label="Payments & Payouts"
           iconName="credit-card"
           rightRender={<Badge label="2" variant="warning" size="sm" />}
-          onPress={() => toast('Payments')}
+          onPress={() => toast({ title: 'Payments' })}
         />
       </MenuGroup>
 
@@ -673,7 +673,7 @@ function SettingsScreen() {
           label="Language"
           iconName="globe"
           rightRender={<Text color={colors.foregroundMuted}>English</Text>}
-          onPress={() => toast('Language')}
+          onPress={() => toast({ title: 'Language' })}
         />
       </MenuGroup>
 
@@ -731,11 +731,11 @@ function SettingsScreen() {
             <Button
               label="Cancel"
               variant="secondary"
-              onPress={() => toast('Cancelled')}
+              onPress={() => toast({ title: 'Cancelled' })}
             />
             <Button
               label="Save Changes"
-              onPress={() => toast.success('Profile updated')}
+              onPress={() => toast({ title: 'Profile updated', variant: 'success' })}
             />
           </Form.Footer>
         </Form>
@@ -751,17 +751,17 @@ function SettingsScreen() {
         <MenuItem
           label="Help Center"
           iconName="help-circle"
-          onPress={() => toast('Help')}
+          onPress={() => toast({ title: 'Help' })}
         />
         <MenuItem
           label="Report an Issue"
           iconName="alert-triangle"
-          onPress={() => toast('Report')}
+          onPress={() => toast({ title: 'Report' })}
         />
         <MenuItem
           label="Terms of Service"
           iconName="file-text"
-          onPress={() => toast('Terms')}
+          onPress={() => toast({ title: 'Terms' })}
         />
       </MenuGroup>
 
@@ -845,13 +845,20 @@ Standard 12px gap between fields:
 
 ### Toast Feedback
 
-Use `useToast()` for success/error feedback after actions:
+Two equivalent APIs — use whichever fits your context:
 
 ```tsx
+// Option A: hook (good when you need toast inside a component)
 const { toast } = useToast()
-
 toast({ title: 'Action completed', variant: 'success' })
 toast({ title: 'Error occurred', variant: 'destructive' })
+
+// Option B: direct import (good for callbacks, utilities, outside components)
+import { toast } from '@retray-dev/ui-kit'
+toast.success('Action completed')
+toast.error('Error occurred')
+toast.warning('Slow connection')
+toast('Neutral message')
 ```
 
 ### Button Pairs & Groups

package/FONTS.md

@@ -0,0 +1,107 @@
+# Font Setup Guide
+
+## Using Sohne Fonts in Your App
+
+All components in `@retray-dev/ui-kit` use the **Sohne** font family. Consumer apps must load these fonts at the app root using `expo-font`.
+
+### Installation
+
+The library includes Sohne font files as raw `.otf` assets. Import and load them:
+
+```tsx
+import { useFonts } from 'expo-font'
+import { SohneFonts } from '@retray-dev/ui-kit/fonts'
+
+export default function App() {
+  const [fontsLoaded] = useFonts(SohneFonts)
+
+  if (!fontsLoaded) {
+    return null // or <SplashScreen />
+  }
+
+  return (
+    <ThemeProvider>
+      {/* your app */}
+    </ThemeProvider>
+  )
+}
+```
+
+### With Splash Screen
+
+```tsx
+import * as SplashScreen from 'expo-splash-screen'
+import { useFonts } from 'expo-font'
+import { SohneFonts } from '@retray-dev/ui-kit/fonts'
+
+SplashScreen.preventAutoHideAsync()
+
+export default function App() {
+  const [fontsLoaded] = useFonts(SohneFonts)
+
+  useEffect(() => {
+    if (fontsLoaded) {
+      SplashScreen.hideAsync()
+    }
+  }, [fontsLoaded])
+
+  if (!fontsLoaded) {
+    return null
+  }
+
+  return (
+    <ThemeProvider>
+      {/* your app */}
+    </ThemeProvider>
+  )
+}
+```
+
+### Font Weights Included
+
+`SohneFonts` exports 28 `.otf` files total.
+
+**Sohne (14 files):**
+- `Sohne-ExtraLight`
+- `Sohne-ExtraLightItalic`
+- `Sohne-Light`
+- `Sohne-LightItalic`
+- `Sohne-Regular`
+- `Sohne-Italic`
+- `Sohne-Medium`
+- `Sohne-MediumItalic`
+- `Sohne-SemiBold`
+- `Sohne-SemiBoldItalic`
+- `Sohne-Bold`
+- `Sohne-BoldItalic`
+- `Sohne-ExtraBold`
+- `Sohne-ExtraBoldItalic`
+
+**SohneMono (14 files):**
+- `SohneMono-ExtraLight`
+- `SohneMono-ExtraLightItalic`
+- `SohneMono-Light`
+- `SohneMono-LightItalic`
+- `SohneMono-Regular`
+- `SohneMono-Italic`
+- `SohneMono-Medium`
+- `SohneMono-MediumItalic`
+- `SohneMono-SemiBold`
+- `SohneMono-SemiBoldItalic`
+- `SohneMono-Bold`
+- `SohneMono-BoldItalic`
+- `SohneMono-ExtraBold`
+- `SohneMono-ExtraBoldItalic`
+
+### How It Works
+
+1. **Library components** reference fonts by family name (e.g., `fontFamily: 'Sohne-SemiBold'`)
+2. **Consumer app** loads font files at startup via `useFonts(SohneFonts)`
+3. **Metro bundler** resolves `require()` calls to `.otf` files in `node_modules/@retray-dev/ui-kit/src/assets/fonts/`
+4. **React Native** maps family names to loaded font files
+
+Font files ship as raw assets — **not bundled into `dist/`**. Metro handles asset resolution natively.
+
+### Peer Dependency
+
+`expo-font` ≥14.0.0 must be installed in the consuming app.

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.
 
-- 49 components across 9 categories (plus the deep-import `HolographicCard`)
+- 51 components across 9 categories (plus the deep-import `HolographicCard`)
 - Light/dark theme with 12 public tokens (25 resolved) and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -23,7 +23,7 @@ pnpm add @retray-dev/ui-kit
 Install these in your app if not already present:
 
 ```bash
-pnpm add expo-font expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons react-native-size-matters react-native-svg react-native-screens sonner-native pressto
+pnpm add expo-font expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons react-native-size-matters react-native-svg react-native-screens sonner-native pressto react-native-ease
 ```
 
 For Expo projects, run `npx expo install` instead to get SDK-compatible versions.
@@ -146,7 +146,7 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
 | Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`, `PricingCard`                                 |
-| Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid` |
+| Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SheetSelect`, `ImageUpload` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Navigation  | `AppHeader`, `TabBar`, `PagerDots`                                                              |
 | Overlays    | `Sheet`, `ConfirmDialog`, `ImageViewer`                                                         |

package/dist/AlertBanner.d.mts

@@ -9,8 +9,10 @@ interface AlertBannerProps {
     icon?: React.ReactNode;
     iconName?: string;
     iconColor?: string;
+    /** Called when the user taps the dismiss (×) button. If omitted, no button is shown. */
+    onDismiss?: () => void;
     style?: ViewStyle;
 }
-declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, style }: AlertBannerProps): React.JSX.Element;
+declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, onDismiss, style }: AlertBannerProps): React.JSX.Element;
 
 export { AlertBanner, type AlertBannerProps, type AlertBannerVariant };

package/dist/AlertBanner.d.ts

@@ -9,8 +9,10 @@ interface AlertBannerProps {
     icon?: React.ReactNode;
     iconName?: string;
     iconColor?: string;
+    /** Called when the user taps the dismiss (×) button. If omitted, no button is shown. */
+    onDismiss?: () => void;
     style?: ViewStyle;
 }
-declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, style }: AlertBannerProps): React.JSX.Element;
+declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, onDismiss, style }: AlertBannerProps): React.JSX.Element;
 
 export { AlertBanner, type AlertBannerProps, type AlertBannerVariant };

package/dist/AlertBanner.js

@@ -192,7 +192,7 @@ var RADIUS = {
   lg: 20};
 
 // src/components/AlertBanner/AlertBanner.tsx
-function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, style }) {
+function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, onDismiss, style }) {
   const { colors, colorScheme } = useTheme();
   const isDark = colorScheme === "dark";
   const accentColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : variant === "warning" ? colors.warning : colors.foreground;
@@ -218,7 +218,18 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
       accessibilityLabel: a11yLabel
     },
     /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.iconSlot }, effectiveIcon),
-    /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.content }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.description, { color: colors.foreground, opacity: 0.85 }], allowFontScaling: true }, description) : null)
+    /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.content }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.description, { color: colors.foreground, opacity: 0.85 }], allowFontScaling: true }, description) : null),
+    onDismiss ? /* @__PURE__ */ React3__default.default.createElement(
+      reactNative.TouchableOpacity,
+      {
+        onPress: onDismiss,
+        style: styles.dismissButton,
+        activeOpacity: 0.6,
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss"
+      },
+      /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Feather, { name: "x", size: ms(16), color: colors.foregroundMuted })
+    ) : null
   );
 }
 var styles = reactNative.StyleSheet.create({
@@ -244,6 +255,11 @@ var styles = reactNative.StyleSheet.create({
   description: {
     fontFamily: "Sohne-Regular",
     fontSize: ms(12)
+  },
+  dismissButton: {
+    padding: s(4),
+    marginTop: vs(-2),
+    marginRight: -s(4)
   }
 });
 

package/dist/AlertBanner.mjs

@@ -1,4 +1,4 @@
-export { AlertBanner } from './chunk-M6ZXVBTK.mjs';
+export { AlertBanner } from './chunk-6MKGPAR2.mjs';
 import './chunk-QY3X2UYR.mjs';
 import './chunk-T7XZ7H7Y.mjs';
 import './chunk-SOYNZDVY.mjs';

package/dist/ConfirmDialog.d.mts

@@ -7,9 +7,11 @@ interface ConfirmDialogProps {
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
+    /** Show a loading spinner in the confirm button (e.g. while async action completes). */
+    loading?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, loading, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };

package/dist/ConfirmDialog.d.ts

@@ -7,9 +7,11 @@ interface ConfirmDialogProps {
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
+    /** Show a loading spinner in the confirm button (e.g. while async action completes). */
+    loading?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, loading, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };

package/dist/ConfirmDialog.js

@@ -459,6 +459,7 @@ function ConfirmDialog({
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   confirmVariant = "primary",
+  loading = false,
   onConfirm,
   onCancel
 }) {
@@ -498,6 +499,8 @@ function ConfirmDialog({
         label: confirmLabel,
         variant: confirmVariant,
         fullWidth: true,
+        loading,
+        disabled: loading,
         onPress: () => {
           notificationSuccess();
           onConfirm();

package/dist/ConfirmDialog.mjs

@@ -1,4 +1,4 @@
-export { ConfirmDialog } from './chunk-7QHVVCB3.mjs';
+export { ConfirmDialog } from './chunk-FZZLPJ6B.mjs';
 import './chunk-2TFTAWVJ.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';

package/dist/CurrencyInput.d.mts

@@ -20,7 +20,9 @@ interface CurrencyInputProps {
     editable?: boolean;
     containerStyle?: ViewStyle;
     style?: TextStyle;
+    /** Use inside a Sheet/BottomSheet — passes sheetMode to the underlying Input. */
+    sheetMode?: boolean;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, sheetMode, }: CurrencyInputProps): React.JSX.Element;
 
 export { CurrencyInput, type CurrencyInputProps };

package/dist/CurrencyInput.d.ts

@@ -20,7 +20,9 @@ interface CurrencyInputProps {
     editable?: boolean;
     containerStyle?: ViewStyle;
     style?: TextStyle;
+    /** Use inside a Sheet/BottomSheet — passes sheetMode to the underlying Input. */
+    sheetMode?: boolean;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, sheetMode, }: CurrencyInputProps): React.JSX.Element;
 
 export { CurrencyInput, type CurrencyInputProps };

package/dist/CurrencyInput.js

@@ -2,6 +2,7 @@
 
 var React3 = require('react');
 var reactNative = require('react-native');
+var bottomSheet = require('@gorhom/bottom-sheet');
 var Animated = require('react-native-reanimated');
 var vectorIcons = require('@expo/vector-icons');
 var reactNativeSizeMatters = require('react-native-size-matters');
@@ -215,7 +216,7 @@ function useColorTransition(active, options = {}) {
 
 // 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);
@@ -252,7 +253,31 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
     },
     /* @__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: [
@@ -367,7 +392,8 @@ function CurrencyInput({
   placeholder,
   editable,
   containerStyle,
-  style
+  style,
+  sheetMode
 }) {
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
@@ -400,7 +426,8 @@ function CurrencyInput({
       prefixStyle,
       containerStyle,
       inputWrapperStyle: isLarge ? { paddingVertical: vs(16), minHeight: 72 } : void 0,
-      style: [inputStyle, style]
+      style: [inputStyle, style],
+      sheetMode
     }
   );
 }

package/dist/CurrencyInput.mjs

@@ -1,5 +1,5 @@
-export { CurrencyInput } from './chunk-MAC465BB.mjs';
-import './chunk-756RAKE4.mjs';
+export { CurrencyInput } from './chunk-KNSENOV4.mjs';
+import './chunk-LVYEU5ZK.mjs';
 import './chunk-26BCI223.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-T7XZ7H7Y.mjs';

package/dist/ImageUpload.d.mts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+interface ImageUploadProps {
+    /** Current image URI. Pass null/undefined to show placeholder. */
+    value?: string | null;
+    /** Called with the selected image URI. Receives null when image is cleared. */
+    onChange?: (uri: string | null) => void;
+    /** Show a loading spinner over the image (e.g. while uploading). */
+    loading?: boolean;
+    /** Text shown when no image is selected. */
+    placeholder?: string;
+    /** Width of the upload area. Defaults to full width (undefined). */
+    width?: number;
+    /** Height of the upload area. Defaults to 200. */
+    height?: number;
+    /** Border radius of the upload area. Defaults to RADIUS.lg. */
+    borderRadius?: number;
+    /** Aspect ratio for the selected image. Defaults to 'cover'. */
+    resizeMode?: 'cover' | 'contain' | 'stretch';
+    disabled?: boolean;
+    style?: ViewStyle;
+    accessibilityLabel?: string;
+}
+declare function ImageUpload({ value, onChange, loading, placeholder, width, height, borderRadius, resizeMode, disabled, style, accessibilityLabel, }: ImageUploadProps): React.JSX.Element;
+
+export { ImageUpload, type ImageUploadProps };

package/dist/ImageUpload.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+interface ImageUploadProps {
+    /** Current image URI. Pass null/undefined to show placeholder. */
+    value?: string | null;
+    /** Called with the selected image URI. Receives null when image is cleared. */
+    onChange?: (uri: string | null) => void;
+    /** Show a loading spinner over the image (e.g. while uploading). */
+    loading?: boolean;
+    /** Text shown when no image is selected. */
+    placeholder?: string;
+    /** Width of the upload area. Defaults to full width (undefined). */
+    width?: number;
+    /** Height of the upload area. Defaults to 200. */
+    height?: number;
+    /** Border radius of the upload area. Defaults to RADIUS.lg. */
+    borderRadius?: number;
+    /** Aspect ratio for the selected image. Defaults to 'cover'. */
+    resizeMode?: 'cover' | 'contain' | 'stretch';
+    disabled?: boolean;
+    style?: ViewStyle;
+    accessibilityLabel?: string;
+}
+declare function ImageUpload({ value, onChange, loading, placeholder, width, height, borderRadius, resizeMode, disabled, style, accessibilityLabel, }: ImageUploadProps): React.JSX.Element;
+
+export { ImageUpload, type ImageUploadProps };