@retray-dev/ui-kit 6.2.0 → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "6.2.0",
+  "version": "9.0.0",
   "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",
@@ -23,12 +28,16 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "format": "prettier --write src",
     "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 test && pnpm build",
     "deploy": "pnpm typecheck && pnpm build && npm publish --access public"
   },
   "keywords": [
@@ -40,28 +49,48 @@
   "license": "MIT",
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@gorhom/bottom-sheet": ">=5.0.0",
+    "@gorhom/bottom-sheet": ">=5.2.0",
     "@react-native-community/slider": ">=4.0.0",
     "@react-native-picker/picker": ">=2.0.0",
+    "@shopify/react-native-skia": ">=1.0.0",
     "expo-font": ">=14.0.0",
     "expo-haptics": ">=14.0.0",
     "expo-linear-gradient": ">=13.0.0",
+    "expo-sensors": ">=13.0.0",
+    "pressto": ">=0.6.0",
     "react": ">=17",
-    "react-native": ">=0.70",
+    "react-native": ">=0.76",
+    "react-native-ease": ">=0.7.0",
     "react-native-gesture-handler": ">=2.0.0",
+    "react-native-pulsar": ">=1.6.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",
+    "sonner-native": ">=0.20.0"
+  },
+  "peerDependenciesMeta": {
+    "@shopify/react-native-skia": {
+      "optional": true
+    },
+    "expo-sensors": {
+      "optional": true
+    },
+    "react-native-pulsar": {
+      "optional": true
+    }
   },
   "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 +98,42 @@
   },
   "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",
+    "@shopify/react-native-skia": "2.2.12",
+    "@testing-library/react-native": "^14.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "19.1.17",
+    "babel-preset-expo": "~54.0.11",
     "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",
+    "expo-sensors": "~15.0.7",
+    "jest-expo": "~54.0.17",
+    "pressto": "^0.6.1",
+    "prettier": "^3.8.3",
     "react": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-ease": "^0.7.2",
     "react-native-gesture-handler": "~2.28.0",
+    "react-native-pulsar": "^1.6.1",
     "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",
+    "test-renderer": "^1.2.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

@@ -65,7 +65,7 @@ function AccordionItemComponent({
   // Keep isExpanded in sync with the parent-driven isOpen prop
   React.useEffect(() => {
     isExpanded.value = isOpen
-  }, [isOpen])
+  }, [isOpen, isExpanded])
 
   // Derived animated height — height * Number(isExpanded) gives 0 when closed and
   // the measured height when open. `withTiming` wraps it so every change animates.
@@ -126,7 +126,13 @@ function AccordionItemComponent({
             height.value = e.nativeEvent.layout.height
           }}
         >
-          {item.content}
+          {typeof item.content === 'string' || typeof item.content === 'number' ? (
+            <Text style={[styles.contentText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+              {item.content}
+            </Text>
+          ) : (
+            item.content
+          )}
         </View>
       </Animated.View>
     </View>
@@ -190,7 +196,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   triggerText: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
   chevron: {
@@ -199,9 +205,14 @@ 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%',
   },
+  contentText: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(14),
+    lineHeight: ms(20),
+  },
 })

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} />
     )
 
@@ -42,15 +61,24 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
     ? renderIcon(iconName, ms(16), iconColor ?? accentColor)
     : icon ?? defaultIcon
 
+  // Accessibility: AlertBanner is a notification — "alert" role announces it.
+  const a11yLabel = description ? `${title}. ${description}` : title
+
   return (
-    <View style={[styles.container, { backgroundColor: colors.card }, style]}>
-      {/* Icon */}
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: bgColor, borderWidth: 1, borderColor },
+        style,
+      ]}
+      accessibilityRole="alert"
+      accessibilityLabel={a11yLabel}
+    >
       <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 +91,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 +102,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/AppHeader/AppHeader.tsx

