@retray-dev/ui-kit 0.1.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -14,13 +14,14 @@
   },
   "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"
+    "release": "pnpm typecheck && pnpm build && npm publish --access public"
   },
   "keywords": [
     "react-native",
@@ -31,12 +32,33 @@
   "license": "MIT",
   "peerDependencies": {
     "react": ">=17",
-    "react-native": ">=0.70"
+    "react-native": ">=0.70",
+    "expo-haptics": ">=14.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",
     "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",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0"
   }

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,161 @@
+import React, { useState, useRef } from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Animated,
+  Easing,
+  StyleSheet,
+  LayoutChangeEvent,
+  ViewStyle,
+} from 'react-native'
+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 = useRef(new Animated.Value(0)).current
+  const animatedRotation = useRef(new Animated.Value(0)).current
+  const contentHeight = useRef(0)
+
+  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()
+  }
+
+  React.useEffect(() => {
+    toggle(isOpen)
+  }, [isOpen])
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    if (contentHeight.current === 0) {
+      contentHeight.current = e.nativeEvent.layout.height
+      if (isOpen) animatedHeight.setValue(contentHeight.current)
+    }
+  }
+
+  const rotate = animatedRotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg'],
+  })
+
+  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.Text>
+      </TouchableOpacity>
+
+      <Animated.View style={[styles.contentWrapper, { height: animatedHeight, overflow: 'hidden' }]}>
+        <View style={styles.content} onLayout={onLayout}>
+          {item.content}
+        </View>
+      </Animated.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,
+  },
+  contentWrapper: {},
+  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,57 @@
+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,67 @@
+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 {
+  src?: string
+  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 }]}>{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,45 @@
-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' },
-}
-
 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({
@@ -54,35 +50,72 @@ export function Button({
   fullWidth = false,
   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.97, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 2 }).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}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...props}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={spinnerColor} />
+        ) : (
+          <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size]]}>
+            {label}
+          </Text>
+        )}
+      </TouchableOpacity>
+    </Animated.View>
   )
 }
 

package/src/components/Card/Card.tsx

@@ -0,0 +1,109 @@
+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'