@retray-dev/ui-kit 4.0.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "4.0.0",
+  "version": "5.2.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -89,5 +89,6 @@
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "typescript-eslint": "^8.0.0"
-  }
+  },
+  "packageManager": "pnpm@11.0.8+sha512.4c4097e1dd2d42372c4e7fa5a791ff28fc75a484c7ac192e64b1df0fdef17594ba982f9b4fed9adfb3c757846f565b799b2763fb3733d1de1bcb82cf46684912"
 }

package/src/components/Accordion/Accordion.tsx

@@ -93,7 +93,7 @@ function AccordionItemComponent({
       >
         <Text style={[styles.triggerText, { color: colors.foreground }]} allowFontScaling={true}>{item.trigger}</Text>
         <Animated.View style={[styles.chevron, rotationStyle]}>
-          <Entypo name="chevron-down" size={18} color={colors.mutedForeground} />
+          <Entypo name="chevron-down" size={18} color={colors.foregroundMuted} />
         </Animated.View>
       </Pressable>
 

package/src/components/AlertBanner/AlertBanner.tsx

@@ -2,22 +2,17 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
-import { s, vs, ms, mvs } from '../../utils/scaling'
+import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 
-export type AlertBannerVariant = 'default' | 'destructive' | 'success'
+export type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning'
 
 export interface AlertBannerProps {
   title: string
   description?: string
   variant?: AlertBannerVariant
   icon?: React.ReactNode
-  /**
-   * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
-   * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
-   */
   iconName?: string
-  /** Override the resolved icon color. Defaults to the variant title color. */
   iconColor?: string
   style?: ViewStyle
 }
@@ -26,73 +21,83 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
   const { colors } = useTheme()
 
   const bgColor =
-    variant === 'destructive' ? colors.destructiveBorder
-    : variant === 'success' ? colors.successBorder
+    variant === 'destructive' ? colors.destructiveTint
+    : variant === 'success'   ? colors.successTint
+    : variant === 'warning'   ? colors.warningTint
     : colors.card
 
-  const textColor =
-    variant === 'destructive' ? '#991b1b'
-    : variant === 'success' ? '#166534'
-    : colors.foreground
+  const borderColor =
+    variant === 'destructive' ? colors.destructiveBorder
+    : variant === 'success'   ? colors.successBorder
+    : variant === 'warning'   ? colors.warningBorder
+    : colors.border
+
+  const accentColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success'   ? colors.success
+    : variant === 'warning'   ? colors.warning
+    : colors.primary
+
+  const titleColor =
+    variant === 'default' ? colors.foreground : accentColor
 
-  const borderColor = textColor
+  const descColor =
+    variant === 'default' ? colors.foregroundMuted : accentColor
 
   const defaultIcon =
     variant === 'success' ? (
-      <FontAwesome5 name="check-circle" size={18} color={textColor} />
+      <FontAwesome5 name="check-circle" size={16} color={accentColor} />
     ) : variant === 'destructive' ? (
-      <MaterialIcons name="error-outline" size={20} color={textColor} />
+      <MaterialIcons name="error-outline" size={17} color={accentColor} />
+    ) : variant === 'warning' ? (
+      <MaterialIcons name="warning-amber" size={17} color={accentColor} />
     ) : (
-      <Entypo name="info-with-circle" size={18} color={textColor} />
+      <Entypo name="info-with-circle" size={16} color={accentColor} />
     )
 
   const effectiveIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, 18, iconColor ?? textColor)
+    ? renderIcon(iconName, 16, iconColor ?? accentColor)
     : icon ?? defaultIcon
 
   return (
     <View style={[styles.container, { backgroundColor: bgColor, borderColor }, style]}>
-      <View style={styles.header}>
-        <View style={styles.icon}>{effectiveIcon}</View>
-        {title ? <Text style={[styles.title, { color: textColor }]} allowFontScaling={true}>{title}</Text> : null}
+      <View style={styles.iconSlot}>{effectiveIcon}</View>
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: descColor }]} allowFontScaling={true}>{description}</Text>
+        ) : null}
       </View>
