@retray-dev/ui-kit 0.1.0 → 1.5.0

package/src/components/Select/Select.tsx

@@ -0,0 +1,232 @@
+import React, { useRef, useCallback } from 'react'
+import { View, Text, TouchableOpacity, Animated, StyleSheet, ViewStyle } from 'react-native'
+import {
+  BottomSheetModal,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet'
+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
+  /** Text shown when no option is selected. Defaults to `'Select an option'`. */
+  placeholder?: string
+  label?: string
+  /** Red helper text; also changes trigger border to `destructive` color. */
+  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 bottomSheetRef = useRef<BottomSheetModal>(null)
+  const scale = useRef(new Animated.Value(1)).current
+
+  const selected = options.find((o) => o.value === value)
+
+  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()
+  }
+
+  const handleOpen = () => {
+    if (!disabled) {
+      Haptics.selectionAsync()
+      bottomSheetRef.current?.present()
+    }
+  }
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior="close"
+      />
+    ),
+    []
+  )
+
+  return (
+    <View style={[styles.container, style]}>
+      {label ? <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text> : null}
+
+      <Animated.View style={{ transform: [{ scale }], opacity: disabled ? 0.45 : 1 }}>
+      <TouchableOpacity
+        style={[
+          styles.trigger,
+          {
+            borderColor: error ? colors.destructive : colors.border,
+            backgroundColor: colors.background,
+          },
+        ]}
+        onPress={handleOpen}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+      >
+        <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>
+      </Animated.View>
+
+      {error ? (
+        <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
+      ) : null}
+
+      <BottomSheetModal
+        ref={bottomSheetRef}
+        enableDynamicSizing
+        enablePanDownToClose
+        backdropComponent={renderBackdrop}
+        backgroundStyle={[styles.sheetBackground, { backgroundColor: colors.card }]}
+        handleIndicatorStyle={[styles.sheetHandle, { backgroundColor: colors.border }]}
+      >
+        <BottomSheetView style={styles.sheetContent}>
+          {label ? (
+            <Text style={[styles.sheetTitle, { color: colors.foreground }]}>{label}</Text>
+          ) : null}
+          {options.map((item) => {
+            const isSelected = item.value === value
+            return (
+              <TouchableOpacity
+                key={item.value}
+                style={[
+                  styles.option,
+                  isSelected && { backgroundColor: colors.accent },
+                  item.disabled && styles.disabledOption,
+                ]}
+                onPress={() => {
+                  if (!item.disabled) {
+                    Haptics.selectionAsync()
+                    onValueChange?.(item.value)
+                    bottomSheetRef.current?.dismiss()
+                  }
+                }}
+                activeOpacity={0.7}
+                touchSoundDisabled={true}
+              >
+                <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>
+            )
+          })}
+        </BottomSheetView>
+      </BottomSheetModal>
+    </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,
+  },
+  sheetBackground: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+  },
+  sheetContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 32,
+  },
+  sheetTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    paddingVertical: 12,
+    paddingHorizontal: 4,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 14,
+    borderRadius: 8,
+  },
+  optionText: {
+    fontSize: 15,
+    flex: 1,
+  },
+  disabledOption: {
+    opacity: 0.45,
+  },
+  checkmark: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginLeft: 8,
+  },
+})

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'

package/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,115 @@
+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
+  /**
+   * Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
+   * absolute point values (`300`). Defaults to `['50%']`.
+   */
+  snapPoints?: (string | number)[]
+  /** Style for the inner `BottomSheetView` content container. */
+  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,63 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, StyleSheet, View, ViewStyle } from 'react-native'
+import { LinearGradient } from 'expo-linear-gradient'
+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, colorScheme } = useTheme()
+  const shimmerAnim = useRef(new Animated.Value(0)).current
+  const [containerWidth, setContainerWidth] = useState(300)
+
+  const shimmerHighlight =
+    colorScheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)'
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(shimmerAnim, {
+        toValue: 1,
+        duration: 1200,
+        useNativeDriver: true,
+      })
+    )
+    animation.start()
+    return () => animation.stop()
+  }, [shimmerAnim])
+
+  const translateX = shimmerAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth],
+  })
+
+  return (
+    <View
+      style={[
+        styles.base,
+        { width: width as any, height, borderRadius, backgroundColor: colors.muted },
+        style,
+      ]}
+      onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+    >
+      <Animated.View style={[StyleSheet.absoluteFill, { transform: [{ translateX }] }]}>
+        <LinearGradient
+          colors={['transparent', shimmerHighlight, 'transparent']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={StyleSheet.absoluteFill}
+        />
+      </Animated.View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    overflow: 'hidden',
+  },
+})

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,143 @@
+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 {
+  /** Current value. Controlled when provided; falls back to internal state otherwise. */
+  value?: number
+  minimumValue?: number
+  maximumValue?: number
+  /** Snap interval. `0` (default) means continuous (no snapping). */
+  step?: number
+  /** Called on every move while dragging. */
+  onValueChange?: (value: number) => void
+  /** Called once when the user releases the thumb. */
+  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,21 @@
+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'