@retray-dev/ui-kit 7.0.1 → 9.1.0

package/dist/index.mjs

@@ -1,52 +1,62 @@
-export { Toggle } from './chunk-LWG526VX.mjs';
+export { Toggle } from './chunk-KIHCWCWL.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
-export { Skeleton } from './chunk-JBLL7U3U.mjs';
-export { Slider } from './chunk-NQGVLMWG.mjs';
-export { Spinner } from './chunk-76PFOSM2.mjs';
-export { Switch } from './chunk-DITNP6PL.mjs';
-export { Tabs, TabsContent } from './chunk-RR2VQLKE.mjs';
-export { Text } from './chunk-GNGLDL6Z.mjs';
-export { Textarea } from './chunk-6LQYY7HC.mjs';
+export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
+export { Slider } from './chunk-JMOZEC77.mjs';
+export { Spinner } from './chunk-WBOOUHSS.mjs';
+export { Switch } from './chunk-QKH5ZOD5.mjs';
+export { TabBar } from './chunk-MLF3EZFW.mjs';
+export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
+export { Text } from './chunk-WJLKJMKR.mjs';
+export { Textarea } from './chunk-EH745HE5.mjs';
+export { PricingCard } from './chunk-4I7D47FH.mjs';
+export { Progress } from './chunk-OB4JUQ3O.mjs';
+export { RadioGroup } from './chunk-X4G6APW6.mjs';
+export { RetrayProvider } from './chunk-YFZ3ELX5.mjs';
 export { ToastProvider, sonnerToast as toast, useToast } from './chunk-2UYENBLV.mjs';
-export { MenuItem } from './chunk-GPOUINK5.mjs';
-export { MonthPicker } from './chunk-RKLHUDZS.mjs';
-export { Pressable } from './chunk-RMMK64W5.mjs';
-export { Progress } from './chunk-63357L2X.mjs';
-export { RadioGroup } from './chunk-YZJAFS4P.mjs';
-export { Select } from './chunk-URLL5JBR.mjs';
+export { Select } from './chunk-A3A6KNQN.mjs';
+export { SelectableGrid } from './chunk-NA7PARID.mjs';
 export { Separator } from './chunk-MX6HRKMI.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-AU2VDY4P.mjs';
-export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
-export { IconButton } from './chunk-KWCPOM6W.mjs';
-export { LabelValue } from './chunk-A4MDAP7G.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
 export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-LG4DO3DK.mjs';
-export { MediaCard } from './chunk-TAJ2PQ2O.mjs';
+export { ListItem } from './chunk-BNP626TY.mjs';
+export { MediaCard } from './chunk-VGTDN7SW.mjs';
 export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-IRRY3CRZ.mjs';
-export { CategoryStrip } from './chunk-URDE3EUU.mjs';
-export { Checkbox } from './chunk-FTLJOUOQ.mjs';
-export { Chip, ChipGroup } from './chunk-U4N7WF4Z.mjs';
-export { ConfirmDialog } from './chunk-HSPSMN6U.mjs';
+export { MenuItem } from './chunk-ZJKGQMYH.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
+export { Pressable } from './chunk-MBMXYJJV.mjs';
+export { EmptyState } from './chunk-6OAZJ577.mjs';
+export { ErrorBoundary } from './chunk-LXJIIOYQ.mjs';
+export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
+export { ImageViewer } from './chunk-Z4BVUWW6.mjs';
+export { PagerDots } from './chunk-4K625MVM.mjs';
+export { LabelValue } from './chunk-A4MDAP7G.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
+export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
+import './chunk-YNROWHQJ.mjs';
+export { Checkbox } from './chunk-AV4EMIRH.mjs';
+export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
+export { ConfirmDialog } from './chunk-7QHVVCB3.mjs';
 export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput, CurrencyInput as CurrencyInputLarge } from './chunk-XDMN67KV.mjs';
