@retray-dev/ui-kit 1.8.0 → 2.5.0

package/src/components/Textarea/Textarea.tsx

@@ -1,7 +1,12 @@
 import React, { useState } from 'react'
-import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle } from 'react-native'
+import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
 import { useTheme } from '../../theme'
 
+const webInputResetStyle: any =
+  Platform.OS === 'web'
+    ? { outlineStyle: 'none', outlineWidth: 0, outlineColor: 'transparent', boxShadow: 'none' }
+    : {}
+
 export interface TextareaProps extends TextInputProps {
   label?: string
   /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
@@ -38,11 +43,16 @@ export function Textarea({
         style={[
           styles.input,
           {
-            borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
+            borderColor: error
+              ? colors.destructive
+              : focused
+                ? (colors.ring ?? colors.primary)
+                : colors.border,
             color: colors.foreground,
             backgroundColor: colors.background,
             minHeight: rows * 30,
           },
+          webInputResetStyle,
           style,
         ]}
         onFocus={(e) => {
@@ -69,18 +79,17 @@ export function Textarea({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 6,
+    gap: 8,
   },
   label: {
     fontSize: 15,
     fontWeight: '500',
-    marginBottom: 6,
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
     fontSize: 17,
   },
   helperText: {

package/src/components/Toast/Toast.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native'
+import { FontAwesome5, MaterialIcons, Entypo, AntDesign } from '@expo/vector-icons'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -98,11 +99,16 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
     success: colors.successForeground,
   }[item.variant ?? 'default']
 
-  const leftIcon = item.icon ?? (
-    <Text style={[styles.defaultIcon, { color: textColor }]}>
-      {item.variant === 'success' ? '✓' : item.variant === 'destructive' ? '✖' : 'ℹ'}
-    </Text>
-  )
+  const defaultIcon =
+    item.variant === 'success' ? (
+      <FontAwesome5 name="check-circle" size={22} color={textColor} />
+    ) : item.variant === 'destructive' ? (
+      <MaterialIcons name="error-outline" size={24} color={textColor} />
+    ) : (
+      <Entypo name="info-with-circle" size={22} color={textColor} />
+    )
+
+  const leftIcon = item.icon ?? defaultIcon
 
   return (
     <GestureDetector gesture={panGesture}>
@@ -113,13 +119,13 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
             <Text style={[styles.toastTitle, { color: textColor }]}>{item.title}</Text>
           ) : null}
           {item.description ? (
-            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]}> 
+            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]}>
               {item.description}
             </Text>
           ) : null}
         </View>
         <TouchableOpacity onPress={onDismiss} style={styles.dismissButton} touchSoundDisabled={true}>
-          <Text style={[styles.dismissIcon, { color: textColor }]}>✕</Text>
+          <AntDesign name="close-circle" size={18} color={textColor} />
         </TouchableOpacity>
       </Animated.View>
     </GestureDetector>
@@ -158,7 +164,7 @@ export function ToastProvider({ children }: ToastProviderProps) {
   return (
     <ToastContext.Provider value={{ toast, dismiss }}>
       {children}
-      <View style={[styles.container, { top: insets.top + 8 }]} pointerEvents="box-none">
+      <View style={[styles.container, Platform.OS === 'web' && styles.containerWeb, { top: insets.top + 8 }]} pointerEvents="box-none">
         {toasts.map((item) => (
           <ToastNotification key={item.id} item={item} onDismiss={() => dismiss(item.id)} />
         ))}
@@ -175,6 +181,12 @@ const styles = StyleSheet.create({
     gap: 8,
     zIndex: 9999,
   },
+  containerWeb: {
+    left: undefined,
+    right: undefined,
+    alignSelf: 'center',
+    width: 400,
+  },
   toast: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -192,15 +204,11 @@ const styles = StyleSheet.create({
     gap: 4,
   },
   leftIconContainer: {
-    width: 36,
+    width: 40,
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 8,
   },
-  defaultIcon: {
-    fontSize: 22,
-    fontWeight: '700',
-  },
   toastTitle: {
     fontSize: 15,
     fontWeight: '600',
@@ -209,10 +217,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   dismissButton: {
-    padding: 12,
+    padding: 8,
     marginLeft: 4,
   },
-  dismissIcon: {
-    fontSize: 14,
-  },
 })

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from 'react'
-import { TouchableOpacity, Animated, Text, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
+import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
+import { FontAwesome5 } from '@expo/vector-icons'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -83,46 +84,46 @@ export function Toggle({
       return prop
     }
 
-    if (!pressed) return renderProp(icon)
+    if (pressed) {
+      const active = renderProp(activeIcon)
+      if (active) return <>{active}</>
+      return <FontAwesome5 name="check-circle" size={20} color={colors.primary} />
+    }
 
-    const active = renderProp(activeIcon)
-    if (active) return <>{active}</>
+    const custom = renderProp(icon)
+    if (custom) return <>{custom}</>
 
-    return (
-      <View style={[styles.checkContainer, { borderColor: colors.primary }]}>
-        <Text style={[styles.checkMark, { color: colors.primary }]}>✓</Text>
-      </View>
-    )
+    // Default: empty circle to signal an action is available
+    return <FontAwesome5 name="circle" size={20} color={colors.mutedForeground} />
   }
 
   return (
-    <Animated.View style={{ transform: [{ scale }] }}>
-      <Animated.View
-        style={[
-          styles.base,
-          sizeStyles[size],
-          { borderColor, backgroundColor, borderWidth: 2 },
-          disabled && styles.disabled,
-          style,
-        ]}
+    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled, style]}>
+      <TouchableOpacity
+        onPress={() => {
+          Haptics.selectionAsync()
+          onPressedChange?.(!pressed)
+        }}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        {...props}
       >
-        <TouchableOpacity
-          style={styles.touchable}
-          onPress={() => {
-            Haptics.selectionAsync()
-            onPressedChange?.(!pressed)
-          }}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
-          disabled={disabled}
-          activeOpacity={1}
-          touchSoundDisabled={true}
-          {...props}
+        <Animated.View
+          style={[
+            styles.base,
+            sizeStyles[size],
+            { borderColor, backgroundColor, borderWidth: 2 },
+          ]}
         >
-          <LeftIcon />
-          {label ? <Animated.Text style={[styles.label, { color: textColor }]}>{label}</Animated.Text> : null}
-        </TouchableOpacity>
-      </Animated.View>
+          <View style={styles.inner}>
+            <LeftIcon />
+            {label ? <Animated.Text style={[styles.label, { color: textColor }]}>{label}</Animated.Text> : null}
+          </View>
+        </Animated.View>
+      </TouchableOpacity>
     </Animated.View>
   )
 }
@@ -130,14 +131,12 @@ export function Toggle({
 const styles = StyleSheet.create({
   base: {
     borderRadius: 8,
-    overflow: 'hidden',
   },
-  touchable: {
+  inner: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     gap: 8,
-    flex: 1,
   },
   disabled: {
     opacity: 0.45,
@@ -146,16 +145,4 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '500',
   },
-  checkContainer: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  checkMark: {
-    fontSize: 14,
-    fontWeight: '700',
-  },
 })

package/src/index.ts

@@ -13,7 +13,7 @@ export * from './components/Separator'
 export * from './components/Spinner'
 export * from './components/Skeleton'
 export * from './components/Avatar'
-export * from './components/Alert'
+export * from './components/AlertBanner'
 export * from './components/Progress'
 export * from './components/EmptyState'
 export * from './components/Textarea'
@@ -29,7 +29,8 @@ export * from './components/Select'
 export * from './components/Toast'
 export * from './components/CurrencyInput'
 export * from './components/CurrencyDisplay'
-export * from './components/CurrencyInputLarge'
+// CurrencyInputLarge is deprecated — use <CurrencyInput size="large" /> instead
+export { CurrencyInput as CurrencyInputLarge } from './components/CurrencyInput'
 export * from './components/ListItem'
 export * from './components/Chip'
 export * from './components/ConfirmDialog'

package/src/theme/ThemeProvider.tsx

@@ -11,11 +11,10 @@ const ThemeContext = createContext<ThemeContextValue>({
 export interface ThemeProviderProps {
   children: React.ReactNode
   /**
-   * Override individual color tokens per scheme. Only provide the tokens you want
-   * to change — the rest fall back to the defaults.
-   * @example
-   * { light: { primary: '#6366f1', primaryForeground: '#fff' },
-   *   dark:  { primary: '#818cf8', primaryForeground: '#fff' } }
+  * Optional full-palette overrides per scheme. Supply a partial or full `ThemeColors` object
+  * for `light` and/or `dark` to override the defaults.
+  * @example
+  * { light: { primary: '#6366f1', card: '#fff' }, dark: { primary: '#818cf8' } }
    */
   theme?: Theme
   /**
@@ -31,8 +30,8 @@ export function ThemeProvider({ children, theme, colorScheme = 'system' }: Theme
 
   const colors = useMemo<ThemeColors>(() => {
     const base = resolvedScheme === 'dark' ? defaultDark : defaultLight
-    const overrides = resolvedScheme === 'dark' ? theme?.dark : theme?.light
-    return { ...base, ...overrides }
+    const override = resolvedScheme === 'dark' ? theme?.dark : theme?.light
+    return override ? { ...base, ...override } : base
   }, [resolvedScheme, theme])
 
   return (
@@ -43,5 +42,9 @@ export function ThemeProvider({ children, theme, colorScheme = 'system' }: Theme
 }
 
 export function useTheme(): ThemeContextValue {
-  return useContext(ThemeContext)
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
 }

package/src/theme/colors.ts

@@ -1,45 +1,46 @@
 import { ThemeColors } from './types'
 
+// Full, explicit theme palettes. No derivation — palettes are direct and fully customizable.
 export const defaultLight: ThemeColors = {
   background: '#ffffff',
   foreground: '#171717',
   card: '#ffffff',
   cardForeground: '#171717',
   primary: '#1a1a1a',
-  primaryForeground: '#fafafa',
-  secondary: '#f5f5f5',
-  secondaryForeground: '#1a1a1a',
-  muted: '#f5f5f5',
-  mutedForeground: '#646464',
-  accent: '#f5f5f5',
-  accentForeground: '#1a1a1a',
+  primaryForeground: '#ffffff',
+  secondary: '#f1f1f1',
+  secondaryForeground: '#171717',
+  muted: '#f1f1f1',
+  mutedForeground: '#a2a2a2',
+  accent: '#e4e4e4',
+  accentForeground: '#171717',
   destructive: '#ef4444',
-  destructiveForeground: '#fafafa',
+  destructiveForeground: '#1a1a1a',
   border: '#e5e5e5',
   input: '#e5e5e5',
-  ring: '#a3a3a3',
+  ring: '#1a1a1a',
   success: '#16a34a',
-  successForeground: '#ffffff',
+  successForeground: '#1a1a1a',
 }
 
 export const defaultDark: ThemeColors = {
   background: '#171717',
   foreground: '#fafafa',
-  card: '#1f1f1f',
+  card: '#222222',
   cardForeground: '#fafafa',
   primary: '#fafafa',
   primaryForeground: '#1a1a1a',
-  secondary: '#2a2a2a',
+  secondary: '#323232',
   secondaryForeground: '#fafafa',
-  muted: '#2a2a2a',
-  mutedForeground: '#a3a3a3',
-  accent: '#2a2a2a',
+  muted: '#323232',
+  mutedForeground: '#888888',
+  accent: '#323232',
   accentForeground: '#fafafa',
   destructive: '#dc2626',
-  destructiveForeground: '#fafafa',
+  destructiveForeground: '#1a1a1a',
   border: '#2a2a2a',
   input: '#2a2a2a',
-  ring: '#d4d4d4',
+  ring: '#fafafa',
   success: '#22c55e',
-  successForeground: '#ffffff',
+  successForeground: '#1a1a1a',
 }

package/src/theme/types.ts

@@ -20,6 +20,8 @@ export type ThemeColors = {
   successForeground: string
 }
 
+// Theme overrides: consumers may supply partial or full `ThemeColors` objects
+// for `theme.light` / `theme.dark` to override only the tokens they want.
 export type Theme = {
   light?: Partial<ThemeColors>
   dark?: Partial<ThemeColors>

package/src/components/CurrencyInputLarge/CurrencyInputLarge.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import { ViewStyle } from 'react-native'
-import { Input } from '../Input'
-
-export interface CurrencyInputLargeProps {
-  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 CurrencyInputLarge({
-  value,
-  onChangeText,
-  onChangeValue,
-  prefix = '$',
-  thousandsSeparator = '.',
-  label,
-  error,
-  hint,
-  placeholder,
-  editable,
-  containerStyle,
-}: CurrencyInputLargeProps) {
-  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}
-      style={{ fontSize: 36 }}
-    />
-  )
-}

package/src/components/CurrencyInputLarge/index.ts

@@ -1 +0,0 @@
-export * from './CurrencyInputLarge'