@@ -0,0 +1,172 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle, useWindowDimensions } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../theme'
+import { IconButton } from '../IconButton'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { BREAKPOINTS } from '../../tokens'
+
+export interface AppHeaderProps {
+  /** Primary title. */
+  title?: string
+  /** Secondary text below the title. */
+  subtitle?: string
+  /** Show a back button on the left and call this when pressed. */
+  onBack?: () => void
+  /** Icon name for the back button. Defaults to `'chevron-left'`. */
+  backIconName?: string
+  /** Custom left content — overrides the back button. */
+  left?: React.ReactNode
+  /** Custom right content (actions). */
+  right?: React.ReactNode
+  /**
+   * Title alignment.
+   * - `'auto'` (default): left on narrow screens, centered when width ≥ `BREAKPOINTS.wide`.
+   * - `'left'` / `'center'`: force alignment.
+   */
+  titleAlign?: 'auto' | 'left' | 'center'
+  /** Render a hairline border under the header. Defaults to true. */
+  bordered?: boolean
+  /** Apply the top safe-area inset as padding. Defaults to true. */
+  withSafeArea?: boolean
+  /** Background color. Defaults to theme `background`. */
+  backgroundColor?: string
+  style?: ViewStyle
+}
+
+/**
+ * Top app bar / screen chrome — back button, title/subtitle, and a right action
+ * slot. Responsive: the title left-aligns on phones and centers on wide layouts.
+ *
+ * @example
+ * <AppHeader title="Settings" onBack={navigation.goBack} right={<IconButton iconName="more-horizontal" variant="text" />} />
+ */
+export function AppHeader({
+  title,
+  subtitle,
+  onBack,
+  backIconName = 'chevron-left',
+  left,
+  right,
+  titleAlign = 'auto',
+  bordered = true,
+  withSafeArea = true,
+  backgroundColor,
+  style,
+}: AppHeaderProps) {
+  const { colors } = useTheme()
+  const insets = useSafeAreaInsets()
+  const { width } = useWindowDimensions()
+
+  const isWide = width >= BREAKPOINTS.wide
+  const centered = titleAlign === 'center' || (titleAlign === 'auto' && isWide)
+
+  const leftNode = left ?? (onBack ? (
+    <IconButton
+      iconName={backIconName}
+      variant="text"
+      size="md"
+      onPress={onBack}
+      accessibilityLabel="Go back"
+    />
+  ) : null)
+
+  const titleBlock = (
+    <View style={[styles.titleBlock, centered && styles.titleBlockCentered]} pointerEvents="none">
+      {title ? (
+        <Text
+          style={[styles.title, { color: colors.foreground }, centered && styles.textCentered]}
+          numberOfLines={1}
+          allowFontScaling={true}
+          accessibilityRole="header"
+        >
+          {title}
+        </Text>
+      ) : null}
+      {subtitle ? (
+        <Text
+          style={[styles.subtitle, { color: colors.foregroundMuted }, centered && styles.textCentered]}
+          numberOfLines={1}
+          allowFontScaling={true}
+        >
+          {subtitle}
+        </Text>
+      ) : null}
+    </View>
+  )
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: backgroundColor ?? colors.background,
+          paddingTop: withSafeArea ? insets.top : 0,
+          borderBottomWidth: bordered ? StyleSheet.hairlineWidth : 0,
+          borderBottomColor: colors.border,
+        },
+        style,
+      ]}
+    >
+      <View style={styles.bar}>
+        {/* Centered layout: absolutely-positioned title so it stays centered regardless of slot widths. */}
+        {centered ? (
+          <>
+            <View style={StyleSheet.absoluteFill}>{titleBlock}</View>
+            <View style={styles.side}>{leftNode}</View>
+            <View style={[styles.side, styles.sideRight]}>{right}</View>
+          </>
+        ) : (
+          <>
+            <View style={styles.side}>{leftNode}</View>
+            {titleBlock}
+            <View style={[styles.side, styles.sideRight]}>{right}</View>
+          </>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  bar: {
+    minHeight: vs(48),
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: s(8),
+  },
+  side: {
+    minWidth: s(44),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  sideRight: {
+    justifyContent: 'flex-end',
+  },
+  titleBlock: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: s(8),
+    gap: vs(1),
+  },
+  titleBlockCentered: {
+    alignItems: 'center',
+  },
+  title: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: ms(18),
+    lineHeight: mvs(24),
+  },
+  subtitle: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(16),
+  },
+  textCentered: {
+    textAlign: 'center',
+  },
+})

package/src/components/AppHeader/index.ts

@@ -0,0 +1 @@
+export * from './AppHeader'

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]
@@ -59,8 +59,9 @@ export function Avatar({ src, fallback, fallbackText, size = 'md', status, style
 
   const statusSize = typeof size === 'number' ? size * 0.25 : statusSizeMap[size as AvatarSize]
 
+  // AUDIT FIX: online was hardcoded '#22c55e' — now uses theme token.
   const statusColor: Record<AvatarStatus, string> = {
-    online:  '#22c55e',
+    online:  colors.success,
     offline: 'transparent',
     busy:    colors.destructive,
     away:    colors.warning,
@@ -74,8 +75,15 @@ export function Avatar({ src, fallback, fallbackText, size = 'md', status, style
     overflow: 'hidden',
   }
 
+  // Compute accessible label: prefer explicit fallback text, then initials.
+  const a11yLabel = fallbackText || fallback || 'Avatar'
+
   return (
-    <View style={[styles.wrapper, style]}>
+    <View
+      style={[styles.wrapper, style]}
+      accessibilityRole="image"
+      accessibilityLabel={a11yLabel}
+    >
       <View style={[styles.base, containerStyle]}>
         {!showFallback ? (
           <Image
@@ -111,6 +119,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 +131,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 = {
@@ -78,8 +78,15 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
 
   const content = children ?? label
 
+  // Accessibility: badges are status indicators — role helps screen readers.
+  const a11yLabel = typeof content === 'string' ? content : label
+
   return (
-    <View style={[styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style]}>
+    <View
+      style={[styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style]}
+      accessibilityRole="text"
+      accessibilityLabel={a11yLabel}
+    >
       {effectiveIcon}
       {typeof content === 'string' ? (
         <Text style={[styles.label, { color: textColor }, sizeFontSize[size]]} allowFontScaling={true}>
@@ -92,6 +99,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 +109,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
   },
 })