@retray-dev/ui-kit 3.1.0 → 5.1.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 +1792 -659
- package/README.md +8 -7
- package/dist/index.d.mts +269 -89
- package/dist/index.d.ts +269 -89
- package/dist/index.js +1034 -312
- package/dist/index.mjs +1031 -314
- package/package.json +3 -2
- package/src/components/Accordion/Accordion.tsx +1 -1
- package/src/components/AlertBanner/AlertBanner.tsx +50 -45
- package/src/components/Avatar/Avatar.tsx +61 -17
- package/src/components/Badge/Badge.tsx +17 -15
- package/src/components/Button/Button.tsx +31 -42
- package/src/components/Card/Card.tsx +4 -4
- package/src/components/CategoryStrip/CategoryStrip.tsx +185 -0
- package/src/components/CategoryStrip/index.ts +2 -0
- package/src/components/Checkbox/Checkbox.tsx +44 -16
- package/src/components/Chip/Chip.tsx +1 -1
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +4 -4
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +1 -0
- package/src/components/CurrencyInput/CurrencyInput.tsx +6 -4
- package/src/components/EmptyState/EmptyState.tsx +9 -9
- package/src/components/IconButton/IconButton.tsx +74 -34
- package/src/components/Input/Input.tsx +15 -13
- package/src/components/LabelValue/LabelValue.tsx +1 -1
- package/src/components/ListItem/ListItem.tsx +5 -5
- package/src/components/MediaCard/MediaCard.tsx +249 -0
- package/src/components/MediaCard/index.ts +2 -0
- package/src/components/Pressable/Pressable.tsx +100 -0
- package/src/components/Pressable/index.ts +1 -0
- package/src/components/Progress/Progress.tsx +14 -7
- package/src/components/RadioGroup/RadioGroup.tsx +1 -1
- package/src/components/Select/Select.tsx +5 -5
- package/src/components/Sheet/Sheet.tsx +3 -9
- package/src/components/Skeleton/Skeleton.tsx +34 -7
- package/src/components/Slider/Slider.tsx +2 -2
- package/src/components/Spinner/Spinner.tsx +1 -1
- package/src/components/Switch/Switch.tsx +31 -4
- package/src/components/Tabs/Tabs.tsx +63 -45
- package/src/components/Text/Text.tsx +59 -10
- package/src/components/Textarea/Textarea.tsx +4 -3
- package/src/components/Toast/Toast.tsx +77 -36
- package/src/components/Toggle/Toggle.tsx +3 -3
- package/src/index.ts +8 -2
- package/src/theme/ThemeProvider.tsx +11 -10
- package/src/theme/colorUtils.ts +80 -0
- package/src/theme/colors.ts +76 -35
- package/src/theme/index.ts +2 -2
- package/src/theme/types.ts +27 -13
- package/src/tokens.ts +150 -13
- package/src/utils/hover.ts +25 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,31 +1,34 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, TextStyle, ViewStyle, ActivityIndicatorProps } from 'react-native';
|
|
2
|
+
import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, TextStyle, ViewStyle, ActivityIndicatorProps, ImageSourcePropType } from 'react-native';
|
|
3
3
|
export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
|
|
4
4
|
|
|
5
5
|
type ThemeColors = {
|
|
6
6
|
background: string;
|
|
7
7
|
foreground: string;
|
|
8
8
|
card: string;
|
|
9
|
-
cardForeground: string;
|
|
10
9
|
primary: string;
|
|
11
10
|
primaryForeground: string;
|
|
12
|
-
|
|
13
|
-
secondaryForeground: string;
|
|
14
|
-
muted: string;
|
|
15
|
-
mutedForeground: string;
|
|
16
|
-
accent: string;
|
|
17
|
-
accentForeground: string;
|
|
11
|
+
border: string;
|
|
18
12
|
destructive: string;
|
|
19
13
|
destructiveForeground: string;
|
|
20
|
-
border: string;
|
|
21
|
-
input: string;
|
|
22
|
-
ring: string;
|
|
23
14
|
success: string;
|
|
24
15
|
successForeground: string;
|
|
16
|
+
warning: string;
|
|
17
|
+
warningForeground: string;
|
|
18
|
+
};
|
|
19
|
+
type ResolvedColors = ThemeColors & {
|
|
20
|
+
foregroundSubtle: string;
|
|
21
|
+
foregroundMuted: string;
|
|
22
|
+
surface: string;
|
|
23
|
+
surfaceStrong: string;
|
|
25
24
|
destructiveTint: string;
|
|
26
25
|
destructiveBorder: string;
|
|
27
26
|
successTint: string;
|
|
28
27
|
successBorder: string;
|
|
28
|
+
warningTint: string;
|
|
29
|
+
warningBorder: string;
|
|
30
|
+
ring: string;
|
|
31
|
+
input: string;
|
|
29
32
|
};
|
|
30
33
|
type Theme = {
|
|
31
34
|
light?: Partial<ThemeColors>;
|
|
@@ -33,22 +36,22 @@ type Theme = {
|
|
|
33
36
|
};
|
|
34
37
|
type ColorScheme = 'light' | 'dark' | 'system';
|
|
35
38
|
type ThemeContextValue = {
|
|
36
|
-
colors:
|
|
39
|
+
colors: ResolvedColors;
|
|
37
40
|
colorScheme: 'light' | 'dark';
|
|
38
41
|
};
|
|
39
42
|
|
|
40
43
|
interface ThemeProviderProps {
|
|
41
44
|
children: React.ReactNode;
|
|
42
45
|
/**
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
* Optional token overrides per scheme. Supply any of the 12 public ThemeColors
|
|
47
|
+
* tokens for `light` and/or `dark`. All derived colors are recomputed automatically.
|
|
48
|
+
* @example
|
|
49
|
+
* { light: { primary: '#ff385c' }, dark: { primary: '#ff385c' } }
|
|
47
50
|
*/
|
|
48
51
|
theme?: Theme;
|
|
49
52
|
/**
|
|
50
|
-
* - `'system'` (default): auto-detects device setting
|
|
51
|
-
* - `'light'` / `'dark'`: forces a specific scheme
|
|
53
|
+
* - `'system'` (default): auto-detects device setting.
|
|
54
|
+
* - `'light'` / `'dark'`: forces a specific scheme.
|
|
52
55
|
*/
|
|
53
56
|
colorScheme?: ColorScheme;
|
|
54
57
|
}
|
|
@@ -57,61 +60,45 @@ declare function useTheme(): ThemeContextValue;
|
|
|
57
60
|
|
|
58
61
|
declare const defaultLight: ThemeColors;
|
|
59
62
|
declare const defaultDark: ThemeColors;
|
|
63
|
+
declare function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors;
|
|
60
64
|
|
|
61
|
-
type ButtonVariant = 'primary' | 'secondary' | '
|
|
65
|
+
type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive';
|
|
62
66
|
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
63
67
|
interface ButtonProps extends TouchableOpacityProps {
|
|
64
68
|
label: string;
|
|
65
|
-
/**
|
|
66
|
-
* - `primary`: filled with `primary` token — main CTA
|
|
67
|
-
* - `secondary`: filled with `secondary` token — less prominent
|
|
68
|
-
* - `outline`: transparent with border — alternative actions
|
|
69
|
-
* - `ghost`: fully transparent — in-context or low-emphasis actions
|
|
70
|
-
*/
|
|
71
69
|
variant?: ButtonVariant;
|
|
72
70
|
size?: ButtonSize;
|
|
73
|
-
/** Replaces the label with a spinner and forces `disabled`. */
|
|
74
71
|
loading?: boolean;
|
|
75
72
|
fullWidth?: boolean;
|
|
76
|
-
/** Icon rendered alongside the label. Can be a ReactNode or a render function `(props) => ReactNode`. */
|
|
77
73
|
icon?: React.ReactNode | ((props: {
|
|
78
74
|
label: string;
|
|
79
75
|
size: ButtonSize;
|
|
80
76
|
variant: ButtonVariant;
|
|
81
77
|
}) => React.ReactNode);
|
|
82
|
-
/**
|
|
83
|
-
* Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"arrow-right"`).
|
|
84
|
-
* See https://icons.expo.fyi to browse available icons.
|
|
85
|
-
* Takes precedence over `icon` when both are supplied.
|
|
86
|
-
*/
|
|
87
78
|
iconName?: string;
|
|
88
|
-
/** Override the resolved icon color. Defaults to the label foreground color for the active variant. */
|
|
89
79
|
iconColor?: string;
|
|
90
|
-
/** Side the icon appears on. Defaults to `'left'`. */
|
|
91
80
|
iconPosition?: 'left' | 'right';
|
|
92
81
|
}
|
|
93
82
|
declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
|
|
94
83
|
|
|
95
|
-
type IconButtonVariant = 'primary' | 'secondary' | 'outline' | '
|
|
84
|
+
type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive';
|
|
96
85
|
type IconButtonSize = 'sm' | 'md' | 'lg';
|
|
97
86
|
interface IconButtonProps extends TouchableOpacityProps {
|
|
98
|
-
/**
|
|
99
|
-
* Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"plus"`).
|
|
100
|
-
* See https://icons.expo.fyi. Takes precedence over `icon` when both supplied.
|
|
101
|
-
*/
|
|
102
87
|
iconName?: string;
|
|
103
|
-
/** ReactNode icon — used when `iconName` is not provided. */
|
|
104
88
|
icon?: React.ReactNode;
|
|
105
|
-
/** Override the resolved icon color. Defaults to the foreground color for the active variant. */
|
|
106
89
|
iconColor?: string;
|
|
107
90
|
variant?: IconButtonVariant;
|
|
108
91
|
size?: IconButtonSize;
|
|
109
|
-
/** Replaces icon with a spinner and forces `disabled`. */
|
|
110
92
|
loading?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Badge overlay. `true` shows a dot. A number shows a count (capped at 99).
|
|
95
|
+
* The dot/count appears top-right of the button.
|
|
96
|
+
*/
|
|
97
|
+
badge?: boolean | number;
|
|
111
98
|
}
|
|
112
|
-
declare function IconButton({ iconName, icon, iconColor, variant, size, loading, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
|
|
99
|
+
declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
|
|
113
100
|
|
|
114
|
-
type TextVariant = '
|
|
101
|
+
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';
|
|
115
102
|
interface TextProps extends TextProps$1 {
|
|
116
103
|
variant?: TextVariant;
|
|
117
104
|
color?: string;
|
|
@@ -155,7 +142,7 @@ interface InputProps extends TextInputProps {
|
|
|
155
142
|
}
|
|
156
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;
|
|
157
144
|
|
|
158
|
-
type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
|
|
145
|
+
type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
|
|
159
146
|
type BadgeSize = 'sm' | 'md' | 'lg';
|
|
160
147
|
interface BadgeProps {
|
|
161
148
|
label?: string;
|
|
@@ -226,50 +213,51 @@ interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
|
|
|
226
213
|
}
|
|
227
214
|
declare function Spinner({ size, color, label, ...props }: SpinnerProps): React.JSX.Element;
|
|
228
215
|
|
|
216
|
+
type SkeletonPreset = 'base' | 'circle' | 'text';
|
|
229
217
|
interface SkeletonProps {
|
|
230
218
|
width?: number | string;
|
|
231
219
|
height?: number;
|
|
232
220
|
borderRadius?: number;
|
|
221
|
+
/** Preset shape. `'circle'` forces width=height square with full radius. `'text'` renders a short line. */
|
|
222
|
+
preset?: SkeletonPreset;
|
|
223
|
+
/** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
|
|
224
|
+
diameter?: number;
|
|
233
225
|
style?: ViewStyle;
|
|
234
226
|
}
|
|
235
|
-
declare function Skeleton({ width, height, borderRadius, style }: SkeletonProps): React.JSX.Element;
|
|
227
|
+
declare function Skeleton({ width, height, borderRadius, preset, diameter, style, }: SkeletonProps): React.JSX.Element;
|
|
236
228
|
|
|
237
229
|
type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
230
|
+
type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
238
231
|
interface AvatarProps {
|
|
239
|
-
/** Remote image URI. Falls back to `fallback` initials on error or when omitted. */
|
|
240
232
|
src?: string;
|
|
241
|
-
/** Up to 2 characters shown when the image is unavailable. Auto-uppercased. Defaults to `'?'`. */
|
|
242
233
|
fallback?: string;
|
|
243
234
|
size?: AvatarSize;
|
|
235
|
+
/** Optional status indicator dot — bottom-right corner. */
|
|
236
|
+
status?: AvatarStatus;
|
|
244
237
|
style?: ViewStyle;
|
|
245
238
|
}
|
|
246
|
-
declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.Element;
|
|
239
|
+
declare function Avatar({ src, fallback, size, status, style }: AvatarProps): React.JSX.Element;
|
|
247
240
|
|
|
248
|
-
type AlertBannerVariant = 'default' | 'destructive' | 'success';
|
|
241
|
+
type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning';
|
|
249
242
|
interface AlertBannerProps {
|
|
250
243
|
title: string;
|
|
251
244
|
description?: string;
|
|
252
245
|
variant?: AlertBannerVariant;
|
|
253
246
|
icon?: React.ReactNode;
|
|
254
|
-
/**
|
|
255
|
-
* Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
|
|
256
|
-
* Takes precedence over `icon`. When neither is set, a default variant icon is shown.
|
|
257
|
-
*/
|
|
258
247
|
iconName?: string;
|
|
259
|
-
/** Override the resolved icon color. Defaults to the variant title color. */
|
|
260
248
|
iconColor?: string;
|
|
261
249
|
style?: ViewStyle;
|
|
262
250
|
}
|
|
263
251
|
declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, style }: AlertBannerProps): React.JSX.Element;
|
|
264
252
|
|
|
253
|
+
type ProgressVariant = 'default' | 'success' | 'warning' | 'destructive';
|
|
265
254
|
interface ProgressProps {
|
|
266
|
-
/** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
|
|
267
255
|
value?: number;
|
|
268
|
-
/** Maximum value. Defaults to `100`. */
|
|
269
256
|
max?: number;
|
|
257
|
+
variant?: ProgressVariant;
|
|
270
258
|
style?: ViewStyle;
|
|
271
259
|
}
|
|
272
|
-
declare function Progress({ value, max, style }: ProgressProps): React.JSX.Element;
|
|
260
|
+
declare function Progress({ value, max, variant, style }: ProgressProps): React.JSX.Element;
|
|
273
261
|
|
|
274
262
|
interface EmptyStateProps {
|
|
275
263
|
icon?: React.ReactNode;
|
|
@@ -367,12 +355,10 @@ interface TabItem {
|
|
|
367
355
|
value: string;
|
|
368
356
|
icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
|
|
369
357
|
}
|
|
358
|
+
type TabsVariant = 'pill' | 'underline';
|
|
370
359
|
interface TabsProps {
|
|
371
360
|
tabs: TabItem[];
|
|
372
|
-
|
|
373
|
-
* Controlled active tab value. When omitted the component manages state internally
|
|
374
|
-
* (uncontrolled), defaulting to the first tab.
|
|
375
|
-
*/
|
|
361
|
+
variant?: TabsVariant;
|
|
376
362
|
value?: string;
|
|
377
363
|
onValueChange?: (value: string) => void;
|
|
378
364
|
children?: React.ReactNode;
|
|
@@ -384,7 +370,7 @@ interface TabsContentProps {
|
|
|
384
370
|
children: React.ReactNode;
|
|
385
371
|
style?: ViewStyle;
|
|
386
372
|
}
|
|
387
|
-
declare function Tabs({ tabs, value, onValueChange, children, style }: TabsProps): React.JSX.Element;
|
|
373
|
+
declare function Tabs({ tabs, variant, value, onValueChange, children, style }: TabsProps): React.JSX.Element;
|
|
388
374
|
declare function TabsContent({ value, activeValue, children, style }: TabsContentProps): React.JSX.Element | null;
|
|
389
375
|
|
|
390
376
|
interface AccordionItem {
|
|
@@ -427,15 +413,10 @@ interface SheetProps {
|
|
|
427
413
|
title?: string;
|
|
428
414
|
description?: string;
|
|
429
415
|
children?: React.ReactNode;
|
|
430
|
-
/**
|
|
431
|
-
* Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
|
|
432
|
-
* absolute point values (`300`). Defaults to `['50%']`.
|
|
433
|
-
*/
|
|
434
|
-
snapPoints?: (string | number)[];
|
|
435
416
|
/** Style for the inner `BottomSheetView` content container. */
|
|
436
417
|
style?: ViewStyle;
|
|
437
418
|
}
|
|
438
|
-
declare function Sheet({ open, onClose, title, description, children,
|
|
419
|
+
declare function Sheet({ open, onClose, title, description, children, style, }: SheetProps): React.JSX.Element;
|
|
439
420
|
|
|
440
421
|
interface SelectOption {
|
|
441
422
|
label: string;
|
|
@@ -454,22 +435,23 @@ interface SelectProps {
|
|
|
454
435
|
}
|
|
455
436
|
declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
|
|
456
437
|
|
|
457
|
-
type ToastVariant = 'default' | 'destructive' | 'success';
|
|
438
|
+
type ToastVariant = 'default' | 'destructive' | 'success' | 'warning';
|
|
439
|
+
interface ToastAction {
|
|
440
|
+
label: string;
|
|
441
|
+
onPress: () => void;
|
|
442
|
+
}
|
|
458
443
|
interface ToastItem {
|
|
459
444
|
id: string;
|
|
460
445
|
title?: string;
|
|
461
446
|
description?: string;
|
|
462
447
|
variant?: ToastVariant;
|
|
463
448
|
icon?: React.ReactNode;
|
|
464
|
-
/**
|
|
465
|
-
* Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
|
|
466
|
-
* Takes precedence over `icon`. When neither is set, a default variant icon is shown.
|
|
467
|
-
*/
|
|
468
449
|
iconName?: string;
|
|
469
|
-
/** Override the resolved icon color. Defaults to the variant text color. */
|
|
470
450
|
iconColor?: string;
|
|
471
451
|
/** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
|
|
472
452
|
duration?: number;
|
|
453
|
+
/** Optional inline action button rendered at the end of the toast. */
|
|
454
|
+
action?: ToastAction;
|
|
473
455
|
}
|
|
474
456
|
interface ToastContextValue {
|
|
475
457
|
toast: (item: Omit<ToastItem, 'id'>) => void;
|
|
@@ -633,6 +615,83 @@ interface MonthPickerProps {
|
|
|
633
615
|
}
|
|
634
616
|
declare function MonthPicker({ value, onChange, style }: MonthPickerProps): React.JSX.Element;
|
|
635
617
|
|
|
618
|
+
type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2';
|
|
619
|
+
interface MediaCardProps {
|
|
620
|
+
/** Image source — URI string or require(). */
|
|
621
|
+
imageSource?: ImageSourcePropType;
|
|
622
|
+
/** Image aspect ratio. Defaults to `'4:3'`. */
|
|
623
|
+
aspectRatio?: MediaCardAspectRatio;
|
|
624
|
+
/** Badge content rendered top-left over the image (e.g. a Badge component or Text). */
|
|
625
|
+
badge?: React.ReactNode;
|
|
626
|
+
/** Icon rendered in a circle button top-right over the image. Defaults to `'heart'`. */
|
|
627
|
+
actionIcon?: React.ReactNode;
|
|
628
|
+
/** Icon name for the action button. Overrides `actionIcon`. */
|
|
629
|
+
actionIconName?: string;
|
|
630
|
+
/** Whether the action icon is in active/filled state. */
|
|
631
|
+
actionActive?: boolean;
|
|
632
|
+
/** Called when the top-right action icon is pressed. */
|
|
633
|
+
onActionPress?: () => void;
|
|
634
|
+
/** Primary text below the image. */
|
|
635
|
+
title?: string;
|
|
636
|
+
/** Secondary text below the title. */
|
|
637
|
+
subtitle?: string;
|
|
638
|
+
/** Tertiary / caption text below subtitle. */
|
|
639
|
+
caption?: string;
|
|
640
|
+
/** Called when the card body is pressed. */
|
|
641
|
+
onPress?: () => void;
|
|
642
|
+
style?: ViewStyle;
|
|
643
|
+
/** Style for the image container. */
|
|
644
|
+
imageStyle?: ViewStyle;
|
|
645
|
+
/** Additional content rendered below caption. */
|
|
646
|
+
footer?: React.ReactNode;
|
|
647
|
+
}
|
|
648
|
+
declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
|
|
649
|
+
|
|
650
|
+
interface CategoryItem {
|
|
651
|
+
label: string;
|
|
652
|
+
value: string;
|
|
653
|
+
/** Icon rendered to the left of the label. ReactNode or icon name string. */
|
|
654
|
+
icon?: React.ReactNode | string;
|
|
655
|
+
/** Badge count over the icon/label. */
|
|
656
|
+
badge?: number;
|
|
657
|
+
}
|
|
658
|
+
interface CategoryStripProps {
|
|
659
|
+
categories: CategoryItem[];
|
|
660
|
+
value?: string | string[];
|
|
661
|
+
/** Called with new value(s) on selection change. */
|
|
662
|
+
onValueChange?: (value: string | string[]) => void;
|
|
663
|
+
/** Allow multiple simultaneous selections. Defaults to false. */
|
|
664
|
+
multiSelect?: boolean;
|
|
665
|
+
style?: ViewStyle;
|
|
666
|
+
/** Style applied to each pill item. */
|
|
667
|
+
itemStyle?: ViewStyle;
|
|
668
|
+
}
|
|
669
|
+
declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
|
|
670
|
+
|
|
671
|
+
interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
|
|
672
|
+
/** Children content to render inside the pressable. */
|
|
673
|
+
children: React.ReactNode;
|
|
674
|
+
/** Called when pressed. */
|
|
675
|
+
onPress?: () => void;
|
|
676
|
+
/** Scale value on press. Defaults to `0.98` (MediaCard-style). */
|
|
677
|
+
pressScale?: number;
|
|
678
|
+
/** Bounciness of the spring animation on release. Defaults to `4`. */
|
|
679
|
+
bounciness?: number;
|
|
680
|
+
/** Enable haptic feedback on press. Defaults to `true`. */
|
|
681
|
+
haptics?: boolean;
|
|
682
|
+
/** Additional style for the Animated wrapper. */
|
|
683
|
+
style?: ViewStyle;
|
|
684
|
+
/** Disable interaction. */
|
|
685
|
+
disabled?: boolean;
|
|
686
|
+
/** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
|
|
687
|
+
hoverScale?: number;
|
|
688
|
+
}
|
|
689
|
+
/**
|
|
690
|
+
* Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
|
|
691
|
+
* Use for custom pressable content that needs consistent press feel.
|
|
692
|
+
*/
|
|
693
|
+
declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
|
|
694
|
+
|
|
636
695
|
type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
|
|
637
696
|
interface IconProps {
|
|
638
697
|
/** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
|
|
@@ -646,13 +705,15 @@ declare function Icon({ name, size, color, family }: IconProps): React.ReactElem
|
|
|
646
705
|
declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
|
|
647
706
|
|
|
648
707
|
declare const SPACING: {
|
|
708
|
+
readonly xxs: 2;
|
|
649
709
|
readonly xs: 4;
|
|
650
710
|
readonly sm: 8;
|
|
651
711
|
readonly md: 12;
|
|
652
|
-
readonly
|
|
653
|
-
readonly
|
|
654
|
-
readonly
|
|
655
|
-
readonly
|
|
712
|
+
readonly base: 16;
|
|
713
|
+
readonly lg: 24;
|
|
714
|
+
readonly xl: 32;
|
|
715
|
+
readonly xxl: 48;
|
|
716
|
+
readonly section: 64;
|
|
656
717
|
};
|
|
657
718
|
declare const ICON_SIZES: {
|
|
658
719
|
readonly sm: 14;
|
|
@@ -662,10 +723,12 @@ declare const ICON_SIZES: {
|
|
|
662
723
|
readonly '2xl': 32;
|
|
663
724
|
};
|
|
664
725
|
declare const RADIUS: {
|
|
665
|
-
readonly
|
|
666
|
-
readonly
|
|
667
|
-
readonly
|
|
668
|
-
readonly
|
|
726
|
+
readonly none: 0;
|
|
727
|
+
readonly xs: 4;
|
|
728
|
+
readonly sm: 8;
|
|
729
|
+
readonly md: 14;
|
|
730
|
+
readonly lg: 20;
|
|
731
|
+
readonly xl: 32;
|
|
669
732
|
readonly full: 9999;
|
|
670
733
|
};
|
|
671
734
|
declare const SHADOWS: {
|
|
@@ -675,7 +738,7 @@ declare const SHADOWS: {
|
|
|
675
738
|
readonly width: 0;
|
|
676
739
|
readonly height: 1;
|
|
677
740
|
};
|
|
678
|
-
readonly shadowOpacity: 0.
|
|
741
|
+
readonly shadowOpacity: 0.06;
|
|
679
742
|
readonly shadowRadius: 4;
|
|
680
743
|
readonly elevation: 2;
|
|
681
744
|
};
|
|
@@ -683,9 +746,9 @@ declare const SHADOWS: {
|
|
|
683
746
|
readonly shadowColor: "#000";
|
|
684
747
|
readonly shadowOffset: {
|
|
685
748
|
readonly width: 0;
|
|
686
|
-
readonly height:
|
|
749
|
+
readonly height: 2;
|
|
687
750
|
};
|
|
688
|
-
readonly shadowOpacity: 0.
|
|
751
|
+
readonly shadowOpacity: 0.1;
|
|
689
752
|
readonly shadowRadius: 8;
|
|
690
753
|
readonly elevation: 5;
|
|
691
754
|
};
|
|
@@ -695,7 +758,7 @@ declare const SHADOWS: {
|
|
|
695
758
|
readonly width: 0;
|
|
696
759
|
readonly height: 6;
|
|
697
760
|
};
|
|
698
|
-
readonly shadowOpacity: 0.
|
|
761
|
+
readonly shadowOpacity: 0.16;
|
|
699
762
|
readonly shadowRadius: 16;
|
|
700
763
|
readonly elevation: 10;
|
|
701
764
|
};
|
|
@@ -705,7 +768,7 @@ declare const SHADOWS: {
|
|
|
705
768
|
readonly width: 0;
|
|
706
769
|
readonly height: 12;
|
|
707
770
|
};
|
|
708
|
-
readonly shadowOpacity: 0.
|
|
771
|
+
readonly shadowOpacity: 0.24;
|
|
709
772
|
readonly shadowRadius: 24;
|
|
710
773
|
readonly elevation: 18;
|
|
711
774
|
};
|
|
@@ -713,11 +776,128 @@ declare const SHADOWS: {
|
|
|
713
776
|
declare const BREAKPOINTS: {
|
|
714
777
|
readonly wide: 700;
|
|
715
778
|
};
|
|
779
|
+
declare const TYPOGRAPHY: {
|
|
780
|
+
readonly 'display-hero': {
|
|
781
|
+
readonly fontFamily: "Poppins-Bold";
|
|
782
|
+
readonly fontSize: 64;
|
|
783
|
+
readonly fontWeight: "700";
|
|
784
|
+
readonly lineHeight: 70;
|
|
785
|
+
readonly letterSpacing: -1;
|
|
786
|
+
};
|
|
787
|
+
readonly 'display-xl': {
|
|
788
|
+
readonly fontFamily: "Poppins-Bold";
|
|
789
|
+
readonly fontSize: 28;
|
|
790
|
+
readonly fontWeight: "700";
|
|
791
|
+
readonly lineHeight: 40;
|
|
792
|
+
readonly letterSpacing: 0;
|
|
793
|
+
};
|
|
794
|
+
readonly 'display-lg': {
|
|
795
|
+
readonly fontFamily: "Poppins-Medium";
|
|
796
|
+
readonly fontSize: 22;
|
|
797
|
+
readonly fontWeight: "500";
|
|
798
|
+
readonly lineHeight: 26;
|
|
799
|
+
readonly letterSpacing: -0.44;
|
|
800
|
+
};
|
|
801
|
+
readonly 'display-md': {
|
|
802
|
+
readonly fontFamily: "Poppins-Bold";
|
|
803
|
+
readonly fontSize: 21;
|
|
804
|
+
readonly fontWeight: "700";
|
|
805
|
+
readonly lineHeight: 30;
|
|
806
|
+
readonly letterSpacing: 0;
|
|
807
|
+
};
|
|
808
|
+
readonly 'display-sm': {
|
|
809
|
+
readonly fontFamily: "Poppins-SemiBold";
|
|
810
|
+
readonly fontSize: 20;
|
|
811
|
+
readonly fontWeight: "600";
|
|
812
|
+
readonly lineHeight: 24;
|
|
813
|
+
readonly letterSpacing: -0.18;
|
|
814
|
+
};
|
|
815
|
+
readonly 'title-md': {
|
|
816
|
+
readonly fontFamily: "Poppins-SemiBold";
|
|
817
|
+
readonly fontSize: 16;
|
|
818
|
+
readonly fontWeight: "600";
|
|
819
|
+
readonly lineHeight: 20;
|
|
820
|
+
readonly letterSpacing: 0;
|
|
821
|
+
};
|
|
822
|
+
readonly 'title-sm': {
|
|
823
|
+
readonly fontFamily: "Poppins-Medium";
|
|
824
|
+
readonly fontSize: 16;
|
|
825
|
+
readonly fontWeight: "500";
|
|
826
|
+
readonly lineHeight: 20;
|
|
827
|
+
readonly letterSpacing: 0;
|
|
828
|
+
};
|
|
829
|
+
readonly 'body-md': {
|
|
830
|
+
readonly fontFamily: "Poppins-Regular";
|
|
831
|
+
readonly fontSize: 16;
|
|
832
|
+
readonly fontWeight: "400";
|
|
833
|
+
readonly lineHeight: 24;
|
|
834
|
+
readonly letterSpacing: 0;
|
|
835
|
+
};
|
|
836
|
+
readonly 'body-sm': {
|
|
837
|
+
readonly fontFamily: "Poppins-Regular";
|
|
838
|
+
readonly fontSize: 14;
|
|
839
|
+
readonly fontWeight: "400";
|
|
840
|
+
readonly lineHeight: 20;
|
|
841
|
+
readonly letterSpacing: 0;
|
|
842
|
+
};
|
|
843
|
+
readonly caption: {
|
|
844
|
+
readonly fontFamily: "Poppins-Medium";
|
|
845
|
+
readonly fontSize: 14;
|
|
846
|
+
readonly fontWeight: "500";
|
|
847
|
+
readonly lineHeight: 18;
|
|
848
|
+
readonly letterSpacing: 0;
|
|
849
|
+
};
|
|
850
|
+
readonly 'caption-sm': {
|
|
851
|
+
readonly fontFamily: "Poppins-Regular";
|
|
852
|
+
readonly fontSize: 13;
|
|
853
|
+
readonly fontWeight: "400";
|
|
854
|
+
readonly lineHeight: 16;
|
|
855
|
+
readonly letterSpacing: 0;
|
|
856
|
+
};
|
|
857
|
+
readonly 'badge-text': {
|
|
858
|
+
readonly fontFamily: "Poppins-SemiBold";
|
|
859
|
+
readonly fontSize: 11;
|
|
860
|
+
readonly fontWeight: "600";
|
|
861
|
+
readonly lineHeight: 13;
|
|
862
|
+
readonly letterSpacing: 0;
|
|
863
|
+
};
|
|
864
|
+
readonly 'micro-label': {
|
|
865
|
+
readonly fontFamily: "Poppins-Bold";
|
|
866
|
+
readonly fontSize: 12;
|
|
867
|
+
readonly fontWeight: "700";
|
|
868
|
+
readonly lineHeight: 16;
|
|
869
|
+
readonly letterSpacing: 0;
|
|
870
|
+
};
|
|
871
|
+
readonly 'uppercase-tag': {
|
|
872
|
+
readonly fontFamily: "Poppins-Bold";
|
|
873
|
+
readonly fontSize: 8;
|
|
874
|
+
readonly fontWeight: "700";
|
|
875
|
+
readonly lineHeight: 10;
|
|
876
|
+
readonly letterSpacing: 0.32;
|
|
877
|
+
readonly textTransform: "uppercase";
|
|
878
|
+
};
|
|
879
|
+
readonly 'button-lg': {
|
|
880
|
+
readonly fontFamily: "Poppins-Medium";
|
|
881
|
+
readonly fontSize: 16;
|
|
882
|
+
readonly fontWeight: "500";
|
|
883
|
+
readonly lineHeight: 20;
|
|
884
|
+
readonly letterSpacing: 0;
|
|
885
|
+
};
|
|
886
|
+
readonly 'button-sm': {
|
|
887
|
+
readonly fontFamily: "Poppins-Medium";
|
|
888
|
+
readonly fontSize: 14;
|
|
889
|
+
readonly fontWeight: "500";
|
|
890
|
+
readonly lineHeight: 18;
|
|
891
|
+
readonly letterSpacing: 0;
|
|
892
|
+
};
|
|
893
|
+
};
|
|
716
894
|
type Spacing = typeof SPACING;
|
|
717
895
|
type SpacingKey = keyof Spacing;
|
|
718
896
|
type IconSize = typeof ICON_SIZES;
|
|
719
897
|
type IconSizeKey = keyof IconSize;
|
|
720
898
|
type Radius = typeof RADIUS;
|
|
721
899
|
type RadiusKey = keyof Radius;
|
|
900
|
+
type Typography = typeof TYPOGRAPHY;
|
|
901
|
+
type TypographyKey = keyof Typography;
|
|
722
902
|
|
|
723
|
-
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, 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, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, 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, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, renderIcon, useTheme, useToast };
|
|
903
|
+
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, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, type Typography, type TypographyKey, defaultDark, defaultLight, deriveColors, renderIcon, useTheme, useToast };
|