-export { Input } from './chunk-L7E7TVEZ.mjs';
-import './chunk-7H2OR44A.mjs';
+export { CurrencyInput } from './chunk-MAC465BB.mjs';
+export { Input } from './chunk-756RAKE4.mjs';
+import './chunk-26BCI223.mjs';
 export { DetailRow } from './chunk-JB67UOB5.mjs';
-export { EmptyState } from './chunk-MN7OG7IY.mjs';
-export { Accordion } from './chunk-QXGYKWI7.mjs';
-export { AlertBanner } from './chunk-SBZYEV4S.mjs';
-export { Avatar } from './chunk-GCWOGZYL.mjs';
-export { Badge } from './chunk-KZJRQOIU.mjs';
-export { Button } from './chunk-CRYBX2CM.mjs';
-export { Icon, configureIconFamilies, renderIcon } from './chunk-T7XZ7H7Y.mjs';
-export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-Y6MXOREN.mjs';
-import './chunk-QCNARS3X.mjs';
-import './chunk-RTC3CFXF.mjs';
-import './chunk-5IKW3VNC.mjs';
+export { Accordion } from './chunk-O3HA6TYM.mjs';
+export { AlertBanner } from './chunk-M6ZXVBTK.mjs';
+export { AppHeader } from './chunk-AZJF2BLK.mjs';
+export { IconButton } from './chunk-3U4SSNWP.mjs';
+export { Avatar } from './chunk-JT7HKXRB.mjs';
+export { Badge } from './chunk-TERDKCLE.mjs';
+export { Button } from './chunk-2TFTAWVJ.mjs';
+import './chunk-3DKJ2GIC.mjs';
+export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, richHaptics, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import './chunk-DVK4G2GT.mjs';
 export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
+export { Icon, configureIconFamilies, renderIcon } from './chunk-T7XZ7H7Y.mjs';
 export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme } from './chunk-SOYNZDVY.mjs';
+export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 import './chunk-2CE3TQVY.mjs';
+import './chunk-Y6FXYEAI.mjs';
 
 // src/utils/typography.ts
 function getResponsiveFontSize(text, maxSize, steps = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "7.0.1",
+  "version": "9.1.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -28,13 +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 build",
+    "verify": "pnpm typecheck && pnpm lint && pnpm test && pnpm build",
     "deploy": "pnpm typecheck && pnpm build && npm publish --access public"
   },
   "keywords": [
@@ -46,21 +49,38 @@
   "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-svg": ">=15.0.0",
-    "react-native-worklets": ">=0.5.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": {
@@ -82,7 +102,11 @@
     "@gorhom/bottom-sheet": "5.2.8",
     "@react-native-community/slider": "5.0.1",
     "@react-native-picker/picker": "2.11.1",
+    "@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",
@@ -90,10 +114,15 @@
     "expo-font": "~14.0.11",
     "expo-haptics": "~15.0.8",
     "expo-linear-gradient": "~15.0.8",
+    "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-screens": "4.16.0",
@@ -101,6 +130,7 @@
     "react-native-svg": "15.12.1",
     "react-native-worklets": "~0.5.1",
     "sonner-native": "0.23.1",
+    "test-renderer": "^1.2.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "typescript-eslint": "^8.60.0"

package/src/components/Accordion/Accordion.tsx

@@ -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>
@@ -204,4 +210,9 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
+  contentText: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(14),
+    lineHeight: ms(20),
+  },
 })

package/src/components/AlertBanner/AlertBanner.tsx

@@ -61,6 +61,9 @@ 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={[
@@ -68,6 +71,8 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
         { backgroundColor: bgColor, borderWidth: 1, borderColor },
         style,
       ]}
+      accessibilityRole="alert"
+      accessibilityLabel={a11yLabel}
     >
       <View style={styles.iconSlot}>{effectiveIcon}</View>
       <View style={styles.content}>

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

