@retray-dev/ui-kit 0.1.0 → 1.0.0

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export interface CheckboxProps {
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  label?: string
+  disabled?: boolean
+  style?: ViewStyle
+}
+
+export function Checkbox({ checked = false, onCheckedChange, label, disabled, style }: CheckboxProps) {
+  const { colors } = useTheme()
+
+  return (
+    <TouchableOpacity
+      style={[styles.row, style]}
+      onPress={() => { Haptics.selectionAsync(); onCheckedChange?.(!checked) }}
+      disabled={disabled}
+      activeOpacity={0.7}
+    >
+      <View
+        style={[
+          styles.box,
+          {
+            borderColor: checked ? colors.primary : colors.border,
+            backgroundColor: checked ? colors.primary : 'transparent',
+            opacity: disabled ? 0.45 : 1,
+          },
+        ]}
+      >
+        {checked ? <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} /> : null}
+      </View>
+      {label ? (
+        <Text style={[styles.label, { color: disabled ? colors.mutedForeground : colors.foreground }]}>
+          {label}
+        </Text>
+      ) : null}
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  box: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmark: {
+    width: 13,
+    height: 8,
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{ rotate: '-45deg' }, { translateY: -1 }],
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+})

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox'
+export type { CheckboxProps } from './Checkbox'

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  action?: React.ReactNode
+  style?: ViewStyle
+}
+
+export function EmptyState({ icon, title, description, action, style }: EmptyStateProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View style={[styles.container, { borderColor: colors.border }, style]}>
+      {icon ? (
+        <View style={[styles.iconWrapper, { backgroundColor: colors.muted }]}>
+          {icon}
+        </View>
+      ) : null}
+      <View style={styles.textWrapper}>
+        <Text style={[styles.title, { color: colors.foreground }]}>{title}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: colors.mutedForeground }]}>{description}</Text>
+        ) : null}
+      </View>
+      {action ? <View style={styles.action}>{action}</View> : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderRadius: 12,
+    padding: 32,
+    gap: 16,
+  },
+  iconWrapper: {
+    width: 48,
+    height: 48,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textWrapper: {
+    alignItems: 'center',
+    gap: 8,
+    maxWidth: 320,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+  action: {
+    marginTop: 8,
+  },
+})

package/src/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState'

package/src/components/Input/Input.tsx

@@ -1,11 +1,6 @@
 import React, { useState } from 'react'
-import {
-  TextInput,
-  View,
-  Text,
-  StyleSheet,
-  TextInputProps,
-} from 'react-native'
+import { TextInput, View, Text, StyleSheet, TextInputProps } from 'react-native'
+import { useTheme } from '../../theme'
 
 export interface InputProps extends TextInputProps {
   label?: string
@@ -14,31 +9,36 @@ export interface InputProps extends TextInputProps {
 }
 
 export function Input({ label, error, hint, style, onFocus, onBlur, ...props }: InputProps) {
+  const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
 
   return (
     <View style={styles.container}>
-      {label ? <Text style={styles.label}>{label}</Text> : null}
+      {label ? (
+        <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
+      ) : null}
       <TextInput
         style={[
           styles.input,
-          focused && styles.inputFocused,
-          error ? styles.inputError : undefined,
+          {
+            borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
+            color: colors.foreground,
+            backgroundColor: colors.background,
+          },
           style,
         ]}
-        onFocus={(e) => {
-          setFocused(true)
-          onFocus?.(e)
-        }}
-        onBlur={(e) => {
-          setFocused(false)
-          onBlur?.(e)
-        }}
-        placeholderTextColor="#9CA3AF"
+        onFocus={(e) => { setFocused(true); onFocus?.(e) }}
+        onBlur={(e) => { setFocused(false); onBlur?.(e) }}
+        placeholderTextColor={colors.mutedForeground}
+        allowFontScaling={true}
         {...props}
       />
-      {error ? <Text style={styles.errorText}>{error}</Text> : null}
-      {!error && hint ? <Text style={styles.hintText}>{hint}</Text> : null}
+      {error ? (
+        <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
+      ) : null}
+      {!error && hint ? (
+        <Text style={[styles.helperText, { color: colors.mutedForeground }]}>{hint}</Text>
+      ) : null}
     </View>
   )
 }
@@ -50,31 +50,16 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 14,
     fontWeight: '500',
-    color: '#111827',
-    marginBottom: 2,
+    marginBottom: 4,
   },
   input: {
     borderWidth: 1.5,
-    borderColor: '#D1D5DB',
     borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontSize: 15,
-    color: '#111827',
-    backgroundColor: '#fff',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 16,
   },
