@retray-dev/ui-kit 1.8.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "1.8.0",
+  "version": "2.5.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -45,7 +45,10 @@
     "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",
+    "@expo/vector-icons": ">=14.0.0"
   },
   "pnpm": {
     "overrides": {
@@ -60,7 +63,10 @@
   },
   "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/vector-icons": "^15.1.1",
     "expo-haptics": "~15.0.8",
     "expo-linear-gradient": "~15.0.8",
     "react": "19.1.0",

package/src/components/Accordion/Accordion.tsx

@@ -14,6 +14,7 @@ import ReanimatedAnimated, {
   withTiming,
   Easing,
 } from 'react-native-reanimated'
+import { Entypo } from '@expo/vector-icons'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -99,11 +100,9 @@ function AccordionItemComponent({
           touchSoundDisabled={true}
         >
           <Text style={[styles.triggerText, { color: colors.foreground }]}>{item.trigger}</Text>
-          <ReanimatedAnimated.Text
-            style={[styles.chevron, { color: colors.foreground }, rotationStyle]}
-          >
-            ▾
-          </ReanimatedAnimated.Text>
+          <ReanimatedAnimated.View style={[styles.chevron, rotationStyle]}>
+            <Entypo name="chevron-down" size={20} color={colors.foreground} />
+          </ReanimatedAnimated.View>
         </TouchableOpacity>
       </Animated.View>
 
@@ -162,7 +161,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   chevron: {
-    fontSize: 18,
     marginLeft: 8,
   },
   content: {

package/src/components/Alert/Alert.tsx

@@ -39,13 +39,13 @@ export function AlertBanner({ title, description, variant = 'default', icon, sty
         <View style={styles.icon}>{icon}</View>
       ) : (
         <View style={styles.icon}>
-          <Text style={[styles.defaultIcon, { color: titleColor }]}>{defaultIcon}</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,85 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons'
+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 === 'success' ? (
+      <FontAwesome5 name="check-circle" size={18} color={titleColor} />
+    ) : variant === 'destructive' ? (
+      <MaterialIcons name="error-outline" size={20} color={titleColor} />
+    ) : (
+      <Entypo name="info-with-circle" size={18} color={titleColor} />
+    )
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
+      <View style={styles.icon}>{icon ?? defaultIcon}</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: 12,
+    padding: 16,
+    gap: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  icon: {
+    marginTop: 0,
+  },
+  content: {
+    flex: 1,
+    gap: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+})

package/src/components/{Alert → AlertBanner}/index.ts

@@ -1,2 +1,2 @@
-export { AlertBanner } from './Alert'
-export type { AlertBannerProps, AlertBannerVariant } from './Alert'
+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,22 +51,34 @@ 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>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
+    borderRadius: 6,
     alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   label: {
-    fontSize: 13,
     fontWeight: '500',
   },
 })

package/src/components/Button/Button.tsx

@@ -38,9 +38,9 @@ export interface ButtonProps extends TouchableOpacityProps {
 }
 
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: 20, paddingVertical: 12 },
-  md: { paddingHorizontal: 24, paddingVertical: 16 },
-  lg: { paddingHorizontal: 32, paddingVertical: 20 },
+  sm: { paddingHorizontal: 20, paddingVertical: 10 },
+  md: { paddingHorizontal: 24, paddingVertical: 14 },
+  lg: { paddingHorizontal: 32, paddingVertical: 18 },
 }
 
 const labelSizeStyles: Record<ButtonSize, TextStyle> = {
@@ -150,12 +150,12 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   disabled: {
-    opacity: 0.45,
+    opacity: 0.5,
   },
   label: {
     fontWeight: '600',
   },
   labelWithIcon: {
-    marginHorizontal: 6,
+    marginHorizontal: 8,
   },
 })

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: 4 },
+      shadowOpacity: 0.06,
+      shadowRadius: 12,
+      elevation: 3,
+    },
+    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>
   )
 }
 
