@retray-dev/ui-kit 1.8.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "1.8.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

@@ -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,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/{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,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

@@ -150,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

@@ -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}

package/src/components/Input/Input.tsx

@@ -1,46 +1,104 @@
 import React, { useState } from 'react'
-import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle } from 'react-native'
+import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform } from 'react-native'
 import { useTheme } from '../../theme'
 
+const webInputResetStyle: any =
+  Platform.OS === 'web'
+    ? { outlineStyle: 'none', outlineWidth: 0, outlineColor: 'transparent', boxShadow: 'none' }
+    : {}
+
 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. */
+  /** Text or component rendered before the input text. */
+  prefix?: React.ReactNode
+  /** Text or component rendered after the input text. */
+  suffix?: React.ReactNode
+  /** Style applied to prefix text if prefix is a string. */
+  prefixStyle?: TextStyle
+  /** Style applied to suffix text if suffix is a string. */
+  suffixStyle?: TextStyle
+  /** Input type. When set to \`'password'\`, shows a toggle button to reveal/hide text. */
+  type?: 'text' | 'password'
+  /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
   containerStyle?: ViewStyle
 }
 
-export function Input({ label, error, hint, containerStyle, style, onFocus, onBlur, ...props }: InputProps) {
+export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, type = 'text', containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+
+  const isPassword = type === 'password'
+  const effectiveSecure = isPassword ? !showPassword : secureTextEntry
+
+  // If type is password and no suffix is provided, add the toggle button
+  const effectiveSuffix = isPassword && !suffix ? (
+    <TouchableOpacity onPress={() => setShowPassword(!showPassword)} style={styles.passwordToggle} activeOpacity={0.6}>
+      <Text style={[styles.suffixText, { color: colors.mutedForeground }]}>{showPassword ? '👁' : '👁‍🗨'}</Text>
+    </TouchableOpacity>
+  ) : suffix
 
   return (
     <View style={[styles.container, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <TextInput
+      <View
         style={[
-          styles.input,
+          styles.inputWrapper,
           {
-            borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
-            color: colors.foreground,
+            borderColor: error
+              ? colors.destructive
+              : focused
+                ? (colors.ring ?? colors.primary)
+                : colors.border,
             backgroundColor: colors.background,
           },
-          style,
         ]}
-        onFocus={(e) => {
-          setFocused(true)
-          onFocus?.(e)
-        }}
-        onBlur={(e) => {
-          setFocused(false)
-          onBlur?.(e)
-        }}
-        placeholderTextColor={colors.mutedForeground}
-        allowFontScaling={true}
-        {...props}
-      />
+      >
+        {prefix ? (
+          typeof prefix === 'string' ? (
+            <Text style={[styles.prefixText, { color: colors.mutedForeground }, prefixStyle]} allowFontScaling={true}>
+              {prefix}
+            </Text>
+          ) : (
+            <View style={styles.prefixContainer}>{prefix}</View>
+          )
+        ) : null}
+        <TextInput
+          style={[
+            styles.input,
+            {
+              color: colors.foreground,
+            },
+            webInputResetStyle,
+            style,
+          ]}
+          onFocus={(e) => {
+            setFocused(true)
+            onFocus?.(e)
+          }}
+          onBlur={(e) => {
+            setFocused(false)
+            onBlur?.(e)
+          }}
+          placeholderTextColor={colors.mutedForeground}
+          allowFontScaling={true}
+          secureTextEntry={effectiveSecure}
+          {...props}
+        />
+        {effectiveSuffix ? (
+          typeof effectiveSuffix === 'string' ? (
+            <Text style={[styles.suffixText, { color: colors.mutedForeground }, suffixStyle]} allowFontScaling={true}>
+              {effectiveSuffix}
+            </Text>
+          ) : (
+            <View style={styles.suffixContainer}>{effectiveSuffix}</View>
+          )
+        ) : null}
+      </View>
       {error ? (
         <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
@@ -60,12 +118,35 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     marginBottom: 6,
   },
-  input: {
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
     borderWidth: 1.5,
     borderRadius: 14,
     paddingHorizontal: 20,
     paddingVertical: 16,
+  },
+  input: {
+    flex: 1,
     fontSize: 17,
+    paddingVertical: 0,
+  },
+  prefixContainer: {
+    marginRight: 8,
+  },
+  prefixText: {
+    fontSize: 17,
+    marginRight: 8,
+  },
+  suffixContainer: {
+    marginLeft: 8,
+  },
+  suffixText: {
+    fontSize: 17,
+    marginLeft: 8,
+  },
+  passwordToggle: {
+    padding: 4,
   },
   helperText: {
     fontSize: 13,

package/src/components/MonthPicker/MonthPicker.tsx

@@ -49,7 +49,7 @@ export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
         activeOpacity={0.6}
         touchSoundDisabled={true}
       >
-        <Text style={[styles.arrowText, { color: colors.foreground }]}>‹</Text>
+        <Text style={[styles.arrowText, { color: colors.foreground }]} allowFontScaling={true}>‹</Text>
       </TouchableOpacity>
       <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
         {MONTH_NAMES[value.month - 1]} {value.year}
@@ -60,7 +60,7 @@ export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
         activeOpacity={0.6}
         touchSoundDisabled={true}
       >
-        <Text style={[styles.arrowText, { color: colors.foreground }]}>›</Text>
+        <Text style={[styles.arrowText, { color: colors.foreground }]} allowFontScaling={true}>›</Text>
       </TouchableOpacity>
     </View>
   )