-  inputFocused: {
-    borderColor: '#000',
-  },
-  inputError: {
-    borderColor: '#EF4444',
-  },
-  errorText: {
-    fontSize: 12,
-    color: '#EF4444',
-  },
-  hintText: {
+  helperText: {
     fontSize: 12,
-    color: '#6B7280',
   },
 })

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,53 @@
+import React, { useRef, useState, useEffect } from 'react'
+import { View, Animated, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface ProgressProps {
+  value?: number
+  max?: number
+  style?: ViewStyle
+}
+
+export function Progress({ value = 0, max = 100, style }: ProgressProps) {
+  const { colors } = useTheme()
+  const percent = Math.min(Math.max((value / max) * 100, 0), 100)
+  const [trackWidth, setTrackWidth] = useState(0)
+  const animatedWidth = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    if (trackWidth === 0) return
+    Animated.spring(animatedWidth, {
+      toValue: (percent / 100) * trackWidth,
+      useNativeDriver: false,
+      speed: 20,
+      bounciness: 0,
+    }).start()
+  }, [percent, trackWidth])
+
+  return (
+    <View
+      style={[styles.track, { backgroundColor: colors.muted }, style]}
+      onLayout={(e) => setTrackWidth(e.nativeEvent.layout.width)}
+    >
+      <Animated.View
+        style={[
+          styles.indicator,
+          { width: animatedWidth, backgroundColor: colors.primary },
+        ]}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  track: {
+    height: 8,
+    borderRadius: 999,
+    overflow: 'hidden',
+    width: '100%',
+  },
+  indicator: {
+    height: '100%',
+    borderRadius: 999,
+  },
+})

package/src/components/Progress/index.ts

