@retray-dev/ui-kit 6.1.0 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/COMPONENTS.md +4 -4
  2. package/dist/index.d.mts +42 -21
  3. package/dist/index.d.ts +42 -21
  4. package/dist/index.js +679 -628
  5. package/dist/index.mjs +672 -621
  6. package/package.json +1 -1
  7. package/src/components/Accordion/Accordion.tsx +10 -12
  8. package/src/components/Button/Button.tsx +20 -18
  9. package/src/components/Card/Card.tsx +21 -33
  10. package/src/components/CategoryStrip/CategoryStrip.tsx +45 -38
  11. package/src/components/Checkbox/Checkbox.tsx +31 -50
  12. package/src/components/Chip/Chip.tsx +34 -71
  13. package/src/components/IconButton/IconButton.tsx +20 -18
  14. package/src/components/Input/Input.tsx +39 -22
  15. package/src/components/ListItem/ListItem.tsx +22 -34
  16. package/src/components/MediaCard/MediaCard.tsx +24 -24
  17. package/src/components/MenuItem/MenuItem.tsx +22 -31
  18. package/src/components/MonthPicker/MonthPicker.tsx +12 -2
  19. package/src/components/Pressable/Pressable.tsx +27 -46
  20. package/src/components/Progress/Progress.tsx +21 -12
  21. package/src/components/RadioGroup/RadioGroup.tsx +52 -26
  22. package/src/components/Select/Select.tsx +17 -15
  23. package/src/components/Sheet/Sheet.tsx +4 -1
  24. package/src/components/Skeleton/Skeleton.tsx +24 -13
  25. package/src/components/Slider/Slider.tsx +11 -1
  26. package/src/components/Switch/Switch.tsx +44 -49
  27. package/src/components/Tabs/Tabs.tsx +39 -31
  28. package/src/components/Textarea/Textarea.tsx +29 -12
  29. package/src/components/Toggle/Toggle.tsx +39 -45
  30. package/src/utils/animations.ts +58 -0
  31. package/src/utils/useColorTransition.ts +40 -0
  32. package/src/utils/usePressScale.ts +73 -0
package/COMPONENTS.md CHANGED
@@ -1,4 +1,4 @@
1
- # @retray-dev/ui-kit — Component Reference (v6.1.0)
1
+ # @retray-dev/ui-kit — Component Reference (v6.2.0)
2
2
 
3
3
  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:
4
4
 
@@ -517,9 +517,9 @@ Access resolved values via `useTheme().colors.overlay`, `.accentResolved`, `.acc
517
517
 
518
518
  **Shape:** `borderRadius: RADIUS.md = 14px` — Airbnb-aligned rounded rect on all variants. Exception: `IconButton` uses `RADIUS.full` (perfect circle).
519
519
 
520
- **Animations:** Scale springs to 0.95 on `onPressIn`, back to 1.0 on `onPressOut`.
520
+ **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.
521
521
 
522
- **Haptics:** `impactLight` on every press.
522
+ **Haptics:** `impactMedium` on every press.
523
523
 
524
524
  **Examples:**
525
525
  ```tsx
@@ -2325,7 +2325,7 @@ dismiss(id)
2325
2325
  - Height: 54dp — consistent settings row
2326
2326
  - Chevron: shown by default (`showChevron={true}`). Can be replaced via `rightRender` prop
2327
2327
  - `rightRender` — arbitrary right slot content (Switch, Checkbox, Badge, etc). When set, chevron is hidden
2328
- - Press scale: 0.97 spring (`stiffness: 350, damping: 28, mass: 0.9`)
2328
+ - Press scale: 0.97 (`PRESS_SCALE.row`) via `usePressScale` with `SPRINGS.surfacePressIn/Out` — Reanimated v4, UI thread
2329
2329
  - Haptics: `selectionAsync` on press
2330
2330
 
2331
2331
  **Example:**
package/dist/index.d.mts CHANGED
@@ -91,7 +91,7 @@ interface ButtonProps extends TouchableOpacityProps {
91
91
  iconColor?: string;
92
92
  iconPosition?: 'left' | 'right';
93
93
  }
