@retray-dev/ui-kit 0.1.0 → 1.5.0

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from 'react'
+import { TouchableOpacity, Animated, StyleSheet, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+const TRACK_WIDTH = 56
+const TRACK_HEIGHT = 32
+const THUMB_SIZE = 24
+const THUMB_OFFSET = 4
+const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
+
+export interface SwitchProps {
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  disabled?: boolean
+  style?: ViewStyle
+}
+
+export function Switch({ checked = false, onCheckedChange, disabled, style }: SwitchProps) {
+  const { colors } = useTheme()
+  const translateX = useRef(new Animated.Value(checked ? THUMB_TRAVEL : 0)).current
+  const trackOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.spring(translateX, {
+        toValue: checked ? THUMB_TRAVEL : 0,
+        useNativeDriver: true,
+        bounciness: 4,
+      }),
+      Animated.timing(trackOpacity, {
+        toValue: checked ? 1 : 0,
+        duration: 150,
+        useNativeDriver: false,
+      }),
+    ]).start()
+  }, [checked, translateX, trackOpacity])
+
+  const trackColor = trackOpacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.muted, colors.primary],
+  })
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        Haptics.selectionAsync()
+        onCheckedChange?.(!checked)
+      }}
+      disabled={disabled}
+      activeOpacity={0.8}
+      touchSoundDisabled={true}
+      style={[styles.wrapper, { opacity: disabled ? 0.45 : 1 }, style]}
+    >
+      <Animated.View style={[styles.track, { backgroundColor: trackColor }]}>
+        <Animated.View
+          style={[
+            styles.thumb,
+            { backgroundColor: colors.primaryForeground, transform: [{ translateX }] },
+          ]}
+        />
+      </Animated.View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {},
+  track: {
+    width: TRACK_WIDTH,
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    justifyContent: 'center',
+    paddingHorizontal: THUMB_OFFSET,
+  },
+  thumb: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.15,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+})

package/src/components/Switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch'
+export type { SwitchProps } from './Switch'

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,196 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export interface TabItem {
+  label: string
+  value: string
+}
+
+export interface TabsProps {
+  tabs: TabItem[]
+  /**
+   * Controlled active tab value. When omitted the component manages state internally
+   * (uncontrolled), defaulting to the first tab.
+   */
+  value?: string
+  onValueChange?: (value: string) => void
+  children?: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface TabsContentProps {
+  value: string
+  activeValue: string
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+function TabTrigger({
+  tab,
+  isActive,
+  onPress,
+  onLayout,
+}: {
+  tab: TabItem
+  isActive: boolean
+  onPress: () => void
+  onLayout: (e: any) => void
+}) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+  }
+
+  return (
+    <TouchableOpacity
+      style={styles.trigger}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onLayout={onLayout}
+      activeOpacity={1}
+      touchSoundDisabled={true}
+    >
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <Text
+          style={[
+            styles.triggerLabel,
+            { color: isActive ? colors.foreground : colors.mutedForeground },
+            isActive && styles.activeTriggerLabel,
+          ]}
+        >
+          {tab.label}
+        </Text>
+      </Animated.View>
+    </TouchableOpacity>
+  )
+}
+
+export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps) {
+  const [internal, setInternal] = useState(tabs[0]?.value ?? '')
+  const { colors } = useTheme()
+  const active = value ?? internal
+
+  const tabLayouts = useRef<Record<string, { x: number; width: number }>>({})
+  const pillX = useRef(new Animated.Value(0)).current
+  const pillWidth = useRef(new Animated.Value(0)).current
+  const initialised = useRef(false)
+
+  const animatePill = (tabValue: string, animate: boolean) => {
+    const layout = tabLayouts.current[tabValue]
+    if (!layout) return
+    if (animate) {
+      Animated.parallel([
+        Animated.spring(pillX, {
+          toValue: layout.x,
+          useNativeDriver: false,
+          speed: 20,
+          bounciness: 0,
+        }),
+        Animated.spring(pillWidth, {
+          toValue: layout.width,
+          useNativeDriver: false,
+          speed: 20,
+          bounciness: 0,
+        }),
+      ]).start()
+    } else {
+      pillX.setValue(layout.x)
+      pillWidth.setValue(layout.width)
+    }
+  }
+
+  useEffect(() => {
+    if (initialised.current) {
+      animatePill(active, true)
+    }
+  }, [active])
+
+  const handlePress = (v: string) => {
+    Haptics.selectionAsync()
+    if (!value) setInternal(v)
+    onValueChange?.(v)
+  }
+
+  return (
+    <View style={style}>
+      <View style={[styles.list, { backgroundColor: colors.muted }]}>
+        <Animated.View
+          style={[
+            styles.pill,
+            {
+              backgroundColor: colors.background,
+              position: 'absolute',
+              top: 4,
+              bottom: 4,
+              left: pillX,
+              width: pillWidth,
+              borderRadius: 6,
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 1 },
+              shadowOpacity: 0.1,
+              shadowRadius: 2,
+              elevation: 2,
+            },
+          ]}
+        />
+        {tabs.map((tab) => (
+          <TabTrigger
+            key={tab.value}
+            tab={tab}
+            isActive={tab.value === active}
+            onPress={() => handlePress(tab.value)}
+            onLayout={(e) => {
+              const { x, width } = e.nativeEvent.layout
+              tabLayouts.current[tab.value] = { x, width }
+              if (tab.value === active) {
+                animatePill(tab.value, false)
+                initialised.current = true
+              }
+            }}
+          />
+        ))}
+      </View>
+      {children}
+    </View>
+  )
+}
+
+export function TabsContent({ value, activeValue, children, style }: TabsContentProps) {
+  if (value !== activeValue) return null
+  return <View style={style}>{children}</View>
+}
+
+const styles = StyleSheet.create({
+  list: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    padding: 4,
+    gap: 4,
+  },
+  pill: {},
+  trigger: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+  triggerLabel: {
+    fontSize: 14,
+    fontWeight: '400',
+  },
+  activeTriggerLabel: {
+    fontWeight: '500',
+  },
+})

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs, TabsContent } from './Tabs'
+export type { TabsProps, TabsContentProps, TabItem } from './Tabs'

