@retray-dev/ui-kit 0.1.0 → 1.5.0

package/src/components/Card/Card.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface CardProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface CardHeaderProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface CardTitleProps {
+  children: React.ReactNode
+  style?: TextStyle
+}
+
+export interface CardDescriptionProps {
+  children: React.ReactNode
+  style?: TextStyle
+}
+
+export interface CardContentProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface CardFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export function Card({ children, style }: CardProps) {
+  const { colors } = useTheme()
+  return (
+    <View
+      style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }, style]}
+    >
+      {children}
+    </View>
+  )
+}
+
+export function CardHeader({ children, style }: CardHeaderProps) {
+  return <View style={[styles.header, style]}>{children}</View>
+}
+
+export function CardTitle({ children, style }: CardTitleProps) {
+  const { colors } = useTheme()
+  return <Text style={[styles.title, { color: colors.cardForeground }, style]}>{children}</Text>
+}
+
+export function CardDescription({ children, style }: CardDescriptionProps) {
+  const { colors } = useTheme()
+  return (
+    <Text style={[styles.description, { color: colors.mutedForeground }, style]}>{children}</Text>
+  )
+}
+
+export function CardContent({ children, style }: CardContentProps) {
+  return <View style={[styles.content, style]}>{children}</View>
+}
+
+export function CardFooter({ children, style }: CardFooterProps) {
+  return <View style={[styles.footer, style]}>{children}</View>
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 12,
+    borderWidth: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  header: {
+    padding: 24,
+    paddingBottom: 0,
+    gap: 6,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    lineHeight: 24,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  content: {
+    padding: 24,
+  },
+  footer: {
+    padding: 24,
+    paddingTop: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+})

package/src/components/Card/index.ts

@@ -0,0 +1,9 @@
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
+export type {
+  CardProps,
+  CardHeaderProps,
+  CardTitleProps,
+  CardDescriptionProps,
+  CardContentProps,
+  CardFooterProps,
+} from './Card'

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,98 @@
+import React, { useRef } from 'react'
+import { TouchableOpacity, Animated, 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()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (disabled) return
+    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 (
+    <Animated.View style={{ transform: [{ scale }] }}>
+    <TouchableOpacity
+      style={[styles.row, style]}
+      onPress={() => {
+        Haptics.selectionAsync()
+        onCheckedChange?.(!checked)
+      }}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      disabled={disabled}
+      activeOpacity={1}
+      touchSoundDisabled={true}
+    >
+      <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>
+    </Animated.View>
+  )
+}
+
+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,67 @@
+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,29 +1,32 @@
 import React, { useState } from 'react'
-import {
-  TextInput,
-  View,
-  Text,
-  StyleSheet,
-  TextInputProps,
-} from 'react-native'
+import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
 
 export interface InputProps extends TextInputProps {
   label?: string
+  /** Red helper text below the input; also changes border to `destructive` color. Takes priority over `hint`. */
   error?: string
+  /** Helper text shown below the input when there is no error. */
   hint?: string
+  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
+  containerStyle?: ViewStyle
 }
 
-export function Input({ label, error, hint, style, onFocus, onBlur, ...props }: InputProps) {
+export function Input({ label, error, hint, containerStyle, 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}
+    <View style={[styles.container, containerStyle]}>
+      {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{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) => {
@@ -34,11 +37,16 @@ export function Input({ label, error, hint, style, onFocus, onBlur, ...props }:
           setFocused(false)
           onBlur?.(e)
         }}
-        placeholderTextColor="#9CA3AF"
+        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 }]} allowFontScaling={true}>{error}</Text>
+      ) : null}
+      {!error && hint ? (
+        <Text style={[styles.helperText, { color: colors.mutedForeground }]} allowFontScaling={true}>{hint}</Text>
+      ) : null}
     </View>
   )
 }
@@ -50,31 +58,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,52 @@
+import React, { useRef, useState, useEffect } from 'react'
+import { View, Animated, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface ProgressProps {
+  /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
+  value?: number
+  /** Maximum value. Defaults to `100`. */
+  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,132 @@
+import React, { useRef } from 'react'
+import { TouchableOpacity, Animated, 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
+}
+
+function RadioItem({
+  option,
+  selected,
+  onSelect,
+}: {
+  option: RadioOption
+  selected: boolean
+  onSelect: () => void
+}) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (option.disabled) return
+    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 (
+    <Animated.View style={{ transform: [{ scale }] }}>
+      <TouchableOpacity
+        style={styles.row}
+        onPress={() => {
+          if (!option.disabled) {
+            Haptics.selectionAsync()
+            onSelect()
+          }
+        }}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        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>
+    </Animated.View>
+  )
+}
+
+export function RadioGroup({
+  options,
+  value,
+  onValueChange,
+  orientation = 'vertical',
+  style,
+}: RadioGroupProps) {
+  return (
+    <View style={[styles.container, orientation === 'horizontal' && styles.horizontal, style]}>
+      {options.map((option) => (
+        <RadioItem
+          key={option.value}
+          option={option}
+          selected={option.value === value}
+          onSelect={() => onValueChange?.(option.value)}
+        />
+      ))}
+    </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'