@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.
- package/COMPONENTS.md +4 -4
- package/dist/index.d.mts +42 -21
- package/dist/index.d.ts +42 -21
- package/dist/index.js +679 -628
- package/dist/index.mjs +672 -621
- package/package.json +1 -1
- package/src/components/Accordion/Accordion.tsx +10 -12
- package/src/components/Button/Button.tsx +20 -18
- package/src/components/Card/Card.tsx +21 -33
- package/src/components/CategoryStrip/CategoryStrip.tsx +45 -38
- package/src/components/Checkbox/Checkbox.tsx +31 -50
- package/src/components/Chip/Chip.tsx +34 -71
- package/src/components/IconButton/IconButton.tsx +20 -18
- package/src/components/Input/Input.tsx +39 -22
- package/src/components/ListItem/ListItem.tsx +22 -34
- package/src/components/MediaCard/MediaCard.tsx +24 -24
- package/src/components/MenuItem/MenuItem.tsx +22 -31
- package/src/components/MonthPicker/MonthPicker.tsx +12 -2
- package/src/components/Pressable/Pressable.tsx +27 -46
- package/src/components/Progress/Progress.tsx +21 -12
- package/src/components/RadioGroup/RadioGroup.tsx +52 -26
- package/src/components/Select/Select.tsx +17 -15
- package/src/components/Sheet/Sheet.tsx +4 -1
- package/src/components/Skeleton/Skeleton.tsx +24 -13
- package/src/components/Slider/Slider.tsx +11 -1
- package/src/components/Switch/Switch.tsx +44 -49
- package/src/components/Tabs/Tabs.tsx +39 -31
- package/src/components/Textarea/Textarea.tsx +29 -12
- package/src/components/Toggle/Toggle.tsx +39 -45
- package/src/utils/animations.ts +58 -0
- package/src/utils/useColorTransition.ts +40 -0
- package/src/utils/usePressScale.ts +73 -0
package/COMPONENTS.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @retray-dev/ui-kit — Component Reference (v6.
|
|
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:** `
|
|
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
|
|
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.
|
|
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
|
-
/**
|
|
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
|
|
862
|
-
*
|
|
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,
|
|
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.
|
|
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
|
-
/**
|
|
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
|
|
862
|
-
*
|
|
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,
|
|
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';
|