react-native-system-ui 1.0.2 → 1.0.3
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/README.md +42 -22
- package/dist/cjs/components/action-sheet/ActionSheet.js +1 -301
- package/dist/cjs/components/action-sheet/index.js +1 -16
- package/dist/cjs/components/action-sheet/tokens.js +1 -133
- package/dist/cjs/components/area/Area.js +1 -127
- package/dist/cjs/components/area/index.js +1 -9
- package/dist/cjs/components/area/tokens.js +1 -14
- package/dist/cjs/components/avatar/Avatar.js +1 -125
- package/dist/cjs/components/avatar/index.js +1 -18
- package/dist/cjs/components/avatar/tokens.js +1 -56
- package/dist/cjs/components/badge/Badge.js +1 -166
- package/dist/cjs/components/badge/index.js +1 -8
- package/dist/cjs/components/badge/tokens.js +1 -81
- package/dist/cjs/components/button/Button.js +1 -203
- package/dist/cjs/components/button/ButtonContext.js +1 -12
- package/dist/cjs/components/button/ButtonGroup.js +1 -65
- package/dist/cjs/components/button/index.js +1 -12
- package/dist/cjs/components/button/tokens.js +1 -176
- package/dist/cjs/components/calendar/Calendar.js +1 -452
- package/dist/cjs/components/calendar/index.js +1 -9
- package/dist/cjs/components/calendar/tokens.js +1 -129
- package/dist/cjs/components/cascader/Cascader.js +1 -482
- package/dist/cjs/components/cascader/index.js +1 -15
- package/dist/cjs/components/cascader/tokens.js +1 -138
- package/dist/cjs/components/cascader/useCascaderExtend.js +1 -39
- package/dist/cjs/components/cell/Cell.js +1 -181
- package/dist/cjs/components/cell/CellContext.js +1 -19
- package/dist/cjs/components/cell/CellGroup.js +1 -100
- package/dist/cjs/components/cell/index.js +1 -19
- package/dist/cjs/components/cell/tokens.js +1 -173
- package/dist/cjs/components/checkbox/Checkbox.js +1 -251
- package/dist/cjs/components/checkbox/CheckboxContext.js +1 -12
- package/dist/cjs/components/checkbox/CheckboxGroup.js +1 -148
- package/dist/cjs/components/checkbox/index.js +1 -16
- package/dist/cjs/components/checkbox/tokens.js +1 -97
- package/dist/cjs/components/circle/Circle.js +1 -212
- package/dist/cjs/components/circle/index.js +1 -9
- package/dist/cjs/components/circle/tokens.js +1 -55
- package/dist/cjs/components/collapse/Collapse.js +1 -311
- package/dist/cjs/components/collapse/index.js +1 -8
- package/dist/cjs/components/collapse/tokens.js +1 -81
- package/dist/cjs/components/config-provider/ConfigProvider.js +1 -44
- package/dist/cjs/components/config-provider/DirectionContext.js +1 -15
- package/dist/cjs/components/config-provider/LocaleContext.js +1 -16
- package/dist/cjs/components/config-provider/index.js +1 -40
- package/dist/cjs/components/config-provider/locale/en-US.js +1 -112
- package/dist/cjs/components/config-provider/locale/zh-CN.js +1 -112
- package/dist/cjs/components/config-provider/tokens.js +1 -11
- package/dist/cjs/components/config-provider/useDirection.js +1 -16
- package/dist/cjs/components/config-provider/useLocale.js +1 -16
- package/dist/cjs/components/count-down/CountDown.js +1 -88
- package/dist/cjs/components/count-down/index.js +1 -15
- package/dist/cjs/components/count-down/tokens.js +1 -34
- package/dist/cjs/components/datetime-picker/DatetimePicker.js +1 -319
- package/dist/cjs/components/datetime-picker/index.js +1 -9
- package/dist/cjs/components/datetime-picker/tokens.js +1 -22
- package/dist/cjs/components/dialog/Dialog.js +1 -433
- package/dist/cjs/components/dialog/imperative.js +1 -199
- package/dist/cjs/components/dialog/index.js +1 -23
- package/dist/cjs/components/dialog/tokens.js +1 -64
- package/dist/cjs/components/divider/Divider.js +1 -126
- package/dist/cjs/components/divider/index.js +1 -8
- package/dist/cjs/components/divider/tokens.js +1 -62
- package/dist/cjs/components/empty/Empty.js +1 -125
- package/dist/cjs/components/empty/index.js +1 -8
- package/dist/cjs/components/empty/tokens.js +1 -55
- package/dist/cjs/components/error-boundary/ErrorBoundary.js +1 -74
- package/dist/cjs/components/error-boundary/index.js +1 -19
- package/dist/cjs/components/field/Field.js +1 -565
- package/dist/cjs/components/field/index.js +1 -29
- package/dist/cjs/components/field/tokens.js +1 -150
- package/dist/cjs/components/flex/Flex.js +1 -85
- package/dist/cjs/components/flex/FlexContext.js +1 -12
- package/dist/cjs/components/flex/FlexItem.js +1 -95
- package/dist/cjs/components/flex/index.js +1 -19
- package/dist/cjs/components/flex/tokens.js +1 -21
- package/dist/cjs/components/form/Form.js +1 -340
- package/dist/cjs/components/form/FormContext.js +1 -12
- package/dist/cjs/components/form/FormItem.js +1 -151
- package/dist/cjs/components/form/FormList.js +1 -95
- package/dist/cjs/components/form/index.js +1 -50
- package/dist/cjs/components/form/tokens.js +1 -14
- package/dist/cjs/components/form/utils.js +1 -56
- package/dist/cjs/components/grid/Grid.js +1 -118
- package/dist/cjs/components/grid/GridContext.js +1 -12
- package/dist/cjs/components/grid/GridItem.js +1 -158
- package/dist/cjs/components/grid/index.js +1 -12
- package/dist/cjs/components/grid/tokens.js +1 -105
- package/dist/cjs/components/image/Image.js +1 -263
- package/dist/cjs/components/image/index.js +1 -16
- package/dist/cjs/components/image/tokens.js +1 -66
- package/dist/cjs/components/image-preview/ImagePreview.js +1 -408
- package/dist/cjs/components/image-preview/imperative.js +1 -72
- package/dist/cjs/components/image-preview/index.js +1 -17
- package/dist/cjs/components/image-preview/tokens.js +1 -43
- package/dist/cjs/components/index.js +1 -769
- package/dist/cjs/components/input/Input.js +1 -122
- package/dist/cjs/components/input/index.js +1 -15
- package/dist/cjs/components/input/tokens.js +1 -22
- package/dist/cjs/components/loading/Loading.js +1 -76
- package/dist/cjs/components/loading/index.js +1 -8
- package/dist/cjs/components/loading/tokens.js +1 -32
- package/dist/cjs/components/nav-bar/NavBar.js +1 -196
- package/dist/cjs/components/nav-bar/index.js +1 -16
- package/dist/cjs/components/nav-bar/tokens.js +1 -90
- package/dist/cjs/components/notice-bar/NoticeBar.js +1 -369
- package/dist/cjs/components/notice-bar/index.js +1 -8
- package/dist/cjs/components/notice-bar/tokens.js +1 -39
- package/dist/cjs/components/notify/Notify.js +1 -262
- package/dist/cjs/components/notify/imperative.js +1 -145
- package/dist/cjs/components/notify/index.js +1 -10
- package/dist/cjs/components/notify/tokens.js +1 -74
- package/dist/cjs/components/number-keyboard/NumberKeyboard.js +1 -487
- package/dist/cjs/components/number-keyboard/index.js +1 -15
- package/dist/cjs/components/number-keyboard/tokens.js +1 -59
- package/dist/cjs/components/overlay/Overlay.js +1 -81
- package/dist/cjs/components/overlay/index.js +1 -28
- package/dist/cjs/components/overlay/tokens.js +1 -13
- package/dist/cjs/components/password-input/PasswordInput.js +1 -346
- package/dist/cjs/components/password-input/index.js +1 -13
- package/dist/cjs/components/password-input/tokens.js +1 -53
- package/dist/cjs/components/picker/Picker.js +1 -1056
- package/dist/cjs/components/picker/index.js +1 -15
- package/dist/cjs/components/picker/tokens.js +1 -53
- package/dist/cjs/components/popup/Popup.js +1 -518
- package/dist/cjs/components/popup/index.js +1 -15
- package/dist/cjs/components/popup/tokens.js +1 -62
- package/dist/cjs/components/portal/Portal.js +1 -50
- package/dist/cjs/components/portal/PortalContext.js +1 -15
- package/dist/cjs/components/portal/PortalHost.js +1 -253
- package/dist/cjs/components/portal/index.js +1 -25
- package/dist/cjs/components/portal/tokens.js +1 -11
- package/dist/cjs/components/progress/Progress.js +1 -216
- package/dist/cjs/components/progress/index.js +1 -14
- package/dist/cjs/components/progress/tokens.js +1 -52
- package/dist/cjs/components/radio/Radio.js +1 -245
- package/dist/cjs/components/radio/RadioContext.js +1 -12
- package/dist/cjs/components/radio/RadioGroup.js +1 -113
- package/dist/cjs/components/radio/index.js +1 -16
- package/dist/cjs/components/radio/tokens.js +1 -92
- package/dist/cjs/components/safe-area-view/SafeAreaView.js +1 -59
- package/dist/cjs/components/safe-area-view/index.js +1 -12
- package/dist/cjs/components/safe-area-view/tokens.js +1 -11
- package/dist/cjs/components/search/Search.js +1 -215
- package/dist/cjs/components/search/index.js +1 -15
- package/dist/cjs/components/search/tokens.js +1 -54
- package/dist/cjs/components/selector/Selector.js +1 -185
- package/dist/cjs/components/selector/index.js +1 -15
- package/dist/cjs/components/selector/tokens.js +1 -100
- package/dist/cjs/components/share-sheet/ShareSheet.js +1 -287
- package/dist/cjs/components/share-sheet/index.js +1 -16
- package/dist/cjs/components/share-sheet/tokens.js +1 -55
- package/dist/cjs/components/sidebar/Sidebar.js +1 -103
- package/dist/cjs/components/sidebar/SidebarContext.js +1 -17
- package/dist/cjs/components/sidebar/SidebarItem.js +1 -103
- package/dist/cjs/components/sidebar/index.js +1 -26
- package/dist/cjs/components/sidebar/tokens.js +1 -93
- package/dist/cjs/components/skeleton/Skeleton.js +1 -162
- package/dist/cjs/components/skeleton/index.js +1 -22
- package/dist/cjs/components/skeleton/tokens.js +1 -39
- package/dist/cjs/components/slider/Slider.js +1 -633
- package/dist/cjs/components/slider/index.js +1 -8
- package/dist/cjs/components/slider/tokens.js +1 -37
- package/dist/cjs/components/space/Space.js +1 -134
- package/dist/cjs/components/space/index.js +1 -18
- package/dist/cjs/components/space/tokens.js +1 -39
- package/dist/cjs/components/stepper/Stepper.js +1 -484
- package/dist/cjs/components/stepper/index.js +1 -15
- package/dist/cjs/components/stepper/tokens.js +1 -60
- package/dist/cjs/components/swiper/Swiper.js +1 -364
- package/dist/cjs/components/swiper/SwiperItem.js +1 -12
- package/dist/cjs/components/swiper/SwiperPagIndicator.js +1 -106
- package/dist/cjs/components/swiper/index.js +1 -40
- package/dist/cjs/components/swiper/tokens.js +1 -18
- package/dist/cjs/components/switch/Switch.js +1 -102
- package/dist/cjs/components/switch/index.js +1 -15
- package/dist/cjs/components/switch/tokens.js +1 -31
- package/dist/cjs/components/tabbar/Tabbar.js +1 -149
- package/dist/cjs/components/tabbar/TabbarContext.js +1 -17
- package/dist/cjs/components/tabbar/TabbarItem.js +1 -159
- package/dist/cjs/components/tabbar/index.js +1 -25
- package/dist/cjs/components/tabbar/tokens.js +1 -41
- package/dist/cjs/components/tabs/Tabs.js +1 -860
- package/dist/cjs/components/tabs/index.js +1 -25
- package/dist/cjs/components/tabs/tokens.js +1 -111
- package/dist/cjs/components/tag/Tag.js +1 -130
- package/dist/cjs/components/tag/index.js +1 -8
- package/dist/cjs/components/tag/tokens.js +1 -104
- package/dist/cjs/components/toast/Toast.js +1 -306
- package/dist/cjs/components/toast/imperative.js +1 -144
- package/dist/cjs/components/toast/index.js +1 -10
- package/dist/cjs/components/toast/tokens.js +1 -43
- package/dist/cjs/components/typography/Typography.js +1 -181
- package/dist/cjs/components/typography/index.js +1 -9
- package/dist/cjs/components/typography/tokens.js +1 -88
- package/dist/cjs/components/water-mark/WaterMark.js +1 -172
- package/dist/cjs/components/water-mark/index.js +1 -22
- package/dist/cjs/components/water-mark/tokens.js +1 -54
- package/dist/cjs/design-system/Text.js +1 -38
- package/dist/cjs/design-system/ThemeContext.js +1 -19
- package/dist/cjs/design-system/ThemeProvider.js +1 -31
- package/dist/cjs/design-system/createComponentTokensHook.js +1 -28
- package/dist/cjs/design-system/index.js +1 -66
- package/dist/cjs/design-system/mergeTokensOverride.js +1 -9
- package/dist/cjs/design-system/presets.js +1 -146
- package/dist/cjs/design-system/tokens.js +1 -135
- package/dist/cjs/design-system/useTheme.js +1 -16
- package/dist/cjs/hooks/animation/index.js +1 -25
- package/dist/cjs/hooks/animation/useAnimatedTransition.js +1 -72
- package/dist/cjs/hooks/animation/useReducedMotion.js +1 -75
- package/dist/cjs/hooks/aria/index.js +1 -49
- package/dist/cjs/hooks/aria/useAriaListBox.js +1 -50
- package/dist/cjs/hooks/aria/useAriaOverlay.js +1 -50
- package/dist/cjs/hooks/aria/useAriaPress.js +1 -94
- package/dist/cjs/hooks/aria/useAriaToggle.js +1 -41
- package/dist/cjs/hooks/gesture/index.js +1 -16
- package/dist/cjs/hooks/gesture/useGestureScroll.js +1 -129
- package/dist/cjs/hooks/index.js +1 -96
- package/dist/cjs/hooks/overlay/OverlayStackStore.js +1 -106
- package/dist/cjs/hooks/overlay/index.js +1 -27
- package/dist/cjs/hooks/overlay/useOverlayStack.js +1 -53
- package/dist/cjs/hooks/useControllableValue.js +1 -41
- package/dist/cjs/hooks/useCountDown.js +1 -99
- package/dist/cjs/hooks/useHairline.js +1 -46
- package/dist/cjs/hooks/useSafeAreaPadding.js +1 -38
- package/dist/cjs/index.js +1 -104
- package/dist/cjs/nativewind.js +1 -0
- package/dist/cjs/platform/animation.js +1 -22
- package/dist/cjs/platform/history.js +1 -14
- package/dist/cjs/platform/index.js +1 -60
- package/dist/cjs/platform/measure.js +1 -39
- package/dist/cjs/platform/runtime.js +1 -19
- package/dist/cjs/platform/scrollLock.js +1 -24
- package/dist/cjs/utils/array.js +1 -12
- package/dist/cjs/utils/color.js +1 -33
- package/dist/cjs/utils/compare.js +1 -21
- package/dist/cjs/utils/createPlatformShadow.js +1 -52
- package/dist/cjs/utils/date.js +1 -45
- package/dist/cjs/utils/deepMerge.js +1 -27
- package/dist/cjs/utils/hairline.js +1 -107
- package/dist/cjs/utils/index.js +1 -148
- package/dist/cjs/utils/number.js +1 -65
- package/dist/cjs/utils/promise.js +1 -9
- package/dist/cjs/utils/render.js +1 -21
- package/dist/cjs/utils/rtl.js +1 -25
- package/dist/cjs/utils/string.js +1 -22
- package/dist/cjs/utils/validate.js +1 -39
- package/dist/es/components/action-sheet/ActionSheet.js +1 -275
- package/dist/es/components/action-sheet/index.js +1 -3
- package/dist/es/components/action-sheet/tokens.js +1 -126
- package/dist/es/components/area/Area.js +1 -113
- package/dist/es/components/area/index.js +1 -2
- package/dist/es/components/area/tokens.js +1 -8
- package/dist/es/components/avatar/Avatar.js +1 -106
- package/dist/es/components/avatar/index.js +1 -1
- package/dist/es/components/avatar/tokens.js +1 -49
- package/dist/es/components/badge/Badge.js +1 -147
- package/dist/es/components/badge/index.js +1 -2
- package/dist/es/components/badge/tokens.js +1 -75
- package/dist/es/components/button/Button.js +1 -184
- package/dist/es/components/button/ButtonContext.js +1 -1
- package/dist/es/components/button/ButtonGroup.js +1 -46
- package/dist/es/components/button/index.js +1 -7
- package/dist/es/components/button/tokens.js +1 -170
- package/dist/es/components/calendar/Calendar.js +1 -432
- package/dist/es/components/calendar/index.js +1 -2
- package/dist/es/components/calendar/tokens.js +1 -122
- package/dist/es/components/cascader/Cascader.js +1 -456
- package/dist/es/components/cascader/index.js +1 -3
- package/dist/es/components/cascader/tokens.js +1 -131
- package/dist/es/components/cascader/useCascaderExtend.js +1 -32
- package/dist/es/components/cell/Cell.js +1 -156
- package/dist/es/components/cell/CellContext.js +1 -6
- package/dist/es/components/cell/CellGroup.js +1 -81
- package/dist/es/components/cell/index.js +1 -8
- package/dist/es/components/cell/tokens.js +1 -160
- package/dist/es/components/checkbox/Checkbox.js +1 -220
- package/dist/es/components/checkbox/CheckboxContext.js +1 -1
- package/dist/es/components/checkbox/CheckboxGroup.js +1 -117
- package/dist/es/components/checkbox/index.js +1 -5
- package/dist/es/components/checkbox/tokens.js +1 -85
- package/dist/es/components/circle/Circle.js +1 -187
- package/dist/es/components/circle/index.js +1 -2
- package/dist/es/components/circle/tokens.js +1 -48
- package/dist/es/components/collapse/Collapse.js +1 -286
- package/dist/es/components/collapse/index.js +1 -2
- package/dist/es/components/collapse/tokens.js +1 -74
- package/dist/es/components/config-provider/ConfigProvider.js +1 -25
- package/dist/es/components/config-provider/DirectionContext.js +1 -2
- package/dist/es/components/config-provider/LocaleContext.js +1 -3
- package/dist/es/components/config-provider/index.js +1 -5
- package/dist/es/components/config-provider/locale/en-US.js +1 -106
- package/dist/es/components/config-provider/locale/zh-CN.js +1 -106
- package/dist/es/components/config-provider/tokens.js +1 -5
- package/dist/es/components/config-provider/useDirection.js +1 -3
- package/dist/es/components/config-provider/useLocale.js +1 -3
- package/dist/es/components/count-down/CountDown.js +1 -69
- package/dist/es/components/count-down/index.js +1 -3
- package/dist/es/components/count-down/tokens.js +1 -27
- package/dist/es/components/datetime-picker/DatetimePicker.js +1 -305
- package/dist/es/components/datetime-picker/index.js +1 -2
- package/dist/es/components/datetime-picker/tokens.js +1 -16
- package/dist/es/components/dialog/Dialog.js +1 -407
- package/dist/es/components/dialog/imperative.js +1 -185
- package/dist/es/components/dialog/index.js +1 -17
- package/dist/es/components/dialog/tokens.js +1 -57
- package/dist/es/components/divider/Divider.js +1 -107
- package/dist/es/components/divider/index.js +1 -2
- package/dist/es/components/divider/tokens.js +1 -55
- package/dist/es/components/empty/Empty.js +1 -100
- package/dist/es/components/empty/index.js +1 -2
- package/dist/es/components/empty/tokens.js +1 -48
- package/dist/es/components/error-boundary/ErrorBoundary.js +1 -62
- package/dist/es/components/error-boundary/index.js +1 -1
- package/dist/es/components/field/Field.js +1 -539
- package/dist/es/components/field/index.js +1 -6
- package/dist/es/components/field/tokens.js +1 -138
- package/dist/es/components/flex/Flex.js +1 -66
- package/dist/es/components/flex/FlexContext.js +1 -1
- package/dist/es/components/flex/FlexItem.js +1 -76
- package/dist/es/components/flex/index.js +1 -8
- package/dist/es/components/flex/tokens.js +1 -15
- package/dist/es/components/form/Form.js +1 -319
- package/dist/es/components/form/FormContext.js +1 -1
- package/dist/es/components/form/FormItem.js +1 -138
- package/dist/es/components/form/FormList.js +1 -81
- package/dist/es/components/form/index.js +1 -13
- package/dist/es/components/form/tokens.js +1 -8
- package/dist/es/components/form/utils.js +1 -45
- package/dist/es/components/grid/Grid.js +1 -99
- package/dist/es/components/grid/GridContext.js +1 -1
- package/dist/es/components/grid/GridItem.js +1 -138
- package/dist/es/components/grid/index.js +1 -6
- package/dist/es/components/grid/tokens.js +1 -98
- package/dist/es/components/image/Image.js +1 -238
- package/dist/es/components/image/index.js +1 -3
- package/dist/es/components/image/tokens.js +1 -60
- package/dist/es/components/image-preview/ImagePreview.js +1 -388
- package/dist/es/components/image-preview/imperative.js +1 -58
- package/dist/es/components/image-preview/index.js +1 -11
- package/dist/es/components/image-preview/tokens.js +1 -37
- package/dist/es/components/index.js +1 -110
- package/dist/es/components/input/Input.js +1 -109
- package/dist/es/components/input/index.js +1 -3
- package/dist/es/components/input/tokens.js +1 -16
- package/dist/es/components/loading/Loading.js +1 -57
- package/dist/es/components/loading/index.js +1 -2
- package/dist/es/components/loading/tokens.js +1 -25
- package/dist/es/components/nav-bar/NavBar.js +1 -171
- package/dist/es/components/nav-bar/index.js +1 -3
- package/dist/es/components/nav-bar/tokens.js +1 -83
- package/dist/es/components/notice-bar/NoticeBar.js +1 -344
- package/dist/es/components/notice-bar/index.js +1 -2
- package/dist/es/components/notice-bar/tokens.js +1 -32
- package/dist/es/components/notify/Notify.js +1 -242
- package/dist/es/components/notify/imperative.js +1 -131
- package/dist/es/components/notify/index.js +1 -5
- package/dist/es/components/notify/tokens.js +1 -67
- package/dist/es/components/number-keyboard/NumberKeyboard.js +1 -467
- package/dist/es/components/number-keyboard/index.js +1 -3
- package/dist/es/components/number-keyboard/tokens.js +1 -53
- package/dist/es/components/overlay/Overlay.js +1 -50
- package/dist/es/components/overlay/index.js +1 -4
- package/dist/es/components/overlay/tokens.js +1 -7
- package/dist/es/components/password-input/PasswordInput.js +1 -327
- package/dist/es/components/password-input/index.js +1 -1
- package/dist/es/components/password-input/tokens.js +1 -41
- package/dist/es/components/picker/Picker.js +1 -1031
- package/dist/es/components/picker/index.js +1 -3
- package/dist/es/components/picker/tokens.js +1 -47
- package/dist/es/components/popup/Popup.js +1 -492
- package/dist/es/components/popup/index.js +1 -3
- package/dist/es/components/popup/tokens.js +1 -55
- package/dist/es/components/portal/Portal.js +1 -37
- package/dist/es/components/portal/PortalContext.js +1 -2
- package/dist/es/components/portal/PortalHost.js +1 -234
- package/dist/es/components/portal/index.js +1 -3
- package/dist/es/components/portal/tokens.js +1 -5
- package/dist/es/components/progress/Progress.js +1 -196
- package/dist/es/components/progress/index.js +1 -3
- package/dist/es/components/progress/tokens.js +1 -45
- package/dist/es/components/radio/Radio.js +1 -214
- package/dist/es/components/radio/RadioContext.js +1 -1
- package/dist/es/components/radio/RadioGroup.js +1 -82
- package/dist/es/components/radio/index.js +1 -5
- package/dist/es/components/radio/tokens.js +1 -80
- package/dist/es/components/safe-area-view/SafeAreaView.js +1 -40
- package/dist/es/components/safe-area-view/index.js +1 -1
- package/dist/es/components/safe-area-view/tokens.js +1 -5
- package/dist/es/components/search/Search.js +1 -189
- package/dist/es/components/search/index.js +1 -3
- package/dist/es/components/search/tokens.js +1 -48
- package/dist/es/components/selector/Selector.js +1 -166
- package/dist/es/components/selector/index.js +1 -3
- package/dist/es/components/selector/tokens.js +1 -88
- package/dist/es/components/share-sheet/ShareSheet.js +1 -267
- package/dist/es/components/share-sheet/index.js +1 -3
- package/dist/es/components/share-sheet/tokens.js +1 -49
- package/dist/es/components/sidebar/Sidebar.js +1 -84
- package/dist/es/components/sidebar/SidebarContext.js +1 -3
- package/dist/es/components/sidebar/SidebarItem.js +1 -84
- package/dist/es/components/sidebar/index.js +1 -8
- package/dist/es/components/sidebar/tokens.js +1 -80
- package/dist/es/components/skeleton/Skeleton.js +1 -143
- package/dist/es/components/skeleton/index.js +1 -4
- package/dist/es/components/skeleton/tokens.js +1 -33
- package/dist/es/components/slider/Slider.js +1 -596
- package/dist/es/components/slider/index.js +1 -2
- package/dist/es/components/slider/tokens.js +1 -31
- package/dist/es/components/space/Space.js +1 -115
- package/dist/es/components/space/index.js +1 -2
- package/dist/es/components/space/tokens.js +1 -32
- package/dist/es/components/stepper/Stepper.js +1 -465
- package/dist/es/components/stepper/index.js +1 -3
- package/dist/es/components/stepper/tokens.js +1 -54
- package/dist/es/components/swiper/Swiper.js +1 -344
- package/dist/es/components/swiper/SwiperItem.js +1 -1
- package/dist/es/components/swiper/SwiperPagIndicator.js +1 -87
- package/dist/es/components/swiper/index.js +1 -10
- package/dist/es/components/swiper/tokens.js +1 -12
- package/dist/es/components/switch/Switch.js +1 -83
- package/dist/es/components/switch/index.js +1 -3
- package/dist/es/components/switch/tokens.js +1 -25
- package/dist/es/components/tabbar/Tabbar.js +1 -130
- package/dist/es/components/tabbar/TabbarContext.js +1 -3
- package/dist/es/components/tabbar/TabbarItem.js +1 -139
- package/dist/es/components/tabbar/index.js +1 -7
- package/dist/es/components/tabbar/tokens.js +1 -35
- package/dist/es/components/tabs/Tabs.js +1 -841
- package/dist/es/components/tabs/index.js +1 -7
- package/dist/es/components/tabs/tokens.js +1 -105
- package/dist/es/components/tag/Tag.js +1 -105
- package/dist/es/components/tag/index.js +1 -2
- package/dist/es/components/tag/tokens.js +1 -97
- package/dist/es/components/toast/Toast.js +1 -280
- package/dist/es/components/toast/imperative.js +1 -130
- package/dist/es/components/toast/index.js +1 -5
- package/dist/es/components/toast/tokens.js +1 -36
- package/dist/es/components/typography/Typography.js +1 -162
- package/dist/es/components/typography/index.js +1 -2
- package/dist/es/components/typography/tokens.js +1 -82
- package/dist/es/components/water-mark/WaterMark.js +1 -153
- package/dist/es/components/water-mark/index.js +1 -4
- package/dist/es/components/water-mark/tokens.js +1 -42
- package/dist/es/design-system/Text.js +1 -19
- package/dist/es/design-system/ThemeContext.js +1 -6
- package/dist/es/design-system/ThemeProvider.js +1 -17
- package/dist/es/design-system/createComponentTokensHook.js +1 -15
- package/dist/es/design-system/index.js +1 -7
- package/dist/es/design-system/mergeTokensOverride.js +1 -2
- package/dist/es/design-system/presets.js +1 -139
- package/dist/es/design-system/tokens.js +1 -128
- package/dist/es/design-system/useTheme.js +1 -3
- package/dist/es/hooks/animation/index.js +1 -2
- package/dist/es/hooks/animation/useAnimatedTransition.js +1 -53
- package/dist/es/hooks/animation/useReducedMotion.js +1 -54
- package/dist/es/hooks/aria/index.js +1 -5
- package/dist/es/hooks/aria/useAriaListBox.js +1 -25
- package/dist/es/hooks/aria/useAriaOverlay.js +1 -25
- package/dist/es/hooks/aria/useAriaPress.js +1 -57
- package/dist/es/hooks/aria/useAriaToggle.js +1 -16
- package/dist/es/hooks/gesture/index.js +1 -2
- package/dist/es/hooks/gesture/useGestureScroll.js +1 -110
- package/dist/es/hooks/index.js +1 -8
- package/dist/es/hooks/overlay/OverlayStackStore.js +1 -93
- package/dist/es/hooks/overlay/index.js +1 -3
- package/dist/es/hooks/overlay/useOverlayStack.js +1 -40
- package/dist/es/hooks/useControllableValue.js +1 -29
- package/dist/es/hooks/useCountDown.js +1 -87
- package/dist/es/hooks/useHairline.js +1 -26
- package/dist/es/hooks/useSafeAreaPadding.js +1 -20
- package/dist/es/index.js +1 -11
- package/dist/es/nativewind.js +1 -0
- package/dist/es/platform/animation.js +1 -10
- package/dist/es/platform/history.js +1 -7
- package/dist/es/platform/index.js +1 -6
- package/dist/es/platform/measure.js +1 -32
- package/dist/es/platform/runtime.js +1 -4
- package/dist/es/platform/scrollLock.js +1 -16
- package/dist/es/types.js +1 -1
- package/dist/es/utils/array.js +1 -5
- package/dist/es/utils/color.js +1 -25
- package/dist/es/utils/compare.js +1 -13
- package/dist/es/utils/createPlatformShadow.js +1 -39
- package/dist/es/utils/date.js +1 -33
- package/dist/es/utils/deepMerge.js +1 -21
- package/dist/es/utils/hairline.js +1 -93
- package/dist/es/utils/index.js +1 -14
- package/dist/es/utils/number.js +1 -48
- package/dist/es/utils/promise.js +1 -2
- package/dist/es/utils/render.js +1 -7
- package/dist/es/utils/rtl.js +1 -17
- package/dist/es/utils/string.js +1 -13
- package/dist/es/utils/validate.js +1 -14
- package/dist/types/nativewind.d.ts +4 -0
- package/package.json +15 -3
|
@@ -1,7 +1 @@
|
|
|
1
|
-
import TabsBase, {
|
|
2
|
-
export { useTabsTokens } from './tokens';
|
|
3
|
-
const Tabs = Object.assign(TabsBase, {
|
|
4
|
-
TabPane
|
|
5
|
-
});
|
|
6
|
-
export { TabPane };
|
|
7
|
-
export default Tabs;
|
|
1
|
+
import TabsBase,{TabPane}from"./Tabs";export{useTabsTokens}from"./tokens";const Tabs=Object.assign(TabsBase,{TabPane:TabPane});export{TabPane};export default Tabs;
|
|
@@ -1,105 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
const createTokens = foundations => {
|
|
3
|
-
const {
|
|
4
|
-
palette,
|
|
5
|
-
spacing,
|
|
6
|
-
fontSize,
|
|
7
|
-
radii,
|
|
8
|
-
typography
|
|
9
|
-
} = foundations;
|
|
10
|
-
const onPrimary = palette.primary.foreground ?? '#ffffff';
|
|
11
|
-
return {
|
|
12
|
-
defaults: {
|
|
13
|
-
type: 'line',
|
|
14
|
-
align: 'center',
|
|
15
|
-
ellipsis: true,
|
|
16
|
-
swipeThreshold: 5,
|
|
17
|
-
animated: true,
|
|
18
|
-
duration: 300,
|
|
19
|
-
lazyRender: true
|
|
20
|
-
},
|
|
21
|
-
colors: {
|
|
22
|
-
text: palette.default[700],
|
|
23
|
-
textActive: palette.primary[600],
|
|
24
|
-
textDisabled: palette.default[400],
|
|
25
|
-
description: palette.default[500],
|
|
26
|
-
descriptionActive: palette.default[600],
|
|
27
|
-
descriptionBackground: palette.default[100],
|
|
28
|
-
descriptionActiveBackground: palette.primary[600],
|
|
29
|
-
border: palette.default[200],
|
|
30
|
-
indicator: palette.primary[600],
|
|
31
|
-
cardBackground: '#ffffff',
|
|
32
|
-
cardActiveBackground: palette.primary[600],
|
|
33
|
-
cardBorder: palette.primary[600],
|
|
34
|
-
cardActiveBorder: palette.primary[600],
|
|
35
|
-
cardActiveText: onPrimary,
|
|
36
|
-
capsuleBackground: 'transparent',
|
|
37
|
-
capsuleActiveBackground: palette.primary[600],
|
|
38
|
-
capsuleBorder: 'transparent',
|
|
39
|
-
capsuleActiveBorder: 'transparent',
|
|
40
|
-
capsuleText: palette.default[700],
|
|
41
|
-
capsuleActiveText: onPrimary,
|
|
42
|
-
badgeText: palette.default[500],
|
|
43
|
-
jumboBackground: palette.default[50],
|
|
44
|
-
jumboActiveBackground: '#ffffff',
|
|
45
|
-
jumboBorder: 'transparent',
|
|
46
|
-
jumboActiveBorder: palette.primary[400],
|
|
47
|
-
jumboDescription: palette.default[500],
|
|
48
|
-
jumboDescriptionActive: onPrimary,
|
|
49
|
-
jumboDescriptionBackground: palette.default[100],
|
|
50
|
-
jumboDescriptionActiveBackground: palette.primary[500]
|
|
51
|
-
},
|
|
52
|
-
tabList: {
|
|
53
|
-
height: 44,
|
|
54
|
-
paddingHorizontal: spacing.lg,
|
|
55
|
-
paddingVertical: 0,
|
|
56
|
-
paddingBottom: spacing.md,
|
|
57
|
-
background: '#ffffff'
|
|
58
|
-
},
|
|
59
|
-
typography: {
|
|
60
|
-
fontFamily: typography.fontFamily,
|
|
61
|
-
titleSize: fontSize.sm,
|
|
62
|
-
titleWeight: foundations.typography.weight.medium,
|
|
63
|
-
titleActiveWeight: foundations.typography.weight.semiBold,
|
|
64
|
-
descriptionSize: fontSize.xs,
|
|
65
|
-
jumboTitleSize: fontSize.md,
|
|
66
|
-
jumboLineHeight: Math.round(fontSize.md * 1.6),
|
|
67
|
-
badgeTextSize: fontSize.xxs
|
|
68
|
-
},
|
|
69
|
-
spacing: {
|
|
70
|
-
navSidePaddingHorizontal: spacing.sm,
|
|
71
|
-
navBottomMarginTop: spacing.sm,
|
|
72
|
-
descriptionMarginTop: spacing.xxs,
|
|
73
|
-
jumboDescriptionMarginTop: spacing.sm,
|
|
74
|
-
badgeMarginTop: spacing.xs
|
|
75
|
-
},
|
|
76
|
-
indicator: {
|
|
77
|
-
height: 3,
|
|
78
|
-
radius: 999,
|
|
79
|
-
width: 40,
|
|
80
|
-
offset: spacing.md
|
|
81
|
-
},
|
|
82
|
-
card: {
|
|
83
|
-
radius: radii.xs,
|
|
84
|
-
paddingHorizontal: spacing.sm,
|
|
85
|
-
paddingVertical: spacing.xs,
|
|
86
|
-
height: 30,
|
|
87
|
-
marginHorizontal: spacing.md
|
|
88
|
-
},
|
|
89
|
-
capsule: {
|
|
90
|
-
radius: 999,
|
|
91
|
-
paddingHorizontal: spacing.sm,
|
|
92
|
-
paddingVertical: spacing.ssm
|
|
93
|
-
},
|
|
94
|
-
jumbo: {
|
|
95
|
-
radius: 16,
|
|
96
|
-
paddingHorizontal: spacing.md,
|
|
97
|
-
paddingVertical: spacing.sm,
|
|
98
|
-
height: 64,
|
|
99
|
-
descriptionPaddingHorizontal: spacing.sm,
|
|
100
|
-
descriptionPaddingVertical: spacing.xxs,
|
|
101
|
-
descriptionRadius: 10
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
};
|
|
105
|
-
export const useTabsTokens = createComponentTokensHook('tabs', createTokens);
|
|
1
|
+
import{createComponentTokensHook}from"../../design-system";const createTokens=e=>{const{palette:i,spacing:t,fontSize:a,radii:r,typography:o}=e,d=i.primary.foreground??"#ffffff";return{defaults:{type:"line",align:"center",ellipsis:!0,swipeThreshold:5,animated:!0,duration:300,lazyRender:!0},colors:{text:i.default[700],textActive:i.primary[600],textDisabled:i.default[400],description:i.default[500],descriptionActive:i.default[600],descriptionBackground:i.default[100],descriptionActiveBackground:i.primary[600],border:i.default[200],indicator:i.primary[600],cardBackground:"#ffffff",cardActiveBackground:i.primary[600],cardBorder:i.primary[600],cardActiveBorder:i.primary[600],cardActiveText:d,capsuleBackground:"transparent",capsuleActiveBackground:i.primary[600],capsuleBorder:"transparent",capsuleActiveBorder:"transparent",capsuleText:i.default[700],capsuleActiveText:d,badgeText:i.default[500],jumboBackground:i.default[50],jumboActiveBackground:"#ffffff",jumboBorder:"transparent",jumboActiveBorder:i.primary[400],jumboDescription:i.default[500],jumboDescriptionActive:d,jumboDescriptionBackground:i.default[100],jumboDescriptionActiveBackground:i.primary[500]},tabList:{height:44,paddingHorizontal:t.lg,paddingVertical:0,paddingBottom:t.md,background:"#ffffff"},typography:{fontFamily:o.fontFamily,titleSize:a.sm,titleWeight:e.typography.weight.medium,titleActiveWeight:e.typography.weight.semiBold,descriptionSize:a.xs,jumboTitleSize:a.md,jumboLineHeight:Math.round(1.6*a.md),badgeTextSize:a.xxs},spacing:{navSidePaddingHorizontal:t.sm,navBottomMarginTop:t.sm,descriptionMarginTop:t.xxs,jumboDescriptionMarginTop:t.sm,badgeMarginTop:t.xs},indicator:{height:3,radius:999,width:40,offset:t.md},card:{radius:r.xs,paddingHorizontal:t.sm,paddingVertical:t.xs,height:30,marginHorizontal:t.md},capsule:{radius:999,paddingHorizontal:t.sm,paddingVertical:t.ssm},jumbo:{radius:16,paddingHorizontal:t.md,paddingVertical:t.sm,height:64,descriptionPaddingHorizontal:t.sm,descriptionPaddingVertical:t.xxs,descriptionRadius:10}}};export const useTabsTokens=createComponentTokensHook("tabs",createTokens);
|
|
@@ -1,105 +1 @@
|
|
|
1
|
-
function _extends()
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Pressable, View } from 'react-native';
|
|
4
|
-
import { Close } from 'react-native-system-icon';
|
|
5
|
-
import { createHairlineView, isFunction, renderTextOrNode } from '../../utils';
|
|
6
|
-
import { isRenderable } from '../../utils/validate';
|
|
7
|
-
import { useDirection } from '../config-provider/useDirection';
|
|
8
|
-
import { useTagTokens } from './tokens';
|
|
9
|
-
const TagImpl = props => {
|
|
10
|
-
const {
|
|
11
|
-
tokensOverride,
|
|
12
|
-
children,
|
|
13
|
-
type: typeP,
|
|
14
|
-
size: sizeP,
|
|
15
|
-
plain: plainP,
|
|
16
|
-
round: roundP,
|
|
17
|
-
mark: markP,
|
|
18
|
-
color,
|
|
19
|
-
textColor,
|
|
20
|
-
show: showP,
|
|
21
|
-
closeable,
|
|
22
|
-
closeIcon,
|
|
23
|
-
onClose,
|
|
24
|
-
onPress,
|
|
25
|
-
textStyle,
|
|
26
|
-
style,
|
|
27
|
-
...rest
|
|
28
|
-
} = props;
|
|
29
|
-
const tokens = useTagTokens(tokensOverride);
|
|
30
|
-
const dir = useDirection();
|
|
31
|
-
const type = typeP ?? tokens.defaults.type;
|
|
32
|
-
const size = sizeP ?? tokens.defaults.size;
|
|
33
|
-
const plain = plainP ?? tokens.defaults.plain;
|
|
34
|
-
const round = roundP ?? tokens.defaults.round;
|
|
35
|
-
const mark = markP ?? tokens.defaults.mark;
|
|
36
|
-
const show = showP ?? tokens.defaults.show;
|
|
37
|
-
if (!show) return null;
|
|
38
|
-
const tone = tokens.colors.toneMap[type] ?? tokens.colors.toneMap.default;
|
|
39
|
-
const szTok = tokens.sizing.sizes[size];
|
|
40
|
-
const bgClr = plain ? tokens.colors.plainBackground : color ?? tone.background;
|
|
41
|
-
const txtClr = textColor ?? (plain ? color ?? tone.background : tone.text);
|
|
42
|
-
const borderClr = plain ? color ?? tone.background : 'transparent';
|
|
43
|
-
const radius = round ? tokens.radii.round : szTok.borderRadius;
|
|
44
|
-
const markR = mark ? dir === 'rtl' ? {
|
|
45
|
-
borderTopRightRadius: tokens.radii.markLeading,
|
|
46
|
-
borderBottomRightRadius: tokens.radii.markLeading,
|
|
47
|
-
borderTopLeftRadius: tokens.radii.round,
|
|
48
|
-
borderBottomLeftRadius: tokens.radii.round
|
|
49
|
-
} : {
|
|
50
|
-
borderTopLeftRadius: tokens.radii.markLeading,
|
|
51
|
-
borderBottomLeftRadius: tokens.radii.markLeading,
|
|
52
|
-
borderTopRightRadius: tokens.radii.round,
|
|
53
|
-
borderBottomRightRadius: tokens.radii.round
|
|
54
|
-
} : null;
|
|
55
|
-
const resRadius = mark ? tokens.radii.round : radius;
|
|
56
|
-
const ctrStyle = [tokens.layout.container, {
|
|
57
|
-
backgroundColor: bgClr,
|
|
58
|
-
paddingHorizontal: szTok.paddingHorizontal,
|
|
59
|
-
paddingVertical: szTok.paddingVertical,
|
|
60
|
-
borderRadius: radius
|
|
61
|
-
}, markR, style];
|
|
62
|
-
const label = !isRenderable(children) ? null : renderTextOrNode(children, [{
|
|
63
|
-
color: txtClr,
|
|
64
|
-
fontSize: szTok.fontSize,
|
|
65
|
-
lineHeight: szTok.lineHeight,
|
|
66
|
-
fontFamily: tokens.typography.fontFamily,
|
|
67
|
-
fontWeight: tokens.typography.fontWeight
|
|
68
|
-
}, textStyle].filter(Boolean));
|
|
69
|
-
const close = closeable && /*#__PURE__*/React.createElement(Pressable, {
|
|
70
|
-
accessibilityRole: "button",
|
|
71
|
-
hitSlop: tokens.spacing.closeHitSlop,
|
|
72
|
-
style: [tokens.layout.close, {
|
|
73
|
-
marginLeft: tokens.spacing.closeGap
|
|
74
|
-
}],
|
|
75
|
-
onPress: e => {
|
|
76
|
-
e.stopPropagation?.();
|
|
77
|
-
onClose?.();
|
|
78
|
-
}
|
|
79
|
-
}, isFunction(closeIcon) ? closeIcon(txtClr, tokens.sizing.closeIconSize) : closeIcon ?? /*#__PURE__*/React.createElement(Close, {
|
|
80
|
-
color: txtClr,
|
|
81
|
-
size: tokens.sizing.closeIconSize
|
|
82
|
-
}));
|
|
83
|
-
const hlOverlay = plain ? /*#__PURE__*/React.createElement(View, {
|
|
84
|
-
style: createHairlineView({
|
|
85
|
-
position: 'all',
|
|
86
|
-
color: borderClr,
|
|
87
|
-
borderRadius: resRadius
|
|
88
|
-
})
|
|
89
|
-
}) : null;
|
|
90
|
-
const content = /*#__PURE__*/React.createElement(React.Fragment, null, label, close, hlOverlay);
|
|
91
|
-
if (onPress) return /*#__PURE__*/React.createElement(Pressable, _extends({
|
|
92
|
-
accessibilityRole: "button",
|
|
93
|
-
onPress: onPress,
|
|
94
|
-
style: ({
|
|
95
|
-
pressed
|
|
96
|
-
}) => [ctrStyle, pressed && {
|
|
97
|
-
opacity: tokens.defaults.pressedOpacity
|
|
98
|
-
}]
|
|
99
|
-
}, rest), content);
|
|
100
|
-
return /*#__PURE__*/React.createElement(View, _extends({
|
|
101
|
-
style: ctrStyle
|
|
102
|
-
}, rest), content);
|
|
103
|
-
};
|
|
104
|
-
export const Tag = /*#__PURE__*/React.memo(TagImpl);
|
|
105
|
-
Tag.displayName = 'Tag';
|
|
1
|
+
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)({}).hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},_extends.apply(null,arguments)}import React from"react";import{Pressable,View}from"react-native";import{Close}from"react-native-system-icon";import{createHairlineView,isFunction,renderTextOrNode}from"../../utils";import{isRenderable}from"../../utils/validate";import{useDirection}from"../config-provider/useDirection";import{useTagTokens}from"./tokens";const TagImpl=e=>{const{tokensOverride:t,children:o,type:r,size:i,plain:a,round:n,mark:s,color:l,textColor:d,show:c,closeable:u,closeIcon:p,onClose:g,onPress:m,textStyle:f,style:b,...R}=e,y=useTagTokens(t),h=useDirection(),k=r??y.defaults.type,T=i??y.defaults.size,z=a??y.defaults.plain,x=n??y.defaults.round,L=s??y.defaults.mark;if(!(c??y.defaults.show))return null;const v=y.colors.toneMap[k]??y.colors.toneMap.default,w=y.sizing.sizes[T],P=z?y.colors.plainBackground:l??v.background,H=d??(z?l??v.background:v.text),O=z?l??v.background:"transparent",S=x?y.radii.round:w.borderRadius,V=L?"rtl"===h?{borderTopRightRadius:y.radii.markLeading,borderBottomRightRadius:y.radii.markLeading,borderTopLeftRadius:y.radii.round,borderBottomLeftRadius:y.radii.round}:{borderTopLeftRadius:y.radii.markLeading,borderBottomLeftRadius:y.radii.markLeading,borderTopRightRadius:y.radii.round,borderBottomRightRadius:y.radii.round}:null,B=L?y.radii.round:S,E=[y.layout.container,{backgroundColor:P,paddingHorizontal:w.paddingHorizontal,paddingVertical:w.paddingVertical,borderRadius:S},V,b],C=isRenderable(o)?renderTextOrNode(o,[{color:H,fontSize:w.fontSize,lineHeight:w.lineHeight,fontFamily:y.typography.fontFamily,fontWeight:y.typography.fontWeight},f].filter(Boolean)):null,F=u&&React.createElement(Pressable,{accessibilityRole:"button",hitSlop:y.spacing.closeHitSlop,style:[y.layout.close,{marginLeft:y.spacing.closeGap}],onPress:e=>{e.stopPropagation?.(),g?.()}},isFunction(p)?p(H,y.sizing.closeIconSize):p??React.createElement(Close,{color:H,size:y.sizing.closeIconSize})),I=z?React.createElement(View,{style:createHairlineView({position:"all",color:O,borderRadius:B})}):null,_=React.createElement(React.Fragment,null,C,F,I);return m?React.createElement(Pressable,_extends({accessibilityRole:"button",onPress:m,style:({pressed:e})=>[E,e&&{opacity:y.defaults.pressedOpacity}]},R),_):React.createElement(View,_extends({style:E},R),_)};export const Tag=React.memo(TagImpl);Tag.displayName="Tag";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export default Tag;
|
|
1
|
+
import{Tag}from"./Tag";export default Tag;
|
|
@@ -1,97 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getHairlineWidth } from '../../utils';
|
|
3
|
-
const buildTone = (palette, key, fallbackText) => ({
|
|
4
|
-
background: palette[key][500],
|
|
5
|
-
text: fallbackText ?? palette[key].foreground ?? '#ffffff'
|
|
6
|
-
});
|
|
7
|
-
export const createTagTokens = foundations => {
|
|
8
|
-
const {
|
|
9
|
-
palette,
|
|
10
|
-
radii,
|
|
11
|
-
typography,
|
|
12
|
-
opacity,
|
|
13
|
-
spacing
|
|
14
|
-
} = foundations;
|
|
15
|
-
return {
|
|
16
|
-
defaults: {
|
|
17
|
-
type: 'default',
|
|
18
|
-
size: 'small',
|
|
19
|
-
plain: false,
|
|
20
|
-
round: false,
|
|
21
|
-
mark: false,
|
|
22
|
-
show: true,
|
|
23
|
-
pressedOpacity: opacity.pressed
|
|
24
|
-
},
|
|
25
|
-
layout: {
|
|
26
|
-
container: {
|
|
27
|
-
flexDirection: 'row',
|
|
28
|
-
alignItems: 'center',
|
|
29
|
-
alignSelf: 'flex-start'
|
|
30
|
-
},
|
|
31
|
-
close: {
|
|
32
|
-
alignItems: 'center',
|
|
33
|
-
justifyContent: 'center'
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
colors: {
|
|
37
|
-
plainBackground: '#ffffff',
|
|
38
|
-
toneMap: {
|
|
39
|
-
default: buildTone(palette, 'default', '#ffffff'),
|
|
40
|
-
primary: buildTone(palette, 'primary'),
|
|
41
|
-
success: buildTone(palette, 'success'),
|
|
42
|
-
warning: buildTone(palette, 'warning', palette.warning.foreground ?? palette.warning[900]),
|
|
43
|
-
danger: buildTone(palette, 'danger')
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
typography: {
|
|
47
|
-
fontFamily: typography.fontFamily,
|
|
48
|
-
lineHeightMultiplier: typography.lineHeightMultiplier,
|
|
49
|
-
fontWeight: typography.weight.medium
|
|
50
|
-
},
|
|
51
|
-
sizing: {
|
|
52
|
-
sizes: {
|
|
53
|
-
mini: {
|
|
54
|
-
fontSize: 10,
|
|
55
|
-
paddingHorizontal: 4,
|
|
56
|
-
paddingVertical: 0,
|
|
57
|
-
borderRadius: 2,
|
|
58
|
-
lineHeight: 16
|
|
59
|
-
},
|
|
60
|
-
small: {
|
|
61
|
-
fontSize: 12,
|
|
62
|
-
paddingHorizontal: 4,
|
|
63
|
-
paddingVertical: 0,
|
|
64
|
-
borderRadius: 2,
|
|
65
|
-
lineHeight: 16
|
|
66
|
-
},
|
|
67
|
-
medium: {
|
|
68
|
-
fontSize: 12,
|
|
69
|
-
paddingHorizontal: 6,
|
|
70
|
-
paddingVertical: 2,
|
|
71
|
-
borderRadius: 4,
|
|
72
|
-
lineHeight: 16
|
|
73
|
-
},
|
|
74
|
-
large: {
|
|
75
|
-
fontSize: 14,
|
|
76
|
-
paddingHorizontal: 8,
|
|
77
|
-
paddingVertical: 4,
|
|
78
|
-
borderRadius: 4,
|
|
79
|
-
lineHeight: 16
|
|
80
|
-
}
|
|
81
|
-
},
|
|
82
|
-
closeIconSize: 12
|
|
83
|
-
},
|
|
84
|
-
radii: {
|
|
85
|
-
round: radii.pill,
|
|
86
|
-
markLeading: radii.none
|
|
87
|
-
},
|
|
88
|
-
borders: {
|
|
89
|
-
width: getHairlineWidth()
|
|
90
|
-
},
|
|
91
|
-
spacing: {
|
|
92
|
-
closeGap: 2,
|
|
93
|
-
closeHitSlop: spacing.sm
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
};
|
|
97
|
-
export const useTagTokens = createComponentTokensHook('tag', createTagTokens);
|
|
1
|
+
import{createComponentTokensHook}from"../../design-system";import{getHairlineWidth}from"../../utils";const buildTone=(e,i,n)=>({background:e[i][500],text:n??e[i].foreground??"#ffffff"});export const createTagTokens=e=>{const{palette:i,radii:n,typography:o,opacity:t,spacing:a}=e;return{defaults:{type:"default",size:"small",plain:!1,round:!1,mark:!1,show:!0,pressedOpacity:t.pressed},layout:{container:{flexDirection:"row",alignItems:"center",alignSelf:"flex-start"},close:{alignItems:"center",justifyContent:"center"}},colors:{plainBackground:"#ffffff",toneMap:{default:buildTone(i,"default","#ffffff"),primary:buildTone(i,"primary"),success:buildTone(i,"success"),warning:buildTone(i,"warning",i.warning.foreground??i.warning[900]),danger:buildTone(i,"danger")}},typography:{fontFamily:o.fontFamily,lineHeightMultiplier:o.lineHeightMultiplier,fontWeight:o.weight.medium},sizing:{sizes:{mini:{fontSize:10,paddingHorizontal:4,paddingVertical:0,borderRadius:2,lineHeight:16},small:{fontSize:12,paddingHorizontal:4,paddingVertical:0,borderRadius:2,lineHeight:16},medium:{fontSize:12,paddingHorizontal:6,paddingVertical:2,borderRadius:4,lineHeight:16},large:{fontSize:14,paddingHorizontal:8,paddingVertical:4,borderRadius:4,lineHeight:16}},closeIconSize:12},radii:{round:n.pill,markLeading:n.none},borders:{width:getHairlineWidth()},spacing:{closeGap:2,closeHitSlop:a.sm}}};export const useTagTokens=createComponentTokensHook("tag",createTagTokens);
|
|
@@ -1,280 +1 @@
|
|
|
1
|
-
function _extends()
|
|
2
|
-
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { AccessibilityInfo, Animated, Easing, Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
|
|
4
|
-
import Portal from '../portal/Portal';
|
|
5
|
-
import { SafeAreaView } from '../safe-area-view';
|
|
6
|
-
import { useAriaPress, useOverlayStack } from '../../hooks';
|
|
7
|
-
import Loading from '../loading';
|
|
8
|
-
import { Checked, Close } from 'react-native-system-icon';
|
|
9
|
-
import { isFiniteNumber, isText, isRenderable } from '../../utils/validate';
|
|
10
|
-
import { renderTextOrNode } from '../../utils';
|
|
11
|
-
import { nativeDriverEnabled } from '../../platform';
|
|
12
|
-
import { useReducedMotion } from '../../hooks/animation';
|
|
13
|
-
import { useLocale } from '../config-provider/useLocale';
|
|
14
|
-
import { useToastTokens } from './tokens';
|
|
15
|
-
const RT = () => true;
|
|
16
|
-
const ToastContentImpl = props => {
|
|
17
|
-
const {
|
|
18
|
-
visible,
|
|
19
|
-
message,
|
|
20
|
-
icon,
|
|
21
|
-
type = 'info',
|
|
22
|
-
iconSize,
|
|
23
|
-
duration = 2000,
|
|
24
|
-
position = 'middle',
|
|
25
|
-
forbidClick = false,
|
|
26
|
-
overlay = false,
|
|
27
|
-
overlayStyle,
|
|
28
|
-
closeOnClickOverlay = false,
|
|
29
|
-
closeOnClick = false,
|
|
30
|
-
loadingIndicator,
|
|
31
|
-
safeAreaInsetTop: safeAreaInsetTopProp,
|
|
32
|
-
safeAreaInsetBottom: safeAreaInsetBottomProp,
|
|
33
|
-
tokensOverride,
|
|
34
|
-
style,
|
|
35
|
-
textStyle,
|
|
36
|
-
onClose,
|
|
37
|
-
onOpen,
|
|
38
|
-
onOpened,
|
|
39
|
-
onClosed
|
|
40
|
-
} = props;
|
|
41
|
-
const locale = useLocale();
|
|
42
|
-
const tokens = useToastTokens(tokensOverride);
|
|
43
|
-
const reducedMotion = useReducedMotion();
|
|
44
|
-
const {
|
|
45
|
-
colors
|
|
46
|
-
} = tokens;
|
|
47
|
-
const {
|
|
48
|
-
height: windowHeight
|
|
49
|
-
} = useWindowDimensions();
|
|
50
|
-
const resolvedDuration = isFiniteNumber(duration) ? Math.max(0, duration) : 0;
|
|
51
|
-
const [mounted, setMounted] = useState(visible);
|
|
52
|
-
const animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
|
|
53
|
-
const animationRef = useRef(null);
|
|
54
|
-
const animationIdRef = useRef(0);
|
|
55
|
-
const onCloseRef = useRef(onClose);
|
|
56
|
-
onCloseRef.current = onClose;
|
|
57
|
-
const onOpenRef = useRef(onOpen);
|
|
58
|
-
onOpenRef.current = onOpen;
|
|
59
|
-
const onOpenedRef = useRef(onOpened);
|
|
60
|
-
onOpenedRef.current = onOpened;
|
|
61
|
-
const onClosedRef = useRef(onClosed);
|
|
62
|
-
onClosedRef.current = onClosed;
|
|
63
|
-
const {
|
|
64
|
-
zIndex: stackZIndex
|
|
65
|
-
} = useOverlayStack({
|
|
66
|
-
visible: mounted,
|
|
67
|
-
type: 'toast'
|
|
68
|
-
});
|
|
69
|
-
const previousVisibleRef = useRef(visible);
|
|
70
|
-
const closingRef = useRef(false);
|
|
71
|
-
const positionOffset = windowHeight > 0 ? Math.round(windowHeight * tokens.positionOffsetRatio) : tokens.positionOffsetMin;
|
|
72
|
-
const needsSafeAreaTop = safeAreaInsetTopProp !== undefined ? safeAreaInsetTopProp : position === 'top';
|
|
73
|
-
const needsSafeAreaBottom = safeAreaInsetBottomProp !== undefined ? safeAreaInsetBottomProp : position === 'bottom';
|
|
74
|
-
const positionStyle = useMemo(() => position === 'top' ? {
|
|
75
|
-
justifyContent: 'flex-start',
|
|
76
|
-
paddingTop: positionOffset
|
|
77
|
-
} : position === 'bottom' ? {
|
|
78
|
-
justifyContent: 'flex-end',
|
|
79
|
-
paddingBottom: positionOffset
|
|
80
|
-
} : {
|
|
81
|
-
justifyContent: 'center'
|
|
82
|
-
}, [position, positionOffset]);
|
|
83
|
-
useEffect(() => {
|
|
84
|
-
animationIdRef.current += 1;
|
|
85
|
-
const animationId = animationIdRef.current;
|
|
86
|
-
animationRef.current?.stop();
|
|
87
|
-
const d = reducedMotion ? 0 : tokens.animationDuration;
|
|
88
|
-
if (visible) {
|
|
89
|
-
setMounted(true);
|
|
90
|
-
animationRef.current = Animated.timing(animatedValue, {
|
|
91
|
-
toValue: 1,
|
|
92
|
-
duration: d,
|
|
93
|
-
easing: Easing.out(Easing.cubic),
|
|
94
|
-
useNativeDriver: nativeDriverEnabled,
|
|
95
|
-
isInteraction: false
|
|
96
|
-
});
|
|
97
|
-
animationRef.current.start();
|
|
98
|
-
} else {
|
|
99
|
-
animationRef.current = Animated.timing(animatedValue, {
|
|
100
|
-
toValue: 0,
|
|
101
|
-
duration: d,
|
|
102
|
-
easing: Easing.out(Easing.cubic),
|
|
103
|
-
useNativeDriver: nativeDriverEnabled,
|
|
104
|
-
isInteraction: false
|
|
105
|
-
});
|
|
106
|
-
animationRef.current.start(({
|
|
107
|
-
finished
|
|
108
|
-
}) => {
|
|
109
|
-
if (!finished || animationId !== animationIdRef.current) return;
|
|
110
|
-
setMounted(false);
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
}, [animatedValue, reducedMotion, tokens.animationDuration, visible]);
|
|
114
|
-
useEffect(() => () => {
|
|
115
|
-
animationRef.current?.stop();
|
|
116
|
-
}, []);
|
|
117
|
-
useEffect(() => {
|
|
118
|
-
if (!visible || resolvedDuration <= 0) return;
|
|
119
|
-
const timeout = setTimeout(() => {
|
|
120
|
-
onCloseRef.current?.();
|
|
121
|
-
}, resolvedDuration);
|
|
122
|
-
return () => clearTimeout(timeout);
|
|
123
|
-
}, [resolvedDuration, visible]);
|
|
124
|
-
useEffect(() => {
|
|
125
|
-
if (!visible || !isText(message)) return;
|
|
126
|
-
const text = String(message);
|
|
127
|
-
if (text) AccessibilityInfo.announceForAccessibility?.(text);
|
|
128
|
-
}, [message, visible]);
|
|
129
|
-
const resolvedAnimDuration = reducedMotion ? 0 : tokens.animationDuration;
|
|
130
|
-
useEffect(() => {
|
|
131
|
-
let openedTimeout = null;
|
|
132
|
-
if (visible) {
|
|
133
|
-
closingRef.current = false;
|
|
134
|
-
if (!previousVisibleRef.current) {
|
|
135
|
-
onOpenRef.current?.();
|
|
136
|
-
if (onOpenedRef.current) {
|
|
137
|
-
const callback = onOpenedRef.current;
|
|
138
|
-
openedTimeout = setTimeout(callback, resolvedAnimDuration);
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
} else if (previousVisibleRef.current) {
|
|
142
|
-
closingRef.current = true;
|
|
143
|
-
}
|
|
144
|
-
previousVisibleRef.current = visible;
|
|
145
|
-
return () => {
|
|
146
|
-
if (openedTimeout) clearTimeout(openedTimeout);
|
|
147
|
-
};
|
|
148
|
-
}, [resolvedAnimDuration, visible]);
|
|
149
|
-
useEffect(() => {
|
|
150
|
-
if (!mounted && closingRef.current) {
|
|
151
|
-
closingRef.current = false;
|
|
152
|
-
onClosedRef.current?.();
|
|
153
|
-
}
|
|
154
|
-
}, [mounted]);
|
|
155
|
-
const handleClose = useRef(() => onCloseRef.current?.()).current;
|
|
156
|
-
const pressProps = useAriaPress({
|
|
157
|
-
disabled: !closeOnClick,
|
|
158
|
-
onPress: handleClose,
|
|
159
|
-
extraProps: {
|
|
160
|
-
accessibilityRole: closeOnClick ? 'button' : 'alert',
|
|
161
|
-
accessibilityHint: closeOnClick ? locale?.vanToast?.closeHint ?? 'Double-tap to dismiss' : undefined,
|
|
162
|
-
accessibilityLiveRegion: 'assertive'
|
|
163
|
-
}
|
|
164
|
-
});
|
|
165
|
-
const iconNode = useMemo(() => {
|
|
166
|
-
if (icon) return icon;
|
|
167
|
-
const resolvedIconSize = iconSize ?? tokens.iconSize;
|
|
168
|
-
switch (type) {
|
|
169
|
-
case 'success':
|
|
170
|
-
return /*#__PURE__*/React.createElement(Checked, {
|
|
171
|
-
size: resolvedIconSize,
|
|
172
|
-
fill: colors.text,
|
|
173
|
-
color: colors.text
|
|
174
|
-
});
|
|
175
|
-
case 'fail':
|
|
176
|
-
return /*#__PURE__*/React.createElement(Close, {
|
|
177
|
-
size: resolvedIconSize,
|
|
178
|
-
fill: colors.text,
|
|
179
|
-
color: colors.text
|
|
180
|
-
});
|
|
181
|
-
case 'loading':
|
|
182
|
-
return loadingIndicator ?? /*#__PURE__*/React.createElement(Loading, {
|
|
183
|
-
color: colors.text,
|
|
184
|
-
size: resolvedIconSize
|
|
185
|
-
});
|
|
186
|
-
default:
|
|
187
|
-
return null;
|
|
188
|
-
}
|
|
189
|
-
}, [colors.text, icon, iconSize, loadingIndicator, tokens.iconSize, type]);
|
|
190
|
-
const iconWrapperStyle = useMemo(() => ({
|
|
191
|
-
marginBottom: tokens.gap
|
|
192
|
-
}), [tokens.gap]);
|
|
193
|
-
const messageStyle = useMemo(() => ({
|
|
194
|
-
color: colors.text,
|
|
195
|
-
fontSize: tokens.fontSize,
|
|
196
|
-
lineHeight: tokens.lineHeight,
|
|
197
|
-
fontFamily: tokens.fontFamily
|
|
198
|
-
}), [colors.text, tokens.fontSize, tokens.fontFamily, tokens.lineHeight]);
|
|
199
|
-
const isTextOnly = type === 'info' && !iconNode;
|
|
200
|
-
const baseStyle = useMemo(() => isTextOnly ? {
|
|
201
|
-
minWidth: tokens.textMinWidth,
|
|
202
|
-
minHeight: 0,
|
|
203
|
-
paddingVertical: tokens.textPaddingVertical,
|
|
204
|
-
paddingHorizontal: tokens.textPaddingHorizontal
|
|
205
|
-
} : {
|
|
206
|
-
minWidth: tokens.defaultWidth,
|
|
207
|
-
minHeight: tokens.defaultMinHeight,
|
|
208
|
-
padding: tokens.defaultPadding
|
|
209
|
-
}, [isTextOnly, tokens.defaultMinHeight, tokens.defaultPadding, tokens.defaultWidth, tokens.textMinWidth, tokens.textPaddingHorizontal, tokens.textPaddingVertical]);
|
|
210
|
-
const toastStyle = useMemo(() => ({
|
|
211
|
-
borderRadius: tokens.radius,
|
|
212
|
-
opacity: closeOnClick && pressProps.states.pressed ? tokens.pressedOpacity : animatedValue,
|
|
213
|
-
backgroundColor: tokens.colors.variants[type],
|
|
214
|
-
maxWidth: tokens.maxWidth,
|
|
215
|
-
...baseStyle
|
|
216
|
-
}), [animatedValue, baseStyle, closeOnClick, pressProps.states.pressed, tokens.colors.variants, tokens.maxWidth, tokens.pressedOpacity, tokens.radius, type]);
|
|
217
|
-
if (!mounted) return null;
|
|
218
|
-
const hasMessage = isRenderable(message) && (typeof message !== 'string' || message !== '');
|
|
219
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
220
|
-
style: [S.b, {
|
|
221
|
-
backgroundColor: tokens.colors.transparent
|
|
222
|
-
}, positionStyle, stackZIndex ? {
|
|
223
|
-
zIndex: stackZIndex
|
|
224
|
-
} : undefined],
|
|
225
|
-
pointerEvents: forbidClick || overlay || closeOnClick ? 'auto' : 'none'
|
|
226
|
-
}, (overlay || forbidClick) && /*#__PURE__*/React.createElement(Pressable, {
|
|
227
|
-
testID: "rv-toast-overlay",
|
|
228
|
-
style: [S.o, {
|
|
229
|
-
backgroundColor: tokens.colors.transparent
|
|
230
|
-
}, overlay && {
|
|
231
|
-
backgroundColor: colors.backdrop
|
|
232
|
-
}, overlayStyle],
|
|
233
|
-
pointerEvents: "auto",
|
|
234
|
-
onPress: overlay && closeOnClickOverlay ? handleClose : undefined,
|
|
235
|
-
onStartShouldSetResponder: RT,
|
|
236
|
-
onMoveShouldSetResponder: RT
|
|
237
|
-
}), needsSafeAreaTop && /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
238
|
-
edge: "top",
|
|
239
|
-
pointerEvents: "none"
|
|
240
|
-
}), /*#__PURE__*/React.createElement(Pressable, _extends({
|
|
241
|
-
disabled: !closeOnClick
|
|
242
|
-
}, pressProps.interactionProps), /*#__PURE__*/React.createElement(Animated.View, {
|
|
243
|
-
renderToHardwareTextureAndroid: true,
|
|
244
|
-
shouldRasterizeIOS: true,
|
|
245
|
-
style: [S.t, toastStyle, style]
|
|
246
|
-
}, iconNode && /*#__PURE__*/React.createElement(View, {
|
|
247
|
-
style: iconWrapperStyle
|
|
248
|
-
}, isText(iconNode) ? renderTextOrNode(iconNode, [{
|
|
249
|
-
color: colors.text,
|
|
250
|
-
fontSize: tokens.iconSize
|
|
251
|
-
}]) : iconNode), hasMessage && (isText(message) ? renderTextOrNode(message, [S.m, messageStyle, textStyle]) : /*#__PURE__*/React.createElement(View, {
|
|
252
|
-
style: S.mw
|
|
253
|
-
}, message)))), needsSafeAreaBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
254
|
-
edge: "bottom",
|
|
255
|
-
pointerEvents: "none"
|
|
256
|
-
}));
|
|
257
|
-
};
|
|
258
|
-
export const ToastContent = /*#__PURE__*/React.memo(ToastContentImpl);
|
|
259
|
-
const ToastImpl = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ToastContent, props));
|
|
260
|
-
export const Toast = /*#__PURE__*/React.memo(ToastImpl);
|
|
261
|
-
const S = StyleSheet.create({
|
|
262
|
-
b: {
|
|
263
|
-
flex: 1,
|
|
264
|
-
alignItems: 'center'
|
|
265
|
-
},
|
|
266
|
-
o: {
|
|
267
|
-
...StyleSheet.absoluteFillObject
|
|
268
|
-
},
|
|
269
|
-
t: {
|
|
270
|
-
alignItems: 'center',
|
|
271
|
-
justifyContent: 'center'
|
|
272
|
-
},
|
|
273
|
-
m: {
|
|
274
|
-
textAlign: 'center'
|
|
275
|
-
},
|
|
276
|
-
mw: {
|
|
277
|
-
alignItems: 'center'
|
|
278
|
-
}
|
|
279
|
-
});
|
|
280
|
-
export default Toast;
|
|
1
|
+
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_extends.apply(null,arguments)}import React,{useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Easing,Pressable,StyleSheet,View,useWindowDimensions}from"react-native";import Portal from"../portal/Portal";import{SafeAreaView}from"../safe-area-view";import{useAriaPress,useOverlayStack}from"../../hooks";import Loading from"../loading";import{Checked,Close}from"react-native-system-icon";import{isFiniteNumber,isText,isRenderable}from"../../utils/validate";import{renderTextOrNode}from"../../utils";import{nativeDriverEnabled}from"../../platform";import{useReducedMotion}from"../../hooks/animation";import{useLocale}from"../config-provider/useLocale";import{useToastTokens}from"./tokens";const RT=()=>!0,ToastContentImpl=e=>{const{visible:t,message:n,icon:o,type:r="info",iconSize:i,duration:s=2e3,position:a="middle",forbidClick:c=!1,overlay:l=!1,overlayStyle:u,closeOnClickOverlay:d=!1,closeOnClick:m=!1,loadingIndicator:f,safeAreaInsetTop:p,safeAreaInsetBottom:g,tokensOverride:v,style:x,textStyle:b,onClose:R,onOpen:y,onOpened:h,onClosed:E}=e,T=useLocale(),C=useToastTokens(v),O=useReducedMotion(),{colors:P}=C,{height:k}=useWindowDimensions(),I=isFiniteNumber(s)?Math.max(0,s):0,[w,z]=useState(t),A=useRef(new Animated.Value(t?1:0)).current,M=useRef(null),V=useRef(0),H=useRef(R);H.current=R;const D=useRef(y);D.current=y;const W=useRef(h);W.current=h;const j=useRef(E);j.current=E;const{zIndex:F}=useOverlayStack({visible:w,type:"toast"}),N=useRef(t),L=useRef(!1),_=k>0?Math.round(k*C.positionOffsetRatio):C.positionOffsetMin,B=void 0!==p?p:"top"===a,q=void 0!==g?g:"bottom"===a,G=useMemo(()=>"top"===a?{justifyContent:"flex-start",paddingTop:_}:"bottom"===a?{justifyContent:"flex-end",paddingBottom:_}:{justifyContent:"center"},[a,_]);useEffect(()=>{V.current+=1;const e=V.current;M.current?.stop();const n=O?0:C.animationDuration;t?(z(!0),M.current=Animated.timing(A,{toValue:1,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1}),M.current.start()):(M.current=Animated.timing(A,{toValue:0,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1}),M.current.start(({finished:t})=>{t&&e===V.current&&z(!1)}))},[A,O,C.animationDuration,t]),useEffect(()=>()=>{M.current?.stop()},[]),useEffect(()=>{if(!t||I<=0)return;const e=setTimeout(()=>{H.current?.()},I);return()=>clearTimeout(e)},[I,t]),useEffect(()=>{if(!t||!isText(n))return;const e=String(n);e&&AccessibilityInfo.announceForAccessibility?.(e)},[n,t]);const J=O?0:C.animationDuration;useEffect(()=>{let e=null;if(t){if(L.current=!1,!N.current&&(D.current?.(),W.current)){const t=W.current;e=setTimeout(t,J)}}else N.current&&(L.current=!0);return N.current=t,()=>{e&&clearTimeout(e)}},[J,t]),useEffect(()=>{!w&&L.current&&(L.current=!1,j.current?.())},[w]);const K=useRef(()=>H.current?.()).current,Q=useAriaPress({disabled:!m,onPress:K,extraProps:{accessibilityRole:m?"button":"alert",accessibilityHint:m?T?.vanToast?.closeHint??"Double-tap to dismiss":void 0,accessibilityLiveRegion:"assertive"}}),U=useMemo(()=>{if(o)return o;const e=i??C.iconSize;switch(r){case"success":return React.createElement(Checked,{size:e,fill:P.text,color:P.text});case"fail":return React.createElement(Close,{size:e,fill:P.text,color:P.text});case"loading":return f??React.createElement(Loading,{color:P.text,size:e});default:return null}},[P.text,o,i,f,C.iconSize,r]),X=useMemo(()=>({marginBottom:C.gap}),[C.gap]),Y=useMemo(()=>({color:P.text,fontSize:C.fontSize,lineHeight:C.lineHeight,fontFamily:C.fontFamily}),[P.text,C.fontSize,C.fontFamily,C.lineHeight]),Z="info"===r&&!U,$=useMemo(()=>Z?{minWidth:C.textMinWidth,minHeight:0,paddingVertical:C.textPaddingVertical,paddingHorizontal:C.textPaddingHorizontal}:{minWidth:C.defaultWidth,minHeight:C.defaultMinHeight,padding:C.defaultPadding},[Z,C.defaultMinHeight,C.defaultPadding,C.defaultWidth,C.textMinWidth,C.textPaddingHorizontal,C.textPaddingVertical]),ee=useMemo(()=>({borderRadius:C.radius,opacity:m&&Q.states.pressed?C.pressedOpacity:A,backgroundColor:C.colors.variants[r],maxWidth:C.maxWidth,...$}),[A,$,m,Q.states.pressed,C.colors.variants,C.maxWidth,C.pressedOpacity,C.radius,r]);if(!w)return null;const te=isRenderable(n)&&("string"!=typeof n||""!==n);return React.createElement(View,{style:[S.b,{backgroundColor:C.colors.transparent},G,F?{zIndex:F}:void 0],pointerEvents:c||l||m?"auto":"none"},(l||c)&&React.createElement(Pressable,{testID:"rv-toast-overlay",style:[S.o,{backgroundColor:C.colors.transparent},l&&{backgroundColor:P.backdrop},u],pointerEvents:"auto",onPress:l&&d?K:void 0,onStartShouldSetResponder:RT,onMoveShouldSetResponder:RT}),B&&React.createElement(SafeAreaView,{edge:"top",pointerEvents:"none"}),React.createElement(Pressable,_extends({disabled:!m},Q.interactionProps),React.createElement(Animated.View,{renderToHardwareTextureAndroid:!0,shouldRasterizeIOS:!0,style:[S.t,ee,x]},U&&React.createElement(View,{style:X},isText(U)?renderTextOrNode(U,[{color:P.text,fontSize:C.iconSize}]):U),te&&(isText(n)?renderTextOrNode(n,[S.m,Y,b]):React.createElement(View,{style:S.mw},n)))),q&&React.createElement(SafeAreaView,{edge:"bottom",pointerEvents:"none"}))};export const ToastContent=React.memo(ToastContentImpl);const ToastImpl=e=>React.createElement(Portal,null,React.createElement(ToastContent,e));export const Toast=React.memo(ToastImpl);const S=StyleSheet.create({b:{flex:1,alignItems:"center"},o:{...StyleSheet.absoluteFillObject},t:{alignItems:"center",justifyContent:"center"},m:{textAlign:"center"},mw:{alignItems:"center"}});export default Toast;
|