@retray-dev/ui-kit 0.1.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "0.1.0",
+  "version": "1.5.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -14,13 +14,20 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "COMPONENTS.md"
   ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "release": "npm run typecheck && npm run 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",
@@ -31,12 +38,44 @@
   "license": "MIT",
   "peerDependencies": {
     "react": ">=17",
-    "react-native": ">=0.70"
+    "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",
+    "react-native-worklets": ">=0.5.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "fast-xml-parser": "^5.5.7",
+      "react": "19.1.0",
+      "react-native": "0.81.5",
+      "react-native-worklets": "0.5.1"
+    },
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   },
   "devDependencies": {
-    "@types/react": "^18.3.0",
+    "@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

@@ -0,0 +1,173 @@
+import React, { useState, useRef } from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Animated,
+  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'
+
+export interface AccordionItem {
+  value: string
+  trigger: string
+  content: React.ReactNode
+}
+
+export interface AccordionProps {
+  items: AccordionItem[]
+  /**
+   * - `'single'` (default): only one item can be open at a time. Opening another closes the current one.
+   * - `'multiple'`: any number of items can be open simultaneously.
+   */
+  type?: 'single' | 'multiple'
+  /** Item value(s) that should be open on first render. */
+  defaultValue?: string | string[]
+  style?: ViewStyle
+}
+
+function AccordionItemComponent({
+  item,
+  isOpen,
+  onToggle,
+}: {
+  item: AccordionItem
+  isOpen: boolean
+  onToggle: () => void
+}) {
+  const { colors } = useTheme()
+  const animatedHeight = useSharedValue(0)
+  const animatedRotation = useSharedValue(0)
+  const contentHeight = useRef(0)
+  const scale = useRef(new Animated.Value(1)).current
+
+  const toggle = (open: boolean) => {
+    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(() => {
+    toggle(isOpen)
+  }, [isOpen])
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    if (contentHeight.current === 0) {
+      contentHeight.current = e.nativeEvent.layout.height
+      if (isOpen) animatedHeight.value = contentHeight.current
+    }
+  }
+
+  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 }]}>
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <TouchableOpacity
+          style={styles.trigger}
+          onPress={() => {
+            Haptics.selectionAsync()
+            onToggle()
+          }}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          activeOpacity={1}
+          touchSoundDisabled={true}
+        >
+          <Text style={[styles.triggerText, { color: colors.foreground }]}>{item.trigger}</Text>
+          <ReanimatedAnimated.Text
+            style={[styles.chevron, { color: colors.foreground }, rotationStyle]}
+          >
+            ▾
+          </ReanimatedAnimated.Text>
+        </TouchableOpacity>
+      </Animated.View>
+
+      <ReanimatedAnimated.View style={heightStyle}>
+        <View style={styles.content} onLayout={onLayout}>
+          {item.content}
+        </View>
+      </ReanimatedAnimated.View>
+    </View>
+  )
+}
+
+export function Accordion({ items, type = 'single', defaultValue, style }: AccordionProps) {
+  const [openValues, setOpenValues] = useState<string[]>(() => {
+    if (!defaultValue) return []
+    return Array.isArray(defaultValue) ? defaultValue : [defaultValue]
+  })
+
+  const toggle = (value: string) => {
+    if (type === 'single') {
+      setOpenValues((prev) => (prev.includes(value) ? [] : [value]))
+    } else {
+      setOpenValues((prev) =>
+        prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+      )
+    }
+  }
+
+  return (
+    <View style={style}>
+      {items.map((item) => (
+        <AccordionItemComponent
+          key={item.value}
+          item={item}
+          isOpen={openValues.includes(item.value)}
+          onToggle={() => toggle(item.value)}
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  item: {
+    borderBottomWidth: 1,
+  },
+  trigger: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 16,
+  },
+  triggerText: {
+    fontSize: 15,
+    fontWeight: '500',
+    flex: 1,
+  },
+  chevron: {
+    fontSize: 16,
+    marginLeft: 8,
+  },
+  content: {
+    paddingBottom: 16,
+    position: 'absolute',
+    width: '100%',
+  },
+})

package/src/components/Accordion/index.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion'
+export type { AccordionProps, AccordionItem } from './Accordion'

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export type AlertVariant = 'default' | 'destructive'
+
+export interface AlertProps {
+  title?: string
+  description?: string
+  variant?: AlertVariant
+  icon?: React.ReactNode
+  style?: ViewStyle
+}
+
+export function Alert({ title, description, variant = 'default', icon, style }: AlertProps) {
+  const { colors } = useTheme()
+
+  const borderColor = variant === 'destructive' ? colors.destructive : colors.border
+  const titleColor = variant === 'destructive' ? colors.destructive : colors.foreground
+  const descColor = variant === 'destructive' ? colors.destructive : colors.mutedForeground
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.card, borderColor }, 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}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 16,
+    gap: 12,
+  },
+  icon: {
+    marginTop: 2,
+  },
+  content: {
+    flex: 1,
+    gap: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+})

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert'
+export type { AlertProps, AlertVariant } from './Alert'

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import { View, Text, Image, StyleSheet, ViewStyle } from 'react-native'
+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
+}
+
+const sizeMap: Record<AvatarSize, number> = {
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64,
+}
+
+const fontSizeMap: Record<AvatarSize, number> = {
+  sm: 10,
+  md: 13,
+  lg: 18,
+  xl: 24,
+}
+
+export function Avatar({ src, fallback, size = 'md', style }: AvatarProps) {
+  const { colors } = useTheme()
+  const [imageError, setImageError] = useState(false)
+  const dimension = sizeMap[size]
+  const showFallback = !src || imageError
+
+  const containerStyle: ViewStyle = {
+    width: dimension,
+    height: dimension,
+    borderRadius: dimension / 2,
+    backgroundColor: colors.muted,
+    overflow: 'hidden',
+  }
+
+  return (
+    <View style={[styles.base, containerStyle, style]}>
+      {!showFallback ? (
+        <Image
+          source={{ uri: src }}
+          style={{ width: dimension, height: dimension }}
+          onError={() => setImageError(true)}
+        />
+      ) : (
+        <Text
+          style={[styles.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }]}
+        >
+          {fallback?.slice(0, 2).toUpperCase() ?? '?'}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fallback: {
+    fontWeight: '500',
+  },
+})

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar'
+export type { AvatarProps, AvatarSize } from './Avatar'

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
+
+export interface BadgeProps {
+  label: string
+  variant?: BadgeVariant
+  style?: ViewStyle
+}
+
+export function Badge({ label, variant = 'default', style }: BadgeProps) {
+  const { colors } = useTheme()
+
+  const containerStyle: ViewStyle = {
+    default: { backgroundColor: colors.primary },
+    secondary: { backgroundColor: colors.secondary },
+    destructive: { backgroundColor: colors.destructive },
+    outline: { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border },
+  }[variant]
+
+  const textColor = {
+    default: colors.primaryForeground,
+    secondary: colors.secondaryForeground,
+    destructive: colors.destructiveForeground,
+    outline: colors.foreground,
+  }[variant]
+
+  return (
+    <View style={[styles.container, containerStyle, style]}>
+      <Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>{label}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    alignSelf: 'flex-start',
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+})

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge'
+export type { BadgeProps, BadgeVariant } from './Badge'

package/src/components/Button/Button.tsx

@@ -1,49 +1,49 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import {
   TouchableOpacity,
   Text,
+  Animated,
   ActivityIndicator,
   StyleSheet,
   TouchableOpacityProps,
   ViewStyle,
   TextStyle,
 } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
 export interface ButtonProps extends TouchableOpacityProps {
   label: string
+  /**
+   * - `primary`: filled with `primary` token — main CTA
+   * - `secondary`: filled with `secondary` token — less prominent
+   * - `outline`: transparent with border — alternative actions
+   * - `ghost`: fully transparent — in-context or low-emphasis actions
+   */
   variant?: ButtonVariant
   size?: ButtonSize
+  /** Replaces the label with a spinner and forces `disabled`. */
   loading?: boolean
   fullWidth?: boolean
-}
-
-const containerVariantStyles: Record<ButtonVariant, ViewStyle> = {
-  primary: { backgroundColor: '#000' },
-  secondary: { backgroundColor: '#6B7280' },
-  outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: '#000' },
-  ghost: { backgroundColor: 'transparent' },
+  /** Icon rendered alongside the label. */
+  icon?: React.ReactNode
+  /** Side the icon appears on. Defaults to `'left'`. */
+  iconPosition?: 'left' | 'right'
 }
 
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: 12, paddingVertical: 6 },
-  md: { paddingHorizontal: 16, paddingVertical: 10 },
-  lg: { paddingHorizontal: 24, paddingVertical: 14 },
-}
-
-const labelVariantStyles: Record<ButtonVariant, TextStyle> = {
-  primary: { color: '#fff' },
-  secondary: { color: '#fff' },
-  outline: { color: '#000' },
-  ghost: { color: '#000' },
+  sm: { paddingHorizontal: 16, paddingVertical: 10 },
+  md: { paddingHorizontal: 20, paddingVertical: 14 },
+  lg: { paddingHorizontal: 28, paddingVertical: 18 },
 }
 
 const labelSizeStyles: Record<ButtonSize, TextStyle> = {
-  sm: { fontSize: 13 },
-  md: { fontSize: 15 },
-  lg: { fontSize: 17 },
+  sm: { fontSize: 14 },
+  md: { fontSize: 16 },
+  lg: { fontSize: 18 },
 }
 
 export function Button({
@@ -52,37 +52,83 @@ export function Button({
   size = 'md',
   loading = false,
   fullWidth = false,
+  icon,
+  iconPosition = 'left',
   disabled,
   style,
+  onPress,
   ...props
 }: ButtonProps) {
+  const { colors } = useTheme()
   const isDisabled = disabled || loading
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (isDisabled) 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 handlePress: TouchableOpacityProps['onPress'] = (e) => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+    onPress?.(e)
+  }
+
+  const containerVariantStyle: ViewStyle = {
+    primary: { backgroundColor: colors.primary },
+    secondary: { backgroundColor: colors.secondary },
+    outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
+    ghost: { backgroundColor: 'transparent' },
+  }[variant]
+
+  const labelVariantStyle: TextStyle = {
+    primary: { color: colors.primaryForeground },
+    secondary: { color: colors.secondaryForeground },
+    outline: { color: colors.foreground },
+    ghost: { color: colors.foreground },
+  }[variant]
+
+  const spinnerColor =
+    variant === 'primary' || variant === 'secondary' ? colors.primaryForeground : colors.foreground
 
   return (
-    <TouchableOpacity
-      style={[
-        styles.base,
-        containerVariantStyles[variant],
-        containerSizeStyles[size],
-        fullWidth && styles.fullWidth,
-        isDisabled && styles.disabled,
-        style,
-      ]}
-      disabled={isDisabled}
-      activeOpacity={0.75}
-      {...props}
-    >
-      {loading ? (
-        <ActivityIndicator
-          size="small"
-          color={variant === 'outline' || variant === 'ghost' ? '#000' : '#fff'}
-        />
-      ) : (
-        <Text style={[styles.label, labelVariantStyles[variant], labelSizeStyles[size]]}>
-          {label}
-        </Text>
-      )}
-    </TouchableOpacity>
+    <Animated.View style={[fullWidth && styles.fullWidth, { transform: [{ scale }] }]}>
+      <TouchableOpacity
+        style={[
+          styles.base,
+          containerVariantStyle,
+          containerSizeStyles[size],
+          fullWidth && styles.fullWidth,
+          isDisabled && styles.disabled,
+          style,
+        ]}
+        disabled={isDisabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...props}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={spinnerColor} />
+        ) : (
+          <>
+            {icon && iconPosition === 'left' && <>{icon}</>}
+            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], icon ? styles.labelWithIcon : undefined]}>{label}</Text>
+            {icon && iconPosition === 'right' && <>{icon}</>}
+          </>
+        )}
+      </TouchableOpacity>
+    </Animated.View>
   )
 }
 
@@ -102,4 +148,7 @@ const styles = StyleSheet.create({
   label: {
     fontWeight: '600',
   },
+  labelWithIcon: {
+    marginHorizontal: 6,
+  },
 })