@retray-dev/ui-kit 6.1.0 → 7.0.1
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 +447 -13
- package/EXAMPLES.md +248 -0
- package/README.md +11 -10
- package/dist/Accordion.d.mts +28 -0
- package/dist/Accordion.d.ts +28 -0
- package/dist/Accordion.js +340 -0
- package/dist/Accordion.mjs +6 -0
- package/dist/AlertBanner.d.mts +16 -0
- package/dist/AlertBanner.d.ts +16 -0
- package/dist/AlertBanner.js +247 -0
- package/dist/AlertBanner.mjs +5 -0
- package/dist/Avatar.d.mts +20 -0
- package/dist/Avatar.d.ts +20 -0
- package/dist/Avatar.js +234 -0
- package/dist/Avatar.mjs +3 -0
- package/dist/Badge.d.mts +26 -0
- package/dist/Badge.d.ts +26 -0
- package/dist/Badge.js +247 -0
- package/dist/Badge.mjs +4 -0
- package/dist/Button.d.mts +25 -0
- package/dist/Button.d.ts +25 -0
- package/dist/Button.js +414 -0
- package/dist/Button.mjs +8 -0
- package/dist/ButtonGroup.d.mts +26 -0
- package/dist/ButtonGroup.d.ts +26 -0
- package/dist/ButtonGroup.js +52 -0
- package/dist/ButtonGroup.mjs +2 -0
- package/dist/Card.d.mts +39 -0
- package/dist/Card.d.ts +39 -0
- package/dist/Card.js +329 -0
- package/dist/Card.mjs +7 -0
- package/dist/CategoryStrip.d.mts +26 -0
- package/dist/CategoryStrip.d.ts +26 -0
- package/dist/CategoryStrip.js +396 -0
- package/dist/CategoryStrip.mjs +9 -0
- package/dist/Checkbox.d.mts +14 -0
- package/dist/Checkbox.d.ts +14 -0
- package/dist/Checkbox.js +304 -0
- package/dist/Checkbox.mjs +7 -0
- package/dist/Chip.d.mts +31 -0
- package/dist/Chip.d.ts +31 -0
- package/dist/Chip.js +370 -0
- package/dist/Chip.mjs +8 -0
- package/dist/ConfirmDialog.d.mts +15 -0
- package/dist/ConfirmDialog.d.ts +15 -0
- package/dist/ConfirmDialog.js +530 -0
- package/dist/ConfirmDialog.mjs +9 -0
- package/dist/CurrencyDisplay.d.mts +24 -0
- package/dist/CurrencyDisplay.d.ts +24 -0
- package/dist/CurrencyDisplay.js +189 -0
- package/dist/CurrencyDisplay.mjs +3 -0
- package/dist/CurrencyInput.d.mts +26 -0
- package/dist/CurrencyInput.d.ts +26 -0
- package/dist/CurrencyInput.js +404 -0
- package/dist/CurrencyInput.mjs +7 -0
- package/dist/DetailRow.d.mts +32 -0
- package/dist/DetailRow.d.ts +32 -0
- package/dist/DetailRow.js +275 -0
- package/dist/DetailRow.mjs +4 -0
- package/dist/EmptyState.d.mts +27 -0
- package/dist/EmptyState.d.ts +27 -0
- package/dist/EmptyState.js +503 -0
- package/dist/EmptyState.mjs +9 -0
- package/dist/Form.d.mts +52 -0
- package/dist/Form.d.ts +52 -0
- package/dist/Form.js +204 -0
- package/dist/Form.mjs +3 -0
- package/dist/IconButton.d.mts +22 -0
- package/dist/IconButton.d.ts +22 -0
- package/dist/IconButton.js +383 -0
- package/dist/IconButton.mjs +7 -0
- package/dist/Input.d.mts +23 -0
- package/dist/Input.d.ts +23 -0
- package/dist/Input.js +351 -0
- package/dist/Input.mjs +6 -0
- package/dist/LabelValue.d.mts +16 -0
- package/dist/LabelValue.d.ts +16 -0
- package/dist/LabelValue.js +225 -0
- package/dist/LabelValue.mjs +4 -0
- package/dist/ListGroup.d.mts +34 -0
- package/dist/ListGroup.d.ts +34 -0
- package/dist/ListGroup.js +217 -0
- package/dist/ListGroup.mjs +4 -0
- package/dist/ListItem.d.mts +64 -0
- package/dist/ListItem.d.ts +64 -0
- package/dist/ListItem.js +430 -0
- package/dist/ListItem.mjs +8 -0
- package/dist/MediaCard.d.mts +39 -0
- package/dist/MediaCard.d.ts +39 -0
- package/dist/MediaCard.js +427 -0
- package/dist/MediaCard.mjs +8 -0
- package/dist/MenuGroup.d.mts +34 -0
- package/dist/MenuGroup.d.ts +34 -0
- package/dist/MenuGroup.js +217 -0
- package/dist/MenuGroup.mjs +4 -0
- package/dist/MenuItem.d.mts +48 -0
- package/dist/MenuItem.d.ts +48 -0
- package/dist/MenuItem.js +403 -0
- package/dist/MenuItem.mjs +8 -0
- package/dist/MonthPicker.d.mts +20 -0
- package/dist/MonthPicker.d.ts +20 -0
- package/dist/MonthPicker.js +234 -0
- package/dist/MonthPicker.mjs +4 -0
- package/dist/Pressable.d.mts +34 -0
- package/dist/Pressable.d.ts +34 -0
- package/dist/Pressable.js +132 -0
- package/dist/Pressable.mjs +4 -0
- package/dist/Progress.d.mts +14 -0
- package/dist/Progress.d.ts +14 -0
- package/dist/Progress.js +191 -0
- package/dist/Progress.mjs +4 -0
- package/dist/RadioGroup.d.mts +19 -0
- package/dist/RadioGroup.d.ts +19 -0
- package/dist/RadioGroup.js +341 -0
- package/dist/RadioGroup.mjs +7 -0
- package/dist/Select.d.mts +22 -0
- package/dist/Select.d.ts +22 -0
- package/dist/Select.js +441 -0
- package/dist/Select.mjs +6 -0
- package/dist/Separator.d.mts +10 -0
- package/dist/Separator.d.ts +10 -0
- package/dist/Separator.js +156 -0
- package/dist/Separator.mjs +2 -0
- package/dist/Sheet.d.mts +81 -0
- package/dist/Sheet.d.ts +81 -0
- package/dist/Sheet.js +340 -0
- package/dist/Sheet.mjs +4 -0
- package/dist/Skeleton.d.mts +17 -0
- package/dist/Skeleton.d.ts +17 -0
- package/dist/Skeleton.js +205 -0
- package/dist/Skeleton.mjs +4 -0
- package/dist/Slider.d.mts +20 -0
- package/dist/Slider.d.ts +20 -0
- package/dist/Slider.js +232 -0
- package/dist/Slider.mjs +4 -0
- package/dist/Spinner.d.mts +12 -0
- package/dist/Spinner.d.ts +12 -0
- package/dist/Spinner.js +172 -0
- package/dist/Spinner.mjs +3 -0
- package/dist/Switch.d.mts +13 -0
- package/dist/Switch.d.ts +13 -0
- package/dist/Switch.js +261 -0
- package/dist/Switch.mjs +5 -0
- package/dist/Tabs.d.mts +27 -0
- package/dist/Tabs.d.ts +27 -0
- package/dist/Tabs.js +389 -0
- package/dist/Tabs.mjs +6 -0
- package/dist/Text.d.mts +12 -0
- package/dist/Text.d.ts +12 -0
- package/dist/Text.js +311 -0
- package/dist/Text.mjs +4 -0
- package/dist/Textarea.d.mts +16 -0
- package/dist/Textarea.d.ts +16 -0
- package/dist/Textarea.js +333 -0
- package/dist/Textarea.mjs +6 -0
- package/dist/Toast.d.mts +47 -0
- package/dist/Toast.d.ts +47 -0
- package/dist/Toast.js +185 -0
- package/dist/Toast.mjs +3 -0
- package/dist/Toggle.d.mts +33 -0
- package/dist/Toggle.d.ts +33 -0
- package/dist/Toggle.js +397 -0
- package/dist/Toggle.mjs +8 -0
- package/dist/VirtualList.d.mts +19 -0
- package/dist/VirtualList.d.ts +19 -0
- package/dist/VirtualList.js +38 -0
- package/dist/VirtualList.mjs +1 -0
- package/dist/chunk-2CE3TQVY.mjs +11 -0
- package/dist/chunk-2UYENBLV.mjs +49 -0
- package/dist/chunk-3BBOZ3OQ.mjs +41 -0
- package/dist/chunk-5IKW3VNC.mjs +43 -0
- package/dist/chunk-63357L2X.mjs +51 -0
- package/dist/chunk-6LQYY7HC.mjs +127 -0
- package/dist/chunk-6Q64UFIA.mjs +71 -0
- package/dist/chunk-76PFOSM2.mjs +41 -0
- package/dist/chunk-7H2OR44A.mjs +14 -0
- package/dist/chunk-A4MDAP7G.mjs +42 -0
- package/dist/chunk-AU2VDY4P.mjs +190 -0
- package/dist/chunk-BRKYVJVV.mjs +60 -0
- package/dist/chunk-CRYBX2CM.mjs +146 -0
- package/dist/chunk-DITNP6PL.mjs +106 -0
- package/dist/chunk-FTLJOUOQ.mjs +97 -0
- package/dist/chunk-GCWOGZYL.mjs +104 -0
- package/dist/chunk-GNGLDL6Z.mjs +60 -0
- package/dist/chunk-GPOUINK5.mjs +148 -0
- package/dist/chunk-HSPSMN6U.mjs +115 -0
- package/dist/chunk-IRRY3CRZ.mjs +82 -0
- package/dist/chunk-JB67UOB5.mjs +92 -0
- package/dist/chunk-JBLL7U3U.mjs +64 -0
- package/dist/chunk-KWCPOM6W.mjs +136 -0
- package/dist/chunk-KZJRQOIU.mjs +64 -0
- package/dist/chunk-L7E7TVEZ.mjs +145 -0
- package/dist/chunk-LG4DO3DK.mjs +174 -0
- package/dist/chunk-LWG526VX.mjs +139 -0
- package/dist/chunk-MN7OG7IY.mjs +96 -0
- package/dist/chunk-MX6HRKMI.mjs +29 -0
- package/dist/chunk-NC5ZTR2Y.mjs +32 -0
- package/dist/chunk-NQGVLMWG.mjs +90 -0
- package/dist/chunk-QCNARS3X.mjs +46 -0
- package/dist/chunk-QXGYKWI7.mjs +134 -0
- package/dist/chunk-QY3X2UYR.mjs +191 -0
- package/dist/chunk-RKLHUDZS.mjs +92 -0
- package/dist/chunk-RMMK64W5.mjs +54 -0
- package/dist/chunk-RR2VQLKE.mjs +190 -0
- package/dist/chunk-RTC3CFXF.mjs +29 -0
- package/dist/chunk-SBZYEV4S.mjs +61 -0
- package/dist/chunk-SOA2Z4RB.mjs +82 -0
- package/dist/chunk-SOYNZDVY.mjs +151 -0
- package/dist/chunk-T7XZ7H7Y.mjs +57 -0
- package/dist/chunk-TAJ2PQ2O.mjs +163 -0
- package/dist/chunk-U4N7WF4Z.mjs +108 -0
- package/dist/chunk-URDE3EUU.mjs +132 -0
- package/dist/chunk-URLL5JBR.mjs +245 -0
- package/dist/chunk-XDMN67KV.mjs +59 -0
- package/dist/chunk-Y6MXOREN.mjs +120 -0
- package/dist/chunk-YZJAFS4P.mjs +131 -0
- package/dist/index.d.mts +94 -852
- package/dist/index.d.ts +94 -852
- package/dist/index.js +1387 -942
- package/dist/index.mjs +50 -3844
- package/package.json +23 -14
- package/src/assets/fonts/Sohne-Bold.otf +0 -0
- package/src/assets/fonts/Sohne-BoldItalic.otf +0 -0
- package/src/assets/fonts/Sohne-ExtraBold.otf +0 -0
- package/src/assets/fonts/Sohne-ExtraBoldItalic.otf +0 -0
- package/src/assets/fonts/Sohne-ExtraLight.otf +0 -0
- package/src/assets/fonts/Sohne-ExtraLightItalic.otf +0 -0
- package/src/assets/fonts/Sohne-Italic.otf +0 -0
- package/src/assets/fonts/Sohne-Light.otf +0 -0
- package/src/assets/fonts/Sohne-LightItalic.otf +0 -0
- package/src/assets/fonts/Sohne-Medium.otf +0 -0
- package/src/assets/fonts/Sohne-MediumItalic.otf +0 -0
- package/src/assets/fonts/Sohne-Regular.otf +0 -0
- package/src/assets/fonts/Sohne-SemiBold.otf +0 -0
- package/src/assets/fonts/Sohne-SemiBoldItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-Bold.otf +0 -0
- package/src/assets/fonts/SohneMono-BoldItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-ExtraBold.otf +0 -0
- package/src/assets/fonts/SohneMono-ExtraBoldItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-ExtraLight.otf +0 -0
- package/src/assets/fonts/SohneMono-ExtraLightItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-Italic.otf +0 -0
- package/src/assets/fonts/SohneMono-Light.otf +0 -0
- package/src/assets/fonts/SohneMono-LightItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-Medium.otf +0 -0
- package/src/assets/fonts/SohneMono-MediumItalic.otf +0 -0
- package/src/assets/fonts/SohneMono-Regular.otf +0 -0
- package/src/assets/fonts/SohneMono-SemiBold.otf +0 -0
- package/src/assets/fonts/SohneMono-SemiBoldItalic.otf +0 -0
- package/src/components/Accordion/Accordion.tsx +13 -15
- package/src/components/AlertBanner/AlertBanner.tsx +33 -12
- package/src/components/Avatar/Avatar.tsx +4 -2
- package/src/components/Badge/Badge.tsx +4 -2
- package/src/components/Button/Button.tsx +30 -29
- package/src/components/ButtonGroup/ButtonGroup.tsx +13 -10
- package/src/components/Card/Card.tsx +36 -65
- package/src/components/CategoryStrip/CategoryStrip.tsx +68 -58
- package/src/components/Checkbox/Checkbox.tsx +41 -55
- package/src/components/Chip/Chip.tsx +49 -84
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +2 -2
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +4 -2
- package/src/components/CurrencyInput/CurrencyInput.tsx +2 -2
- package/src/components/DetailRow/DetailRow.tsx +9 -7
- package/src/components/EmptyState/EmptyState.tsx +2 -2
- package/src/components/Form/Form.tsx +149 -0
- package/src/components/Form/index.ts +1 -0
- package/src/components/IconButton/IconButton.tsx +24 -20
- package/src/components/Input/Input.tsx +63 -50
- package/src/components/LabelValue/LabelValue.tsx +6 -4
- package/src/components/ListGroup/ListGroup.tsx +145 -0
- package/src/components/ListGroup/index.ts +1 -0
- package/src/components/ListItem/ListItem.tsx +30 -43
- package/src/components/MediaCard/MediaCard.tsx +31 -29
- package/src/components/MenuGroup/MenuGroup.tsx +145 -0
- package/src/components/MenuGroup/index.ts +1 -0
- package/src/components/MenuItem/MenuItem.tsx +29 -40
- package/src/components/MonthPicker/MonthPicker.tsx +14 -4
- package/src/components/Pressable/Pressable.tsx +27 -46
- package/src/components/Progress/Progress.tsx +21 -12
- package/src/components/RadioGroup/RadioGroup.tsx +55 -32
- package/src/components/Select/Select.tsx +23 -21
- package/src/components/Separator/Separator.tsx +1 -3
- package/src/components/Sheet/Sheet.tsx +85 -18
- package/src/components/Skeleton/Skeleton.tsx +25 -14
- package/src/components/Slider/Slider.tsx +13 -3
- package/src/components/Spinner/Spinner.tsx +1 -1
- package/src/components/Switch/Switch.tsx +70 -52
- package/src/components/Tabs/Tabs.tsx +59 -47
- package/src/components/Text/Text.tsx +3 -1
- package/src/components/Textarea/Textarea.tsx +44 -23
- package/src/components/Toast/Toast.tsx +6 -6
- package/src/components/Toggle/Toggle.tsx +86 -68
- package/src/components/VirtualList/VirtualList.tsx +60 -0
- package/src/components/VirtualList/index.ts +1 -0
- package/src/fonts.ts +38 -20
- package/src/index.ts +5 -1
- package/src/theme/colors.ts +53 -39
- package/src/theme/types.ts +3 -0
- package/src/tokens.ts +49 -39
- package/src/utils/animations.ts +58 -0
- package/src/utils/icons.ts +47 -20
- package/src/utils/useColorTransition.ts +40 -0
- package/src/utils/usePressScale.ts +75 -0
- package/src/assets/fonts/Poppins-Black.ttf +0 -0
- package/src/assets/fonts/Poppins-BlackItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Bold.ttf +0 -0
- package/src/assets/fonts/Poppins-BoldItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-ExtraBold.ttf +0 -0
- package/src/assets/fonts/Poppins-ExtraBoldItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-ExtraLight.ttf +0 -0
- package/src/assets/fonts/Poppins-ExtraLightItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Italic.ttf +0 -0
- package/src/assets/fonts/Poppins-Light.ttf +0 -0
- package/src/assets/fonts/Poppins-LightItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Medium.ttf +0 -0
- package/src/assets/fonts/Poppins-MediumItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Regular.ttf +0 -0
- package/src/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/src/assets/fonts/Poppins-SemiBoldItalic.ttf +0 -0
- package/src/assets/fonts/Poppins-Thin.ttf +0 -0
- package/src/assets/fonts/Poppins-ThinItalic.ttf +0 -0
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,48 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
2
|
+
export { Button, ButtonProps, ButtonSize, ButtonVariant } from './Button.mjs';
|
|
3
|
+
export { ButtonGroup, ButtonGroupProps } from './ButtonGroup.mjs';
|
|
4
|
+
export { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton.mjs';
|
|
5
|
+
export { Text, TextProps, TextVariant } from './Text.mjs';
|
|
6
|
+
export { Input, InputProps } from './Input.mjs';
|
|
7
|
+
export { Badge, BadgeProps, BadgeVariant } from './Badge.mjs';
|
|
8
|
+
export { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps } from './Card.mjs';
|
|
9
|
+
export { Separator, SeparatorProps } from './Separator.mjs';
|
|
10
|
+
export { Spinner, SpinnerProps, SpinnerSize } from './Spinner.mjs';
|
|
11
|
+
export { Skeleton, SkeletonProps } from './Skeleton.mjs';
|
|
12
|
+
export { Avatar, AvatarProps, AvatarSize } from './Avatar.mjs';
|
|
13
|
+
export { AlertBanner, AlertBannerProps, AlertBannerVariant } from './AlertBanner.mjs';
|
|
14
|
+
export { Progress, ProgressProps } from './Progress.mjs';
|
|
15
|
+
export { EmptyState, EmptyStateProps } from './EmptyState.mjs';
|
|
16
|
+
export { Textarea, TextareaProps } from './Textarea.mjs';
|
|
17
|
+
export { Checkbox, CheckboxProps } from './Checkbox.mjs';
|
|
18
|
+
export { Switch, SwitchProps } from './Switch.mjs';
|
|
19
|
+
export { Toggle, ToggleProps, ToggleSize, ToggleVariant } from './Toggle.mjs';
|
|
20
|
+
export { RadioGroup, RadioGroupProps, RadioOption } from './RadioGroup.mjs';
|
|
21
|
+
export { TabItem, Tabs, TabsContent, TabsContentProps, TabsProps } from './Tabs.mjs';
|
|
22
|
+
export { Accordion, AccordionItem, AccordionProps } from './Accordion.mjs';
|
|
23
|
+
export { Slider, SliderProps } from './Slider.mjs';
|
|
24
|
+
export { Sheet, SheetProps } from './Sheet.mjs';
|
|
25
|
+
export { Select, SelectOption, SelectProps } from './Select.mjs';
|
|
26
|
+
export { ToastProvider, useToast } from './Toast.mjs';
|
|
27
|
+
export { CurrencyInput, CurrencyInput as CurrencyInputLarge, CurrencyInputProps } from './CurrencyInput.mjs';
|
|
28
|
+
export { CurrencyDisplay, CurrencyDisplayProps, CurrencyDisplayVariant } from './CurrencyDisplay.mjs';
|
|
29
|
+
export { ListItem, ListItemProps } from './ListItem.mjs';
|
|
30
|
+
export { ListGroup, ListGroupFooter, ListGroupFooterProps, ListGroupHeader, ListGroupHeaderProps, ListGroupProps, ListGroupVariant } from './ListGroup.mjs';
|
|
31
|
+
export { MenuItem, MenuItemProps, MenuItemVariant } from './MenuItem.mjs';
|
|
32
|
+
export { MenuGroup, MenuGroupFooter, MenuGroupFooterProps, MenuGroupHeader, MenuGroupHeaderProps, MenuGroupProps, MenuGroupVariant } from './MenuGroup.mjs';
|
|
33
|
+
export { Chip, ChipGroup, ChipGroupProps, ChipOption, ChipProps } from './Chip.mjs';
|
|
34
|
+
export { ConfirmDialog, ConfirmDialogProps } from './ConfirmDialog.mjs';
|
|
35
|
+
export { LabelValue, LabelValueProps } from './LabelValue.mjs';
|
|
36
|
+
export { MonthPicker, MonthPickerProps, MonthPickerValue } from './MonthPicker.mjs';
|
|
37
|
+
export { MediaCard, MediaCardAspectRatio, MediaCardProps } from './MediaCard.mjs';
|
|
38
|
+
export { CategoryItem, CategoryStrip, CategoryStripProps } from './CategoryStrip.mjs';
|
|
39
|
+
export { Pressable, PressableProps } from './Pressable.mjs';
|
|
40
|
+
export { DetailRow, DetailRowLabelWeight, DetailRowProps, DetailRowSeparator } from './DetailRow.mjs';
|
|
41
|
+
export { Form, FormField, FormFieldProps, FormFooter, FormFooterProps, FormProps, FormSection, FormSectionProps } from './Form.mjs';
|
|
42
|
+
export { VirtualList, VirtualListItem, VirtualListProps } from './VirtualList.mjs';
|
|
5
43
|
export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
|
|
44
|
+
export { toast } from 'sonner-native';
|
|
45
|
+
import 'react-native';
|
|
6
46
|
|
|
7
47
|
type ThemeColors = {
|
|
8
48
|
background: string;
|
|
@@ -40,6 +80,7 @@ type ResolvedColors = ThemeColors & {
|
|
|
40
80
|
accentForegroundResolved: string;
|
|
41
81
|
ring: string;
|
|
42
82
|
input: string;
|
|
83
|
+
separator: string;
|
|
43
84
|
};
|
|
44
85
|
type Theme = {
|
|
45
86
|
light?: Partial<ThemeColors>;
|
|
@@ -73,823 +114,6 @@ declare const defaultLight: ThemeColors;
|
|
|
73
114
|
declare const defaultDark: ThemeColors;
|
|
74
115
|
declare function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors;
|
|
75
116
|
|
|
76
|
-
type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive';
|
|
77
|
-
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
78
|
-
interface ButtonProps extends TouchableOpacityProps {
|
|
79
|
-
label: string;
|
|
80
|
-
variant?: ButtonVariant;
|
|
81
|
-
size?: ButtonSize;
|
|
82
|
-
loading?: boolean;
|
|
83
|
-
fullWidth?: boolean;
|
|
84
|
-
icon?: React.ReactNode | ((props: {
|
|
85
|
-
label: string;
|
|
86
|
-
size: ButtonSize;
|
|
87
|
-
variant: ButtonVariant;
|
|
88
|
-
color: string;
|
|
89
|
-
}) => React.ReactNode);
|
|
90
|
-
iconName?: string;
|
|
91
|
-
iconColor?: string;
|
|
92
|
-
iconPosition?: 'left' | 'right';
|
|
93
|
-
}
|
|
94
|
-
declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
|
|
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
|
-
|
|
118
|
-
type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive';
|
|
119
|
-
type IconButtonSize = 'sm' | 'md' | 'lg';
|
|
120
|
-
interface IconButtonProps extends TouchableOpacityProps {
|
|
121
|
-
iconName?: string;
|
|
122
|
-
icon?: React.ReactNode;
|
|
123
|
-
iconColor?: string;
|
|
124
|
-
variant?: IconButtonVariant;
|
|
125
|
-
size?: IconButtonSize;
|
|
126
|
-
loading?: boolean;
|
|
127
|
-
/**
|
|
128
|
-
* Badge overlay. `true` shows a dot. A number shows a count (capped at 99).
|
|
129
|
-
* The dot/count appears top-right of the button.
|
|
130
|
-
*/
|
|
131
|
-
badge?: boolean | number;
|
|
132
|
-
}
|
|
133
|
-
declare function IconButton({ iconName, icon, iconColor, variant, size, loading, badge, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
|
|
134
|
-
|
|
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
|
-
interface TextProps extends TextProps$1 {
|
|
137
|
-
variant?: TextVariant;
|
|
138
|
-
color?: string;
|
|
139
|
-
}
|
|
140
|
-
declare function Text({ variant, color, style, children, ...props }: TextProps): React.JSX.Element;
|
|
141
|
-
|
|
142
|
-
interface InputProps extends TextInputProps {
|
|
143
|
-
label?: string;
|
|
144
|
-
/** Red helper text below the input; also changes border to `destructive` color. Takes priority over `hint`. */
|
|
145
|
-
error?: string;
|
|
146
|
-
/** Helper text shown below the input when there is no error. */
|
|
147
|
-
hint?: string;
|
|
148
|
-
/** Disabled visual state — dimmed appearance, not editable. Also sets `editable={false}`. */
|
|
149
|
-
disabled?: boolean;
|
|
150
|
-
/** Text or component rendered before the input text. */
|
|
151
|
-
prefix?: React.ReactNode;
|
|
152
|
-
/** Text or component rendered after the input text. */
|
|
153
|
-
suffix?: React.ReactNode;
|
|
154
|
-
/** Style applied to prefix text if prefix is a string. */
|
|
155
|
-
prefixStyle?: TextStyle;
|
|
156
|
-
/** Style applied to suffix text if suffix is a string. */
|
|
157
|
-
suffixStyle?: TextStyle;
|
|
158
|
-
/**
|
|
159
|
-
* Icon name from `@expo/vector-icons` rendered before the input text.
|
|
160
|
-
* See https://icons.expo.fyi. Takes precedence over `prefix`.
|
|
161
|
-
*/
|
|
162
|
-
prefixIcon?: string;
|
|
163
|
-
/**
|
|
164
|
-
* Icon name from `@expo/vector-icons` rendered after the input text.
|
|
165
|
-
* See https://icons.expo.fyi. Takes precedence over `suffix` (unless `type="password"`).
|
|
166
|
-
*/
|
|
167
|
-
suffixIcon?: string;
|
|
168
|
-
/** Override the resolved prefix icon color. Defaults to `mutedForeground`. */
|
|
169
|
-
prefixIconColor?: string;
|
|
170
|
-
/** Override the resolved suffix icon color. Defaults to `mutedForeground`. */
|
|
171
|
-
suffixIconColor?: string;
|
|
172
|
-
/** Input type. When set to \`'password'\`, shows a toggle button to reveal/hide text. */
|
|
173
|
-
type?: 'text' | 'password';
|
|
174
|
-
/** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
|
|
175
|
-
containerStyle?: ViewStyle;
|
|
176
|
-
/** Style for the inner border wrapper (overrides padding, etc). */
|
|
177
|
-
inputWrapperStyle?: ViewStyle;
|
|
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;
|
|
180
|
-
|
|
181
|
-
type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline' | 'warningOutline';
|
|
182
|
-
type BadgeSize = 'sm' | 'md' | 'lg';
|
|
183
|
-
interface BadgeProps {
|
|
184
|
-
label?: string;
|
|
185
|
-
/** Alternative to \`label\` — allows JSX children. */
|
|
186
|
-
children?: React.ReactNode;
|
|
187
|
-
variant?: BadgeVariant;
|
|
188
|
-
size?: BadgeSize;
|
|
189
|
-
/** Icon rendered before the label/children. */
|
|
190
|
-
icon?: React.ReactNode;
|
|
191
|
-
/**
|
|
192
|
-
* Icon name from `@expo/vector-icons` rendered before the label.
|
|
193
|
-
* See https://icons.expo.fyi. Takes precedence over `icon`.
|
|
194
|
-
*/
|
|
195
|
-
iconName?: string;
|
|
196
|
-
/** Override the resolved icon color. Defaults to the variant foreground color. */
|
|
197
|
-
iconColor?: string;
|
|
198
|
-
style?: ViewStyle;
|
|
199
|
-
}
|
|
200
|
-
declare function Badge({ label, children, variant, size, icon, iconName, iconColor, style }: BadgeProps): React.JSX.Element;
|
|
201
|
-
|
|
202
|
-
type CardVariant = 'elevated' | 'outlined' | 'filled';
|
|
203
|
-
interface CardProps {
|
|
204
|
-
children: React.ReactNode;
|
|
205
|
-
/** Visual style variant. `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
|
|
206
|
-
variant?: CardVariant;
|
|
207
|
-
/** Makes the card tappable. Adds press animation and haptic feedback. */
|
|
208
|
-
onPress?: () => void;
|
|
209
|
-
style?: ViewStyle;
|
|
210
|
-
}
|
|
211
|
-
interface CardHeaderProps {
|
|
212
|
-
children: React.ReactNode;
|
|
213
|
-
style?: ViewStyle;
|
|
214
|
-
}
|
|
215
|
-
interface CardTitleProps {
|
|
216
|
-
children: React.ReactNode;
|
|
217
|
-
style?: TextStyle;
|
|
218
|
-
}
|
|
219
|
-
interface CardDescriptionProps {
|
|
220
|
-
children: React.ReactNode;
|
|
221
|
-
style?: TextStyle;
|
|
222
|
-
}
|
|
223
|
-
interface CardContentProps {
|
|
224
|
-
children: React.ReactNode;
|
|
225
|
-
style?: ViewStyle;
|
|
226
|
-
}
|
|
227
|
-
interface CardFooterProps {
|
|
228
|
-
children: React.ReactNode;
|
|
229
|
-
style?: ViewStyle;
|
|
230
|
-
}
|
|
231
|
-
declare function Card({ children, variant, onPress, style }: CardProps): React.JSX.Element;
|
|
232
|
-
declare function CardHeader({ children, style }: CardHeaderProps): React.JSX.Element;
|
|
233
|
-
declare function CardTitle({ children, style }: CardTitleProps): React.JSX.Element;
|
|
234
|
-
declare function CardDescription({ children, style }: CardDescriptionProps): React.JSX.Element;
|
|
235
|
-
declare function CardContent({ children, style }: CardContentProps): React.JSX.Element;
|
|
236
|
-
declare function CardFooter({ children, style }: CardFooterProps): React.JSX.Element;
|
|
237
|
-
|
|
238
|
-
interface SeparatorProps {
|
|
239
|
-
orientation?: 'horizontal' | 'vertical';
|
|
240
|
-
style?: ViewStyle;
|
|
241
|
-
}
|
|
242
|
-
declare function Separator({ orientation, style }: SeparatorProps): React.JSX.Element;
|
|
243
|
-
|
|
244
|
-
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
245
|
-
interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
|
|
246
|
-
size?: SpinnerSize;
|
|
247
|
-
color?: string;
|
|
248
|
-
label?: string;
|
|
249
|
-
}
|
|
250
|
-
declare function Spinner({ size, color, label, ...props }: SpinnerProps): React.JSX.Element;
|
|
251
|
-
|
|
252
|
-
type SkeletonPreset = 'base' | 'circle' | 'text';
|
|
253
|
-
interface SkeletonProps {
|
|
254
|
-
width?: number | string;
|
|
255
|
-
height?: number;
|
|
256
|
-
borderRadius?: number;
|
|
257
|
-
/** Preset shape. `'circle'` forces width=height square with full radius. `'text'` renders a short line. */
|
|
258
|
-
preset?: SkeletonPreset;
|
|
259
|
-
/** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
|
|
260
|
-
diameter?: number;
|
|
261
|
-
style?: ViewStyle;
|
|
262
|
-
}
|
|
263
|
-
declare function Skeleton({ width, height, borderRadius, preset, diameter, style, }: SkeletonProps): React.JSX.Element;
|
|
264
|
-
|
|
265
|
-
type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
266
|
-
type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
267
|
-
interface AvatarProps {
|
|
268
|
-
src?: string | null;
|
|
269
|
-
/** Manual initials (max 2 chars). */
|
|
270
|
-
fallback?: string;
|
|
271
|
-
/** Full name — extracts up to 2 initials (e.g. "Julian Cruz" → "JC"). */
|
|
272
|
-
fallbackText?: string;
|
|
273
|
-
size?: AvatarSize | number;
|
|
274
|
-
/** Optional status indicator dot — bottom-right corner. */
|
|
275
|
-
status?: AvatarStatus;
|
|
276
|
-
style?: ViewStyle;
|
|
277
|
-
}
|
|
278
|
-
declare function Avatar({ src, fallback, fallbackText, size, status, style }: AvatarProps): React.JSX.Element;
|
|
279
|
-
|
|
280
|
-
type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning';
|
|
281
|
-
interface AlertBannerProps {
|
|
282
|
-
title: string;
|
|
283
|
-
description?: string;
|
|
284
|
-
variant?: AlertBannerVariant;
|
|
285
|
-
icon?: React.ReactNode;
|
|
286
|
-
iconName?: string;
|
|
287
|
-
iconColor?: string;
|
|
288
|
-
style?: ViewStyle;
|
|
289
|
-
}
|
|
290
|
-
declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, style }: AlertBannerProps): React.JSX.Element;
|
|
291
|
-
|
|
292
|
-
type ProgressVariant = 'default' | 'success' | 'warning' | 'destructive';
|
|
293
|
-
interface ProgressProps {
|
|
294
|
-
value?: number;
|
|
295
|
-
max?: number;
|
|
296
|
-
variant?: ProgressVariant;
|
|
297
|
-
style?: ViewStyle;
|
|
298
|
-
}
|
|
299
|
-
declare function Progress({ value, max, variant, style }: ProgressProps): React.JSX.Element;
|
|
300
|
-
|
|
301
|
-
interface EmptyStateProps {
|
|
302
|
-
icon?: React.ReactNode;
|
|
303
|
-
/**
|
|
304
|
-
* Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
|
|
305
|
-
* Takes precedence over `icon`. Sized automatically to fit the slot (48 default, 32 compact).
|
|
306
|
-
*/
|
|
307
|
-
iconName?: string;
|
|
308
|
-
/** Override the resolved icon color. Defaults to `mutedForeground`. */
|
|
309
|
-
iconColor?: string;
|
|
310
|
-
title: string;
|
|
311
|
-
description?: string;
|
|
312
|
-
/** Custom action node. Use `actionLabel` + `onAction` for a pre-built primary Button. */
|
|
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;
|
|
318
|
-
/** `compact` hides description/action and uses tighter spacing and a smaller icon. */
|
|
319
|
-
size?: 'default' | 'compact';
|
|
320
|
-
style?: ViewStyle;
|
|
321
|
-
}
|
|
322
|
-
declare function EmptyState({ icon, iconName, iconColor, title, description, action, actionLabel, onAction, size, style }: EmptyStateProps): React.JSX.Element;
|
|
323
|
-
|
|
324
|
-
interface TextareaProps extends TextInputProps {
|
|
325
|
-
label?: string;
|
|
326
|
-
/** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
|
|
327
|
-
error?: string;
|
|
328
|
-
/** Helper text shown below the textarea when there is no error. */
|
|
329
|
-
hint?: string;
|
|
330
|
-
/** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
|
|
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;
|
|
338
|
-
/** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
|
|
339
|
-
containerStyle?: ViewStyle;
|
|
340
|
-
}
|
|
341
|
-
declare function Textarea({ label, error, hint, rows, prefixIcon, prefixIconNode, prefixIconColor, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
|
|
342
|
-
|
|
343
|
-
interface CheckboxProps {
|
|
344
|
-
checked?: boolean;
|
|
345
|
-
onCheckedChange?: (checked: boolean) => void;
|
|
346
|
-
label?: string;
|
|
347
|
-
disabled?: boolean;
|
|
348
|
-
style?: ViewStyle;
|
|
349
|
-
}
|
|
350
|
-
declare function Checkbox({ checked, onCheckedChange, label, disabled, style, }: CheckboxProps): React.JSX.Element;
|
|
351
|
-
|
|
352
|
-
interface SwitchProps {
|
|
353
|
-
checked?: boolean;
|
|
354
|
-
onCheckedChange?: (checked: boolean) => void;
|
|
355
|
-
disabled?: boolean;
|
|
356
|
-
style?: ViewStyle;
|
|
357
|
-
}
|
|
358
|
-
declare function Switch({ checked, onCheckedChange, disabled, style }: SwitchProps): React.JSX.Element;
|
|
359
|
-
|
|
360
|
-
type ToggleVariant = 'default' | 'outline';
|
|
361
|
-
type ToggleSize = 'sm' | 'md' | 'lg';
|
|
362
|
-
interface ToggleProps extends TouchableOpacityProps {
|
|
363
|
-
pressed?: boolean;
|
|
364
|
-
onPressedChange?: (pressed: boolean) => void;
|
|
365
|
-
variant?: ToggleVariant;
|
|
366
|
-
size?: ToggleSize;
|
|
367
|
-
label?: string;
|
|
368
|
-
/** Icon to show when not pressed */
|
|
369
|
-
icon?: React.ReactNode | ((pressed: boolean) => React.ReactNode);
|
|
370
|
-
/** Icon to show when pressed/active. If omitted, a default check mark is used. */
|
|
371
|
-
activeIcon?: React.ReactNode | ((pressed: boolean) => React.ReactNode);
|
|
372
|
-
/**
|
|
373
|
-
* Icon name from `@expo/vector-icons` shown when not pressed.
|
|
374
|
-
* See https://icons.expo.fyi. Takes precedence over `icon`.
|
|
375
|
-
*/
|
|
376
|
-
iconName?: string;
|
|
377
|
-
/**
|
|
378
|
-
* Icon name from `@expo/vector-icons` shown when pressed/active.
|
|
379
|
-
* See https://icons.expo.fyi. Takes precedence over `activeIcon`.
|
|
380
|
-
*/
|
|
381
|
-
activeIconName?: string;
|
|
382
|
-
/** Override the resolved inactive icon color. Defaults to `mutedForeground`. */
|
|
383
|
-
iconColor?: string;
|
|
384
|
-
/** Override the resolved active icon color. Defaults to `primary`. */
|
|
385
|
-
activeIconColor?: string;
|
|
386
|
-
}
|
|
387
|
-
declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, ...props }: ToggleProps): React.JSX.Element;
|
|
388
|
-
|
|
389
|
-
interface RadioOption {
|
|
390
|
-
label: string;
|
|
391
|
-
value: string;
|
|
392
|
-
disabled?: boolean;
|
|
393
|
-
}
|
|
394
|
-
interface RadioGroupProps {
|
|
395
|
-
options: RadioOption[];
|
|
396
|
-
value?: string;
|
|
397
|
-
onValueChange?: (value: string) => void;
|
|
398
|
-
orientation?: 'vertical' | 'horizontal';
|
|
399
|
-
style?: ViewStyle;
|
|
400
|
-
}
|
|
401
|
-
declare function RadioGroup({ options, value, onValueChange, orientation, style, }: RadioGroupProps): React.JSX.Element;
|
|
402
|
-
|
|
403
|
-
interface TabItem {
|
|
404
|
-
label: string;
|
|
405
|
-
value: string;
|
|
406
|
-
icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
|
|
407
|
-
}
|
|
408
|
-
type TabsVariant = 'pill' | 'underline';
|
|
409
|
-
interface TabsProps {
|
|
410
|
-
tabs: TabItem[];
|
|
411
|
-
variant?: TabsVariant;
|
|
412
|
-
value?: string;
|
|
413
|
-
onValueChange?: (value: string) => void;
|
|
414
|
-
children?: React.ReactNode;
|
|
415
|
-
style?: ViewStyle;
|
|
416
|
-
}
|
|
417
|
-
interface TabsContentProps {
|
|
418
|
-
value: string;
|
|
419
|
-
activeValue: string;
|
|
420
|
-
children: React.ReactNode;
|
|
421
|
-
style?: ViewStyle;
|
|
422
|
-
}
|
|
423
|
-
declare function Tabs({ tabs, variant, value, onValueChange, children, style }: TabsProps): React.JSX.Element;
|
|
424
|
-
declare function TabsContent({ value, activeValue, children, style }: TabsContentProps): React.JSX.Element | null;
|
|
425
|
-
|
|
426
|
-
interface AccordionItem {
|
|
427
|
-
value: string;
|
|
428
|
-
trigger: string;
|
|
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;
|
|
436
|
-
}
|
|
437
|
-
interface AccordionProps {
|
|
438
|
-
items: AccordionItem[];
|
|
439
|
-
/**
|
|
440
|
-
* - `'single'` (default): only one item can be open at a time. Opening another closes the current one.
|
|
441
|
-
* - `'multiple'`: any number of items can be open simultaneously.
|
|
442
|
-
*/
|
|
443
|
-
type?: 'single' | 'multiple';
|
|
444
|
-
/** Item value(s) that should be open on first render. */
|
|
445
|
-
defaultValue?: string | string[];
|
|
446
|
-
style?: ViewStyle;
|
|
447
|
-
}
|
|
448
|
-
declare function Accordion({ items, type, defaultValue, style }: AccordionProps): React.JSX.Element;
|
|
449
|
-
|
|
450
|
-
interface SliderProps {
|
|
451
|
-
value?: number;
|
|
452
|
-
minimumValue?: number;
|
|
453
|
-
maximumValue?: number;
|
|
454
|
-
step?: number;
|
|
455
|
-
onValueChange?: (value: number) => void;
|
|
456
|
-
onSlidingComplete?: (value: number) => void;
|
|
457
|
-
label?: string;
|
|
458
|
-
showValue?: boolean;
|
|
459
|
-
formatValue?: (value: number) => string;
|
|
460
|
-
accessibilityLabel?: string;
|
|
461
|
-
disabled?: boolean;
|
|
462
|
-
style?: ViewStyle;
|
|
463
|
-
}
|
|
464
|
-
declare function Slider({ value, minimumValue, maximumValue, step, onValueChange, onSlidingComplete, label, showValue, formatValue, accessibilityLabel, disabled, style, }: SliderProps): React.JSX.Element;
|
|
465
|
-
|
|
466
|
-
interface SheetProps {
|
|
467
|
-
open: boolean;
|
|
468
|
-
onClose: () => void;
|
|
469
|
-
title?: string;
|
|
470
|
-
/** Secondary text below title. */
|
|
471
|
-
subtitle?: string;
|
|
472
|
-
/** @deprecated Use `subtitle` instead. */
|
|
473
|
-
description?: string;
|
|
474
|
-
/** Show an X close button in the header. */
|
|
475
|
-
showCloseButton?: boolean;
|
|
476
|
-
children?: React.ReactNode;
|
|
477
|
-
/** Style for the inner content container. */
|
|
478
|
-
style?: ViewStyle;
|
|
479
|
-
/** Style for the content wrapper (outside the scroll container). */
|
|
480
|
-
contentStyle?: ViewStyle;
|
|
481
|
-
/** Render children inside BottomSheetScrollView. */
|
|
482
|
-
scrollable?: boolean;
|
|
483
|
-
/** Cap sheet height (dp). Children scroll when content exceeds this value. */
|
|
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)[];
|
|
519
|
-
}
|
|
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;
|
|
521
|
-
|
|
522
|
-
interface SelectOption {
|
|
523
|
-
label: string;
|
|
524
|
-
value: string;
|
|
525
|
-
disabled?: boolean;
|
|
526
|
-
}
|
|
527
|
-
interface SelectProps {
|
|
528
|
-
options: SelectOption[];
|
|
529
|
-
value?: string;
|
|
530
|
-
onValueChange?: (value: string) => void;
|
|
531
|
-
placeholder?: string;
|
|
532
|
-
label?: string;
|
|
533
|
-
error?: string;
|
|
534
|
-
disabled?: boolean;
|
|
535
|
-
style?: ViewStyle;
|
|
536
|
-
}
|
|
537
|
-
declare function Select({ options, value, onValueChange, placeholder, label, error, disabled, style, }: SelectProps): React.JSX.Element;
|
|
538
|
-
|
|
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 }: {
|
|
578
|
-
children: React.ReactNode;
|
|
579
|
-
}): React.JSX.Element;
|
|
580
|
-
|
|
581
|
-
interface CurrencyInputProps {
|
|
582
|
-
value?: string;
|
|
583
|
-
onChangeText?: (formatted: string) => void;
|
|
584
|
-
/** Called with the parsed numeric value (no separators, no prefix). */
|
|
585
|
-
onChangeValue?: (raw: number) => void;
|
|
586
|
-
/** Symbol prepended to the formatted value. Defaults to `'$'`. */
|
|
587
|
-
prefix?: string;
|
|
588
|
-
/** Character used to separate groups of three digits. Defaults to `'.'`. */
|
|
589
|
-
thousandsSeparator?: '.' | ',';
|
|
590
|
-
/** Font size variant. `'large'` renders at 36pt, `'default'` at 17pt. */
|
|
591
|
-
size?: 'default' | 'large';
|
|
592
|
-
label?: string;
|
|
593
|
-
/** Red helper text; also changes input border to destructive color. */
|
|
594
|
-
error?: string;
|
|
595
|
-
hint?: string;
|
|
596
|
-
placeholder?: string;
|
|
597
|
-
editable?: boolean;
|
|
598
|
-
containerStyle?: ViewStyle;
|
|
599
|
-
style?: TextStyle;
|
|
600
|
-
}
|
|
601
|
-
declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
|
|
602
|
-
|
|
603
|
-
type CurrencyDisplayVariant = 'hero' | 'large' | 'medium' | 'small';
|
|
604
|
-
interface CurrencyDisplayProps {
|
|
605
|
-
value: number | string;
|
|
606
|
-
/** Symbol prepended to the formatted value. Defaults to `'$'`. */
|
|
607
|
-
prefix?: string;
|
|
608
|
-
/** When true, shows two decimal places separated by a comma (e.g. `$25.000,00`). Defaults to `false`. */
|
|
609
|
-
showDecimals?: boolean;
|
|
610
|
-
/** Override the color of the formatted text. Defaults to the `foreground` theme token. */
|
|
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;
|
|
618
|
-
style?: ViewStyle;
|
|
619
|
-
}
|
|
620
|
-
declare function CurrencyDisplay({ value, prefix, showDecimals, textColor, variant, autoScale, maxFontSize, style }: CurrencyDisplayProps): React.JSX.Element;
|
|
621
|
-
|
|
622
|
-
type ListItemVariant = 'plain' | 'card';
|
|
623
|
-
interface ListItemProps {
|
|
624
|
-
/**
|
|
625
|
-
* Arbitrary content rendered on the left (avatar, icon, image, etc.).
|
|
626
|
-
* Rendered inside a 44×44 aligned container.
|
|
627
|
-
*/
|
|
628
|
-
leftRender?: React.ReactNode;
|
|
629
|
-
/**
|
|
630
|
-
* Arbitrary content rendered on the right (badge, price, chevron, switch, etc.).
|
|
631
|
-
* Replaces the old `trailing` prop (still accepted as an alias).
|
|
632
|
-
*/
|
|
633
|
-
rightRender?: React.ReactNode | string;
|
|
634
|
-
/** @deprecated Use `rightRender` instead. */
|
|
635
|
-
trailing?: React.ReactNode | string;
|
|
636
|
-
/** @deprecated Use `leftRender` instead. */
|
|
637
|
-
icon?: React.ReactNode;
|
|
638
|
-
/**
|
|
639
|
-
* Icon name from `@expo/vector-icons` rendered in the left slot.
|
|
640
|
-
* See https://icons.expo.fyi. Takes precedence over `leftRender`.
|
|
641
|
-
*/
|
|
642
|
-
leftIcon?: string;
|
|
643
|
-
/**
|
|
644
|
-
* Icon name from `@expo/vector-icons` rendered in the right slot.
|
|
645
|
-
* See https://icons.expo.fyi. Takes precedence over `rightRender`.
|
|
646
|
-
*/
|
|
647
|
-
rightIcon?: string;
|
|
648
|
-
/** Override the resolved left icon color. Defaults to `foreground`. */
|
|
649
|
-
leftIconColor?: string;
|
|
650
|
-
/** Override the resolved right icon color. Defaults to `mutedForeground`. */
|
|
651
|
-
rightIconColor?: string;
|
|
652
|
-
title: string;
|
|
653
|
-
/** Secondary line below the title. */
|
|
654
|
-
subtitle?: string;
|
|
655
|
-
/** Tertiary / caption line below the subtitle. */
|
|
656
|
-
caption?: string;
|
|
657
|
-
/**
|
|
658
|
-
* - `plain` (default): no background, no border — designed to sit inside a parent surface (Card, list wrapper, etc.)
|
|
659
|
-
* - `card`: standalone surface with background, border and shadow.
|
|
660
|
-
*/
|
|
661
|
-
variant?: ListItemVariant;
|
|
662
|
-
/** Show a right-pointing chevron on the far right. Ignored when `rightRender` / `trailing` is set. */
|
|
663
|
-
showChevron?: boolean;
|
|
664
|
-
/** Visual separator line at the bottom of the item. Useful when rendering multiple plain items in a list. */
|
|
665
|
-
showSeparator?: boolean;
|
|
666
|
-
onPress?: () => void;
|
|
667
|
-
disabled?: boolean;
|
|
668
|
-
/** Style applied to the outer container. */
|
|
669
|
-
style?: ViewStyle;
|
|
670
|
-
/** Style applied to the title Text. */
|
|
671
|
-
titleStyle?: TextStyle;
|
|
672
|
-
/** Style applied to the subtitle Text. */
|
|
673
|
-
subtitleStyle?: TextStyle;
|
|
674
|
-
/** Style applied to the caption Text. */
|
|
675
|
-
captionStyle?: TextStyle;
|
|
676
|
-
}
|
|
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;
|
|
678
|
-
|
|
679
|
-
type MenuItemVariant = 'plain' | 'card';
|
|
680
|
-
interface MenuItemProps {
|
|
681
|
-
label: string;
|
|
682
|
-
/** Secondary text rendered below the label. */
|
|
683
|
-
subtitle?: string;
|
|
684
|
-
/**
|
|
685
|
-
* Icon name from `@expo/vector-icons` rendered on the left.
|
|
686
|
-
* See https://icons.expo.fyi.
|
|
687
|
-
*/
|
|
688
|
-
iconName?: string;
|
|
689
|
-
/** Custom icon node rendered on the left. */
|
|
690
|
-
icon?: React.ReactNode;
|
|
691
|
-
/** Override icon color. Defaults to `foreground`. */
|
|
692
|
-
iconColor?: string;
|
|
693
|
-
/**
|
|
694
|
-
* Custom content rendered on the right.
|
|
695
|
-
* When provided, replaces the default chevron.
|
|
696
|
-
* Use for checkboxes, switches, badges, or other controls.
|
|
697
|
-
*/
|
|
698
|
-
rightRender?: React.ReactNode;
|
|
699
|
-
/**
|
|
700
|
-
* Show chevron on the right. Defaults to `true`.
|
|
701
|
-
* Ignored when `rightRender` is provided.
|
|
702
|
-
*/
|
|
703
|
-
showChevron?: boolean;
|
|
704
|
-
onPress: () => void;
|
|
705
|
-
disabled?: boolean;
|
|
706
|
-
/**
|
|
707
|
-
* - `plain` (default): no background — sits inside a parent surface.
|
|
708
|
-
* - `card`: standalone surface with background + border.
|
|
709
|
-
*/
|
|
710
|
-
variant?: MenuItemVariant;
|
|
711
|
-
/** Visual separator line at the bottom. */
|
|
712
|
-
showSeparator?: boolean;
|
|
713
|
-
/** Style applied to the outer container. */
|
|
714
|
-
style?: ViewStyle;
|
|
715
|
-
/** Style applied to the label Text. */
|
|
716
|
-
labelStyle?: TextStyle;
|
|
717
|
-
}
|
|
718
|
-
declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
|
|
719
|
-
|
|
720
|
-
interface ChipProps {
|
|
721
|
-
label: string;
|
|
722
|
-
selected?: boolean;
|
|
723
|
-
onPress?: () => void;
|
|
724
|
-
/** JSX icon rendered before the label. */
|
|
725
|
-
icon?: React.ReactNode;
|
|
726
|
-
/** Icon name from @expo/vector-icons resolved automatically. */
|
|
727
|
-
iconName?: string;
|
|
728
|
-
style?: ViewStyle;
|
|
729
|
-
}
|
|
730
|
-
interface ChipOption {
|
|
731
|
-
label: string;
|
|
732
|
-
value: string | number;
|
|
733
|
-
/** Icon name resolved via renderIcon (Feather, AntDesign, etc.). */
|
|
734
|
-
iconName?: string;
|
|
735
|
-
/** Icon tint color override. */
|
|
736
|
-
iconColor?: string;
|
|
737
|
-
disabled?: boolean;
|
|
738
|
-
}
|
|
739
|
-
interface ChipGroupProps {
|
|
740
|
-
options: ChipOption[];
|
|
741
|
-
value?: string | number | (string | number)[];
|
|
742
|
-
onValueChange?: (value: string | number | (string | number)[]) => void;
|
|
743
|
-
/** When true, allows selecting multiple chips. `value` and `onValueChange` will use arrays. */
|
|
744
|
-
multiSelect?: boolean;
|
|
745
|
-
style?: ViewStyle;
|
|
746
|
-
}
|
|
747
|
-
declare function Chip({ label, selected, onPress, icon, iconName, style }: ChipProps): React.JSX.Element;
|
|
748
|
-
declare function ChipGroup({ options, value, onValueChange, multiSelect, style }: ChipGroupProps): React.JSX.Element;
|
|
749
|
-
|
|
750
|
-
interface ConfirmDialogProps {
|
|
751
|
-
visible: boolean;
|
|
752
|
-
title: string;
|
|
753
|
-
description?: string;
|
|
754
|
-
confirmLabel?: string;
|
|
755
|
-
cancelLabel?: string;
|
|
756
|
-
confirmVariant?: 'primary' | 'destructive';
|
|
757
|
-
onConfirm: () => void;
|
|
758
|
-
onCancel: () => void;
|
|
759
|
-
}
|
|
760
|
-
declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
|
|
761
|
-
|
|
762
|
-
interface LabelValueProps {
|
|
763
|
-
label: string;
|
|
764
|
-
value: string | React.ReactNode;
|
|
765
|
-
/** Icon name from @expo/vector-icons rendered left of label. */
|
|
766
|
-
iconName?: string;
|
|
767
|
-
/** Override icon color. Defaults to foregroundMuted. */
|
|
768
|
-
iconColor?: string;
|
|
769
|
-
style?: ViewStyle;
|
|
770
|
-
}
|
|
771
|
-
declare function LabelValue({ label, value, iconName, iconColor, style }: LabelValueProps): React.JSX.Element;
|
|
772
|
-
|
|
773
|
-
interface MonthPickerValue {
|
|
774
|
-
/** Month number 1–12 */
|
|
775
|
-
month: number;
|
|
776
|
-
year: number;
|
|
777
|
-
}
|
|
778
|
-
interface MonthPickerProps {
|
|
779
|
-
value: MonthPickerValue;
|
|
780
|
-
onChange: (value: MonthPickerValue) => void;
|
|
781
|
-
/** BCP 47 locale tag. Built-in: 'en' | 'es' | 'pt' | 'fr'. For other locales supply formatLabel. */
|
|
782
|
-
locale?: string;
|
|
783
|
-
/** Custom label formatter. Takes precedence over locale. */
|
|
784
|
-
formatLabel?: (value: MonthPickerValue) => string;
|
|
785
|
-
style?: ViewStyle;
|
|
786
|
-
}
|
|
787
|
-
declare function MonthPicker({ value, onChange, locale, formatLabel, style }: MonthPickerProps): React.JSX.Element;
|
|
788
|
-
|
|
789
|
-
type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2';
|
|
790
|
-
interface MediaCardProps {
|
|
791
|
-
/** Image source — URI string or require(). */
|
|
792
|
-
imageSource?: ImageSourcePropType;
|
|
793
|
-
/** Image aspect ratio. Defaults to `'4:3'`. */
|
|
794
|
-
aspectRatio?: MediaCardAspectRatio;
|
|
795
|
-
/** Badge content rendered top-left over the image (e.g. a Badge component or Text). */
|
|
796
|
-
badge?: React.ReactNode;
|
|
797
|
-
/** Icon rendered in a circle button top-right over the image. Defaults to `'heart'`. */
|
|
798
|
-
actionIcon?: React.ReactNode;
|
|
799
|
-
/** Icon name for the action button. Overrides `actionIcon`. */
|
|
800
|
-
actionIconName?: string;
|
|
801
|
-
/** Whether the action icon is in active/filled state. */
|
|
802
|
-
actionActive?: boolean;
|
|
803
|
-
/** Called when the top-right action icon is pressed. */
|
|
804
|
-
onActionPress?: () => void;
|
|
805
|
-
/** Primary text below the image. */
|
|
806
|
-
title?: string;
|
|
807
|
-
/** Secondary text below the title. */
|
|
808
|
-
subtitle?: string;
|
|
809
|
-
/** Tertiary / caption text below subtitle. */
|
|
810
|
-
caption?: string;
|
|
811
|
-
/** Called when the card body is pressed. */
|
|
812
|
-
onPress?: () => void;
|
|
813
|
-
style?: ViewStyle;
|
|
814
|
-
/** Style for the image container. */
|
|
815
|
-
imageStyle?: ViewStyle;
|
|
816
|
-
/** Additional content rendered below caption. */
|
|
817
|
-
footer?: React.ReactNode;
|
|
818
|
-
}
|
|
819
|
-
declare function MediaCard({ imageSource, aspectRatio, badge, actionIcon, actionIconName, actionActive, onActionPress, title, subtitle, caption, onPress, style, imageStyle, footer, }: MediaCardProps): React.JSX.Element;
|
|
820
|
-
|
|
821
|
-
interface CategoryItem {
|
|
822
|
-
label: string;
|
|
823
|
-
value: string;
|
|
824
|
-
/** Icon rendered to the left of the label. ReactNode or icon name string. */
|
|
825
|
-
icon?: React.ReactNode | string;
|
|
826
|
-
/** Badge count over the icon/label. */
|
|
827
|
-
badge?: number;
|
|
828
|
-
}
|
|
829
|
-
interface CategoryStripProps {
|
|
830
|
-
categories: CategoryItem[];
|
|
831
|
-
value?: string | string[];
|
|
832
|
-
/** Called with new value(s) on selection change. */
|
|
833
|
-
onValueChange?: (value: string | string[]) => void;
|
|
834
|
-
/** Allow multiple simultaneous selections. Defaults to false. */
|
|
835
|
-
multiSelect?: boolean;
|
|
836
|
-
style?: ViewStyle;
|
|
837
|
-
/** Style applied to each pill item. */
|
|
838
|
-
itemStyle?: ViewStyle;
|
|
839
|
-
}
|
|
840
|
-
declare function CategoryStrip({ categories, value, onValueChange, multiSelect, style, itemStyle, }: CategoryStripProps): React.JSX.Element;
|
|
841
|
-
|
|
842
|
-
interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
|
|
843
|
-
/** Children content to render inside the pressable. */
|
|
844
|
-
children: React.ReactNode;
|
|
845
|
-
/** Called when pressed. */
|
|
846
|
-
onPress?: () => void;
|
|
847
|
-
/** Scale value on press. Defaults to `0.98` (MediaCard-style). */
|
|
848
|
-
pressScale?: number;
|
|
849
|
-
/** Bounciness of the spring animation on release. Defaults to `4`. */
|
|
850
|
-
bounciness?: number;
|
|
851
|
-
/** Enable haptic feedback on press. Defaults to `true`. */
|
|
852
|
-
haptics?: boolean;
|
|
853
|
-
/** Additional style for the Animated wrapper. */
|
|
854
|
-
style?: ViewStyle;
|
|
855
|
-
/** Disable interaction. */
|
|
856
|
-
disabled?: boolean;
|
|
857
|
-
/** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
|
|
858
|
-
hoverScale?: number;
|
|
859
|
-
}
|
|
860
|
-
/**
|
|
861
|
-
* Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
|
|
862
|
-
* Use for custom pressable content that needs consistent press feel.
|
|
863
|
-
*/
|
|
864
|
-
declare function Pressable({ children, onPress, pressScale, bounciness, haptics, style, disabled, hoverScale, ...touchableProps }: PressableProps): React.JSX.Element;
|
|
865
|
-
|
|
866
|
-
type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
|
|
867
|
-
type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
|
|
868
|
-
interface DetailRowProps {
|
|
869
|
-
label: React.ReactNode;
|
|
870
|
-
value: string | React.ReactNode;
|
|
871
|
-
/** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
|
|
872
|
-
separator?: DetailRowSeparator;
|
|
873
|
-
labelWeight?: DetailRowLabelWeight;
|
|
874
|
-
/** Semantic color key or hex string for value text. Only applies when value is a string. */
|
|
875
|
-
valueColor?: string;
|
|
876
|
-
/** Node rendered left of the label (e.g. Avatar, Icon). */
|
|
877
|
-
leftIcon?: React.ReactNode;
|
|
878
|
-
/** Icon name from @expo/vector-icons rendered left of label. Takes precedence over leftIcon. */
|
|
879
|
-
leftIconName?: string;
|
|
880
|
-
/** Override left icon color. Defaults to foregroundMuted. */
|
|
881
|
-
leftIconColor?: string;
|
|
882
|
-
/** Icon name from @expo/vector-icons rendered right of value. */
|
|
883
|
-
rightIconName?: string;
|
|
884
|
-
/** Override right icon color. Defaults to foregroundMuted. */
|
|
885
|
-
rightIconColor?: string;
|
|
886
|
-
style?: ViewStyle;
|
|
887
|
-
labelStyle?: TextStyle;
|
|
888
|
-
/** Only applies when value is a string. */
|
|
889
|
-
valueStyle?: TextStyle;
|
|
890
|
-
}
|
|
891
|
-
declare function DetailRow({ label, value, separator, labelWeight, valueColor, leftIcon, leftIconName, leftIconColor, rightIconName, rightIconColor, style, labelStyle, valueStyle, }: DetailRowProps): React.JSX.Element;
|
|
892
|
-
|
|
893
117
|
type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
|
|
894
118
|
interface IconProps {
|
|
895
119
|
/** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
|
|
@@ -899,6 +123,17 @@ interface IconProps {
|
|
|
899
123
|
/** Override the resolved family when the same name exists in multiple families. */
|
|
900
124
|
family?: IconFamily;
|
|
901
125
|
}
|
|
126
|
+
/**
|
|
127
|
+
* Restrict which icon families participate in automatic name resolution.
|
|
128
|
+
* Narrowing to the families you actually use shrinks the resolution cache and
|
|
129
|
+
* speeds up the first `renderIcon` call (no scanning thousands of unused glyphs).
|
|
130
|
+
*
|
|
131
|
+
* Note: all six families are still statically imported by this module — Metro
|
|
132
|
+
* bundles them regardless. This controls *resolution scope*, not bundle size.
|
|
133
|
+
*
|
|
134
|
+
* @example configureIconFamilies(['Feather', 'MaterialIcons'])
|
|
135
|
+
*/
|
|
136
|
+
declare function configureIconFamilies(families: IconFamily[]): void;
|
|
902
137
|
declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
|
|
903
138
|
declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
|
|
904
139
|
|
|
@@ -989,113 +224,120 @@ declare const BREAKPOINTS: {
|
|
|
989
224
|
};
|
|
990
225
|
declare const TYPOGRAPHY: {
|
|
991
226
|
readonly 'display-hero': {
|
|
992
|
-
readonly fontFamily: "
|
|
227
|
+
readonly fontFamily: "Sohne-Bold";
|
|
993
228
|
readonly fontSize: 64;
|
|
994
229
|
readonly fontWeight: "700";
|
|
995
230
|
readonly lineHeight: 70;
|
|
996
231
|
readonly letterSpacing: -1;
|
|
997
232
|
};
|
|
998
233
|
readonly 'display-xl': {
|
|
999
|
-
readonly fontFamily: "
|
|
234
|
+
readonly fontFamily: "Sohne-Bold";
|
|
1000
235
|
readonly fontSize: 28;
|
|
1001
236
|
readonly fontWeight: "700";
|
|
1002
237
|
readonly lineHeight: 40;
|
|
1003
238
|
readonly letterSpacing: 0;
|
|
1004
239
|
};
|
|
1005
240
|
readonly 'display-lg': {
|
|
1006
|
-
readonly fontFamily: "
|
|
1007
|
-
readonly fontSize:
|
|
1008
|
-
readonly fontWeight: "
|
|
1009
|
-
readonly lineHeight:
|
|
1010
|
-
readonly letterSpacing: -0.
|
|
241
|
+
readonly fontFamily: "Sohne-SemiBold";
|
|
242
|
+
readonly fontSize: 24;
|
|
243
|
+
readonly fontWeight: "600";
|
|
244
|
+
readonly lineHeight: 32;
|
|
245
|
+
readonly letterSpacing: -0.3;
|
|
1011
246
|
};
|
|
1012
247
|
readonly 'display-md': {
|
|
1013
|
-
readonly fontFamily: "
|
|
1014
|
-
readonly fontSize:
|
|
1015
|
-
readonly fontWeight: "
|
|
1016
|
-
readonly lineHeight:
|
|
248
|
+
readonly fontFamily: "Sohne-SemiBold";
|
|
249
|
+
readonly fontSize: 20;
|
|
250
|
+
readonly fontWeight: "600";
|
|
251
|
+
readonly lineHeight: 28;
|
|
1017
252
|
readonly letterSpacing: 0;
|
|
1018
253
|
};
|
|
1019
254
|
readonly 'display-sm': {
|
|
1020
|
-
readonly fontFamily: "
|
|
1021
|
-
readonly fontSize:
|
|
255
|
+
readonly fontFamily: "Sohne-SemiBold";
|
|
256
|
+
readonly fontSize: 18;
|
|
1022
257
|
readonly fontWeight: "600";
|
|
1023
258
|
readonly lineHeight: 24;
|
|
1024
259
|
readonly letterSpacing: -0.18;
|
|
1025
260
|
};
|
|
1026
261
|
readonly 'title-md': {
|
|
1027
|
-
readonly fontFamily: "
|
|
1028
|
-
readonly fontSize:
|
|
262
|
+
readonly fontFamily: "Sohne-SemiBold";
|
|
263
|
+
readonly fontSize: 17;
|
|
1029
264
|
readonly fontWeight: "600";
|
|
1030
|
-
readonly lineHeight:
|
|
265
|
+
readonly lineHeight: 22;
|
|
1031
266
|
readonly letterSpacing: 0;
|
|
1032
267
|
};
|
|
1033
268
|
readonly 'title-sm': {
|
|
1034
|
-
readonly fontFamily: "
|
|
1035
|
-
readonly fontSize:
|
|
269
|
+
readonly fontFamily: "Sohne-Medium";
|
|
270
|
+
readonly fontSize: 15;
|
|
1036
271
|
readonly fontWeight: "500";
|
|
1037
272
|
readonly lineHeight: 20;
|
|
1038
273
|
readonly letterSpacing: 0;
|
|
1039
274
|
};
|
|
1040
275
|
readonly 'body-md': {
|
|
1041
|
-
readonly fontFamily: "
|
|
276
|
+
readonly fontFamily: "Sohne-Regular";
|
|
1042
277
|
readonly fontSize: 16;
|
|
1043
278
|
readonly fontWeight: "400";
|
|
1044
279
|
readonly lineHeight: 24;
|
|
1045
280
|
readonly letterSpacing: 0;
|
|
1046
281
|
};
|
|
1047
282
|
readonly 'body-sm': {
|
|
1048
|
-
readonly fontFamily: "
|
|
283
|
+
readonly fontFamily: "Sohne-Regular";
|
|
1049
284
|
readonly fontSize: 14;
|
|
1050
285
|
readonly fontWeight: "400";
|
|
1051
286
|
readonly lineHeight: 20;
|
|
1052
287
|
readonly letterSpacing: 0;
|
|
1053
288
|
};
|
|
1054
289
|
readonly caption: {
|
|
1055
|
-
readonly fontFamily: "
|
|
290
|
+
readonly fontFamily: "Sohne-Medium";
|
|
1056
291
|
readonly fontSize: 14;
|
|
1057
292
|
readonly fontWeight: "500";
|
|
1058
293
|
readonly lineHeight: 18;
|
|
1059
294
|
readonly letterSpacing: 0;
|
|
1060
295
|
};
|
|
1061
296
|
readonly 'caption-sm': {
|
|
1062
|
-
readonly fontFamily: "
|
|
297
|
+
readonly fontFamily: "Sohne-Regular";
|
|
1063
298
|
readonly fontSize: 13;
|
|
1064
299
|
readonly fontWeight: "400";
|
|
1065
300
|
readonly lineHeight: 16;
|
|
1066
301
|
readonly letterSpacing: 0;
|
|
1067
302
|
};
|
|
1068
303
|
readonly 'badge-text': {
|
|
1069
|
-
readonly fontFamily: "
|
|
304
|
+
readonly fontFamily: "Sohne-SemiBold";
|
|
1070
305
|
readonly fontSize: 11;
|
|
1071
306
|
readonly fontWeight: "600";
|
|
1072
|
-
readonly lineHeight:
|
|
307
|
+
readonly lineHeight: 14;
|
|
308
|
+
readonly letterSpacing: 0;
|
|
309
|
+
};
|
|
310
|
+
readonly 'badge-text-md': {
|
|
311
|
+
readonly fontFamily: "Sohne-SemiBold";
|
|
312
|
+
readonly fontSize: 13;
|
|
313
|
+
readonly fontWeight: "600";
|
|
314
|
+
readonly lineHeight: 16;
|
|
1073
315
|
readonly letterSpacing: 0;
|
|
1074
316
|
};
|
|
1075
317
|
readonly 'micro-label': {
|
|
1076
|
-
readonly fontFamily: "
|
|
318
|
+
readonly fontFamily: "Sohne-Bold";
|
|
1077
319
|
readonly fontSize: 12;
|
|
1078
320
|
readonly fontWeight: "700";
|
|
1079
321
|
readonly lineHeight: 16;
|
|
1080
322
|
readonly letterSpacing: 0;
|
|
1081
323
|
};
|
|
1082
324
|
readonly 'uppercase-tag': {
|
|
1083
|
-
readonly fontFamily: "
|
|
1084
|
-
readonly fontSize:
|
|
325
|
+
readonly fontFamily: "Sohne-Bold";
|
|
326
|
+
readonly fontSize: 11;
|
|
1085
327
|
readonly fontWeight: "700";
|
|
1086
|
-
readonly lineHeight:
|
|
1087
|
-
readonly letterSpacing: 0.
|
|
328
|
+
readonly lineHeight: 14;
|
|
329
|
+
readonly letterSpacing: 0.6;
|
|
1088
330
|
readonly textTransform: "uppercase";
|
|
1089
331
|
};
|
|
1090
332
|
readonly 'button-lg': {
|
|
1091
|
-
readonly fontFamily: "
|
|
333
|
+
readonly fontFamily: "Sohne-Medium";
|
|
1092
334
|
readonly fontSize: 16;
|
|
1093
335
|
readonly fontWeight: "500";
|
|
1094
336
|
readonly lineHeight: 22;
|
|
1095
337
|
readonly letterSpacing: 0;
|
|
1096
338
|
};
|
|
1097
339
|
readonly 'button-sm': {
|
|
1098
|
-
readonly fontFamily: "
|
|
340
|
+
readonly fontFamily: "Sohne-Medium";
|
|
1099
341
|
readonly fontSize: 14;
|
|
1100
342
|
readonly fontWeight: "500";
|
|
1101
343
|
readonly lineHeight: 18;
|
|
@@ -1111,4 +353,4 @@ type RadiusKey = keyof Radius;
|
|
|
1111
353
|
type Typography = typeof TYPOGRAPHY;
|
|
1112
354
|
type TypographyKey = keyof Typography;
|
|
1113
355
|
|
|
1114
|
-
export {
|
|
356
|
+
export { BREAKPOINTS, type ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, type ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, renderIcon, useTheme };
|