@retray-dev/ui-kit 5.2.0 → 6.0.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 +500 -140
- package/EXAMPLES.md +666 -0
- package/README.md +3 -3
- package/dist/index.d.mts +253 -49
- package/dist/index.d.ts +253 -49
- package/dist/index.js +955 -610
- package/dist/index.mjs +886 -552
- package/package.json +9 -3
- package/src/components/Accordion/Accordion.tsx +31 -4
- package/src/components/AlertBanner/AlertBanner.tsx +16 -33
- package/src/components/Avatar/Avatar.tsx +21 -7
- package/src/components/Button/Button.tsx +34 -13
- package/src/components/ButtonGroup/ButtonGroup.tsx +60 -0
- package/src/components/ButtonGroup/index.ts +1 -0
- package/src/components/Card/Card.tsx +12 -9
- package/src/components/Chip/Chip.tsx +8 -1
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +4 -4
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +38 -5
- package/src/components/DetailRow/DetailRow.tsx +140 -0
- package/src/components/DetailRow/index.ts +1 -0
- package/src/components/EmptyState/EmptyState.tsx +21 -6
- package/src/components/Input/Input.tsx +21 -10
- package/src/components/LabelValue/LabelValue.tsx +25 -4
- package/src/components/ListItem/ListItem.tsx +14 -8
- package/src/components/MediaCard/MediaCard.tsx +1 -0
- package/src/components/MenuItem/MenuItem.tsx +206 -0
- package/src/components/MenuItem/index.ts +2 -0
- package/src/components/MonthPicker/MonthPicker.tsx +18 -6
- package/src/components/Select/Select.tsx +1 -1
- package/src/components/Separator/Separator.tsx +2 -0
- package/src/components/Sheet/Sheet.tsx +165 -36
- package/src/components/Sheet/index.ts +1 -1
- package/src/components/Tabs/Tabs.tsx +4 -4
- package/src/components/Textarea/Textarea.tsx +66 -29
- package/src/components/Toast/Toast.tsx +41 -267
- package/src/components/Toast/index.ts +1 -2
- package/src/components/Toggle/Toggle.tsx +2 -2
- package/src/index.ts +6 -0
- package/src/theme/colors.ts +3 -0
- package/src/theme/types.ts +11 -0
- package/src/tokens.ts +4 -4
- package/src/utils/typography.ts +24 -0
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, TextStyle,
|
|
3
|
-
|
|
2
|
+
import { TouchableOpacityProps, ViewStyle, TextProps as TextProps$1, TextInputProps, TextStyle, ActivityIndicatorProps, ImageSourcePropType } from 'react-native';
|
|
3
|
+
import * as sonner_native from 'sonner-native';
|
|
4
|
+
export { toast } from 'sonner-native';
|
|
5
|
+
export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
|
|
4
6
|
|
|
5
7
|
type ThemeColors = {
|
|
6
8
|
background: string;
|
|
@@ -15,6 +17,12 @@ type ThemeColors = {
|
|
|
15
17
|
successForeground: string;
|
|
16
18
|
warning: string;
|
|
17
19
|
warningForeground: string;
|
|
20
|
+
/** Backdrop/overlay color. Default: 'rgba(0,0,0,0.45)' */
|
|
21
|
+
overlay?: string;
|
|
22
|
+
/** Color accent (e.g. Airbnb coral). Default: same as primary */
|
|
23
|
+
accent?: string;
|
|
24
|
+
/** Text color on accent background. Default: same as primaryForeground */
|
|
25
|
+
accentForeground?: string;
|
|
18
26
|
};
|
|
19
27
|
type ResolvedColors = ThemeColors & {
|
|
20
28
|
foregroundSubtle: string;
|
|
@@ -27,6 +35,9 @@ type ResolvedColors = ThemeColors & {
|
|
|
27
35
|
successBorder: string;
|
|
28
36
|
warningTint: string;
|
|
29
37
|
warningBorder: string;
|
|
38
|
+
overlay: string;
|
|
39
|
+
accentResolved: string;
|
|
40
|
+
accentForegroundResolved: string;
|
|
30
41
|
ring: string;
|
|
31
42
|
input: string;
|
|
32
43
|
};
|
|
@@ -74,6 +85,7 @@ interface ButtonProps extends TouchableOpacityProps {
|
|
|
74
85
|
label: string;
|
|
75
86
|
size: ButtonSize;
|
|
76
87
|
variant: ButtonVariant;
|
|
88
|
+
color: string;
|
|
77
89
|
}) => React.ReactNode);
|
|
78
90
|
iconName?: string;
|
|
79
91
|
iconColor?: string;
|
|
@@ -81,6 +93,28 @@ interface ButtonProps extends TouchableOpacityProps {
|
|
|
81
93
|
}
|
|
82
94
|
declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
|
|
83
95
|
|
|
96
|
+
interface ButtonGroupProps {
|
|
97
|
+
children: React.ReactNode;
|
|
98
|
+
/** Spacing between buttons. Defaults to 12px. */
|
|
99
|
+
gap?: number;
|
|
100
|
+
/** Stack buttons vertically instead of horizontally. */
|
|
101
|
+
vertical?: boolean;
|
|
102
|
+
style?: ViewStyle;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Container that auto-distributes space equally among Button children.
|
|
106
|
+
* Each child gets `flex: 1` — perfect for side-by-side CTAs.
|
|
107
|
+
*
|
|
108
|
+
* @example
|
|
109
|
+
* ```tsx
|
|
110
|
+
* <ButtonGroup>
|
|
111
|
+
* <Button label="Cancel" variant="secondary" onPress={...} />
|
|
112
|
+
* <Button label="Confirm" onPress={...} />
|
|
113
|
+
* </ButtonGroup>
|
|
114
|
+
* ```
|
|
115
|
+
*/
|
|
116
|
+
declare function ButtonGroup({ children, gap, vertical, style }: ButtonGroupProps): React.JSX.Element;
|
|
117
|
+
|
|
84
118
|
type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive';
|
|
85
119
|
type IconButtonSize = 'sm' | 'md' | 'lg';
|
|
86
120
|
interface IconButtonProps extends TouchableOpacityProps {
|
|
@@ -111,6 +145,8 @@ interface InputProps extends TextInputProps {
|
|
|
111
145
|
error?: string;
|
|
112
146
|
/** Helper text shown below the input when there is no error. */
|
|
113
147
|
hint?: string;
|
|
148
|
+
/** Disabled visual state — dimmed appearance, not editable. Also sets `editable={false}`. */
|
|
149
|
+
disabled?: boolean;
|
|
114
150
|
/** Text or component rendered before the input text. */
|
|
115
151
|
prefix?: React.ReactNode;
|
|
116
152
|
/** Text or component rendered after the input text. */
|
|
@@ -140,7 +176,7 @@ interface InputProps extends TextInputProps {
|
|
|
140
176
|
/** Style for the inner border wrapper (overrides padding, etc). */
|
|
141
177
|
inputWrapperStyle?: ViewStyle;
|
|
142
178
|
}
|
|
143
|
-
declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...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, ...props }: InputProps): React.JSX.Element;
|
|
144
180
|
|
|
145
181
|
type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
|
|
146
182
|
type BadgeSize = 'sm' | 'md' | 'lg';
|
|
@@ -229,14 +265,17 @@ declare function Skeleton({ width, height, borderRadius, preset, diameter, style
|
|
|
229
265
|
type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
230
266
|
type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
231
267
|
interface AvatarProps {
|
|
232
|
-
src?: string;
|
|
268
|
+
src?: string | null;
|
|
269
|
+
/** Manual initials (max 2 chars). */
|
|
233
270
|
fallback?: string;
|
|
234
|
-
|
|
271
|
+
/** Full name — extracts up to 2 initials (e.g. "Julian Cruz" → "JC"). */
|
|
272
|
+
fallbackText?: string;
|
|
273
|
+
size?: AvatarSize | number;
|
|
235
274
|
/** Optional status indicator dot — bottom-right corner. */
|
|
236
275
|
status?: AvatarStatus;
|
|
237
276
|
style?: ViewStyle;
|
|
238
277
|
}
|
|
239
|
-
declare function Avatar({ src, fallback, size, status, style }: AvatarProps): React.JSX.Element;
|
|
278
|
+
declare function Avatar({ src, fallback, fallbackText, size, status, style }: AvatarProps): React.JSX.Element;
|
|
240
279
|
|
|
241
280
|
type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning';
|
|
242
281
|
interface AlertBannerProps {
|
|
@@ -270,12 +309,17 @@ interface EmptyStateProps {
|
|
|
270
309
|
iconColor?: string;
|
|
271
310
|
title: string;
|
|
272
311
|
description?: string;
|
|
312
|
+
/** Custom action node. Use `actionLabel` + `onAction` for a pre-built primary Button. */
|
|
273
313
|
action?: React.ReactNode;
|
|
314
|
+
/** Label for a convenience primary Button rendered below description. Ignored in compact size. */
|
|
315
|
+
actionLabel?: string;
|
|
316
|
+
/** Called when the convenience action Button is pressed. Required when `actionLabel` is set. */
|
|
317
|
+
onAction?: () => void;
|
|
274
318
|
/** `compact` hides description/action and uses tighter spacing and a smaller icon. */
|
|
275
319
|
size?: 'default' | 'compact';
|
|
276
320
|
style?: ViewStyle;
|
|
277
321
|
}
|
|
278
|
-
declare function EmptyState({ icon, iconName, iconColor, title, description, action, size, style }: EmptyStateProps): React.JSX.Element;
|
|
322
|
+
declare function EmptyState({ icon, iconName, iconColor, title, description, action, actionLabel, onAction, size, style }: EmptyStateProps): React.JSX.Element;
|
|
279
323
|
|
|
280
324
|
interface TextareaProps extends TextInputProps {
|
|
281
325
|
label?: string;
|
|
@@ -285,10 +329,16 @@ interface TextareaProps extends TextInputProps {
|
|
|
285
329
|
hint?: string;
|
|
286
330
|
/** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
|
|
287
331
|
rows?: number;
|
|
332
|
+
/** Icon name from @expo/vector-icons rendered inside top-left corner. */
|
|
333
|
+
prefixIcon?: string;
|
|
334
|
+
/** Custom icon node rendered top-left. */
|
|
335
|
+
prefixIconNode?: React.ReactNode;
|
|
336
|
+
/** Override prefix icon color. Defaults to foregroundMuted. */
|
|
337
|
+
prefixIconColor?: string;
|
|
288
338
|
/** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
|
|
289
339
|
containerStyle?: ViewStyle;
|
|
290
340
|
}
|
|
291
|
-
declare function Textarea({ label, error, hint, rows, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
|
|
341
|
+
declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
|
|
292
342
|
|
|
293
343
|
interface CheckboxProps {
|
|
294
344
|
checked?: boolean;
|
|
@@ -377,6 +427,12 @@ interface AccordionItem {
|
|
|
377
427
|
value: string;
|
|
378
428
|
trigger: string;
|
|
379
429
|
content: React.ReactNode;
|
|
430
|
+
/** Icon name from @expo/vector-icons rendered left of trigger. */
|
|
431
|
+
iconName?: string;
|
|
432
|
+
/** Custom icon node rendered left of trigger. */
|
|
433
|
+
icon?: React.ReactNode;
|
|
434
|
+
/** Override icon color. Defaults to foregroundMuted. */
|
|
435
|
+
iconColor?: string;
|
|
380
436
|
}
|
|
381
437
|
interface AccordionProps {
|
|
382
438
|
items: AccordionItem[];
|
|
@@ -411,16 +467,57 @@ interface SheetProps {
|
|
|
411
467
|
open: boolean;
|
|
412
468
|
onClose: () => void;
|
|
413
469
|
title?: string;
|
|
470
|
+
/** Secondary text below title. */
|
|
471
|
+
subtitle?: string;
|
|
472
|
+
/** @deprecated Use `subtitle` instead. */
|
|
414
473
|
description?: string;
|
|
474
|
+
/** Show an X close button in the header. */
|
|
475
|
+
showCloseButton?: boolean;
|
|
415
476
|
children?: React.ReactNode;
|
|
416
477
|
/** Style for the inner content container. */
|
|
417
478
|
style?: ViewStyle;
|
|
418
|
-
/**
|
|
479
|
+
/** Style for the content wrapper (outside the scroll container). */
|
|
480
|
+
contentStyle?: ViewStyle;
|
|
481
|
+
/** Render children inside BottomSheetScrollView. */
|
|
419
482
|
scrollable?: boolean;
|
|
420
483
|
/** Cap sheet height (dp). Children scroll when content exceeds this value. */
|
|
421
484
|
maxHeight?: number;
|
|
485
|
+
/**
|
|
486
|
+
* Keyboard behavior — how the sheet responds to keyboard appearance.
|
|
487
|
+
* - 'interactive': offset sheet by keyboard size (default, works on both platforms)
|
|
488
|
+
* - 'fillParent': extend sheet to fill parent view (can cause restore issues with dynamic sizing)
|
|
489
|
+
* - 'extend': extend sheet to maximum snap point
|
|
490
|
+
*
|
|
491
|
+
* Default: 'interactive' on both platforms.
|
|
492
|
+
*/
|
|
493
|
+
keyboardBehavior?: 'extend' | 'fillParent' | 'interactive';
|
|
494
|
+
/**
|
|
495
|
+
* Keyboard blur behavior — what happens when keyboard dismisses.
|
|
496
|
+
* - 'none': do nothing
|
|
497
|
+
* - 'restore': restore sheet to previous position (default)
|
|
498
|
+
*/
|
|
499
|
+
keyboardBlurBehavior?: 'none' | 'restore';
|
|
500
|
+
/**
|
|
501
|
+
* Blur keyboard when user starts dragging the sheet down.
|
|
502
|
+
* Default: true (recommended for better UX)
|
|
503
|
+
*/
|
|
504
|
+
enableBlurKeyboardOnGesture?: boolean;
|
|
505
|
+
/**
|
|
506
|
+
* Android-only: defines keyboard input mode.
|
|
507
|
+
* - 'adjustPan': pan the sheet content (default, fixes restore issues with dynamic sizing)
|
|
508
|
+
* - 'adjustResize': resize the sheet container (can cause transparent gap on dismiss)
|
|
509
|
+
*/
|
|
510
|
+
android_keyboardInputMode?: 'adjustPan' | 'adjustResize';
|
|
511
|
+
/** Sticky footer rendered below the scroll area. */
|
|
512
|
+
footer?: React.ReactNode;
|
|
513
|
+
/**
|
|
514
|
+
* Array of snap points for the sheet (e.g., ['50%', '85%'] or [200, 500]).
|
|
515
|
+
* When provided, disables enableDynamicSizing.
|
|
516
|
+
* When omitted, sheet uses dynamic sizing (auto-fits content).
|
|
517
|
+
*/
|
|
518
|
+
snapPoints?: (string | number)[];
|
|
422
519
|
}
|
|
423
|
-
declare function Sheet({ open, onClose, title, description, children, style, scrollable, maxHeight, }: SheetProps): React.JSX.Element;
|
|
520
|
+
declare function Sheet({ open, onClose, title, subtitle, description, showCloseButton, children, style, contentStyle, scrollable, maxHeight, keyboardBehavior, keyboardBlurBehavior, enableBlurKeyboardOnGesture, android_keyboardInputMode, footer, snapPoints, }: SheetProps): React.JSX.Element;
|
|
424
521
|
|
|
425
522
|
interface SelectOption {
|
|
426
523
|
label: string;
|
|
@@ -439,38 +536,47 @@ interface SelectProps {
|
|
|
439
536
|
}
|
|
440
537
|
declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
|
|
441
538
|
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
539
|
+
declare function useToast(): {
|
|
540
|
+
toast: ((message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
|
|
541
|
+
id?: string | number;
|
|
542
|
+
}) => string | number) & {
|
|
543
|
+
success: (message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
|
|
544
|
+
id?: string | number;
|
|
545
|
+
}) => string | number;
|
|
546
|
+
info: (message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
|
|
547
|
+
id?: string | number;
|
|
548
|
+
}) => string | number;
|
|
549
|
+
error: (message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
|
|
550
|
+
id?: string | number;
|
|
551
|
+
}) => string | number;
|
|
552
|
+
warning: (message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
|
|
553
|
+
id?: string | number;
|
|
554
|
+
}) => string | number;
|
|
555
|
+
custom: (jsx: React.ReactElement, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
|
|
556
|
+
id?: string | number;
|
|
557
|
+
}) => string | number;
|
|
558
|
+
promise: <T>(promise: Promise<T>, options: Omit<{
|
|
559
|
+
promise: Promise<unknown>;
|
|
560
|
+
success: (result: any) => string;
|
|
561
|
+
error: ((error: unknown) => string) | string;
|
|
562
|
+
loading: string;
|
|
563
|
+
styles?: {
|
|
564
|
+
loading?: sonner_native.ToastStyles;
|
|
565
|
+
success?: sonner_native.ToastStyles;
|
|
566
|
+
error?: sonner_native.ToastStyles;
|
|
567
|
+
};
|
|
568
|
+
}, "promise">) => string | number;
|
|
569
|
+
loading: (message: string, data?: Omit<sonner_native.ToastProps, "title" | "type" | "variant" | "id" | "jsx" | "promise"> & {
|
|
570
|
+
id?: string | number;
|
|
571
|
+
}) => string | number;
|
|
572
|
+
dismiss: (id?: string | number) => string | number | undefined;
|
|
573
|
+
wiggle: (id: string | number) => void;
|
|
574
|
+
};
|
|
575
|
+
dismiss: (id?: string | number) => string | number | undefined;
|
|
576
|
+
};
|
|
577
|
+
declare function ToastProvider({ children }: {
|
|
471
578
|
children: React.ReactNode;
|
|
472
|
-
}
|
|
473
|
-
declare function ToastProvider({ children }: ToastProviderProps): React.JSX.Element;
|
|
579
|
+
}): React.JSX.Element;
|
|
474
580
|
|
|
475
581
|
interface CurrencyInputProps {
|
|
476
582
|
value?: string;
|
|
@@ -494,6 +600,7 @@ interface CurrencyInputProps {
|
|
|
494
600
|
}
|
|
495
601
|
declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
|
|
496
602
|
|
|
603
|
+
type CurrencyDisplayVariant = 'hero' | 'large' | 'medium' | 'small';
|
|
497
604
|
interface CurrencyDisplayProps {
|
|
498
605
|
value: number | string;
|
|
499
606
|
/** Symbol prepended to the formatted value. Defaults to `'$'`. */
|
|
@@ -502,9 +609,15 @@ interface CurrencyDisplayProps {
|
|
|
502
609
|
showDecimals?: boolean;
|
|
503
610
|
/** Override the color of the formatted text. Defaults to the `foreground` theme token. */
|
|
504
611
|
textColor?: string;
|
|
612
|
+
/** Predefined size variant. Overrides the default 56px size. */
|
|
613
|
+
variant?: CurrencyDisplayVariant;
|
|
614
|
+
/** Enable adjustsFontSizeToFit so long values shrink to fit in one line. */
|
|
615
|
+
autoScale?: boolean;
|
|
616
|
+
/** Maximum font size when autoScale is true (defaults to variant size or 56px). */
|
|
617
|
+
maxFontSize?: number;
|
|
505
618
|
style?: ViewStyle;
|
|
506
619
|
}
|
|
507
|
-
declare function CurrencyDisplay({ value, prefix, showDecimals, textColor, style }: CurrencyDisplayProps): React.JSX.Element;
|
|
620
|
+
declare function CurrencyDisplay({ value, prefix, showDecimals, textColor, variant, autoScale, maxFontSize, style }: CurrencyDisplayProps): React.JSX.Element;
|
|
508
621
|
|
|
509
622
|
type ListItemVariant = 'plain' | 'card';
|
|
510
623
|
interface ListItemProps {
|
|
@@ -563,6 +676,45 @@ interface ListItemProps {
|
|
|
563
676
|
}
|
|
564
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;
|
|
565
678
|
|
|
679
|
+
type MenuItemVariant = 'plain' | 'card';
|
|
680
|
+
interface MenuItemProps {
|
|
681
|
+
label: string;
|
|
682
|
+
/**
|
|
683
|
+
* Icon name from `@expo/vector-icons` rendered on the left.
|
|
684
|
+
* See https://icons.expo.fyi.
|
|
685
|
+
*/
|
|
686
|
+
iconName?: string;
|
|
687
|
+
/** Custom icon node rendered on the left. */
|
|
688
|
+
icon?: React.ReactNode;
|
|
689
|
+
/** Override icon color. Defaults to `foreground`. */
|
|
690
|
+
iconColor?: string;
|
|
691
|
+
/**
|
|
692
|
+
* Custom content rendered on the right.
|
|
693
|
+
* When provided, replaces the default chevron.
|
|
694
|
+
* Use for checkboxes, switches, badges, or other controls.
|
|
695
|
+
*/
|
|
696
|
+
rightRender?: React.ReactNode;
|
|
697
|
+
/**
|
|
698
|
+
* Show chevron on the right. Defaults to `true`.
|
|
699
|
+
* Ignored when `rightRender` is provided.
|
|
700
|
+
*/
|
|
701
|
+
showChevron?: boolean;
|
|
702
|
+
onPress: () => void;
|
|
703
|
+
disabled?: boolean;
|
|
704
|
+
/**
|
|
705
|
+
* - `plain` (default): no background — sits inside a parent surface.
|
|
706
|
+
* - `card`: standalone surface with background + border.
|
|
707
|
+
*/
|
|
708
|
+
variant?: MenuItemVariant;
|
|
709
|
+
/** Visual separator line at the bottom. */
|
|
710
|
+
showSeparator?: boolean;
|
|
711
|
+
/** Style applied to the outer container. */
|
|
712
|
+
style?: ViewStyle;
|
|
713
|
+
/** Style applied to the label Text. */
|
|
714
|
+
labelStyle?: TextStyle;
|
|
715
|
+
}
|
|
716
|
+
declare function MenuItem({ label, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
|
|
717
|
+
|
|
566
718
|
interface ChipProps {
|
|
567
719
|
label: string;
|
|
568
720
|
selected?: boolean;
|
|
@@ -576,6 +728,11 @@ interface ChipProps {
|
|
|
576
728
|
interface ChipOption {
|
|
577
729
|
label: string;
|
|
578
730
|
value: string | number;
|
|
731
|
+
/** Icon name resolved via renderIcon (Feather, AntDesign, etc.). */
|
|
732
|
+
iconName?: string;
|
|
733
|
+
/** Icon tint color override. */
|
|
734
|
+
iconColor?: string;
|
|
735
|
+
disabled?: boolean;
|
|
579
736
|
}
|
|
580
737
|
interface ChipGroupProps {
|
|
581
738
|
options: ChipOption[];
|
|
@@ -603,9 +760,13 @@ declare function ConfirmDialog({ visible, title, description, confirmLabel, canc
|
|
|
603
760
|
interface LabelValueProps {
|
|
604
761
|
label: string;
|
|
605
762
|
value: string | React.ReactNode;
|
|
763
|
+
/** Icon name from @expo/vector-icons rendered left of label. */
|
|
764
|
+
iconName?: string;
|
|
765
|
+
/** Override icon color. Defaults to foregroundMuted. */
|
|
766
|
+
iconColor?: string;
|
|
606
767
|
style?: ViewStyle;
|
|
607
768
|
}
|
|
608
|
-
declare function LabelValue({ label, value, style }: LabelValueProps): React.JSX.Element;
|
|
769
|
+
declare function LabelValue({ label, value, iconName, iconColor, style }: LabelValueProps): React.JSX.Element;
|
|
609
770
|
|
|
610
771
|
interface MonthPickerValue {
|
|
611
772
|
/** Month number 1–12 */
|
|
@@ -615,9 +776,13 @@ interface MonthPickerValue {
|
|
|
615
776
|
interface MonthPickerProps {
|
|
616
777
|
value: MonthPickerValue;
|
|
617
778
|
onChange: (value: MonthPickerValue) => void;
|
|
779
|
+
/** BCP 47 locale tag. Built-in: 'en' | 'es' | 'pt' | 'fr'. For other locales supply formatLabel. */
|
|
780
|
+
locale?: string;
|
|
781
|
+
/** Custom label formatter. Takes precedence over locale. */
|
|
782
|
+
formatLabel?: (value: MonthPickerValue) => string;
|
|
618
783
|
style?: ViewStyle;
|
|
619
784
|
}
|
|
620
|
-
declare function MonthPicker({ value, onChange, style }: MonthPickerProps): React.JSX.Element;
|
|
785
|
+
declare function MonthPicker({ value, onChange, locale, formatLabel, style }: MonthPickerProps): React.JSX.Element;
|
|
621
786
|
|
|
622
787
|
type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2';
|
|
623
788
|
interface MediaCardProps {
|
|
@@ -696,6 +861,32 @@ interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
|
|
|
696
861
|
*/
|
|
697
862
|
declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
|
|
698
863
|
|
|
864
|
+
type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
|
|
865
|
+
type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
|
|
866
|
+
interface DetailRowProps {
|
|
867
|
+
label: React.ReactNode;
|
|
868
|
+
value: string;
|
|
869
|
+
/** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
|
|
870
|
+
separator?: DetailRowSeparator;
|
|
871
|
+
labelWeight?: DetailRowLabelWeight;
|
|
872
|
+
/** Semantic color key or hex string for value text. */
|
|
873
|
+
valueColor?: string;
|
|
874
|
+
/** Node rendered left of the label (e.g. Avatar, Icon). */
|
|
875
|
+
leftIcon?: React.ReactNode;
|
|
876
|
+
/** Icon name from @expo/vector-icons rendered left of label. Takes precedence over leftIcon. */
|
|
877
|
+
leftIconName?: string;
|
|
878
|
+
/** Override left icon color. Defaults to foregroundMuted. */
|
|
879
|
+
leftIconColor?: string;
|
|
880
|
+
/** Icon name from @expo/vector-icons rendered right of value. */
|
|
881
|
+
rightIconName?: string;
|
|
882
|
+
/** Override right icon color. Defaults to foregroundMuted. */
|
|
883
|
+
rightIconColor?: string;
|
|
884
|
+
style?: ViewStyle;
|
|
885
|
+
labelStyle?: TextStyle;
|
|
886
|
+
valueStyle?: TextStyle;
|
|
887
|
+
}
|
|
888
|
+
declare function DetailRow({ label, value, separator, labelWeight, valueColor, leftIcon, leftIconName, leftIconColor, rightIconName, rightIconColor, style, labelStyle, valueStyle, }: DetailRowProps): React.JSX.Element;
|
|
889
|
+
|
|
699
890
|
type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
|
|
700
891
|
interface IconProps {
|
|
701
892
|
/** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
|
|
@@ -708,6 +899,19 @@ interface IconProps {
|
|
|
708
899
|
declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
|
|
709
900
|
declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
|
|
710
901
|
|
|
902
|
+
/**
|
|
903
|
+
* Returns a font size that steps down as formatted text grows longer.
|
|
904
|
+
* Designed for currency/numeric displays where long values overflow.
|
|
905
|
+
*
|
|
906
|
+
* @param text - The formatted string (e.g. "$1.250.000")
|
|
907
|
+
* @param maxSize - Base (maximum) font size in points
|
|
908
|
+
* @param steps - Custom step config [{ maxLen, subtract }] — sorted ascending by maxLen
|
|
909
|
+
*/
|
|
910
|
+
declare function getResponsiveFontSize(text: string, maxSize: number, steps?: {
|
|
911
|
+
maxLen: number;
|
|
912
|
+
subtract: number;
|
|
913
|
+
}[]): number;
|
|
914
|
+
|
|
711
915
|
declare const SPACING: {
|
|
712
916
|
readonly xxs: 2;
|
|
713
917
|
readonly xs: 4;
|
|
@@ -874,17 +1078,17 @@ declare const TYPOGRAPHY: {
|
|
|
874
1078
|
};
|
|
875
1079
|
readonly 'uppercase-tag': {
|
|
876
1080
|
readonly fontFamily: "Poppins-Bold";
|
|
877
|
-
readonly fontSize:
|
|
1081
|
+
readonly fontSize: 10;
|
|
878
1082
|
readonly fontWeight: "700";
|
|
879
|
-
readonly lineHeight:
|
|
880
|
-
readonly letterSpacing: 0.
|
|
1083
|
+
readonly lineHeight: 13;
|
|
1084
|
+
readonly letterSpacing: 0.8;
|
|
881
1085
|
readonly textTransform: "uppercase";
|
|
882
1086
|
};
|
|
883
1087
|
readonly 'button-lg': {
|
|
884
1088
|
readonly fontFamily: "Poppins-Medium";
|
|
885
1089
|
readonly fontSize: 16;
|
|
886
1090
|
readonly fontWeight: "500";
|
|
887
|
-
readonly lineHeight:
|
|
1091
|
+
readonly lineHeight: 22;
|
|
888
1092
|
readonly letterSpacing: 0;
|
|
889
1093
|
};
|
|
890
1094
|
readonly 'button-sm': {
|
|
@@ -904,4 +1108,4 @@ type RadiusKey = keyof Radius;
|
|
|
904
1108
|
type Typography = typeof TYPOGRAPHY;
|
|
905
1109
|
type TypographyKey = keyof Typography;
|
|
906
1110
|
|
|
907
|
-
export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type CategoryItem, CategoryStrip, type CategoryStripProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MediaCard, type MediaCardAspectRatio, type MediaCardProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Pressable, type PressableProps, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, type ResolvedColors, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, TYPOGRAPHY, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps,
|
|
1111
|
+
export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, Badge, type BadgeProps, type BadgeVariant, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type CategoryItem, CategoryStrip, type CategoryStripProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, type CurrencyDisplayVariant, CurrencyInput, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, DetailRow, type DetailRowLabelWeight, type DetailRowProps, type DetailRowSeparator, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MediaCard, type MediaCardAspectRatio, type MediaCardProps, MenuItem, type MenuItemProps, type MenuItemVariant, MonthPicker, type MonthPickerProps, type MonthPickerValue, Pressable, type PressableProps, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, type ResolvedColors, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, TYPOGRAPHY, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, ToastProvider, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, type Typography, type TypographyKey, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, renderIcon, useTheme, useToast };
|