@retray-dev/ui-kit 1.7.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "1.7.0",
+  "version": "2.3.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -45,7 +45,9 @@
     "react-native-reanimated": ">=4.0.0",
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-worklets": ">=0.8.0",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react-native-safe-area-context": ">=4.0.0",
+    "@react-native-picker/picker": ">=2.0.0",
+    "@react-native-community/slider": ">=4.0.0"
   },
   "pnpm": {
     "overrides": {
@@ -60,6 +62,8 @@
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
+    "@react-native-picker/picker": "2.11.4",
+    "@react-native-community/slider": "^4.5.5",
     "@types/react": "^19.1.0",
     "expo-haptics": "~15.0.8",
     "expo-linear-gradient": "~15.0.8",

package/src/components/Alert/Alert.tsx

@@ -2,22 +2,36 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 
-export type AlertVariant = 'default' | 'destructive'
+export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
-export interface AlertProps {
+export interface AlertBannerProps {
   title?: string
   description?: string
-  variant?: AlertVariant
+  variant?: AlertBannerVariant
   icon?: React.ReactNode
   style?: ViewStyle
 }
 
-export function Alert({ title, description, variant = 'default', icon, style }: AlertProps) {
+export function AlertBanner({ title, description, variant = 'default', icon, style }: AlertBannerProps) {
   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
+  const borderColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.border
+
+  const titleColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.foreground
+
+  const descColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.mutedForeground
+
+  const defaultIcon =
+    variant === 'destructive' ? '⚠' : variant === 'success' ? '✓' : 'ℹ'
 
   return (
     <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
@@ -25,15 +39,13 @@ export function Alert({ title, description, variant = 'default', icon, style }:
         <View style={styles.icon}>{icon}</View>
       ) : (
         <View style={styles.icon}>
-          <Text style={[styles.defaultIcon, { color: titleColor }]}>
-            {variant === 'destructive' ? '⚠' : 'ℹ'}
-          </Text>
+          <Text style={[styles.defaultIcon, { color: titleColor }]} allowFontScaling={true}>{defaultIcon}</Text>
         </View>
       )}
       <View style={styles.content}>
-        {title ? <Text style={[styles.title, { color: titleColor }]}>{title}</Text> : null}
+        {title ? <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text> : null}
         {description ? (
-          <Text style={[styles.description, { color: descColor }]}>{description}</Text>
+          <Text style={[styles.description, { color: descColor }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
     </View>

package/src/components/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export type AlertBannerVariant = 'default' | 'destructive' | 'success'
+
+export interface AlertBannerProps {
+  title?: string
+  description?: string
+  variant?: AlertBannerVariant
+  icon?: React.ReactNode
+  style?: ViewStyle
+}
+
+export function AlertBanner({ title, description, variant = 'default', icon, style }: AlertBannerProps) {
+  const { colors } = useTheme()
+
+  const borderColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.border
+
+  const titleColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.foreground
+
+  const descColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.mutedForeground
+
+  const defaultIcon =
+    variant === 'destructive' ? '⚠' : variant === 'success' ? '✓' : 'ℹ'
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
+      {icon ? (
+        <View style={styles.icon}>{icon}</View>
+      ) : (
+        <View style={styles.icon}>
+          <Text style={[styles.defaultIcon, { color: titleColor }]} allowFontScaling={true}>{defaultIcon}</Text>
+        </View>
+      )}
+      <View style={styles.content}>
+        {title ? <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text> : null}
+        {description ? (
+          <Text style={[styles.description, { color: descColor }]} allowFontScaling={true}>{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,
+  },
+  defaultIcon: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+})

package/src/components/AlertBanner/index.ts

@@ -0,0 +1,2 @@
+export { AlertBanner } from './AlertBanner'
+export type { AlertBannerProps, AlertBannerVariant } from './AlertBanner'

package/src/components/Avatar/Avatar.tsx

@@ -52,6 +52,7 @@ export function Avatar({ src, fallback, size = 'md', style }: AvatarProps) {
       ) : (
         <Text
           style={[styles.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }]}
+          allowFontScaling={true}
         >
           {fallback?.slice(0, 2).toUpperCase() ?? '?'}
         </Text>

package/src/components/Badge/Badge.tsx

@@ -1,16 +1,40 @@
 import React from 'react'
-import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
 
 export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
+export type BadgeSize = 'sm' | 'md' | 'lg'
 
 export interface BadgeProps {
-  label: string
+  label?: string
+  /** Alternative to \`label\` — allows JSX children. */
+  children?: React.ReactNode
   variant?: BadgeVariant
+  size?: BadgeSize
+  /** Icon rendered before the label/children. */
+  icon?: React.ReactNode
   style?: ViewStyle
 }
 
-export function Badge({ label, variant = 'default', style }: BadgeProps) {
+const sizePadding: Record<BadgeSize, ViewStyle> = {
+  sm: { paddingHorizontal: 8, paddingVertical: 2 },
+  md: { paddingHorizontal: 10, paddingVertical: 4 },
+  lg: { paddingHorizontal: 12, paddingVertical: 6 },
+}
+
+const sizeFontSize: Record<BadgeSize, TextStyle> = {
+  sm: { fontSize: 11 },
+  md: { fontSize: 13 },
+  lg: { fontSize: 15 },
+}
+
+const sizeIconGap: Record<BadgeSize, number> = {
+  sm: 4,
+  md: 6,
+  lg: 6,
+}
+
+export function Badge({ label, children, variant = 'default', size = 'md', icon, style }: BadgeProps) {
   const { colors } = useTheme()
 
   const containerStyle: ViewStyle = {
@@ -27,9 +51,18 @@ export function Badge({ label, variant = 'default', style }: BadgeProps) {
     outline: colors.foreground,
   }[variant]
 
+  const content = children ?? label
+
   return (
-    <View style={[styles.container, containerStyle, style]}>
-      <Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>{label}</Text>
+    <View style={[styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style]}>
+      {icon ? <View style={styles.iconContainer}>{icon}</View> : null}
+      {typeof content === 'string' ? (
+        <Text style={[styles.label, { color: textColor }, sizeFontSize[size]]} allowFontScaling={true}>
+          {content}
+        </Text>
+      ) : (
+        content
+      )}
     </View>
   )
 }
@@ -37,12 +70,15 @@ export function Badge({ label, variant = 'default', style }: BadgeProps) {
 const styles = StyleSheet.create({
   container: {
     borderRadius: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
     alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   label: {
-    fontSize: 13,
     fontWeight: '500',
   },
 })

package/src/components/Button/Button.tsx

@@ -8,11 +8,14 @@ import {
   TouchableOpacityProps,
   ViewStyle,
   TextStyle,
+  Platform,
 } from 'react-native'
+
+const nativeDriver = Platform.OS !== 'web'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -67,14 +70,14 @@ export function Button({
     if (isDisabled) return
     Animated.spring(scale, {
       toValue: 0.95,
-      useNativeDriver: true,
+      useNativeDriver: nativeDriver,
       speed: 40,
       bounciness: 0,
     }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
@@ -87,6 +90,7 @@ export function Button({
     secondary: { backgroundColor: colors.secondary },
     outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
     ghost: { backgroundColor: 'transparent' },
+    destructive: { backgroundColor: colors.destructive },
   }[variant]
 
   const labelVariantStyle: TextStyle = {
@@ -94,10 +98,13 @@ export function Button({
     secondary: { color: colors.secondaryForeground },
     outline: { color: colors.foreground },
     ghost: { color: colors.foreground },
+    destructive: { color: colors.destructiveForeground },
   }[variant]
 
   const spinnerColor =
-    variant === 'primary' || variant === 'secondary' ? colors.primaryForeground : colors.foreground
+    variant === 'destructive' ? colors.destructiveForeground
+    : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
+    : colors.foreground
 
   return (
     <Animated.View style={[fullWidth && styles.fullWidth, { transform: [{ scale }] }]}>
@@ -143,7 +150,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   disabled: {
-    opacity: 0.45,
+    opacity: 0.5,
   },
   label: {
     fontWeight: '600',

package/src/components/Card/Card.tsx

@@ -1,9 +1,18 @@
-import React from 'react'
-import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
+import React, { useRef } from 'react'
+import { View, Text, TouchableOpacity, Animated, StyleSheet, ViewStyle, TextStyle, Platform } from 'react-native'
+import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
+const nativeDriver = Platform.OS !== 'web'
+
+export type CardVariant = 'elevated' | 'outlined' | 'filled'
+
 export interface CardProps {
   children: React.ReactNode
+  /** Visual style variant.  `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
+  variant?: CardVariant
+  /** Makes the card tappable. Adds press animation and haptic feedback. */
+  onPress?: () => void
   style?: ViewStyle
 }
 
@@ -32,15 +41,83 @@ export interface CardFooterProps {
   style?: ViewStyle
 }
 
-export function Card({ children, style }: CardProps) {
+export function Card({ children, variant = 'elevated', onPress, style }: CardProps) {
   const { colors } = useTheme()
-  return (
-    <View
-      style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }, style]}
-    >
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (!onPress) return
+    Animated.spring(scale, {
+      toValue: 0.98,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 0,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    if (!onPress) return
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 4,
+    }).start()
+  }
+
+  const handlePress = () => {
+    if (!onPress) return
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+    onPress()
+  }
+
+  const variantStyle: ViewStyle = {
+    elevated: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      elevation: 1,
+    },
+    outlined: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0,
+    },
+    filled: {
+      backgroundColor: colors.accent,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0,
+    },
+  }[variant]
+
+  const cardContent = (
+    <View style={[styles.card, variantStyle, style]}>
       {children}
     </View>
   )
+
+  if (onPress) {
+    return (
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <TouchableOpacity
+          onPress={handlePress}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          activeOpacity={1}
+          touchSoundDisabled={true}
+        >
+          {cardContent}
+        </TouchableOpacity>
+      </Animated.View>
+    )
+  }
+
+  return cardContent
 }
 
 export function CardHeader({ children, style }: CardHeaderProps) {
@@ -49,13 +126,13 @@ 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]} allowFontScaling={true}>{children}</Text>
 }
 
 export function CardDescription({ children, style }: CardDescriptionProps) {
   const { colors } = useTheme()
   return (
-    <Text style={[styles.description, { color: colors.mutedForeground }, style]}>{children}</Text>
+    <Text style={[styles.description, { color: colors.mutedForeground }, style]} allowFontScaling={true}>{children}</Text>
   )
 }
 

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef } from 'react'
+import {
+  TouchableOpacity,
+  Animated,
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  Platform,
+  Easing,
+} from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+const nativeDriver = Platform.OS !== 'web'
+
+export interface ChipProps {
+  label: string
+  selected?: boolean
+  onPress?: () => void
+  style?: ViewStyle
+}
+
+export interface ChipOption {
+  label: string
+  value: string | number
+}
+
+export interface ChipGroupProps {
+  options: ChipOption[]
+  value?: string | number | (string | number)[]
+  onValueChange?: (value: string | number | (string | number)[]) => void
+  /** When true, allows selecting multiple chips. `value` and `onValueChange` will use arrays. */
+  multiSelect?: boolean
+  style?: ViewStyle
+}
+
+export function Chip({ label, selected = false, onPress, style }: ChipProps) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+  const pressAnim = useRef(new Animated.Value(selected ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(pressAnim, {
+      toValue: selected ? 1 : 0,
+      duration: 150,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    }).start()
+  }, [selected, pressAnim])
+
+  const handlePressIn = () => {
+    Animated.spring(scale, {
+      toValue: 0.95,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 0,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 4,
+    }).start()
+  }
+
+  const handlePress = () => {
+    Haptics.selectionAsync()
+    onPress?.()
+  }
+
+  const backgroundColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.secondary, colors.primary],
+  })
+
+  const textColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.foreground, colors.primaryForeground],
+  })
+
+  const borderColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.border, colors.primary],
+  })
+
+  return (
+    <Animated.View style={[styles.wrapper, { transform: [{ scale }] }, style]}>
+      <TouchableOpacity
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+      >
+        <Animated.View style={[styles.chip, { backgroundColor, borderColor }]}>
+          <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>
+            {label}
+          </Animated.Text>
+        </Animated.View>
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+export function ChipGroup({ options, value, onValueChange, multiSelect = false, style }: ChipGroupProps) {
+  const handlePress = (optionValue: string | number) => {
+    if (!multiSelect) {
+      onValueChange?.(optionValue)
+      return
+    }
+
+    // Multiselect logic
+    const currentArray = Array.isArray(value) ? value : value ? [value] : []
+    const isSelected = currentArray.includes(optionValue)
+
+    let newArray: (string | number)[]
+    if (isSelected) {
+      // Remove from selection
+      newArray = currentArray.filter((v) => v !== optionValue)
+    } else {
+      // Add to selection
+      newArray = [...currentArray, optionValue]
+    }
+
+    onValueChange?.(newArray)
+  }
+
+  const isSelected = (optionValue: string | number): boolean => {
+    if (Array.isArray(value)) {
+      return value.includes(optionValue)
+    }
+    return optionValue === value
+  }
+
+  return (
+    <View style={[styles.group, style]}>
+      {options.map((opt) => (
+        <Chip
+          key={opt.value}
+          label={opt.label}
+          selected={isSelected(opt.value)}
+          onPress={() => handlePress(opt.value)}
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {},
+  chip: {
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  group: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+})

package/src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip, ChipGroup } from './Chip'
+export type { ChipProps, ChipOption, ChipGroupProps } from './Chip'