@retray-dev/ui-kit 0.1.0 → 1.0.0

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,164 @@
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react'
+import { View, Text, TouchableOpacity, Animated, StyleSheet } from 'react-native'
+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
+  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)
+}
+
+function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: () => void }) {
+  const { colors } = useTheme()
+  const translateY = useRef(new Animated.Value(-80)).current
+  const opacity = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 2 }),
+      Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }),
+    ]).start()
+
+    const timer = setTimeout(() => {
+      Animated.parallel([
+        Animated.timing(translateY, { toValue: -80, duration: 200, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true }),
+      ]).start(onDismiss)
+    }, item.duration ?? 3000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const bgColor = {
+    default: colors.foreground,
+    destructive: colors.destructive,
+    success: '#16a34a',
+  }[item.variant ?? 'default']
+
+  const textColor = {
+    default: colors.background,
+    destructive: colors.destructiveForeground,
+    success: '#ffffff',
+  }[item.variant ?? 'default']
+
+  return (
+    <Animated.View
+      style={[styles.toast, { backgroundColor: bgColor, opacity, transform: [{ translateY }] }]}
+    >
+      <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}>
+        <Text style={[styles.dismissIcon, { color: textColor }]}>✕</Text>
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+/**
+ * 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: 4,
+    marginLeft: 8,
+  },
+  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'

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { TouchableOpacity, Text, StyleSheet, TouchableOpacityProps, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export type ToggleVariant = 'default' | 'outline'
+export type ToggleSize = 'sm' | 'md' | 'lg'
+
+export interface ToggleProps extends TouchableOpacityProps {
+  pressed?: boolean
+  onPressedChange?: (pressed: boolean) => void
+  variant?: ToggleVariant
+  size?: ToggleSize
+  label?: string
+  icon?: React.ReactNode
+}
+
+const sizeStyles: Record<ToggleSize, ViewStyle> = {
+  sm: { paddingHorizontal: 12, paddingVertical: 8, minWidth: 40, minHeight: 40 },
+  md: { paddingHorizontal: 16, paddingVertical: 12, minWidth: 44, minHeight: 44 },
+  lg: { paddingHorizontal: 20, paddingVertical: 14, minWidth: 48, minHeight: 48 },
+}
+
+export function Toggle({
+  pressed = false,
+  onPressedChange,
+  variant = 'default',
+  size = 'md',
+  label,
+  icon,
+  disabled,
+  style,
+  ...props
+}: ToggleProps) {
+  const { colors } = useTheme()
+
+  const containerStyle: ViewStyle = pressed
+    ? { backgroundColor: colors.accent }
+    : variant === 'outline'
+    ? { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border }
+    : { backgroundColor: 'transparent' }
+
+  const textColor = pressed ? colors.accentForeground : colors.foreground
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.base,
+        containerStyle,
+        sizeStyles[size],
+        disabled && styles.disabled,
+        style,
+      ]}
+      onPress={() => { Haptics.selectionAsync(); onPressedChange?.(!pressed) }}
+      disabled={disabled}
+      activeOpacity={0.7}
+      {...props}
+    >
+      {icon}
+      {label ? <Text style={[styles.label, { color: textColor }]}>{label}</Text> : null}
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+})

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle'
+export type { ToggleProps, ToggleVariant, ToggleSize } from './Toggle'

package/src/index.ts

@@ -1,3 +1,29 @@
+// Theme
+export { ThemeProvider, useTheme } from './theme'
+export type { ThemeProviderProps, ThemeColors, Theme, ColorScheme } from './theme'
+export { defaultLight, defaultDark } from './theme'
+
+// Components
 export * from './components/Button'
 export * from './components/Text'
 export * from './components/Input'
+export * from './components/Badge'
+export * from './components/Card'
+export * from './components/Separator'
+export * from './components/Spinner'
+export * from './components/Skeleton'
+export * from './components/Avatar'
+export * from './components/Alert'
+export * from './components/Progress'
+export * from './components/EmptyState'
+export * from './components/Textarea'
+export * from './components/Checkbox'
+export * from './components/Switch'
+export * from './components/Toggle'
+export * from './components/RadioGroup'
+export * from './components/Tabs'
+export * from './components/Accordion'
+export * from './components/Slider'
+export * from './components/Sheet'
+export * from './components/Select'
+export * from './components/Toast'

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, useContext, useMemo } from 'react'
+import { useColorScheme } from 'react-native'
+import { ThemeColors, Theme, ColorScheme, ThemeContextValue } from './types'
+import { defaultLight, defaultDark } from './colors'
+
+const ThemeContext = createContext<ThemeContextValue>({
+  colors: defaultLight,
+  colorScheme: 'light',
+})
+
+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' } }
+   */
+  theme?: Theme
+  /**
+   * - `'system'` (default): auto-detects device setting and updates when it changes.
+   * - `'light'` / `'dark'`: forces a specific scheme regardless of device setting.
+   */
+  colorScheme?: ColorScheme
+}
+
+export function ThemeProvider({ children, theme, colorScheme = 'system' }: ThemeProviderProps) {
+  const systemScheme = useColorScheme() ?? 'light'
+  const resolvedScheme: 'light' | 'dark' = colorScheme === 'system' ? systemScheme : colorScheme
+
+  const colors = useMemo<ThemeColors>(() => {
+    const base = resolvedScheme === 'dark' ? defaultDark : defaultLight
+    const overrides = resolvedScheme === 'dark' ? theme?.dark : theme?.light
+    return { ...base, ...overrides }
+  }, [resolvedScheme, theme])
+
+  return (
+    <ThemeContext.Provider value={{ colors, colorScheme: resolvedScheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme(): ThemeContextValue {
+  return useContext(ThemeContext)
+}

package/src/theme/colors.ts

@@ -0,0 +1,41 @@
+import { ThemeColors } from './types'
+
+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',
+  destructive: '#ef4444',
+  destructiveForeground: '#fafafa',
+  border: '#e5e5e5',
+  input: '#e5e5e5',
+  ring: '#a3a3a3',
+}
+
+export const defaultDark: ThemeColors = {
+  background: '#171717',
+  foreground: '#fafafa',
+  card: '#1f1f1f',
+  cardForeground: '#fafafa',
+  primary: '#fafafa',
+  primaryForeground: '#1a1a1a',
+  secondary: '#2a2a2a',
+  secondaryForeground: '#fafafa',
+  muted: '#2a2a2a',
+  mutedForeground: '#a3a3a3',
+  accent: '#2a2a2a',
+  accentForeground: '#fafafa',
+  destructive: '#dc2626',
+  destructiveForeground: '#fafafa',
+  border: '#2a2a2a',
+  input: '#2a2a2a',
+  ring: '#d4d4d4',
+}

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider, useTheme } from './ThemeProvider'
+export type { ThemeProviderProps } from './ThemeProvider'
+export type { ThemeColors, Theme, ColorScheme } from './types'
+export { defaultLight, defaultDark } from './colors'

package/src/theme/types.ts

@@ -0,0 +1,31 @@
+export type ThemeColors = {
+  background: string
+  foreground: string
+  card: string
+  cardForeground: string
+  primary: string
+  primaryForeground: string
+  secondary: string
+  secondaryForeground: string
+  muted: string
+  mutedForeground: string
+  accent: string
+  accentForeground: string
+  destructive: string
+  destructiveForeground: string
+  border: string
+  input: string
+  ring: string
+}
+
+export type Theme = {
+  light?: Partial<ThemeColors>
+  dark?: Partial<ThemeColors>
+}
+
+export type ColorScheme = 'light' | 'dark' | 'system'
+
+export type ThemeContextValue = {
+  colors: ThemeColors
+  colorScheme: 'light' | 'dark'
+}