94
- declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
94
+ declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, accessibilityLabel, accessibilityHint, ...props }: ButtonProps): React.JSX.Element;
95
95
 
96
96
  interface ButtonGroupProps {
97
97
  children: React.ReactNode;
@@ -130,7 +130,7 @@ interface IconButtonProps extends TouchableOpacityProps {
130
130
  */
131
131
  badge?: boolean | number;
132
132
  }
133
- declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
133
+ declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, accessibilityLabel, accessibilityHint, ...props }: IconButtonProps): React.JSX.Element;
134
134
 
135
135
  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';
136
136
  interface TextProps extends TextProps$1 {
@@ -176,7 +176,7 @@ interface InputProps extends TextInputProps {
176
176
  /** Style for the inner border wrapper (overrides padding, etc). */
177
177
  inputWrapperStyle?: ViewStyle;
178
178
  }
179
- 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;
179
+ 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;
180
180
 
181
181
  type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
182
182
  type BadgeSize = 'sm' | 'md' | 'lg';
@@ -202,11 +202,13 @@ declare function Badge({ label, children, variant, size, icon, iconName, iconCol
202
202
  type CardVariant = 'elevated' | 'outlined' | 'filled';
203
203
  interface CardProps {
204
204
  children: React.ReactNode;
205
- /** Visual style variant. `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
205
+ /** Visual style variant. `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
206
206
  variant?: CardVariant;
207
207
  /** Makes the card tappable. Adds press animation and haptic feedback. */
208
208
  onPress?: () => void;
209
209
  style?: ViewStyle;
210
+ /** Accessibility label for the card (when interactive). */
211
+ accessibilityLabel?: string;
210
212
  }
211
213
  interface CardHeaderProps {
212
214
  children: React.ReactNode;
@@ -228,7 +230,7 @@ interface CardFooterProps {
228
230
  children: React.ReactNode;
229
231
  style?: ViewStyle;
230
232
  }
231
- declare function Card({ children, variant, onPress, style }: CardProps): React.JSX.Element;
233
+ declare function Card({ children, variant, onPress, style, accessibilityLabel }: CardProps): React.JSX.Element;
232
234
  declare function CardHeader({ children, style }: CardHeaderProps): React.JSX.Element;
233
235
  declare function CardTitle({ children, style }: CardTitleProps): React.JSX.Element;
234
236
  declare function CardDescription({ children, style }: CardDescriptionProps): React.JSX.Element;
@@ -295,8 +297,9 @@ interface ProgressProps {
295
297
  max?: number;
296
298
  variant?: ProgressVariant;
297
299
  style?: ViewStyle;
300
+ accessibilityLabel?: string;
298
301
  }
299
- declare function Progress({ value, max, variant, style }: ProgressProps): React.JSX.Element;
302
+ declare function Progress({ value, max, variant, style, accessibilityLabel }: ProgressProps): React.JSX.Element;
300
303
 
301
304
  interface EmptyStateProps {
302
305
  icon?: React.ReactNode;
@@ -338,7 +341,7 @@ interface TextareaProps extends TextInputProps {
338
341
  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
339
342
  containerStyle?: ViewStyle;
340
343
  }
341
- declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
344
+ declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, accessibilityLabel, ...props }: TextareaProps): React.JSX.Element;
342
345
 
343
346
  interface CheckboxProps {
344
347
  checked?: boolean;
@@ -346,16 +349,18 @@ interface CheckboxProps {
346
349
  label?: string;
347
350
  disabled?: boolean;
348
351
  style?: ViewStyle;
352
+ accessibilityLabel?: string;
349
353
  }
350
- declare function Checkbox({ checked, onCheckedChange, label, disabled, style, }: CheckboxProps): React.JSX.Element;
354
+ declare function Checkbox({ checked, onCheckedChange, label, disabled, style, accessibilityLabel, }: CheckboxProps): React.JSX.Element;
351
355
 
352
356
  interface SwitchProps {
353
357
  checked?: boolean;
354
358
  onCheckedChange?: (checked: boolean) => void;
355
359
  disabled?: boolean;
356
360
  style?: ViewStyle;
361
+ accessibilityLabel?: string;
357
362
  }
358
- declare function Switch({ checked, onCheckedChange, disabled, style }: SwitchProps): React.JSX.Element;
363
+ declare function Switch({ checked, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps): React.JSX.Element;
359
364
 
360
365
  type ToggleVariant = 'default' | 'outline';
361
366
  type ToggleSize = 'sm' | 'md' | 'lg';
@@ -384,7 +389,7 @@ interface ToggleProps extends TouchableOpacityProps {
384
389
  /** Override the resolved active icon color. Defaults to `primary`. */
385
390
  activeIconColor?: string;
386
391
  }
387
- declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, ...props }: ToggleProps): React.JSX.Element;
392
+ declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, accessibilityLabel, ...props }: ToggleProps): React.JSX.Element;
388
393
 
389
394
  interface RadioOption {
390
395
  label: string;
@@ -397,8 +402,9 @@ interface RadioGroupProps {
397
402
  onValueChange?: (value: string) => void;
398
403
  orientation?: 'vertical' | 'horizontal';
399
404
  style?: ViewStyle;
405
+ accessibilityLabel?: string;
400
406
  }
401
- declare function RadioGroup({ options, value, onValueChange, orientation, style, }: RadioGroupProps): React.JSX.Element;
407
+ declare function RadioGroup({ options, value, onValueChange, orientation, style, accessibilityLabel, }: RadioGroupProps): React.JSX.Element;
402
408
 
403
409
  interface TabItem {
404
410
  label: string;
@@ -533,8 +539,9 @@ interface SelectProps {
533
539
  error?: string;
534
540
  disabled?: boolean;
535
541
  style?: ViewStyle;
542
+ accessibilityLabel?: string;
536
543
  }
537
- declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
544
+ declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, accessibilityLabel, }: SelectProps): React.JSX.Element;
538
545
 
539
546
  declare function useToast(): {
540
547
  toast: ((message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
@@ -673,8 +680,10 @@ interface ListItemProps {
673
680
  subtitleStyle?: TextStyle;
674
681
  /** Style applied to the caption Text. */
675
682
  captionStyle?: TextStyle;
683
+ /** Accessibility label override. Defaults to the title. */
684
+ accessibilityLabel?: string;
676
685
  }
677
- 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;
686
+ 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;
678
687
 
679
688
  type MenuItemVariant = 'plain' | 'card';
680
689
  interface MenuItemProps {
@@ -714,8 +723,10 @@ interface MenuItemProps {
714
723
  style?: ViewStyle;
715
724
  /** Style applied to the label Text. */
716
725
  labelStyle?: TextStyle;
726
+ /** Accessibility label override. Defaults to label. */
727
+ accessibilityLabel?: string;
717
728
  }
718
- declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
729
+ declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, accessibilityLabel, }: MenuItemProps): React.JSX.Element;
719
730
 
720
731
  interface ChipProps {
721
732
  label: string;
@@ -726,6 +737,7 @@ interface ChipProps {
726
737
  /** Icon name from @expo/vector-icons resolved automatically. */
727
738
  iconName?: string;
728
739
  style?: ViewStyle;
740
+ accessibilityLabel?: string;
729
741
  }
730
742
  interface ChipOption {
731
743
  label: string;
@@ -744,7 +756,7 @@ interface ChipGroupProps {
744
756
  multiSelect?: boolean;
745
757
  style?: ViewStyle;
746
758
  }
747
- declare function Chip({ label, selected, onPress, icon, iconName, style }: ChipProps): React.JSX.Element;
759
+ declare function Chip({ label, selected, onPress, icon, iconName, style, accessibilityLabel }: ChipProps): React.JSX.Element;
748
760
  declare function ChipGroup({ options, value, onValueChange, multiSelect, style }: ChipGroupProps): React.JSX.Element;
749
761
 
750
762
  interface ConfirmDialogProps {
@@ -815,8 +827,10 @@ interface MediaCardProps {
815
827
  imageStyle?: ViewStyle;
816
828
  /** Additional content rendered below caption. */
817
829
  footer?: React.ReactNode;
830
+ /** Accessibility label override. Defaults to title (and subtitle if present). */
831
+ accessibilityLabel?: string;
818
832
  }
819
- declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
833
+ declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, accessibilityLabel, }: MediaCardProps): React.JSX.Element;
820
834
 
821
835
  interface CategoryItem {
822
836
  label: string;
@@ -836,8 +850,9 @@ interface CategoryStripProps {
836
850
  style?: ViewStyle;
837
851
  /** Style applied to each pill item. */
838
852
  itemStyle?: ViewStyle;
853
+ accessibilityLabel?: string;
839
854
  }
840
- declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
855
+ declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, accessibilityLabel, }: CategoryStripProps): React.JSX.Element;
841
856
 
842
857
  interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
843
858
  /** Children content to render inside the pressable. */
@@ -846,7 +861,10 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
846
861
  onPress?: () => void;
847
862
  /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
848
863
  pressScale?: number;
849
- /** Bounciness of the spring animation on release. Defaults to `4`. */
864
+ /**
865
+ * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
866
+ * Kept for backwards compatibility with v6.x consumers.
867
+ */
850
868
  bounciness?: number;
851
869
  /** Enable haptic feedback on press. Defaults to `true`. */
852
870
  haptics?: boolean;
@@ -858,10 +876,13 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
858
876
  hoverScale?: number;
859
877
  }
860
878
  /**
861
- * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
862
- * Use for custom pressable content that needs consistent press feel.
879
+ * Generic pressable with a calibrated spring bounce Apple HIG / Airbnb feel.
880
+ * All animation runs on the UI thread via Reanimated v4 worklets.
881
+ *
882
+ * Use this for any custom pressable surface that needs consistent press feel
883
+ * (cards, list rows, image tiles, etc).
863
884
  */
864
- declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
885
+ declare function Pressable({ children, onPress, pressScale, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
865
886
 
866
887
  type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
867
888
  type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
package/dist/index.d.ts CHANGED
@@ -91,7 +91,7 @@ interface ButtonProps extends TouchableOpacityProps {
91
91
  iconColor?: string;
92
92
  iconPosition?: 'left' | 'right';
93
93
  }
94
- declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
94
+ declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, accessibilityLabel, accessibilityHint, ...props }: ButtonProps): React.JSX.Element;
95
95
 
96
96
  interface ButtonGroupProps {
97
97
  children: React.ReactNode;
@@ -130,7 +130,7 @@ interface IconButtonProps extends TouchableOpacityProps {
130
130
  */
131
131
  badge?: boolean | number;
132
132
  }
133
- declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
133
+ declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, accessibilityLabel, accessibilityHint, ...props }: IconButtonProps): React.JSX.Element;
134
134
 
135
135
  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';
136
136
  interface TextProps extends TextProps$1 {
@@ -176,7 +176,7 @@ interface InputProps extends TextInputProps {
176
176
  /** Style for the inner border wrapper (overrides padding, etc). */
177
177
  inputWrapperStyle?: ViewStyle;
178
178
  }
179
- 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;
179
+ 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;
180
180
 
181
181
  type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
182
182
  type BadgeSize = 'sm' | 'md' | 'lg';
@@ -202,11 +202,13 @@ declare function Badge({ label, children, variant, size, icon, iconName, iconCol
202
202
  type CardVariant = 'elevated' | 'outlined' | 'filled';
203
203
  interface CardProps {
204
204
  children: React.ReactNode;
205
- /** Visual style variant. `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
205
+ /** Visual style variant. `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
206
206
  variant?: CardVariant;
207
207
  /** Makes the card tappable. Adds press animation and haptic feedback. */
208
208
  onPress?: () => void;
209
209
  style?: ViewStyle;
210
+ /** Accessibility label for the card (when interactive). */
211
+ accessibilityLabel?: string;
210
212
  }
211
213
  interface CardHeaderProps {
212
214
  children: React.ReactNode;
@@ -228,7 +230,7 @@ interface CardFooterProps {
228
230
  children: React.ReactNode;
229
231
  style?: ViewStyle;
230
232
  }
231
- declare function Card({ children, variant, onPress, style }: CardProps): React.JSX.Element;
233
+ declare function Card({ children, variant, onPress, style, accessibilityLabel }: CardProps): React.JSX.Element;
232
234
  declare function CardHeader({ children, style }: CardHeaderProps): React.JSX.Element;
233
235
  declare function CardTitle({ children, style }: CardTitleProps): React.JSX.Element;
234
236
  declare function CardDescription({ children, style }: CardDescriptionProps): React.JSX.Element;
@@ -295,8 +297,9 @@ interface ProgressProps {
295
297
  max?: number;
296
298
  variant?: ProgressVariant;
297
299
  style?: ViewStyle;
300
+ accessibilityLabel?: string;
298
301
  }
299
- declare function Progress({ value, max, variant, style }: ProgressProps): React.JSX.Element;
302
+ declare function Progress({ value, max, variant, style, accessibilityLabel }: ProgressProps): React.JSX.Element;
300
303
 
301
304
  interface EmptyStateProps {
302
305
  icon?: React.ReactNode;
@@ -338,7 +341,7 @@ interface TextareaProps extends TextInputProps {
338
341
  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
339
342
  containerStyle?: ViewStyle;
340
343
  }
341
- declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
344
+ declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, accessibilityLabel, ...props }: TextareaProps): React.JSX.Element;
342
345
 
343
346
  interface CheckboxProps {
344
347
  checked?: boolean;
@@ -346,16 +349,18 @@ interface CheckboxProps {
346
349
  label?: string;
347
350
  disabled?: boolean;
348
351
  style?: ViewStyle;
352
+ accessibilityLabel?: string;
349
353
  }
350
- declare function Checkbox({ checked, onCheckedChange, label, disabled, style, }: CheckboxProps): React.JSX.Element;
354
+ declare function Checkbox({ checked, onCheckedChange, label, disabled, style, accessibilityLabel, }: CheckboxProps): React.JSX.Element;
351
355
 
352
356
  interface SwitchProps {
353
357
  checked?: boolean;
354
358
  onCheckedChange?: (checked: boolean) => void;
355
359
  disabled?: boolean;
356
360
  style?: ViewStyle;
361
+ accessibilityLabel?: string;
357
362
  }
358
- declare function Switch({ checked, onCheckedChange, disabled, style }: SwitchProps): React.JSX.Element;
363
+ declare function Switch({ checked, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps): React.JSX.Element;
359
364
 
360
365
  type ToggleVariant = 'default' | 'outline';
361
366
  type ToggleSize = 'sm' | 'md' | 'lg';
@@ -384,7 +389,7 @@ interface ToggleProps extends TouchableOpacityProps {
384
389
  /** Override the resolved active icon color. Defaults to `primary`. */
385
390
  activeIconColor?: string;
386
391
  }
387
- declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, ...props }: ToggleProps): React.JSX.Element;
392
+ declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, accessibilityLabel, ...props }: ToggleProps): React.JSX.Element;
388
393
 
389
394
  interface RadioOption {
390
395
  label: string;
@@ -397,8 +402,9 @@ interface RadioGroupProps {
397
402
  onValueChange?: (value: string) => void;
398
403
  orientation?: 'vertical' | 'horizontal';
399
404
  style?: ViewStyle;
405
+ accessibilityLabel?: string;
400
406
  }
401
- declare function RadioGroup({ options, value, onValueChange, orientation, style, }: RadioGroupProps): React.JSX.Element;
407
+ declare function RadioGroup({ options, value, onValueChange, orientation, style, accessibilityLabel, }: RadioGroupProps): React.JSX.Element;
402
408
 
403
409
  interface TabItem {
404
410
  label: string;
@@ -533,8 +539,9 @@ interface SelectProps {
533
539
  error?: string;
534
540
  disabled?: boolean;
535
541
  style?: ViewStyle;
542
+ accessibilityLabel?: string;
536
543
  }
537
- declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
544
+ declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, accessibilityLabel, }: SelectProps): React.JSX.Element;
538
545
 
539
546
  declare function useToast(): {
540
547
  toast: ((message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
@@ -673,8 +680,10 @@ interface ListItemProps {
673
680
  subtitleStyle?: TextStyle;
674
681
  /** Style applied to the caption Text. */
675
682
  captionStyle?: TextStyle;
683
+ /** Accessibility label override. Defaults to the title. */
684
+ accessibilityLabel?: string;
676
685
  }
677
- 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;
686
+ 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;
678
687
 
679
688
  type MenuItemVariant = 'plain' | 'card';
680
689
  interface MenuItemProps {
@@ -714,8 +723,10 @@ interface MenuItemProps {
714
723
  style?: ViewStyle;
715
724
  /** Style applied to the label Text. */
716
725
  labelStyle?: TextStyle;
726
+ /** Accessibility label override. Defaults to label. */
727
+ accessibilityLabel?: string;
717
728
  }
718
- declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
729
+ declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, accessibilityLabel, }: MenuItemProps): React.JSX.Element;
719
730
 
720
731
  interface ChipProps {
721
732
  label: string;
@@ -726,6 +737,7 @@ interface ChipProps {
726
737
  /** Icon name from @expo/vector-icons resolved automatically. */
727
738
  iconName?: string;
728
739
  style?: ViewStyle;
740
+ accessibilityLabel?: string;
729
741
  }
730
742
  interface ChipOption {
731
743
  label: string;
@@ -744,7 +756,7 @@ interface ChipGroupProps {
744
756
  multiSelect?: boolean;
745
757
  style?: ViewStyle;
746
758
  }
747
- declare function Chip({ label, selected, onPress, icon, iconName, style }: ChipProps): React.JSX.Element;
759
+ declare function Chip({ label, selected, onPress, icon, iconName, style, accessibilityLabel }: ChipProps): React.JSX.Element;
748
760
  declare function ChipGroup({ options, value, onValueChange, multiSelect, style }: ChipGroupProps): React.JSX.Element;
749
761
 
750
762
  interface ConfirmDialogProps {
@@ -815,8 +827,10 @@ interface MediaCardProps {
815
827
  imageStyle?: ViewStyle;
816
828
  /** Additional content rendered below caption. */
817
829
  footer?: React.ReactNode;
830
+ /** Accessibility label override. Defaults to title (and subtitle if present). */
831
+ accessibilityLabel?: string;
818
832
  }
819
- declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
833
+ declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, accessibilityLabel, }: MediaCardProps): React.JSX.Element;
820
834
 
821
835
  interface CategoryItem {
822
836
  label: string;
@@ -836,8 +850,9 @@ interface CategoryStripProps {
836
850
  style?: ViewStyle;
837
851
  /** Style applied to each pill item. */
838
852
  itemStyle?: ViewStyle;
853
+ accessibilityLabel?: string;
839
854
  }
840
- declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
855
+ declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, accessibilityLabel, }: CategoryStripProps): React.JSX.Element;
841
856
 
842
857
  interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
843
858
  /** Children content to render inside the pressable. */
@@ -846,7 +861,10 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
846
861
  onPress?: () => void;
847
862
  /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
848
863
  pressScale?: number;
849
- /** Bounciness of the spring animation on release. Defaults to `4`. */
864
+ /**
865
+ * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
866
+ * Kept for backwards compatibility with v6.x consumers.
867
+ */
850
868
  bounciness?: number;
851
869
  /** Enable haptic feedback on press. Defaults to `true`. */
852
870
  haptics?: boolean;
@@ -858,10 +876,13 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
858
876
  hoverScale?: number;
859
877
  }
860
878
  /**
861
- * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
862
- * Use for custom pressable content that needs consistent press feel.
879
+ * Generic pressable with a calibrated spring bounce Apple HIG / Airbnb feel.
880
+ * All animation runs on the UI thread via Reanimated v4 worklets.
881
+ *
882
+ * Use this for any custom pressable surface that needs consistent press feel
883
+ * (cards, list rows, image tiles, etc).
863
884
  */
864
- declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
885
+ declare function Pressable({ children, onPress, pressScale, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
865
886
 
866
887
  type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
867
888
  type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';