@@ -59,8 +59,9 @@ function AvatarBase({ 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 @@ function AvatarBase({ 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

package/src/components/Badge/Badge.tsx

@@ -78,8 +78,15 @@ function BadgeBase({ label, children, variant = 'default', size = 'md', icon, ic
 
   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}>

package/src/components/Button/Button.tsx

@@ -1,26 +1,23 @@
 import React from 'react'
 import {
-  TouchableOpacity,
+  View,
   Text,
   ActivityIndicator,
   StyleSheet,
-  TouchableOpacityProps,
   ViewStyle,
   TextStyle,
 } from 'react-native'
-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'
+import { PressableButton } from '../../utils/pressable'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
-export interface ButtonProps extends TouchableOpacityProps {
+export interface ButtonProps {
   label: string
   variant?: ButtonVariant
   size?: ButtonSize
@@ -30,10 +27,16 @@ export interface ButtonProps extends TouchableOpacityProps {
   iconName?: string
   iconColor?: string
   iconPosition?: 'left' | 'right'
+  disabled?: boolean
+  style?: ViewStyle
+  onPress?: () => void
+  accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 40 },
+  // AUDIT FIX: sm was 40pt — below Apple HIG 44pt minimum touch target.
+  sm: { paddingHorizontal: s(16), paddingVertical: vs(12), minHeight: 44 },
   md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
   lg: { paddingHorizontal: s(28), paddingVertical: vs(16), minHeight: 56 },
 }
@@ -61,18 +64,13 @@ function ButtonBase({
   onPress,
   accessibilityLabel,
   accessibilityHint,
-  ...props
 }: ButtonProps) {
   const { colors } = useTheme()
   const isDisabled = disabled || loading
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled: isDisabled,
-  })
 
-  const handlePress: TouchableOpacityProps['onPress'] = (e) => {
+  const handlePress = () => {
     impactMedium()
-    onPress?.(e)
+    onPress?.()
   }
 
   const containerVariantStyle: ViewStyle = {
@@ -108,11 +106,8 @@ function ButtonBase({
   const { flex, ...restStyle } = flatStyle || {}
 
   return (
-    <Animated.View
-      style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }, animatedStyle]}
-      {...hoverHandlers}
-    >
-      <TouchableOpacity
+    <View style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }]}>
+      <PressableButton
         style={[
           styles.base,
           containerVariantStyle,
@@ -121,17 +116,15 @@ function ButtonBase({
           isDisabled && styles.disabled,
           restStyle,
         ]}
-        disabled={isDisabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
+        enabled={!isDisabled}
         onPress={handlePress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel ?? label}
         accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: isDisabled, busy: loading }}
-        {...props}
       >
         {loading ? (
           <>
@@ -157,8 +150,8 @@ function ButtonBase({
             {effectiveIcon && iconPosition === 'right' && <>{effectiveIcon}</>}
           </>
         )}
-      </TouchableOpacity>
-    </Animated.View>
+      </PressableButton>
+    </View>
   )
 }
 

package/src/components/Card/Card.tsx

@@ -1,12 +1,10 @@
 import React from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, TextStyle } from 'react-native'
-import Animated from 'react-native-reanimated'
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { PressableCard } from '../../utils/pressable'
 
 export type CardVariant = 'elevated' | 'outlined' | 'filled'
 
@@ -26,12 +24,6 @@ export interface CardFooterProps { children: React.ReactNode; style?: ViewStyle
 
 export function Card({ children, variant = 'elevated', onPress, style, accessibilityLabel }: CardProps) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.card,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled: !onPress,
-  })
 
   const handlePress = () => {
     if (!onPress) return
@@ -74,19 +66,16 @@ export function Card({ children, variant = 'elevated', onPress, style, accessibi
 
   if (onPress) {
     return (
-      <Animated.View style={animatedStyle} {...hoverHandlers}>
-        <TouchableOpacity
-          onPress={handlePress}
-          onPressIn={onPressIn}
-          onPressOut={onPressOut}
-          activeOpacity={1}
-          touchSoundDisabled={true}
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabel}
-        >
-          {cardContent}
-        </TouchableOpacity>
-      </Animated.View>
+      <PressableCard
+        onPress={handlePress}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      >
+        {cardContent}
+      </PressableCard>
     )
   }