@@ -0,0 +1,2 @@
+export { Progress } from './Progress'
+export type { ProgressProps } from './Progress'

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export interface RadioOption {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+export interface RadioGroupProps {
+  options: RadioOption[]
+  value?: string
+  onValueChange?: (value: string) => void
+  orientation?: 'vertical' | 'horizontal'
+  style?: ViewStyle
+}
+
+export function RadioGroup({
+  options,
+  value,
+  onValueChange,
+  orientation = 'vertical',
+  style,
+}: RadioGroupProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View
+      style={[
+        styles.container,
+        orientation === 'horizontal' && styles.horizontal,
+        style,
+      ]}
+    >
+      {options.map((option) => {
+        const selected = option.value === value
+        return (
+          <TouchableOpacity
+            key={option.value}
+            style={styles.row}
+            onPress={() => { if (!option.disabled) { Haptics.selectionAsync(); onValueChange?.(option.value) } }}
+            activeOpacity={0.7}
+            disabled={option.disabled}
+          >
+            <View
+              style={[
+                styles.radio,
+                {
+                  borderColor: selected ? colors.primary : colors.border,
+                  opacity: option.disabled ? 0.45 : 1,
+                },
+              ]}
+            >
+              {selected ? (
+                <View style={[styles.dot, { backgroundColor: colors.primary }]} />
+              ) : null}
+            </View>
+            <Text
+              style={[
+                styles.label,
+                { color: option.disabled ? colors.mutedForeground : colors.foreground },
+              ]}
+            >
+              {option.label}
+            </Text>
+          </TouchableOpacity>
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 10,
+  },
+  horizontal: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  radio: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+})

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup'
+export type { RadioGroupProps, RadioOption } from './RadioGroup'

package/src/components/Select/Select.tsx

@@ -0,0 +1,185 @@
+import React, { useState } from 'react'
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  FlatList,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export interface SelectOption {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+export interface SelectProps {
+  options: SelectOption[]
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  label?: string
+  error?: string
+  disabled?: boolean
+  style?: ViewStyle
+}
+
+export function Select({
+  options,
+  value,
+  onValueChange,
+  placeholder = 'Select an option',
+  label,
+  error,
+  disabled,
+  style,
+}: SelectProps) {
+  const { colors } = useTheme()
+  const [open, setOpen] = useState(false)
+
+  const selected = options.find((o) => o.value === value)
+
+  return (
+    <View style={[styles.container, style]}>
+      {label ? (
+        <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
+      ) : null}
+
+      <TouchableOpacity
+        style={[
+          styles.trigger,
+          {
+            borderColor: error ? colors.destructive : colors.border,
+            backgroundColor: colors.background,
+            opacity: disabled ? 0.45 : 1,
+          },
+        ]}
+        onPress={() => { if (!disabled) { Haptics.selectionAsync(); setOpen(true) } }}
+        activeOpacity={0.7}
+      >
+        <Text
+          style={[
+            styles.triggerText,
+            { color: selected ? colors.foreground : colors.mutedForeground },
+          ]}
+          numberOfLines={1}
+        >
+          {selected?.label ?? placeholder}
+        </Text>
+        <Text style={[styles.chevron, { color: colors.mutedForeground }]}>▾</Text>
+      </TouchableOpacity>
+
+      {error ? (
+        <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
+      ) : null}
+
+      <Modal transparent visible={open} onRequestClose={() => setOpen(false)} animationType="fade">
+        <TouchableOpacity style={styles.overlay} onPress={() => setOpen(false)} activeOpacity={1}>
+          <View style={[styles.list, { backgroundColor: colors.card, borderColor: colors.border }]}>
+            <FlatList
+              data={options}
+              keyExtractor={(item) => item.value}
+              renderItem={({ item }) => {
+                const isSelected = item.value === value
+                return (
+                  <TouchableOpacity
+                    style={[
+                      styles.option,
+                      isSelected && { backgroundColor: colors.accent },
+                      item.disabled && styles.disabledOption,
+                    ]}
+                    onPress={() => {
+                      if (!item.disabled) {
+                        Haptics.selectionAsync()
+                        onValueChange?.(item.value)
+                        setOpen(false)
+                      }
+                    }}
+                    activeOpacity={0.7}
+                  >
+                    <Text
+                      style={[
+                        styles.optionText,
+                        { color: item.disabled ? colors.mutedForeground : colors.foreground },
+                        isSelected && { fontWeight: '500' },
+                      ]}
+                    >
+                      {item.label}
+                    </Text>
+                    {isSelected ? (
+                      <Text style={[styles.checkmark, { color: colors.primary }]}>✓</Text>
+                    ) : null}
+                  </TouchableOpacity>
+                )
+              }}
+            />
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 2,
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1.5,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  triggerText: {
+    fontSize: 16,
+    flex: 1,
+  },
+  chevron: {
+    fontSize: 14,
+    marginLeft: 8,
+  },
+  helperText: {
+    fontSize: 12,
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  list: {
+    borderRadius: 12,
+    borderWidth: 1,
+    maxHeight: 300,
+    overflow: 'hidden',
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  optionText: {
+    fontSize: 15,
+  },
+  disabledOption: {
+    opacity: 0.45,
+  },
+  checkmark: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+})

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select'
+export type { SelectProps, SelectOption } from './Select'

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { View, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical'
+  style?: ViewStyle
+}
+
+export function Separator({ orientation = 'horizontal', style }: SeparatorProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View
+      style={[
+        orientation === 'horizontal' ? styles.horizontal : styles.vertical,
+        { backgroundColor: colors.border },
+        style,
+      ]}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  horizontal: {
+    height: 1,
+    width: '100%',
+  },
+  vertical: {
+    width: 1,
+    height: '100%',
+  },
+})

package/src/components/Separator/index.ts

@@ -0,0 +1,2 @@
+export { Separator } from './Separator'
+export type { SeparatorProps } from './Separator'