@@ -69,16 +146,11 @@ export function CardFooter({ children, style }: CardFooterProps) {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: 20,
+    borderRadius: 12,
     borderWidth: 1,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 1,
   },
   header: {
-    padding: 28,
+    padding: 24,
     paddingBottom: 0,
     gap: 8,
   },
@@ -92,10 +164,10 @@ const styles = StyleSheet.create({
     lineHeight: 22,
   },
   content: {
-    padding: 28,
+    padding: 24,
   },
   footer: {
-    padding: 28,
+    padding: 24,
     paddingTop: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/Checkbox/Checkbox.tsx

@@ -77,16 +77,16 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   box: {
-    width: 28,
-    height: 28,
+    width: 24,
+    height: 24,
     borderRadius: 8,
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
   },
   checkmark: {
-    width: 15,
-    height: 9,
+    width: 12,
+    height: 7,
     borderLeftWidth: 2,
     borderBottomWidth: 2,
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],

package/src/components/Chip/Chip.tsx

@@ -28,8 +28,10 @@ export interface ChipOption {
 
 export interface ChipGroupProps {
   options: ChipOption[]
-  value?: string | number
-  onValueChange?: (value: string | number) => void
+  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
 }
 
@@ -104,15 +106,44 @@ export function Chip({ label, selected = false, onPress, style }: ChipProps) {
   )
 }
 
-export function ChipGroup({ options, value, onValueChange, style }: ChipGroupProps) {
+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={opt.value === value}
-          onPress={() => onValueChange?.(opt.value)}
+          selected={isSelected(opt.value)}
+          onPress={() => handlePress(opt.value)}
         />
       ))}
     </View>

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ViewStyle } from 'react-native'
+import { ViewStyle, TextStyle } from 'react-native'
 import { Input } from '../Input'
 
 export interface CurrencyInputProps {
@@ -11,6 +11,8 @@ export interface CurrencyInputProps {
   prefix?: string
   /** Character used to separate groups of three digits. Defaults to `'.'`. */
   thousandsSeparator?: '.' | ','
+  /** Font size variant. `'large'` renders at 36pt, `'default'` at 17pt. */
+  size?: 'default' | 'large'
   label?: string
   /** Red helper text; also changes input border to destructive color. */
   error?: string
@@ -18,6 +20,7 @@ export interface CurrencyInputProps {
   placeholder?: string
   editable?: boolean
   containerStyle?: ViewStyle
+  style?: TextStyle
 }
 
 function formatCurrency(raw: string, separator: '.' | ','): string {
@@ -32,12 +35,14 @@ export function CurrencyInput({
   onChangeValue,
   prefix = '$',
   thousandsSeparator = '.',
+  size = 'default',
   label,
   error,
   hint,
   placeholder,
   editable,
   containerStyle,
+  style,
 }: CurrencyInputProps) {
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
@@ -49,6 +54,8 @@ export function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw)
   }
 
+  const inputStyle: TextStyle = size === 'large' ? { fontSize: 36 } : {}
+
   return (
     <Input
       value={value}
@@ -60,6 +67,7 @@ export function CurrencyInput({
       placeholder={placeholder ?? `${prefix}0`}
       editable={editable}
       containerStyle={containerStyle}
+      style={[inputStyle, style]}
     />
   )
 }

package/src/components/EmptyState/EmptyState.tsx

@@ -39,11 +39,12 @@ export function EmptyState({ icon, title, description, action, size = 'default',
       <View style={styles.textWrapper}>
         <Text
           style={[styles.title, isCompact && styles.titleCompact, { color: colors.foreground }]}
+          allowFontScaling={true}
         >
           {title}
         </Text>
         {description && !isCompact ? (
-          <Text style={[styles.description, { color: colors.mutedForeground }]}>{description}</Text>
+          <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
       {action && !isCompact ? <View style={styles.action}>{action}</View> : null}