package/src/components/Text/Text.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Text as RNText, StyleSheet, TextProps as RNTextProps, TextStyle } from 'react-native'
+import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native'
+import { useTheme } from '../../theme'
 
 export type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label'
 
@@ -9,18 +10,23 @@ export interface TextProps extends RNTextProps {
 }
 
 const variantStyles: Record<TextVariant, TextStyle> = {
-  h1: { fontSize: 32, fontWeight: '700', lineHeight: 40 },
+  h1: { fontSize: 32, fontWeight: '700', lineHeight: 44 },
   h2: { fontSize: 24, fontWeight: '700', lineHeight: 32 },
   h3: { fontSize: 20, fontWeight: '600', lineHeight: 28 },
   body: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
-  caption: { fontSize: 12, fontWeight: '400', lineHeight: 18, color: '#6B7280' },
+  caption: { fontSize: 12, fontWeight: '400', lineHeight: 18 },
   label: { fontSize: 14, fontWeight: '500', lineHeight: 20 },
 }
 
 export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {
+  const { colors } = useTheme()
+
+  const defaultColor = variant === 'caption' ? colors.mutedForeground : colors.foreground
+
   return (
     <RNText
-      style={[variantStyles[variant], color ? { color } : undefined, style]}
+      style={[variantStyles[variant], { color: color ?? defaultColor }, style]}
+      allowFontScaling={true}
       {...props}
     >
       {children}

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface TextareaProps extends TextInputProps {
+  label?: string
+  /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
+  error?: string
+  /** Helper text shown below the textarea when there is no error. */
+  hint?: string
+  /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
+  rows?: number
+  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
+  containerStyle?: ViewStyle
+}
+
+export function Textarea({
+  label,
+  error,
+  hint,
+  rows = 4,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  ...props
+}: TextareaProps) {
+  const { colors } = useTheme()
+  const [focused, setFocused] = useState(false)
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
+      <TextInput
+        multiline
+        numberOfLines={rows}
+        textAlignVertical="top"
+        style={[
+          styles.input,
+          {
+            borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
+            color: colors.foreground,
+            backgroundColor: colors.background,
+            minHeight: rows * 28,
+          },
+          style,
+        ]}
+        onFocus={(e) => {
+          setFocused(true)
+          onFocus?.(e)
+        }}
+        onBlur={(e) => {
+          setFocused(false)
+          onBlur?.(e)
+        }}
+        placeholderTextColor={colors.mutedForeground}
+        allowFontScaling={true}
+        {...props}
+      />
+      {error ? (
+        <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
+      ) : null}
+      {!error && hint ? (
+        <Text style={[styles.helperText, { color: colors.mutedForeground }]} allowFontScaling={true}>{hint}</Text>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  input: {
+    borderWidth: 1.5,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 16,
+  },
+  helperText: {
+    fontSize: 12,
+  },
+})

package/src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea'
+export type { TextareaProps } from './Textarea'

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,200 @@
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  runOnJS,
+  Easing,
+} from 'react-native-reanimated'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export type ToastVariant = 'default' | 'destructive' | 'success'
+
+export interface ToastItem {
+  id: string
+  title?: string
+  description?: string
+  variant?: ToastVariant
+  /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
+  duration?: number
+}
+
+interface ToastContextValue {
+  toast: (item: Omit<ToastItem, 'id'>) => void
+  dismiss: (id: string) => void
+}
+
+const ToastContext = createContext<ToastContextValue>({
+  toast: () => {},
+  dismiss: () => {},
+})
+
+export function useToast() {
+  return useContext(ToastContext)
+}
+
+const SWIPE_THRESHOLD = 80
+const VELOCITY_THRESHOLD = 800
+
+function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: () => void }) {
+  const { colors } = useTheme()
+  const translateY = useSharedValue(-80)
+  const translateX = useSharedValue(0)
+  const opacity = useSharedValue(0)
+
+  useEffect(() => {
+    translateY.value = withTiming(0, { duration: 120, easing: Easing.out(Easing.exp) })
+    opacity.value = withTiming(1, { duration: 100 })
+
+    const timer = setTimeout(() => {
+      translateY.value = withTiming(-80, { duration: 200 })
+      opacity.value = withTiming(0, { duration: 200 }, (done) => {
+        if (done) runOnJS(onDismiss)()
+      })
+    }, item.duration ?? 3000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      translateX.value = e.translationX
+    })
+    .onEnd((e) => {
+      const shouldDismiss =
+        Math.abs(translateX.value) > SWIPE_THRESHOLD ||
+        Math.abs(e.velocityX) > VELOCITY_THRESHOLD
+      if (shouldDismiss) {
+        const direction = translateX.value > 0 ? 1 : -1
+        translateX.value = withTiming(direction * 500, { duration: 200 }, (done) => {
+          if (done) runOnJS(onDismiss)()
+        })
+        opacity.value = withTiming(0, { duration: 150 })
+      } else {
+        translateX.value = withSpring(0, { damping: 20, stiffness: 300 })
+      }
+    })
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }, { translateX: translateX.value }],
+  }))
+
+  const bgColor = {
+    default: colors.foreground,
+    destructive: colors.destructive,
+    success: colors.success,
+  }[item.variant ?? 'default']
+
+  const textColor = {
+    default: colors.background,
+    destructive: colors.destructiveForeground,
+    success: colors.successForeground,
+  }[item.variant ?? 'default']
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <Animated.View style={[styles.toast, { backgroundColor: bgColor }, animatedStyle]}>
+        <View style={styles.toastContent}>
+          {item.title ? (
+            <Text style={[styles.toastTitle, { color: textColor }]}>{item.title}</Text>
+          ) : null}
+          {item.description ? (
+            <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>
+        </TouchableOpacity>
+      </Animated.View>
+    </GestureDetector>
+  )
+}
+
+/**
+ * Must wrap the app root alongside ThemeProvider.
+ * Renders toasts in an absolute overlay at the top of the screen.
+ * Use `useToast()` anywhere inside to trigger toasts.
+ */
+export interface ToastProviderProps {
+  children: React.ReactNode
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastItem[]>([])
+  const insets = useSafeAreaInsets()
+
+  const toast = useCallback((item: Omit<ToastItem, 'id'>) => {
+    const id = Math.random().toString(36).slice(2)
+    if (item.variant === 'success') {
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
+    } else if (item.variant === 'destructive') {
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+    } else {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+    }
+    setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3))
+  }, [])
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  return (
+    <ToastContext.Provider value={{ toast, dismiss }}>
+      {children}
+      <View style={[styles.container, { top: insets.top + 8 }]} pointerEvents="box-none">
+        {toasts.map((item) => (
+          <ToastNotification key={item.id} item={item} onDismiss={() => dismiss(item.id)} />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    gap: 8,
+    zIndex: 9999,
+  },
+  toast: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+  toastContent: {
+    flex: 1,
+    gap: 4,
+  },
+  toastTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  toastDescription: {
+    fontSize: 13,
+  },
+  dismissButton: {
+    padding: 12,
+    marginLeft: 4,
+  },
+  dismissIcon: {
+    fontSize: 12,
+  },
+})

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './Toast'
+export type { ToastProviderProps, ToastItem, ToastVariant } from './Toast'