@retray-dev/ui-kit 6.1.0 → 7.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "6.1.0",
+  "version": "7.0.1",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -11,7 +11,12 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./fonts": "./src/fonts.ts"
+    "./fonts": "./src/fonts.ts",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
   },
   "files": [
     "dist",
@@ -29,6 +34,7 @@
     "format:check": "prettier --check src",
     "lint:all": "pnpm lint && pnpm --filter retray-ui-kit-example lint",
     "format:all": "pnpm format && pnpm --filter retray-ui-kit-example format",
+    "verify": "pnpm typecheck && pnpm lint && pnpm build",
     "deploy": "pnpm typecheck && pnpm build && npm publish --access public"
   },
   "keywords": [
@@ -51,17 +57,20 @@
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-safe-area-context": ">=4.0.0",
+    "react-native-screens": ">=3.0.0",
     "react-native-size-matters": ">=0.4.0",
-    "react-native-worklets": ">=0.5.0",
     "react-native-svg": ">=15.0.0",
-    "react-native-screens": ">=3.0.0"
+    "react-native-worklets": ">=0.5.0"
   },
   "pnpm": {
     "overrides": {
       "fast-xml-parser": "^5.5.7",
       "react": "19.1.0",
       "react-native": "0.81.5",
-      "react-native-worklets": "0.5.1"
+      "react-native-worklets": "0.5.1",
+      "@types/react": "19.1.17",
+      "react-native-safe-area-context": "5.6.2",
+      "@gorhom/bottom-sheet": "5.2.8"
     },
     "onlyBuiltDependencies": [
       "esbuild"
@@ -69,32 +78,32 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
-    "react-native-size-matters": "^0.4.2",
     "@expo/vector-icons": "^15.1.1",
-    "@gorhom/bottom-sheet": "^5.0.0",
+    "@gorhom/bottom-sheet": "5.2.8",
     "@react-native-community/slider": "5.0.1",
     "@react-native-picker/picker": "2.11.1",
-    "@types/react": "^19.1.0",
+    "@types/react": "19.1.17",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "expo-font": "~14.0.11",
     "expo-haptics": "~15.0.8",
     "expo-linear-gradient": "~15.0.8",
-    "prettier": "^3.0.0",
+    "prettier": "^3.8.3",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.2",
+    "react-native-safe-area-context": "5.6.2",
+    "react-native-screens": "4.16.0",
+    "react-native-size-matters": "^0.4.2",
+    "react-native-svg": "15.12.1",
     "react-native-worklets": "~0.5.1",
     "sonner-native": "0.23.1",
-    "react-native-svg": "15.12.1",
-    "react-native-screens": "4.16.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
-    "typescript-eslint": "^8.0.0"
+    "typescript-eslint": "^8.60.0"
   },
   "packageManager": "pnpm@11.0.8+sha512.4c4097e1dd2d42372c4e7fa5a791ff28fc75a484c7ac192e64b1df0fdef17594ba982f9b4fed9adfb3c757846f565b799b2763fb3733d1de1bcb82cf46684912"
 }

package/src/components/Accordion/Accordion.tsx

@@ -11,17 +11,13 @@ import Animated, {
   useDerivedValue,
   useAnimatedStyle,
   withTiming,
-  Easing,
-  type EasingFunction,
 } from 'react-native-reanimated'
-
-const easingExpand: EasingFunction = Easing.bezier(0.23, 1, 0.32, 1) as unknown as EasingFunction
-const easingCollapse: EasingFunction = Easing.in(Easing.ease)
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
+import { TIMINGS, EASINGS } from '../../utils/animations'
 
 export interface AccordionItem {
   value: string
@@ -69,22 +65,21 @@ function AccordionItemComponent({
   // Keep isExpanded in sync with the parent-driven isOpen prop
   React.useEffect(() => {
     isExpanded.value = isOpen
-  }, [isOpen])
+  }, [isOpen, isExpanded])
 
-  // Derived animated height — pattern from Reanimated docs:
-  // height * Number(isExpanded) gives 0 when closed and the measured height when open.
-  // withTiming wraps it so every change animates automatically.
+  // Derived animated height — height * Number(isExpanded) gives 0 when closed and
+  // the measured height when open. `withTiming` wraps it so every change animates.
   const derivedHeight = useDerivedValue(() =>
     withTiming(height.value * Number(isExpanded.value), {
-      duration: 220,
-      easing: isExpanded.value ? easingExpand : easingCollapse,
+      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse,
     })
   )
 
   const derivedRotation = useDerivedValue(() =>
     withTiming(isExpanded.value ? 1 : 0, {
-      duration: 220,
-      easing: isExpanded.value ? easingExpand : easingCollapse,
+      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse,
     })
   )
 
@@ -105,6 +100,9 @@ function AccordionItemComponent({
           hapticSelection()
           onToggle()
         }}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isOpen }}
+        accessibilityLabel={item.trigger}
       >
         <View style={styles.triggerContent}>
           {resolvedIcon ? <View style={styles.icon}>{resolvedIcon}</View> : null}
