@retray-dev/ui-kit 1.0.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "1.0.0",
+  "version": "1.5.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -21,7 +21,13 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "release": "pnpm typecheck && pnpm build && npm publish --access public"
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write src",
+    "format:check": "prettier --check src",
+    "lint:all": "pnpm lint && pnpm --filter retray-ui-kit-example lint",
+    "format:all": "pnpm format && pnpm --filter retray-ui-kit-example format",
+    "deploy": "pnpm typecheck && pnpm build && npm publish --access public"
   },
   "keywords": [
     "react-native",
@@ -34,6 +40,7 @@
     "react": ">=17",
     "react-native": ">=0.70",
     "expo-haptics": ">=14.0.0",
+    "expo-linear-gradient": ">=13.0.0",
     "@gorhom/bottom-sheet": ">=5.0.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-gesture-handler": ">=2.0.0",
@@ -47,18 +54,28 @@
       "react-native": "0.81.5",
       "react-native-worklets": "0.5.1"
     },
-    "onlyBuiltDependencies": ["esbuild"]
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
     "@types/react": "^19.1.0",
     "expo-haptics": "~15.0.8",
+    "expo-linear-gradient": "~14.1.5",
     "react": "18.2.0",
     "react-native": "0.74.0",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",
     "react-native-worklets": "~0.5.0",
     "react-native-safe-area-context": "~5.6.2",
+    "eslint": "^9.0.0",
+    "@eslint/js": "^9.0.0",
+    "typescript-eslint": "^8.0.0",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "prettier": "^3.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0"
   }

package/src/components/Accordion/Accordion.tsx

@@ -4,11 +4,16 @@ import {
   Text,
   TouchableOpacity,
   Animated,
-  Easing,
   StyleSheet,
   LayoutChangeEvent,
   ViewStyle,
 } from 'react-native'