-      {description ? (
-        <Text style={[styles.description, { color: textColor, opacity: 0.85 }]} allowFontScaling={true}>{description}</Text>
-      ) : null}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    borderWidth: 1,
-    borderRadius: ms(12),
-    paddingHorizontal: s(14),
-    paddingVertical: vs(12),
-    gap: vs(8),
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.10,
-    shadowRadius: 8,
-    elevation: 5,
-  },
-  header: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
+    borderWidth: 0.5,
+    borderRadius: 10,
+    paddingHorizontal: s(12),
+    paddingVertical: vs(10),
     gap: s(10),
   },
-  icon: {
-    marginTop: 0,
+  iconSlot: {
+    marginTop: vs(1),
   },
-  title: {
-    fontFamily: 'Poppins-Bold',
-    fontSize: ms(15),
-    lineHeight: mvs(20),
+  content: {
     flex: 1,
+    gap: vs(2),
+  },
+  title: {
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
+    lineHeight: ms(18),
   },
   description: {
     fontFamily: 'Poppins-Regular',
-    fontSize: ms(14),
-    lineHeight: mvs(20),
+    fontSize: ms(12),
+    lineHeight: ms(17),
+    opacity: 0.85,
   },
 })

package/src/components/Avatar/Avatar.tsx

@@ -4,13 +4,15 @@ import { useTheme } from '../../theme'
 import { s, ms } from '../../utils/scaling'
 
 export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'
+// online: green dot  offline: border-only (no fill)  busy: destructive  away: warning
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'
 
 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
+  /** Optional status indicator dot — bottom-right corner. */
+  status?: AvatarStatus
   style?: ViewStyle
 }
 
@@ -28,41 +30,78 @@ const fontSizeMap: Record<AvatarSize, number> = {
   xl: ms(28),
 }
 
