@retray-dev/ui-kit 0.1.0 → 1.0.0

package/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef } from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import {
+  BottomSheetModal,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  BottomSheetModalProvider,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export { BottomSheetModalProvider }
+
+export interface SheetProps {
+  open: boolean
+  onClose: () => void
+  title?: string
+  description?: string
+  children?: React.ReactNode
+  snapPoints?: (string | number)[]
+  style?: ViewStyle
+}
+
+export function Sheet({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  snapPoints = ['50%'],
+  style,
+}: SheetProps) {
+  const { colors } = useTheme()
+  const ref = useRef<BottomSheetModal>(null)
+
+  useEffect(() => {
+    if (open) {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+      ref.current?.present()
+    } else {
+      ref.current?.dismiss()
+    }
+  }, [open])
+
+  const renderBackdrop = (props: BottomSheetBackdropProps) => (
+    <BottomSheetBackdrop
+      {...props}
+      disappearsOnIndex={-1}
+      appearsOnIndex={0}
+      pressBehavior="close"
+    />
+  )
+
+  return (
+    <BottomSheetModal
+      ref={ref}
+      snapPoints={snapPoints}
+      onDismiss={onClose}
+      backdropComponent={renderBackdrop}
+      backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
+      handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
+      enablePanDownToClose
+    >
+      <BottomSheetView style={[styles.content, style]}>
+        {(title || description) ? (
+          <View style={styles.header}>
+            {title ? (
+              <Text style={[styles.title, { color: colors.cardForeground }]}>{title}</Text>
+            ) : null}
+            {description ? (
+              <Text style={[styles.description, { color: colors.mutedForeground }]}>{description}</Text>
+            ) : null}
+          </View>
+        ) : null}
+        {children}
+      </BottomSheetView>
+    </BottomSheetModal>
+  )
+}
+
+const styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+  },
+  content: {
+    paddingHorizontal: 24,
+    paddingBottom: 32,
+  },
+  header: {
+    gap: 8,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+})

package/src/components/Sheet/index.ts

@@ -0,0 +1,2 @@
+export { Sheet, BottomSheetModalProvider } from './Sheet'
+export type { SheetProps } from './Sheet'

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef } from 'react'
+import { Animated, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface SkeletonProps {
+  width?: number | string
+  height?: number
+  borderRadius?: number
+  style?: ViewStyle
+}
+
+export function Skeleton({ width = '100%', height = 16, borderRadius = 6, style }: SkeletonProps) {
+  const { colors } = useTheme()
+  const opacity = useRef(new Animated.Value(1)).current
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0.4, duration: 800, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 1, duration: 800, useNativeDriver: true }),
+      ])
+    )
+    animation.start()
+    return () => animation.stop()
+  }, [opacity])
+
+  return (
+    <Animated.View
+      style={[
+        styles.base,
+        { width: width as any, height, borderRadius, backgroundColor: colors.muted, opacity },
+        style,
+      ]}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {},
+})

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,142 @@
+import React, { useRef, useState } from 'react'
+import { View, PanResponder, StyleSheet, LayoutChangeEvent, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+export interface SliderProps {
+  value?: number
+  minimumValue?: number
+  maximumValue?: number
+  step?: number
+  onValueChange?: (value: number) => void
+  onSlidingComplete?: (value: number) => void
+  disabled?: boolean
+  style?: ViewStyle
+}
+
+export function Slider({
+  value = 0,
+  minimumValue = 0,
+  maximumValue = 1,
+  step = 0,
+  onValueChange,
+  onSlidingComplete,
+  disabled,
+  style,
+}: SliderProps) {
+  const { colors } = useTheme()
+  const trackWidth = useRef(0)
+  const lastSteppedValue = useRef(value)
+  const [internalValue, setInternalValue] = useState(value)
+  const currentValue = value ?? internalValue
+
+  const clamp = (v: number) => Math.min(Math.max(v, minimumValue), maximumValue)
+
+  const snapToStep = (v: number) => {
+    if (!step) return v
+    return Math.round((v - minimumValue) / step) * step + minimumValue
+  }
+
+  const xToValue = (x: number): number => {
+    const ratio = Math.min(Math.max(x / trackWidth.current, 0), 1)
+    const raw = ratio * (maximumValue - minimumValue) + minimumValue
+    return clamp(snapToStep(raw))
+  }
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: (e) => {
+        const x = e.nativeEvent.locationX
+        const newValue = xToValue(x)
+        setInternalValue(newValue)
+        onValueChange?.(newValue)
+      },
+      onPanResponderMove: (e) => {
+        const x = e.nativeEvent.locationX
+        const newValue = xToValue(x)
+        if (newValue !== lastSteppedValue.current) {
+          lastSteppedValue.current = newValue
+          Haptics.selectionAsync()
+        }
+        setInternalValue(newValue)
+        onValueChange?.(newValue)
+      },
+      onPanResponderRelease: (e) => {
+        const x = e.nativeEvent.locationX
+        const newValue = xToValue(x)
+        setInternalValue(newValue)
+        onSlidingComplete?.(newValue)
+      },
+    })
+  ).current
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    trackWidth.current = e.nativeEvent.layout.width
+  }
+
+  const percent = ((currentValue - minimumValue) / (maximumValue - minimumValue)) * 100
+
+  return (
+    <View
+      style={[styles.container, disabled && styles.disabled, style]}
+      {...panResponder.panHandlers}
+      onLayout={onLayout}
+    >
+      <View style={[styles.track, { backgroundColor: colors.muted }]}>
+        <View
+          style={[
+            styles.range,
+            { width: `${percent}%` as any, backgroundColor: colors.primary },
+          ]}
+        />
+      </View>
+      <View
+        style={[
+          styles.thumb,
+          {
+            left: `${percent}%` as any,
+            backgroundColor: colors.primary,
+            borderColor: colors.background,
+            transform: [{ translateX: -14 }],
+          },
+        ]}
+        pointerEvents="none"
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 32,
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+  track: {
+    height: 6,
+    borderRadius: 3,
+    overflow: 'hidden',
+    width: '100%',
+  },
+  range: {
+    height: '100%',
+    borderRadius: 3,
+  },
+  thumb: {
+    position: 'absolute',
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    borderWidth: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+})