+import ReanimatedAnimated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -40,25 +45,15 @@ function AccordionItemComponent({
   onToggle: () => void
 }) {
   const { colors } = useTheme()
-  const animatedHeight = useRef(new Animated.Value(0)).current
-  const animatedRotation = useRef(new Animated.Value(0)).current
+  const animatedHeight = useSharedValue(0)
+  const animatedRotation = useSharedValue(0)
   const contentHeight = useRef(0)
+  const scale = useRef(new Animated.Value(1)).current
 
   const toggle = (open: boolean) => {
-    Animated.parallel([
-      Animated.timing(animatedHeight, {
-        toValue: open ? contentHeight.current : 0,
-        duration: 220,
-        easing: open ? Easing.out(Easing.ease) : Easing.in(Easing.ease),
-        useNativeDriver: false,
-      }),
-      Animated.timing(animatedRotation, {
-        toValue: open ? 1 : 0,
-        duration: 220,
-        easing: open ? Easing.out(Easing.ease) : Easing.in(Easing.ease),
-        useNativeDriver: true,
-      }),
-    ]).start()
+    const easing = open ? Easing.out(Easing.ease) : Easing.in(Easing.ease)
+    animatedHeight.value = withTiming(open ? contentHeight.current : 0, { duration: 220, easing })
+    animatedRotation.value = withTiming(open ? 1 : 0, { duration: 220, easing })
   }
 
   React.useEffect(() => {
@@ -68,37 +63,55 @@ function AccordionItemComponent({
   const onLayout = (e: LayoutChangeEvent) => {
     if (contentHeight.current === 0) {
       contentHeight.current = e.nativeEvent.layout.height
-      if (isOpen) animatedHeight.setValue(contentHeight.current)
+      if (isOpen) animatedHeight.value = contentHeight.current
     }
   }
 
-  const rotate = animatedRotation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '180deg'],
-  })
+  const heightStyle = useAnimatedStyle(() => ({
+    height: animatedHeight.value,
+    overflow: 'hidden',
+  }))
+
+  const rotationStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${animatedRotation.value * 180}deg` }],
+  }))
+
+  const handlePressIn = () => {
+    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 (
     <View style={[styles.item, { borderBottomColor: colors.border }]}>
-      <TouchableOpacity
-        style={styles.trigger}
-        onPress={() => { Haptics.selectionAsync(); onToggle() }}
-        activeOpacity={0.7}
-      >
-        <Text style={[styles.triggerText, { color: colors.foreground }]}>
-          {item.trigger}
-        </Text>
-        <Animated.Text
-          style={[styles.chevron, { color: colors.foreground, transform: [{ rotate }] }]}
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <TouchableOpacity
+          style={styles.trigger}
+          onPress={() => {
+            Haptics.selectionAsync()
+            onToggle()
+          }}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          activeOpacity={1}
+          touchSoundDisabled={true}
         >
-          ▾
-        </Animated.Text>
-      </TouchableOpacity>
+          <Text style={[styles.triggerText, { color: colors.foreground }]}>{item.trigger}</Text>
+          <ReanimatedAnimated.Text
+            style={[styles.chevron, { color: colors.foreground }, rotationStyle]}
+          >
+            ▾
+          </ReanimatedAnimated.Text>
+        </TouchableOpacity>
+      </Animated.View>
 
-      <Animated.View style={[styles.contentWrapper, { height: animatedHeight, overflow: 'hidden' }]}>
+      <ReanimatedAnimated.View style={heightStyle}>
         <View style={styles.content} onLayout={onLayout}>
           {item.content}
         </View>
-      </Animated.View>
+      </ReanimatedAnimated.View>
     </View>
   )
 }
@@ -152,7 +165,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     marginLeft: 8,
   },
-  contentWrapper: {},
   content: {
     paddingBottom: 16,
     position: 'absolute',

package/src/components/Alert/Alert.tsx

@@ -24,7 +24,9 @@ export function Alert({ title, description, variant = 'default', icon, style }:
       {icon ? <View style={styles.icon}>{icon}</View> : null}
       <View style={styles.content}>
         {title ? <Text style={[styles.title, { color: titleColor }]}>{title}</Text> : null}
-        {description ? <Text style={[styles.description, { color: descColor }]}>{description}</Text> : null}
+        {description ? (
+          <Text style={[styles.description, { color: descColor }]}>{description}</Text>
+        ) : null}
       </View>
     </View>
   )

package/src/components/Avatar/Avatar.tsx

@@ -5,7 +5,9 @@ import { useTheme } from '../../theme'
 export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'
 
 export interface AvatarProps {
+  /** Remote image URI. Falls back to `fallback` initials on error or when omitted. */
   src?: string
+  /** Up to 2 characters shown when the image is unavailable. Auto-uppercased. Defaults to `'?'`. */
   fallback?: string
   size?: AvatarSize
   style?: ViewStyle
@@ -48,7 +50,9 @@ export function Avatar({ src, fallback, size = 'md', style }: AvatarProps) {
           onError={() => setImageError(true)}
         />
       ) : (
-        <Text style={[styles.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }]}>
+        <Text
+          style={[styles.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }]}
+        >
           {fallback?.slice(0, 2).toUpperCase() ?? '?'}
         </Text>
       )}

package/src/components/Badge/Badge.tsx

@@ -29,7 +29,7 @@ export function Badge({ label, variant = 'default', style }: BadgeProps) {
 
   return (
     <View style={[styles.container, containerStyle, style]}>
-      <Text style={[styles.label, { color: textColor }]}>{label}</Text>
+      <Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>{label}</Text>
     </View>
   )
 }

package/src/components/Button/Button.tsx

@@ -28,6 +28,10 @@ export interface ButtonProps extends TouchableOpacityProps {
   /** Replaces the label with a spinner and forces `disabled`. */
   loading?: boolean
   fullWidth?: boolean
+  /** Icon rendered alongside the label. */
+  icon?: React.ReactNode
+  /** Side the icon appears on. Defaults to `'left'`. */
+  iconPosition?: 'left' | 'right'
 }
 
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
@@ -48,6 +52,8 @@ export function Button({
   size = 'md',
   loading = false,
   fullWidth = false,
+  icon,
+  iconPosition = 'left',
   disabled,
   style,
   onPress,
@@ -59,11 +65,16 @@ export function Button({
 
   const handlePressIn = () => {
     if (isDisabled) return
-    Animated.spring(scale, { toValue: 0.97, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+    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: 2 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
   }
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
@@ -85,9 +96,8 @@ export function Button({
     ghost: { color: colors.foreground },
   }[variant]
 
-  const spinnerColor = variant === 'primary' || variant === 'secondary'
-    ? colors.primaryForeground
-    : colors.foreground
+  const spinnerColor =
+    variant === 'primary' || variant === 'secondary' ? colors.primaryForeground : colors.foreground
 
   return (
     <Animated.View style={[fullWidth && styles.fullWidth, { transform: [{ scale }] }]}>
@@ -102,6 +112,7 @@ export function Button({
         ]}
         disabled={isDisabled}
         activeOpacity={1}
+        touchSoundDisabled={true}
         onPress={handlePress}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
@@ -110,9 +121,11 @@ export function Button({
         {loading ? (
           <ActivityIndicator size="small" color={spinnerColor} />
         ) : (
-          <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size]]}>
-            {label}
-          </Text>
+          <>
+            {icon && iconPosition === 'left' && <>{icon}</>}
+            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], icon ? styles.labelWithIcon : undefined]}>{label}</Text>
+            {icon && iconPosition === 'right' && <>{icon}</>}
+          </>
         )}
       </TouchableOpacity>
     </Animated.View>
@@ -135,4 +148,7 @@ const styles = StyleSheet.create({
   label: {
     fontWeight: '600',
   },
+  labelWithIcon: {
+    marginHorizontal: 6,
+  },
 })

package/src/components/Card/Card.tsx

@@ -36,11 +36,7 @@ export function Card({ children, style }: CardProps) {
   const { colors } = useTheme()
   return (
     <View
-      style={[
-        styles.card,
-        { backgroundColor: colors.card, borderColor: colors.border },
-        style,
-      ]}
+      style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }, style]}
     >
       {children}
     </View>
@@ -53,9 +49,7 @@ export function CardHeader({ children, style }: CardHeaderProps) {
 
 export function CardTitle({ children, style }: CardTitleProps) {
   const { colors } = useTheme()
-  return (
-    <Text style={[styles.title, { color: colors.cardForeground }, style]}>{children}</Text>
-  )
+  return <Text style={[styles.title, { color: colors.cardForeground }, style]}>{children}</Text>
 }
 
 export function CardDescription({ children, style }: CardDescriptionProps) {

package/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
+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'
 
@@ -11,15 +11,38 @@ export interface CheckboxProps {
   style?: ViewStyle
 }
 
-export function Checkbox({ checked = false, onCheckedChange, label, disabled, style }: CheckboxProps) {
+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) }}
+      onPress={() => {
+        Haptics.selectionAsync()
+        onCheckedChange?.(!checked)
+      }}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
       disabled={disabled}
-      activeOpacity={0.7}
+      activeOpacity={1}
+      touchSoundDisabled={true}
     >
       <View
         style={[
@@ -31,14 +54,19 @@ export function Checkbox({ checked = false, onCheckedChange, label, disabled, st
           },
         ]}
       >
-        {checked ? <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} /> : null}
+        {checked ? (
+          <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
+        ) : null}
       </View>
       {label ? (
-        <Text style={[styles.label, { color: disabled ? colors.mutedForeground : colors.foreground }]}>
+        <Text
+          style={[styles.label, { color: disabled ? colors.mutedForeground : colors.foreground }]}
+        >
           {label}
         </Text>
       ) : null}
     </TouchableOpacity>
+    </Animated.View>
   )
 }
 

package/src/components/EmptyState/EmptyState.tsx

@@ -16,9 +16,7 @@ export function EmptyState({ icon, title, description, action, style }: EmptySta
   return (
     <View style={[styles.container, { borderColor: colors.border }, style]}>
       {icon ? (
-        <View style={[styles.iconWrapper, { backgroundColor: colors.muted }]}>
-          {icon}
-        </View>
+        <View style={[styles.iconWrapper, { backgroundColor: colors.muted }]}>{icon}</View>
       ) : null}
       <View style={styles.textWrapper}>
         <Text style={[styles.title, { color: colors.foreground }]}>{title}</Text>

package/src/components/Input/Input.tsx

@@ -1,22 +1,24 @@
 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, { color: colors.foreground }]}>{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,
@@ -27,17 +29,23 @@ export function Input({ label, error, hint, style, onFocus, onBlur, ...props }:
           },
           style,
         ]}
-        onFocus={(e) => { setFocused(true); onFocus?.(e) }}
-        onBlur={(e) => { setFocused(false); onBlur?.(e) }}
+        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>
+        <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
       {!error && hint ? (
-        <Text style={[styles.helperText, { color: colors.mutedForeground }]}>{hint}</Text>
+        <Text style={[styles.helperText, { color: colors.mutedForeground }]} allowFontScaling={true}>{hint}</Text>
       ) : null}
     </View>
   )

package/src/components/Progress/Progress.tsx

@@ -3,7 +3,9 @@ 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
 }
@@ -30,10 +32,7 @@ export function Progress({ value = 0, max = 100, style }: ProgressProps) {
       onLayout={(e) => setTrackWidth(e.nativeEvent.layout.width)}
     >
       <Animated.View
-        style={[
-          styles.indicator,
-          { width: animatedWidth, backgroundColor: colors.primary },
-        ]}
+        style={[styles.indicator, { width: animatedWidth, backgroundColor: colors.primary }]}
       />
     </View>
   )

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
+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'
 
@@ -17,6 +17,67 @@ export interface RadioGroupProps {
   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,
@@ -24,50 +85,16 @@ export function RadioGroup({
   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 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>
   )
 }