-export function Avatar({ src, fallback, size = 'md', style }: AvatarProps) {
+const statusSizeMap: Record<AvatarSize, number> = {
+  sm: 8,
+  md: 10,
+  lg: 13,
+  xl: 16,
+}
+
+export function Avatar({ src, fallback, size = 'md', status, style }: AvatarProps) {
   const { colors } = useTheme()
   const [imageError, setImageError] = useState(false)
   const dimension = sizeMap[size]
   const showFallback = !src || imageError
 
+  const statusSize = statusSizeMap[size]
+
+  const statusColor: Record<AvatarStatus, string> = {
+    online:  '#22c55e',
+    offline: 'transparent',
+    busy:    colors.destructive,
+    away:    colors.warning,
+  }
+
   const containerStyle: ViewStyle = {
     width: dimension,
     height: dimension,
     borderRadius: dimension / 2,
-    backgroundColor: colors.muted,
+    backgroundColor: colors.surface,
     overflow: 'hidden',
   }
 
   return (
-    <View style={[styles.base, containerStyle, style]}>
-      {!showFallback ? (
-        <Image
-          source={{ uri: src }}
-          style={{ width: dimension, height: dimension }}
-          onError={() => setImageError(true)}
+    <View style={[styles.wrapper, style]}>
+      <View style={[styles.base, containerStyle]}>
+        {!showFallback ? (
+          <Image
+            source={{ uri: src }}
+            style={{ width: dimension, height: dimension }}
+            onError={() => setImageError(true)}
+          />
+        ) : (
+          <Text
+            style={[styles.fallback, { color: colors.foregroundMuted, fontSize: fontSizeMap[size] }]}
+            allowFontScaling={true}
+          >
+            {fallback?.slice(0, 2).toUpperCase() ?? '?'}
+          </Text>
+        )}
+      </View>
+      {status && (
+        <View
+          style={[
+            styles.statusDot,
+            {
+              width: statusSize,
+              height: statusSize,
+              borderRadius: statusSize / 2,
+              backgroundColor: statusColor[status],
+              borderWidth: status === 'offline' ? 2 : 1.5,
+              borderColor: status === 'offline' ? colors.border : colors.background,
+            },
+          ]}
         />
-      ) : (
-        <Text
-          style={[styles.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }]}
-          allowFontScaling={true}
-        >
-          {fallback?.slice(0, 2).toUpperCase() ?? '?'}
-        </Text>
       )}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
+  wrapper: {
+    alignSelf: 'flex-start',
+    position: 'relative',
+  },
   base: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -70,4 +109,9 @@ const styles = StyleSheet.create({
   fallback: {
     fontFamily: 'Poppins-Medium',
   },
+  statusDot: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  },
 })

package/src/components/Badge/Badge.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 
-export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline'
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline'
 export type BadgeSize = 'sm' | 'md' | 'lg'
 
 export interface BadgeProps {
@@ -49,25 +49,27 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
   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 },
-    success: { backgroundColor: colors.success },
-    warning: { backgroundColor: '#f59e0b', },
-    successOutline: { backgroundColor: colors.successTint, borderWidth: 1, borderColor: colors.successBorder },
+    default:            { backgroundColor: colors.primary },
+    secondary:          { backgroundColor: colors.surface },
+    destructive:        { backgroundColor: colors.destructive },
+    outline:            { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border },
+    success:            { backgroundColor: colors.success },
+    warning:            { backgroundColor: colors.warning },
+    successOutline:     { backgroundColor: colors.successTint, borderWidth: 1, borderColor: colors.successBorder },
     destructiveOutline: { backgroundColor: colors.destructiveTint, borderWidth: 1, borderColor: colors.destructiveBorder },
+    warningOutline:     { backgroundColor: colors.warningTint, borderWidth: 1, borderColor: colors.warningBorder },
   }[variant]
 
   const textColor = {
-    default: colors.primaryForeground,
-    secondary: colors.secondaryForeground,
-    destructive: colors.destructiveForeground,
-    outline: colors.foreground,
-    success: colors.successForeground,
-    warning: '#ffffff',
-    successOutline: colors.success,
+    default:            colors.primaryForeground,
+    secondary:          colors.foreground,
+    destructive:        colors.destructiveForeground,
+    outline:            colors.foreground,
+    success:            colors.successForeground,
+    warning:            colors.warningForeground,
+    successOutline:     colors.success,
     destructiveOutline: colors.destructive,
+    warningOutline:     colors.warning,
   }[variant]
 
   const effectiveIcon: React.ReactNode = iconName

package/src/components/Button/Button.tsx

@@ -16,47 +16,38 @@ import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
+import { RADIUS, TYPOGRAPHY } from '../../tokens'
 
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+// primary: filled primary — main CTA (pill-shaped, Airbnb-style)
+// secondary: outlined primary border — alternative actions
+// text: fully transparent — low-emphasis, in-context actions
+// destructive: filled destructive — delete/danger actions
+export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive'
 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
-  /** Icon rendered alongside the label. Can be a ReactNode or a render function `(props) => ReactNode`. */
   icon?: React.ReactNode | ((props: { label: string; size: ButtonSize; variant: ButtonVariant }) => React.ReactNode)
-  /**
-   * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"arrow-right"`).
-   * See https://icons.expo.fyi to browse available icons.
-   * Takes precedence over `icon` when both are supplied.
-   */
   iconName?: string
-  /** Override the resolved icon color. Defaults to the label foreground color for the active variant. */
   iconColor?: string
-  /** Side the icon appears on. Defaults to `'left'`. */
   iconPosition?: 'left' | 'right'
 }
 
+// Airbnb-spec sizing: md=48px height, padding 14px vertical 24px horizontal
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: s(12), paddingVertical: vs(10), minHeight: 44 },
-  md: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 44 },
-  lg: { paddingHorizontal: s(20), paddingVertical: vs(12), minHeight: 48 },
+  sm: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 40 },
+  md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
+  lg: { paddingHorizontal: s(28), paddingVertical: vs(16), minHeight: 56 },
 }
 
 const labelSizeStyles: Record<ButtonSize, TextStyle> = {
-  sm: { fontSize: ms(13) },
-  md: { fontSize: ms(15) },
-  lg: { fontSize: ms(16) },
+  sm: { ...TYPOGRAPHY['button-sm'], fontSize: ms(TYPOGRAPHY['button-sm'].fontSize) },
+  md: { ...TYPOGRAPHY['button-lg'], fontSize: ms(TYPOGRAPHY['button-lg'].fontSize) },
+  lg: { ...TYPOGRAPHY['button-lg'], fontSize: ms(TYPOGRAPHY['button-lg'].fontSize + 1) },
 }
 
 const iconSizeMap: Record<ButtonSize, number> = { sm: 16, md: 18, lg: 20 }