@@ -192,7 +190,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   triggerText: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
   chevron: {
@@ -201,7 +199,7 @@ const styles = StyleSheet.create({
   // position:'absolute' is the key — the inner View escapes the animated wrapper's
   // clipped height so onLayout always reports the true content height.
   content: {
-    paddingHorizontal: s(14),
+    paddingHorizontal: s(8),
     paddingBottom: vs(12),
     position: 'absolute',
     width: '100%',

package/src/components/AlertBanner/AlertBanner.tsx

@@ -19,13 +19,29 @@ export interface AlertBannerProps {
 }
 
 export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, style }: AlertBannerProps) {
-  const { colors } = useTheme()
+  const { colors, colorScheme } = useTheme()
+
+  // Match Toast richColors appearance — saturated semantic colors
+  const isDark = colorScheme === 'dark'
 
   const accentColor =
     variant === 'destructive' ? colors.destructive
     : variant === 'success'   ? colors.success
     : variant === 'warning'   ? colors.warning
-    : colors.primary
+    : colors.foreground
+
+  // Match sonner-native richColors backgrounds (more saturated than tint)
+  const bgColor =
+    variant === 'destructive' ? (isDark ? 'rgba(239, 83, 80, 0.15)' : 'rgba(199, 40, 40, 0.10)')
+    : variant === 'success'   ? (isDark ? 'rgba(46, 125, 82, 0.15)' : 'rgba(26, 122, 69, 0.10)')
+    : variant === 'warning'   ? (isDark ? 'rgba(245, 166, 35, 0.15)' : 'rgba(154, 82, 0, 0.10)')
+    : colors.surface
+
+  const borderColor =
+    variant === 'destructive' ? (isDark ? 'rgba(239, 83, 80, 0.30)' : 'rgba(199, 40, 40, 0.25)')
+    : variant === 'success'   ? (isDark ? 'rgba(46, 125, 82, 0.30)' : 'rgba(26, 122, 69, 0.25)')
+    : variant === 'warning'   ? (isDark ? 'rgba(245, 166, 35, 0.30)' : 'rgba(154, 82, 0, 0.25)')
+    : colors.border
 
   const defaultIcon =
     variant === 'success' ? (
@@ -35,6 +51,9 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
     ) : variant === 'warning' ? (
       <MaterialIcons name="warning-amber" size={ms(17)} color={accentColor} />
     ) : (
+      // AUDIT FIX: default variant previously used colors.primary (near-black)
+      // as the info icon tint — ambiguous and heavy. accentResolved gives it
+      // a meaningful chromatic signal when an accent is defined.
       <Entypo name="info-with-circle" size={ms(16)} color={accentColor} />
     )
 
@@ -43,14 +62,18 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
     : icon ?? defaultIcon
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.card }, style]}>
-      {/* Icon */}
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: bgColor, borderWidth: 1, borderColor },
+        style,
+      ]}
+    >
       <View style={styles.iconSlot}>{effectiveIcon}</View>
