@retray-dev/ui-kit 6.0.0 → 6.2.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v6.0.0)
+# @retray-dev/ui-kit — Component Reference (v6.2.0)
 
 This file is the AI reference for this package. It is shipped inside the npm package so consuming projects can import it into their `CLAUDE.md` with:
 
@@ -359,7 +359,7 @@ const styles = StyleSheet.create({
 ```tsx
 import { MenuItem } from '@retray-dev/ui-kit'
 // variants: 'plain' (default) | 'card'
-<MenuItem label="Profile" iconName="user" onPress={() => {}} />
+<MenuItem label="Profile" subtitle="Edit your details" iconName="user" onPress={() => {}} />
 <MenuItem label="Notifications" iconName="bell" rightRender={<Switch value={on} onValueChange={setOn} />} showChevron={false} onPress={() => {}} />
 ```
 
@@ -517,9 +517,9 @@ Access resolved values via `useTheme().colors.overlay`, `.accentResolved`, `.acc
 
 **Shape:** `borderRadius: RADIUS.md = 14px` — Airbnb-aligned rounded rect on all variants. Exception: `IconButton` uses `RADIUS.full` (perfect circle).
 
-**Animations:** Scale springs to 0.95 on `onPressIn`, back to 1.0 on `onPressOut`.
+**Animations:** `usePressScale` hook — Reanimated v4, UI thread. Scale springs to 0.95 (`SPRINGS.pressIn`) on `onPressIn`, back to 1.0 (`SPRINGS.pressOut`) on `onPressOut`. Web: hover scale 1.02.
 
-**Haptics:** `impactLight` on every press.
+**Haptics:** `impactMedium` on every press.
 
 **Examples:**
 ```tsx
@@ -2301,13 +2301,14 @@ dismiss(id)
 
 **Import:** `import { MenuItem } from '@retray-dev/ui-kit'`
 
-**When to use:** Settings screens, navigation lists, menu entries — icon + label + optional right content. Purpose-built for Airbnb-style settings rows. Use `ListItem` when you need subtitle, caption, or more complex layouts.
+**When to use:** Settings screens, navigation lists, menu entries — icon + label + optional subtitle + optional right content. Purpose-built for Airbnb-style settings rows. Use `ListItem` when you need caption, metadata rows, or more complex layouts beyond label+subtitle.
 
 **Important:** MenuItem has **zero horizontal padding** by design — the consumer controls spacing. Wrap in a container with padding for standalone use, or use `variant="card"` for auto-styled surfaces.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | label | `string` | required | Row label |
+| subtitle | `string` | — | Secondary text below label. Uses `mutedForeground` color |
 | iconName | `string` | — | Icon from `@expo/vector-icons`. Auto-resolved across all 6 families |
 | icon | `ReactNode` | — | Custom icon (used if `iconName` not set) |
 | iconColor | `string` | — | Override icon color. Defaults to `foreground` |
@@ -2324,14 +2325,14 @@ dismiss(id)
 - Height: 54dp — consistent settings row
 - Chevron: shown by default (`showChevron={true}`). Can be replaced via `rightRender` prop
 - `rightRender` — arbitrary right slot content (Switch, Checkbox, Badge, etc). When set, chevron is hidden
-- Press scale: 0.97 spring (`stiffness: 350, damping: 28, mass: 0.9`)
+- Press scale: 0.97 (`PRESS_SCALE.row`) via `usePressScale` with `SPRINGS.surfacePressIn/Out` — Reanimated v4, UI thread
 - Haptics: `selectionAsync` on press
 
 **Example:**
 ```tsx
 // Settings screen (wrap in container with padding)
 <View style={{ padding: 16, backgroundColor: colors.card, borderRadius: 12 }}>
-  <MenuItem label="Personal info" iconName="user" onPress={() => navigate('profile')} showSeparator />
+  <MenuItem label="Personal info" subtitle="Name, email, phone" iconName="user" onPress={() => navigate('profile')} showSeparator />
   <MenuItem label="Security" iconName="shield" onPress={() => navigate('security')} showSeparator />
   <MenuItem label="Privacy" iconName="lock" onPress={() => navigate('privacy')} showSeparator />
   <MenuItem 

package/dist/index.d.mts

@@ -91,7 +91,7 @@ interface ButtonProps extends TouchableOpacityProps {
     iconColor?: string;
     iconPosition?: 'left' | 'right';
 }
-declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, accessibilityLabel, accessibilityHint, ...props }: ButtonProps): React.JSX.Element;
 
 interface ButtonGroupProps {
     children: React.ReactNode;
@@ -130,7 +130,7 @@ interface IconButtonProps extends TouchableOpacityProps {
      */
     badge?: boolean | number;
 }
-declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
+declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, accessibilityLabel, accessibilityHint, ...props }: IconButtonProps): React.JSX.Element;
 
 type TextVariant = 'display-hero' | 'display-xl' | 'display-lg' | 'display-md' | 'display-sm' | 'title-md' | 'title-sm' | 'body-md' | 'body-sm' | 'caption' | 'caption-sm' | 'badge-text' | 'micro-label' | 'uppercase-tag' | 'button-lg' | 'button-sm';
 interface TextProps extends TextProps$1 {
@@ -176,7 +176,7 @@ interface InputProps extends TextInputProps {
     /** Style for the inner border wrapper (overrides padding, etc). */
     inputWrapperStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
@@ -202,11 +202,13 @@ declare function Badge({ label, children, variant, size, icon, iconName, iconCol
 type CardVariant = 'elevated' | 'outlined' | 'filled';
 interface CardProps {
     children: React.ReactNode;
-    /** Visual style variant.  `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
+    /** 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;
+    /** Accessibility label for the card (when interactive). */
+    accessibilityLabel?: string;
 }
 interface CardHeaderProps {
     children: React.ReactNode;
@@ -228,7 +230,7 @@ interface CardFooterProps {
     children: React.ReactNode;
     style?: ViewStyle;
 }
-declare function Card({ children, variant, onPress, style }: CardProps): React.JSX.Element;
+declare function Card({ children, variant, onPress, style, accessibilityLabel }: CardProps): React.JSX.Element;
 declare function CardHeader({ children, style }: CardHeaderProps): React.JSX.Element;
 declare function CardTitle({ children, style }: CardTitleProps): React.JSX.Element;
 declare function CardDescription({ children, style }: CardDescriptionProps): React.JSX.Element;
@@ -295,8 +297,9 @@ interface ProgressProps {
     max?: number;
     variant?: ProgressVariant;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function Progress({ value, max, variant, style }: ProgressProps): React.JSX.Element;
+declare function Progress({ value, max, variant, style, accessibilityLabel }: ProgressProps): React.JSX.Element;
 
 interface EmptyStateProps {
     icon?: React.ReactNode;
@@ -338,7 +341,7 @@ interface TextareaProps extends TextInputProps {
     /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
     containerStyle?: ViewStyle;
 }
-declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, accessibilityLabel, ...props }: TextareaProps): React.JSX.Element;
 
 interface CheckboxProps {
     checked?: boolean;
@@ -346,16 +349,18 @@ interface CheckboxProps {
     label?: string;
     disabled?: boolean;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function Checkbox({ checked, onCheckedChange, label, disabled, style, }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ checked, onCheckedChange, label, disabled, style, accessibilityLabel, }: CheckboxProps): React.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function Switch({ checked, onCheckedChange, disabled, style }: SwitchProps): React.JSX.Element;
+declare function Switch({ checked, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps): React.JSX.Element;
 
 type ToggleVariant = 'default' | 'outline';
 type ToggleSize = 'sm' | 'md' | 'lg';
@@ -384,7 +389,7 @@ interface ToggleProps extends TouchableOpacityProps {
     /** Override the resolved active icon color. Defaults to `primary`. */
     activeIconColor?: string;
 }
-declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, ...props }: ToggleProps): React.JSX.Element;
+declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, accessibilityLabel, ...props }: ToggleProps): React.JSX.Element;
 
 interface RadioOption {
     label: string;
@@ -397,8 +402,9 @@ interface RadioGroupProps {
     onValueChange?: (value: string) => void;
     orientation?: 'vertical' | 'horizontal';
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function RadioGroup({ options, value, onValueChange, orientation, style, }: RadioGroupProps): React.JSX.Element;
+declare function RadioGroup({ options, value, onValueChange, orientation, style, accessibilityLabel, }: RadioGroupProps): React.JSX.Element;
 
 interface TabItem {
     label: string;
@@ -533,8 +539,9 @@ interface SelectProps {
     error?: string;
     disabled?: boolean;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
+declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, accessibilityLabel, }: SelectProps): React.JSX.Element;
 
 declare function useToast(): {
     toast: ((message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
@@ -673,12 +680,16 @@ interface ListItemProps {
     subtitleStyle?: TextStyle;
     /** Style applied to the caption Text. */
     captionStyle?: TextStyle;
+    /** Accessibility label override. Defaults to the title. */
+    accessibilityLabel?: string;
 }
-declare function ListItem({ leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, captionStyle, }: ListItemProps): React.JSX.Element;
+declare function ListItem({ leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, captionStyle, accessibilityLabel, }: ListItemProps): React.JSX.Element;
 
 type MenuItemVariant = 'plain' | 'card';
 interface MenuItemProps {
     label: string;
+    /** Secondary text rendered below the label. */
+    subtitle?: string;
     /**
      * Icon name from `@expo/vector-icons` rendered on the left.
      * See https://icons.expo.fyi.
@@ -712,8 +723,10 @@ interface MenuItemProps {
     style?: ViewStyle;
     /** Style applied to the label Text. */
     labelStyle?: TextStyle;
+    /** Accessibility label override. Defaults to label. */
+    accessibilityLabel?: string;
 }
-declare function MenuItem({ label, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
+declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, accessibilityLabel, }: MenuItemProps): React.JSX.Element;
 
 interface ChipProps {
     label: string;
@@ -724,6 +737,7 @@ interface ChipProps {
     /** Icon name from @expo/vector-icons resolved automatically. */
     iconName?: string;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
 interface ChipOption {
     label: string;
@@ -742,7 +756,7 @@ interface ChipGroupProps {
     multiSelect?: boolean;
     style?: ViewStyle;
 }
-declare function Chip({ label, selected, onPress, icon, iconName, style }: ChipProps): React.JSX.Element;
+declare function Chip({ label, selected, onPress, icon, iconName, style, accessibilityLabel }: ChipProps): React.JSX.Element;
 declare function ChipGroup({ options, value, onValueChange, multiSelect, style }: ChipGroupProps): React.JSX.Element;
 
 interface ConfirmDialogProps {
@@ -813,8 +827,10 @@ interface MediaCardProps {
     imageStyle?: ViewStyle;
     /** Additional content rendered below caption. */
     footer?: React.ReactNode;
+    /** Accessibility label override. Defaults to title (and subtitle if present). */
+    accessibilityLabel?: string;
 }
-declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
+declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, accessibilityLabel, }: MediaCardProps): React.JSX.Element;
 
 interface CategoryItem {
     label: string;
@@ -834,8 +850,9 @@ interface CategoryStripProps {
     style?: ViewStyle;
     /** Style applied to each pill item. */
     itemStyle?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
+declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, accessibilityLabel, }: CategoryStripProps): React.JSX.Element;
 
 interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
     /** Children content to render inside the pressable. */
@@ -844,7 +861,10 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
     onPress?: () => void;
     /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
     pressScale?: number;
-    /** Bounciness of the spring animation on release. Defaults to `4`. */
+    /**
+     * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
+     * Kept for backwards compatibility with v6.x consumers.
+     */
     bounciness?: number;
     /** Enable haptic feedback on press. Defaults to `true`. */
     haptics?: boolean;
@@ -856,20 +876,23 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
     hoverScale?: number;
 }
 /**
- * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
- * Use for custom pressable content that needs consistent press feel.
+ * Generic pressable with a calibrated spring bounce — Apple HIG / Airbnb feel.
+ * All animation runs on the UI thread via Reanimated v4 worklets.
+ *
+ * Use this for any custom pressable surface that needs consistent press feel
+ * (cards, list rows, image tiles, etc).
  */
-declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
+declare function Pressable({ children, onPress, pressScale, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
 
 type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
 type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 interface DetailRowProps {
     label: React.ReactNode;
-    value: string;
+    value: string | React.ReactNode;
     /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
     separator?: DetailRowSeparator;
     labelWeight?: DetailRowLabelWeight;
-    /** Semantic color key or hex string for value text. */
+    /** Semantic color key or hex string for value text. Only applies when value is a string. */
     valueColor?: string;
     /** Node rendered left of the label (e.g. Avatar, Icon). */
     leftIcon?: React.ReactNode;
@@ -883,6 +906,7 @@ interface DetailRowProps {
     rightIconColor?: string;
     style?: ViewStyle;
     labelStyle?: TextStyle;
+    /** Only applies when value is a string. */
     valueStyle?: TextStyle;
 }
 declare function DetailRow({ label, value, separator, labelWeight, valueColor, leftIcon, leftIconName, leftIconColor, rightIconName, rightIconColor, style, labelStyle, valueStyle, }: DetailRowProps): React.JSX.Element;

package/dist/index.d.ts

@@ -91,7 +91,7 @@ interface ButtonProps extends TouchableOpacityProps {
     iconColor?: string;
     iconPosition?: 'left' | 'right';
 }
-declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, accessibilityLabel, accessibilityHint, ...props }: ButtonProps): React.JSX.Element;
 
 interface ButtonGroupProps {
     children: React.ReactNode;
@@ -130,7 +130,7 @@ interface IconButtonProps extends TouchableOpacityProps {
      */
     badge?: boolean | number;
 }
-declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
+declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, accessibilityLabel, accessibilityHint, ...props }: IconButtonProps): React.JSX.Element;
 
 type TextVariant = 'display-hero' | 'display-xl' | 'display-lg' | 'display-md' | 'display-sm' | 'title-md' | 'title-sm' | 'body-md' | 'body-sm' | 'caption' | 'caption-sm' | 'badge-text' | 'micro-label' | 'uppercase-tag' | 'button-lg' | 'button-sm';
 interface TextProps extends TextProps$1 {
@@ -176,7 +176,7 @@ interface InputProps extends TextInputProps {
     /** Style for the inner border wrapper (overrides padding, etc). */
     inputWrapperStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
@@ -202,11 +202,13 @@ declare function Badge({ label, children, variant, size, icon, iconName, iconCol
 type CardVariant = 'elevated' | 'outlined' | 'filled';
 interface CardProps {
     children: React.ReactNode;
-    /** Visual style variant.  `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
+    /** 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;
+    /** Accessibility label for the card (when interactive). */
+    accessibilityLabel?: string;
 }
 interface CardHeaderProps {
     children: React.ReactNode;
@@ -228,7 +230,7 @@ interface CardFooterProps {
     children: React.ReactNode;
     style?: ViewStyle;
 }
-declare function Card({ children, variant, onPress, style }: CardProps): React.JSX.Element;
+declare function Card({ children, variant, onPress, style, accessibilityLabel }: CardProps): React.JSX.Element;
 declare function CardHeader({ children, style }: CardHeaderProps): React.JSX.Element;
 declare function CardTitle({ children, style }: CardTitleProps): React.JSX.Element;
 declare function CardDescription({ children, style }: CardDescriptionProps): React.JSX.Element;
@@ -295,8 +297,9 @@ interface ProgressProps {
     max?: number;
     variant?: ProgressVariant;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function Progress({ value, max, variant, style }: ProgressProps): React.JSX.Element;
+declare function Progress({ value, max, variant, style, accessibilityLabel }: ProgressProps): React.JSX.Element;
 
 interface EmptyStateProps {
     icon?: React.ReactNode;
@@ -338,7 +341,7 @@ interface TextareaProps extends TextInputProps {
     /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
     containerStyle?: ViewStyle;
 }
-declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, accessibilityLabel, ...props }: TextareaProps): React.JSX.Element;
 
 interface CheckboxProps {
     checked?: boolean;
@@ -346,16 +349,18 @@ interface CheckboxProps {
     label?: string;
     disabled?: boolean;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function Checkbox({ checked, onCheckedChange, label, disabled, style, }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ checked, onCheckedChange, label, disabled, style, accessibilityLabel, }: CheckboxProps): React.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function Switch({ checked, onCheckedChange, disabled, style }: SwitchProps): React.JSX.Element;
+declare function Switch({ checked, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps): React.JSX.Element;
 
 type ToggleVariant = 'default' | 'outline';
 type ToggleSize = 'sm' | 'md' | 'lg';
@@ -384,7 +389,7 @@ interface ToggleProps extends TouchableOpacityProps {
     /** Override the resolved active icon color. Defaults to `primary`. */
     activeIconColor?: string;
 }
-declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, ...props }: ToggleProps): React.JSX.Element;
+declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, accessibilityLabel, ...props }: ToggleProps): React.JSX.Element;
 
 interface RadioOption {
     label: string;
@@ -397,8 +402,9 @@ interface RadioGroupProps {
     onValueChange?: (value: string) => void;
     orientation?: 'vertical' | 'horizontal';
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function RadioGroup({ options, value, onValueChange, orientation, style, }: RadioGroupProps): React.JSX.Element;
+declare function RadioGroup({ options, value, onValueChange, orientation, style, accessibilityLabel, }: RadioGroupProps): React.JSX.Element;
 
 interface TabItem {
     label: string;
@@ -533,8 +539,9 @@ interface SelectProps {
     error?: string;
     disabled?: boolean;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
+declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, accessibilityLabel, }: SelectProps): React.JSX.Element;
 
 declare function useToast(): {
     toast: ((message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
@@ -673,12 +680,16 @@ interface ListItemProps {
     subtitleStyle?: TextStyle;
     /** Style applied to the caption Text. */
     captionStyle?: TextStyle;
+    /** Accessibility label override. Defaults to the title. */
+    accessibilityLabel?: string;
 }
-declare function ListItem({ leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, captionStyle, }: ListItemProps): React.JSX.Element;
+declare function ListItem({ leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, captionStyle, accessibilityLabel, }: ListItemProps): React.JSX.Element;
 
 type MenuItemVariant = 'plain' | 'card';
 interface MenuItemProps {
     label: string;
+    /** Secondary text rendered below the label. */
+    subtitle?: string;
     /**
      * Icon name from `@expo/vector-icons` rendered on the left.
      * See https://icons.expo.fyi.
@@ -712,8 +723,10 @@ interface MenuItemProps {
     style?: ViewStyle;
     /** Style applied to the label Text. */
     labelStyle?: TextStyle;
+    /** Accessibility label override. Defaults to label. */
+    accessibilityLabel?: string;
 }
-declare function MenuItem({ label, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
+declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, accessibilityLabel, }: MenuItemProps): React.JSX.Element;
 
 interface ChipProps {
     label: string;
@@ -724,6 +737,7 @@ interface ChipProps {
     /** Icon name from @expo/vector-icons resolved automatically. */
     iconName?: string;
     style?: ViewStyle;
+    accessibilityLabel?: string;
 }
 interface ChipOption {
     label: string;
@@ -742,7 +756,7 @@ interface ChipGroupProps {
     multiSelect?: boolean;
     style?: ViewStyle;
 }
-declare function Chip({ label, selected, onPress, icon, iconName, style }: ChipProps): React.JSX.Element;
+declare function Chip({ label, selected, onPress, icon, iconName, style, accessibilityLabel }: ChipProps): React.JSX.Element;
 declare function ChipGroup({ options, value, onValueChange, multiSelect, style }: ChipGroupProps): React.JSX.Element;
 
 interface ConfirmDialogProps {
@@ -813,8 +827,10 @@ interface MediaCardProps {
     imageStyle?: ViewStyle;
     /** Additional content rendered below caption. */
     footer?: React.ReactNode;
+    /** Accessibility label override. Defaults to title (and subtitle if present). */
+    accessibilityLabel?: string;
 }
-declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
+declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, accessibilityLabel, }: MediaCardProps): React.JSX.Element;
 
 interface CategoryItem {
     label: string;
@@ -834,8 +850,9 @@ interface CategoryStripProps {
     style?: ViewStyle;
     /** Style applied to each pill item. */
     itemStyle?: ViewStyle;
+    accessibilityLabel?: string;
 }
-declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
+declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, accessibilityLabel, }: CategoryStripProps): React.JSX.Element;
 
 interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
     /** Children content to render inside the pressable. */
@@ -844,7 +861,10 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
     onPress?: () => void;
     /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
     pressScale?: number;
-    /** Bounciness of the spring animation on release. Defaults to `4`. */
+    /**
+     * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
+     * Kept for backwards compatibility with v6.x consumers.
+     */
     bounciness?: number;
     /** Enable haptic feedback on press. Defaults to `true`. */
     haptics?: boolean;
@@ -856,20 +876,23 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
     hoverScale?: number;
 }
 /**
- * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
- * Use for custom pressable content that needs consistent press feel.
+ * Generic pressable with a calibrated spring bounce — Apple HIG / Airbnb feel.
+ * All animation runs on the UI thread via Reanimated v4 worklets.
+ *
+ * Use this for any custom pressable surface that needs consistent press feel
+ * (cards, list rows, image tiles, etc).
  */
-declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
+declare function Pressable({ children, onPress, pressScale, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
 
 type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
 type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 interface DetailRowProps {
     label: React.ReactNode;
-    value: string;
+    value: string | React.ReactNode;
     /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
     separator?: DetailRowSeparator;
     labelWeight?: DetailRowLabelWeight;
-    /** Semantic color key or hex string for value text. */
+    /** Semantic color key or hex string for value text. Only applies when value is a string. */
     valueColor?: string;
     /** Node rendered left of the label (e.g. Avatar, Icon). */
     leftIcon?: React.ReactNode;
@@ -883,6 +906,7 @@ interface DetailRowProps {
     rightIconColor?: string;
     style?: ViewStyle;
     labelStyle?: TextStyle;
+    /** Only applies when value is a string. */
     valueStyle?: TextStyle;
 }
 declare function DetailRow({ label, value, separator, labelWeight, valueColor, leftIcon, leftIconName, leftIconColor, rightIconName, rightIconColor, style, labelStyle, valueStyle, }: DetailRowProps): React.JSX.Element;