@@ -82,12 +73,7 @@ export function Button({
 
   const handlePressIn = () => {
     if (isDisabled) return
-    Animated.spring(scale, {
-      toValue: 0.95,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 0,
-    }).start()
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
   }
 
   const handlePressOut = () => {
@@ -100,18 +86,16 @@ export function Button({
   }
 
   const containerVariantStyle: ViewStyle = {
-    primary: { backgroundColor: colors.primary },
-    secondary: { backgroundColor: colors.secondary },
-    outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
-    ghost: { backgroundColor: 'transparent' },
+    primary:     { backgroundColor: colors.primary },
+    secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.primary },
+    text:        { backgroundColor: 'transparent' },
     destructive: { backgroundColor: colors.destructive },
   }[variant]
 
   const labelVariantStyle: TextStyle = {
-    primary: { color: colors.primaryForeground },
-    secondary: { color: colors.secondaryForeground },
-    outline: { color: colors.foreground },
-    ghost: { color: colors.foreground },
+    primary:     { color: colors.primaryForeground },
+    secondary:   { color: colors.primary },
+    text:        { color: colors.foreground },
     destructive: { color: colors.destructiveForeground },
   }[variant]
 
@@ -121,7 +105,7 @@ export function Button({
 
   const spinnerColor =
     variant === 'destructive' ? colors.destructiveForeground
-    : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
+    : variant === 'primary' ? colors.primaryForeground
     : colors.foreground
 
   return (
@@ -148,7 +132,12 @@ export function Button({
         ) : (
           <>
             {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
-            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]} allowFontScaling={true}>{label}</Text>
+            <Text
+              style={[styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}
+              allowFontScaling={true}
+            >
+              {label}
+            </Text>
             {effectiveIcon && iconPosition === 'right' && <>{effectiveIcon}</>}
           </>
         )}
@@ -159,7 +148,7 @@ export function Button({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 8,
+    borderRadius: RADIUS.xl,   // 32px — pill-shaped primary CTA (Airbnb spec)
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
@@ -168,12 +157,12 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   disabled: {
-    opacity: 0.5,
+    opacity: 0.45,
   },
   label: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Poppins-Medium',
   },
   labelWithIcon: {
-    marginHorizontal: s(8),
+    marginHorizontal: s(6),
   },
 })

package/src/components/Card/Card.tsx

@@ -89,7 +89,7 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
       elevation: 0,
     },
     filled: {
-      backgroundColor: colors.accent,
+      backgroundColor: colors.surfaceStrong,
       borderColor: colors.border,
       shadowOpacity: 0,
       elevation: 0,
@@ -127,13 +127,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]} allowFontScaling={true}>{children}</Text>
+  return <Text style={[styles.title, { color: colors.foreground }, style]} allowFontScaling={true}>{children}</Text>
 }
 
 export function CardDescription({ children, style }: CardDescriptionProps) {
   const { colors } = useTheme()
   return (
-    <Text style={[styles.description, { color: colors.mutedForeground }, style]} allowFontScaling={true}>{children}</Text>
+    <Text style={[styles.description, { color: colors.foregroundMuted }, style]} allowFontScaling={true}>{children}</Text>
   )
 }
 
@@ -147,7 +147,7 @@ export function CardFooter({ children, style }: CardFooterProps) {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: ms(12),
+    borderRadius: 14,           // RADIUS.md — Airbnb property card spec
     borderWidth: 1,
   },
   header: {