package/src/components/Slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider'
+export type { SliderProps } from './Slider'

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { ActivityIndicator, ActivityIndicatorProps } from 'react-native'
+import { useTheme } from '../../theme'
+
+export type SpinnerSize = 'sm' | 'md' | 'lg'
+
+export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
+  size?: SpinnerSize
+  color?: string
+}
+
+const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
+  sm: 'small',
+  md: 'small',
+  lg: 'large',
+}
+
+export function Spinner({ size = 'md', color, ...props }: SpinnerProps) {
+  const { colors } = useTheme()
+  return (
+    <ActivityIndicator
+      size={sizeMap[size]}
+      color={color ?? colors.primary}
+      {...props}
+    />
+  )
+}

package/src/components/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner'
+export type { SpinnerProps, SpinnerSize } from './Spinner'

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,82 @@
+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}
+      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,145 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface TabItem {
+  label: string
+  value: string
+}
+
+export interface TabsProps {
+  tabs: TabItem[]
+  value?: string
+  onValueChange?: (value: string) => void
+  children?: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface TabsContentProps {
+  value: string
+  activeValue: string
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+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) => {
+    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) => {
+          const isActive = tab.value === active
+          return (
+            <TouchableOpacity
+              key={tab.value}
+              style={styles.trigger}
+              onPress={() => handlePress(tab.value)}
+              activeOpacity={0.7}
+              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
+                }
+              }}
+            >
+              <Text
+                style={[
+                  styles.triggerLabel,
+                  { color: isActive ? colors.foreground : colors.mutedForeground },
+                  isActive && styles.activeTriggerLabel,
+                ]}
+              >
+                {tab.label}
+              </Text>
+            </TouchableOpacity>
+          )
+        })}
+      </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',
+    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,70 @@
+import React, { useState } from 'react'
+import { TextInput, View, Text, StyleSheet, TextInputProps } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface TextareaProps extends TextInputProps {
+  label?: string
+  error?: string
+  hint?: string
+  rows?: number
+}
+
+export function Textarea({ label, error, hint, rows = 4, style, onFocus, onBlur, ...props }: TextareaProps) {
+  const { colors } = useTheme()
+  const [focused, setFocused] = useState(false)
+
+  return (
+    <View style={styles.container}>
+      {label ? (
+        <Text style={[styles.label, { color: colors.foreground }]}>{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 }]}>{error}</Text>
+      ) : null}
+      {!error && hint ? (
+        <Text style={[styles.helperText, { color: colors.mutedForeground }]}>{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'