-      {/* Text */}
       <View style={styles.content}>
         <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>{title}</Text>
         {description ? (
-          <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>{description}</Text>
+          <Text style={[styles.description, { color: colors.foreground, opacity: 0.85 }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
     </View>
@@ -63,8 +86,8 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     borderRadius: RADIUS.lg,
     gap: s(8),
-    paddingVertical: vs(8),
-    paddingHorizontal: s(10),
+    paddingVertical: vs(10),
+    paddingHorizontal: s(12),
   },
   iconSlot: {
     marginTop: vs(1),
@@ -74,13 +97,11 @@ const styles = StyleSheet.create({
     gap: vs(2),
   },
   title: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
-    lineHeight: ms(19),
   },
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
-    lineHeight: ms(17),
   },
 })

package/src/components/Avatar/Avatar.tsx

@@ -50,7 +50,7 @@ function getInitials(fallback?: string, fallbackText?: string): string {
   return '?'
 }
 
-export function Avatar({ src, fallback, fallbackText, size = 'md', status, style }: AvatarProps) {
+function AvatarBase({ src, fallback, fallbackText, size = 'md', status, style }: AvatarProps) {
   const { colors } = useTheme()
   const [imageError, setImageError] = useState(false)
   const dimension = typeof size === 'number' ? size : sizeMap[size as AvatarSize]
@@ -111,6 +111,8 @@ export function Avatar({ src, fallback, fallbackText, size = 'md', status, style
   )
 }
 
+export const Avatar = React.memo(AvatarBase)
+
 const styles = StyleSheet.create({
   wrapper: {
     alignSelf: 'flex-start',
@@ -121,7 +123,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   fallback: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
   },
   statusDot: {
     position: 'absolute',

package/src/components/Badge/Badge.tsx

@@ -45,7 +45,7 @@ const sizeIconGap: Record<BadgeSize, number> = {
 
 const sizeIconSize: Record<BadgeSize, number> = { sm: 10, md: 12, lg: 14 }
 
-export function Badge({ label, children, variant = 'default', size = 'md', icon, iconName, iconColor, style }: BadgeProps) {
+function BadgeBase({ label, children, variant = 'default', size = 'md', icon, iconName, iconColor, style }: BadgeProps) {
   const { colors } = useTheme()
 
   const containerStyle: ViewStyle = {
@@ -92,6 +92,8 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
   )
 }
 
+export const Badge = React.memo(BadgeBase)
+
 const styles = StyleSheet.create({
   container: {
     borderRadius: 9999,
@@ -100,6 +102,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
   },
 })

package/src/components/Button/Button.tsx

@@ -1,27 +1,22 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import {
   TouchableOpacity,
   Text,
-  Animated,
   ActivityIndicator,
   StyleSheet,
   TouchableOpacityProps,
   ViewStyle,
   TextStyle,
-  Platform,
 } from 'react-native'
-
-const nativeDriver = Platform.OS !== 'web'
+import Animated from 'react-native-reanimated'
 import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { RADIUS, TYPOGRAPHY } from '../../tokens'
+import { usePressScale } from '../../utils/usePressScale'
+import { PRESS_SCALE } from '../../utils/animations'
 
-// 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'
 
@@ -37,7 +32,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   iconPosition?: 'left' | 'right'
 }
 
-// Airbnb-spec sizing: md=48px height, padding 14px vertical 24px horizontal
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
   sm: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 40 },
   md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
@@ -52,7 +46,7 @@ const labelSizeStyles: Record<ButtonSize, TextStyle> = {
 
 const iconSizeMap: Record<ButtonSize, number> = { sm: 16, md: 18, lg: 20 }
 
-export function Button({
+function ButtonBase({
   label,
   variant = 'primary',
   size = 'md',
@@ -65,20 +59,16 @@ export function Button({
   disabled,
   style,
   onPress,
+  accessibilityLabel,
+  accessibilityHint,
   ...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.95, useNativeDriver: nativeDriver, stiffness: 600, damping: 35, mass: 0.8 }).start()
-  }
-
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, stiffness: 280, damping: 22, mass: 0.8 }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: isDisabled,
+  })
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
     impactMedium()
@@ -95,7 +85,10 @@ export function Button({
   const labelVariantStyle: TextStyle = {
     primary:     { color: colors.primaryForeground },
     secondary:   { color: colors.primary },
-    text:        { color: colors.foreground },
+    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
+    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
+    // carry the brand voltage. Falls back to primary when no accent is defined.
+    text:        { color: colors.accentResolved },
     destructive: { color: colors.destructiveForeground },
   }[variant]
 
@@ -108,15 +101,17 @@ export function Button({
   const spinnerColor =
     variant === 'destructive' ? colors.destructiveForeground
     : variant === 'primary' ? colors.primaryForeground
-    : colors.foreground
+    : colors.accentResolved
 
-  // Extract flex from style for wrapper — ButtonGroup sets flex: 1
   const styleArray = Array.isArray(style) ? style : style ? [style] : []
   const flatStyle = StyleSheet.flatten(styleArray)
   const { flex, ...restStyle } = flatStyle || {}
 
   return (
-    <Animated.View style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }, { transform: [{ scale }] }]}>
+    <Animated.View
+      style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }, animatedStyle]}
+      {...hoverHandlers}
+    >
       <TouchableOpacity
         style={[
           styles.base,
@@ -130,8 +125,12 @@ export function Button({
         activeOpacity={1}
         touchSoundDisabled={true}
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
         {...props}
       >
         {loading ? (
@@ -163,9 +162,11 @@ export function Button({
   )
 }
 
+export const Button = React.memo(ButtonBase)
+
 const styles = StyleSheet.create({
   base: {
-    borderRadius: RADIUS.md,   // 14px — Airbnb-aligned rounded rect (not pill)
+    borderRadius: RADIUS.md,
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
@@ -177,7 +178,7 @@ const styles = StyleSheet.create({
     opacity: 0.45,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     flexShrink: 1,
   },
   labelWithIcon: {

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -33,16 +33,19 @@ export function ButtonGroup({ children, gap = 12, vertical = false, style }: But
         style,
       ]}
     >
-      {React.Children.map(children, (child) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              style: [
-                (child as React.ReactElement<any>).props.style,
-                { flex: 1 },
-              ],
-            })
-          : child,
-      )}
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        const childProps = child.props as Record<string, unknown>
+        const extraProps: Record<string, unknown> = {
+          style: [(child as React.ReactElement<{ style?: unknown }>).props.style, { flex: 1 }],
+        }
+        // Horizontal ButtonGroup: default Button children to sm size to prevent
+        // oversized layout. Only applies when consumer hasn't explicitly set size.
+        if (!vertical && 'label' in childProps && childProps['size'] === undefined) {
+          extraProps['size'] = 'sm'
+        }
+        return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, extraProps)
+      })}
     </View>
   )
 }