@tamagui/demos 1.61.2 → 1.62.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AccordionDemo.js +6 -12
- package/dist/cjs/AccordionDemo.js.map +1 -1
- package/dist/cjs/AccordionDemo.native.js +44 -0
- package/dist/cjs/AccordionDemo.native.js.map +6 -0
- package/dist/cjs/AddThemeDemo.js +9 -17
- package/dist/cjs/AddThemeDemo.js.map +1 -1
- package/dist/cjs/AddThemeDemo.native.js +53 -0
- package/dist/cjs/AddThemeDemo.native.js.map +6 -0
- package/dist/cjs/AlertDialogDemo.js +14 -19
- package/dist/cjs/AlertDialogDemo.js.map +1 -1
- package/dist/cjs/AlertDialogDemo.native.js +73 -0
- package/dist/cjs/AlertDialogDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsDemo.js +9 -20
- package/dist/cjs/AnimationsDemo.js.map +1 -1
- package/dist/cjs/AnimationsDemo.native.js +105 -0
- package/dist/cjs/AnimationsDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsEnterDemo.js +9 -22
- package/dist/cjs/AnimationsEnterDemo.js.map +1 -1
- package/dist/cjs/AnimationsEnterDemo.native.js +52 -0
- package/dist/cjs/AnimationsEnterDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsHoverDemo.js +6 -12
- package/dist/cjs/AnimationsHoverDemo.js.map +1 -1
- package/dist/cjs/AnimationsHoverDemo.native.js +46 -0
- package/dist/cjs/AnimationsHoverDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsPresenceDemo.js +15 -33
- package/dist/cjs/AnimationsPresenceDemo.js.map +1 -1
- package/dist/cjs/AnimationsPresenceDemo.native.js +91 -0
- package/dist/cjs/AnimationsPresenceDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsTimingDemo.js +6 -12
- package/dist/cjs/AnimationsTimingDemo.js.map +1 -1
- package/dist/cjs/AnimationsTimingDemo.native.js +45 -0
- package/dist/cjs/AnimationsTimingDemo.native.js.map +6 -0
- package/dist/cjs/AvatarDemo.js +8 -13
- package/dist/cjs/AvatarDemo.js.map +1 -1
- package/dist/cjs/AvatarDemo.native.js +50 -0
- package/dist/cjs/AvatarDemo.native.js.map +6 -0
- package/dist/cjs/BuildAButtonDemo.js +7 -13
- package/dist/cjs/BuildAButtonDemo.js.map +1 -1
- package/dist/cjs/BuildAButtonDemo.native.js +62 -0
- package/dist/cjs/BuildAButtonDemo.native.js.map +6 -0
- package/dist/cjs/ButtonDemo.js +9 -15
- package/dist/cjs/ButtonDemo.js.map +1 -1
- package/dist/cjs/ButtonDemo.native.js +44 -0
- package/dist/cjs/ButtonDemo.native.js.map +6 -0
- package/dist/cjs/CardDemo.js +10 -15
- package/dist/cjs/CardDemo.js.map +1 -1
- package/dist/cjs/CardDemo.native.js +69 -0
- package/dist/cjs/CardDemo.native.js.map +6 -0
- package/dist/cjs/CheckboxDemo.js +7 -13
- package/dist/cjs/CheckboxDemo.js.map +1 -1
- package/dist/cjs/CheckboxDemo.native.js +42 -0
- package/dist/cjs/CheckboxDemo.native.js.map +6 -0
- package/dist/cjs/ColorsDemo.js +47 -61
- package/dist/cjs/ColorsDemo.js.map +1 -1
- package/dist/cjs/ColorsDemo.native.js +100 -0
- package/dist/cjs/ColorsDemo.native.js.map +6 -0
- package/dist/cjs/DialogDemo.js +18 -26
- package/dist/cjs/DialogDemo.js.map +1 -1
- package/dist/cjs/DialogDemo.native.js +114 -0
- package/dist/cjs/DialogDemo.native.js.map +6 -0
- package/dist/cjs/FormsDemo.js +10 -17
- package/dist/cjs/FormsDemo.js.map +1 -1
- package/dist/cjs/FormsDemo.native.js +54 -0
- package/dist/cjs/FormsDemo.native.js.map +6 -0
- package/dist/cjs/Grid.js +20 -35
- package/dist/cjs/Grid.js.map +1 -1
- package/dist/cjs/Grid.native.js +63 -0
- package/dist/cjs/Grid.native.js.map +6 -0
- package/dist/cjs/GroupDemo.js +6 -12
- package/dist/cjs/GroupDemo.js.map +1 -1
- package/dist/cjs/GroupDemo.native.js +44 -0
- package/dist/cjs/GroupDemo.native.js.map +6 -0
- package/dist/cjs/HeadingsDemo.js +6 -11
- package/dist/cjs/HeadingsDemo.js.map +1 -1
- package/dist/cjs/HeadingsDemo.native.js +36 -0
- package/dist/cjs/HeadingsDemo.native.js.map +6 -0
- package/dist/cjs/ImageDemo.js +6 -11
- package/dist/cjs/ImageDemo.js.map +1 -1
- package/dist/cjs/ImageDemo.native.js +38 -0
- package/dist/cjs/ImageDemo.native.js.map +6 -0
- package/dist/cjs/InputsDemo.js +6 -11
- package/dist/cjs/InputsDemo.js.map +1 -1
- package/dist/cjs/InputsDemo.native.js +51 -0
- package/dist/cjs/InputsDemo.native.js.map +6 -0
- package/dist/cjs/LabelDemo.js +6 -11
- package/dist/cjs/LabelDemo.js.map +1 -1
- package/dist/cjs/LabelDemo.native.js +38 -0
- package/dist/cjs/LabelDemo.native.js.map +6 -0
- package/dist/cjs/LinearGradientDemo.js +7 -13
- package/dist/cjs/LinearGradientDemo.js.map +1 -1
- package/dist/cjs/LinearGradientDemo.native.js +52 -0
- package/dist/cjs/LinearGradientDemo.native.js.map +6 -0
- package/dist/cjs/ListItemDemo.js +17 -23
- package/dist/cjs/ListItemDemo.js.map +1 -1
- package/dist/cjs/ListItemDemo.native.js +66 -0
- package/dist/cjs/ListItemDemo.native.js.map +6 -0
- package/dist/cjs/LucideIconsDemo.js +11 -25
- package/dist/cjs/LucideIconsDemo.js.map +1 -1
- package/dist/cjs/LucideIconsDemo.native.js +77 -0
- package/dist/cjs/LucideIconsDemo.native.js.map +6 -0
- package/dist/cjs/PopoverDemo.js +12 -19
- package/dist/cjs/PopoverDemo.js.map +1 -1
- package/dist/cjs/PopoverDemo.native.js +93 -0
- package/dist/cjs/PopoverDemo.native.js.map +6 -0
- package/dist/cjs/ProgressDemo.js +12 -21
- package/dist/cjs/ProgressDemo.js.map +1 -1
- package/dist/cjs/ProgressDemo.native.js +75 -0
- package/dist/cjs/ProgressDemo.native.js.map +6 -0
- package/dist/cjs/RadioGroupDemo.js +6 -11
- package/dist/cjs/RadioGroupDemo.js.map +1 -1
- package/dist/cjs/RadioGroupDemo.native.js +42 -0
- package/dist/cjs/RadioGroupDemo.native.js.map +6 -0
- package/dist/cjs/ReplaceThemeDemo.js +12 -23
- package/dist/cjs/ReplaceThemeDemo.js.map +1 -1
- package/dist/cjs/ReplaceThemeDemo.native.js +55 -0
- package/dist/cjs/ReplaceThemeDemo.native.js.map +6 -0
- package/dist/cjs/ScrollViewDemo.js +6 -11
- package/dist/cjs/ScrollViewDemo.js.map +1 -1
- package/dist/cjs/ScrollViewDemo.native.js +48 -0
- package/dist/cjs/ScrollViewDemo.native.js.map +6 -0
- package/dist/cjs/SelectDemo.js +26 -36
- package/dist/cjs/SelectDemo.js.map +1 -1
- package/dist/cjs/SelectDemo.native.js +183 -0
- package/dist/cjs/SelectDemo.native.js.map +6 -0
- package/dist/cjs/SeparatorDemo.js +8 -13
- package/dist/cjs/SeparatorDemo.js.map +1 -1
- package/dist/cjs/SeparatorDemo.native.js +40 -0
- package/dist/cjs/SeparatorDemo.native.js.map +6 -0
- package/dist/cjs/ShapesDemo.js +6 -11
- package/dist/cjs/ShapesDemo.js.map +1 -1
- package/dist/cjs/ShapesDemo.native.js +32 -0
- package/dist/cjs/ShapesDemo.native.js.map +6 -0
- package/dist/cjs/SheetDemo.js +32 -49
- package/dist/cjs/SheetDemo.js.map +1 -1
- package/dist/cjs/SheetDemo.native.js +117 -0
- package/dist/cjs/SheetDemo.native.js.map +6 -0
- package/dist/cjs/SliderDemo.js +7 -12
- package/dist/cjs/SliderDemo.js.map +1 -1
- package/dist/cjs/SliderDemo.native.js +39 -0
- package/dist/cjs/SliderDemo.native.js.map +6 -0
- package/dist/cjs/SpinnerDemo.js +6 -11
- package/dist/cjs/SpinnerDemo.js.map +1 -1
- package/dist/cjs/SpinnerDemo.native.js +32 -0
- package/dist/cjs/SpinnerDemo.native.js.map +6 -0
- package/dist/cjs/StacksDemo.js +10 -15
- package/dist/cjs/StacksDemo.js.map +1 -1
- package/dist/cjs/StacksDemo.native.js +98 -0
- package/dist/cjs/StacksDemo.native.js.map +6 -0
- package/dist/cjs/SwitchDemo.js +11 -16
- package/dist/cjs/SwitchDemo.js.map +1 -1
- package/dist/cjs/SwitchDemo.native.js +66 -0
- package/dist/cjs/SwitchDemo.native.js.map +6 -0
- package/dist/cjs/TabsAdvancedDemo.js +51 -100
- package/dist/cjs/TabsAdvancedDemo.js.map +1 -1
- package/dist/cjs/TabsAdvancedDemo.native.js +248 -0
- package/dist/cjs/TabsAdvancedDemo.native.js.map +6 -0
- package/dist/cjs/TabsDemo.js +90 -106
- package/dist/cjs/TabsDemo.js.map +1 -1
- package/dist/cjs/TabsDemo.native.js +141 -0
- package/dist/cjs/TabsDemo.native.js.map +6 -0
- package/dist/cjs/TextDemo.js +7 -12
- package/dist/cjs/TextDemo.js.map +1 -1
- package/dist/cjs/TextDemo.native.js +36 -0
- package/dist/cjs/TextDemo.native.js.map +6 -0
- package/dist/cjs/ThemeBuilderDemo.js +7 -12
- package/dist/cjs/ThemeBuilderDemo.js.map +1 -1
- package/dist/cjs/ThemeBuilderDemo.native.js +154 -0
- package/dist/cjs/ThemeBuilderDemo.native.js.map +6 -0
- package/dist/cjs/ThemeInverseDemo.js +10 -16
- package/dist/cjs/ThemeInverseDemo.js.map +1 -1
- package/dist/cjs/ThemeInverseDemo.native.js +61 -0
- package/dist/cjs/ThemeInverseDemo.native.js.map +6 -0
- package/dist/cjs/ToastDemo.js +41 -57
- package/dist/cjs/ToastDemo.js.map +1 -1
- package/dist/cjs/ToastDemo.native.js +117 -0
- package/dist/cjs/ToastDemo.native.js.map +6 -0
- package/dist/cjs/ToastDuplicateDemo.js +9 -19
- package/dist/cjs/ToastDuplicateDemo.js.map +1 -1
- package/dist/cjs/ToastDuplicateDemo.native.js +69 -0
- package/dist/cjs/ToastDuplicateDemo.native.js.map +6 -0
- package/dist/cjs/ToggleGroupDemo.js +7 -13
- package/dist/cjs/ToggleGroupDemo.js.map +1 -1
- package/dist/cjs/ToggleGroupDemo.native.js +68 -0
- package/dist/cjs/ToggleGroupDemo.native.js.map +6 -0
- package/dist/cjs/TokensDemo.js +52 -68
- package/dist/cjs/TokensDemo.js.map +1 -1
- package/dist/cjs/TokensDemo.native.js +95 -0
- package/dist/cjs/TokensDemo.native.js.map +6 -0
- package/dist/cjs/TooltipDemo.js +8 -14
- package/dist/cjs/TooltipDemo.js.map +1 -1
- package/dist/cjs/TooltipDemo.native.js +73 -0
- package/dist/cjs/TooltipDemo.native.js.map +6 -0
- package/dist/cjs/UpdateThemeDemo.js +15 -30
- package/dist/cjs/UpdateThemeDemo.js.map +1 -1
- package/dist/cjs/UpdateThemeDemo.native.js +67 -0
- package/dist/cjs/UpdateThemeDemo.native.js.map +6 -0
- package/dist/cjs/index.js +4 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index.native.js +116 -0
- package/dist/cjs/index.native.js.map +6 -0
- package/dist/cjs/tamagui.config.js +6 -12
- package/dist/cjs/tamagui.config.js.map +1 -1
- package/dist/cjs/tamagui.config.native.js +27 -0
- package/dist/cjs/tamagui.config.native.js.map +6 -0
- package/dist/cjs/useOnIntersecting.js +23 -46
- package/dist/cjs/useOnIntersecting.js.map +1 -1
- package/dist/cjs/useOnIntersecting.native.js +71 -0
- package/dist/cjs/useOnIntersecting.native.js.map +6 -0
- package/dist/esm/AccordionDemo.js +1 -1
- package/dist/esm/AccordionDemo.js.map +1 -1
- package/dist/esm/AddThemeDemo.js +4 -5
- package/dist/esm/AddThemeDemo.js.map +1 -1
- package/dist/esm/AlertDialogDemo.js +9 -9
- package/dist/esm/AlertDialogDemo.js.map +1 -1
- package/dist/esm/AnimationsDemo.js +4 -8
- package/dist/esm/AnimationsDemo.js.map +1 -1
- package/dist/esm/AnimationsEnterDemo.js +4 -9
- package/dist/esm/AnimationsEnterDemo.js.map +1 -1
- package/dist/esm/AnimationsHoverDemo.js +1 -1
- package/dist/esm/AnimationsHoverDemo.js.map +1 -1
- package/dist/esm/AnimationsPresenceDemo.js +8 -13
- package/dist/esm/AnimationsPresenceDemo.js.map +1 -1
- package/dist/esm/AnimationsTimingDemo.js +1 -1
- package/dist/esm/AnimationsTimingDemo.js.map +1 -1
- package/dist/esm/AvatarDemo.js +3 -3
- package/dist/esm/AvatarDemo.js.map +1 -1
- package/dist/esm/BuildAButtonDemo.js +2 -2
- package/dist/esm/BuildAButtonDemo.js.map +1 -1
- package/dist/esm/ButtonDemo.js +4 -4
- package/dist/esm/ButtonDemo.js.map +1 -1
- package/dist/esm/CardDemo.js +5 -5
- package/dist/esm/CardDemo.js.map +1 -1
- package/dist/esm/CheckboxDemo.js +2 -2
- package/dist/esm/CheckboxDemo.js.map +1 -1
- package/dist/esm/ColorsDemo.js +42 -51
- package/dist/esm/ColorsDemo.js.map +1 -1
- package/dist/esm/DialogDemo.js +13 -13
- package/dist/esm/DialogDemo.js.map +1 -1
- package/dist/esm/FormsDemo.js +5 -6
- package/dist/esm/FormsDemo.js.map +1 -1
- package/dist/esm/Grid.js +13 -19
- package/dist/esm/Grid.js.map +1 -1
- package/dist/esm/GroupDemo.js +1 -1
- package/dist/esm/GroupDemo.js.map +1 -1
- package/dist/esm/HeadingsDemo.js +1 -1
- package/dist/esm/HeadingsDemo.js.map +1 -1
- package/dist/esm/ImageDemo.js +1 -1
- package/dist/esm/ImageDemo.js.map +1 -1
- package/dist/esm/InputsDemo.js +1 -1
- package/dist/esm/InputsDemo.js.map +1 -1
- package/dist/esm/LabelDemo.js +1 -1
- package/dist/esm/LabelDemo.js.map +1 -1
- package/dist/esm/LinearGradientDemo.js +2 -2
- package/dist/esm/LinearGradientDemo.js.map +1 -1
- package/dist/esm/ListItemDemo.js +12 -12
- package/dist/esm/ListItemDemo.js.map +1 -1
- package/dist/esm/LucideIconsDemo.js +4 -7
- package/dist/esm/LucideIconsDemo.js.map +1 -1
- package/dist/esm/PopoverDemo.js +7 -7
- package/dist/esm/PopoverDemo.js.map +1 -1
- package/dist/esm/ProgressDemo.js +7 -10
- package/dist/esm/ProgressDemo.js.map +1 -1
- package/dist/esm/RadioGroupDemo.js +1 -1
- package/dist/esm/RadioGroupDemo.js.map +1 -1
- package/dist/esm/ReplaceThemeDemo.js +7 -11
- package/dist/esm/ReplaceThemeDemo.js.map +1 -1
- package/dist/esm/ScrollViewDemo.js +1 -1
- package/dist/esm/ScrollViewDemo.js.map +1 -1
- package/dist/esm/SelectDemo.js +21 -23
- package/dist/esm/SelectDemo.js.map +1 -1
- package/dist/esm/SeparatorDemo.js +3 -3
- package/dist/esm/SeparatorDemo.js.map +1 -1
- package/dist/esm/ShapesDemo.js +1 -1
- package/dist/esm/ShapesDemo.js.map +1 -1
- package/dist/esm/SheetDemo.js +28 -37
- package/dist/esm/SheetDemo.js.map +1 -1
- package/dist/esm/SliderDemo.js +2 -2
- package/dist/esm/SliderDemo.js.map +1 -1
- package/dist/esm/SpinnerDemo.js +1 -1
- package/dist/esm/SpinnerDemo.js.map +1 -1
- package/dist/esm/StacksDemo.js +5 -5
- package/dist/esm/StacksDemo.js.map +1 -1
- package/dist/esm/SwitchDemo.js +6 -6
- package/dist/esm/SwitchDemo.js.map +1 -1
- package/dist/esm/TabsAdvancedDemo.js +46 -89
- package/dist/esm/TabsAdvancedDemo.js.map +1 -1
- package/dist/esm/TabsDemo.js +85 -95
- package/dist/esm/TabsDemo.js.map +1 -1
- package/dist/esm/TextDemo.js +2 -2
- package/dist/esm/TextDemo.js.map +1 -1
- package/dist/esm/ThemeBuilderDemo.js +2 -2
- package/dist/esm/ThemeBuilderDemo.js.map +1 -1
- package/dist/esm/ThemeInverseDemo.js +5 -6
- package/dist/esm/ThemeInverseDemo.js.map +1 -1
- package/dist/esm/ToastDemo.js +34 -41
- package/dist/esm/ToastDemo.js.map +1 -1
- package/dist/esm/ToastDuplicateDemo.js +2 -2
- package/dist/esm/ToastDuplicateDemo.js.map +1 -1
- package/dist/esm/ToggleGroupDemo.js +2 -2
- package/dist/esm/ToggleGroupDemo.js.map +1 -1
- package/dist/esm/TokensDemo.js +47 -56
- package/dist/esm/TokensDemo.js.map +1 -1
- package/dist/esm/TooltipDemo.js +3 -3
- package/dist/esm/TooltipDemo.js.map +1 -1
- package/dist/esm/UpdateThemeDemo.js +8 -13
- package/dist/esm/UpdateThemeDemo.js.map +1 -1
- package/dist/esm/useOnIntersecting.js +17 -35
- package/dist/esm/useOnIntersecting.js.map +1 -1
- package/dist/jsx/AccordionDemo.native.js +24 -0
- package/dist/jsx/AccordionDemo.native.js.map +6 -0
- package/dist/jsx/AddThemeDemo.js +2 -3
- package/dist/jsx/AddThemeDemo.js.map +1 -1
- package/dist/jsx/AddThemeDemo.native.js +30 -0
- package/dist/jsx/AddThemeDemo.native.js.map +6 -0
- package/dist/jsx/AlertDialogDemo.js +1 -1
- package/dist/jsx/AlertDialogDemo.native.js +45 -0
- package/dist/jsx/AlertDialogDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsDemo.js +2 -6
- package/dist/jsx/AnimationsDemo.js.map +1 -1
- package/dist/jsx/AnimationsDemo.native.js +78 -0
- package/dist/jsx/AnimationsDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsEnterDemo.js +3 -8
- package/dist/jsx/AnimationsEnterDemo.js.map +1 -1
- package/dist/jsx/AnimationsEnterDemo.native.js +30 -0
- package/dist/jsx/AnimationsEnterDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsHoverDemo.native.js +22 -0
- package/dist/jsx/AnimationsHoverDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsPresenceDemo.js +3 -8
- package/dist/jsx/AnimationsPresenceDemo.js.map +1 -1
- package/dist/jsx/AnimationsPresenceDemo.native.js +57 -0
- package/dist/jsx/AnimationsPresenceDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsTimingDemo.native.js +21 -0
- package/dist/jsx/AnimationsTimingDemo.native.js.map +6 -0
- package/dist/jsx/AvatarDemo.native.js +23 -0
- package/dist/jsx/AvatarDemo.native.js.map +6 -0
- package/dist/jsx/BuildAButtonDemo.native.js +42 -0
- package/dist/jsx/BuildAButtonDemo.native.js.map +6 -0
- package/dist/jsx/ButtonDemo.native.js +24 -0
- package/dist/jsx/ButtonDemo.native.js.map +6 -0
- package/dist/jsx/CardDemo.native.js +41 -0
- package/dist/jsx/CardDemo.native.js.map +6 -0
- package/dist/jsx/CheckboxDemo.native.js +21 -0
- package/dist/jsx/CheckboxDemo.native.js.map +6 -0
- package/dist/jsx/ColorsDemo.js +32 -41
- package/dist/jsx/ColorsDemo.js.map +1 -1
- package/dist/jsx/ColorsDemo.native.js +77 -0
- package/dist/jsx/ColorsDemo.native.js.map +6 -0
- package/dist/jsx/DialogDemo.js +3 -3
- package/dist/jsx/DialogDemo.js.map +1 -1
- package/dist/jsx/DialogDemo.native.js +91 -0
- package/dist/jsx/DialogDemo.native.js.map +6 -0
- package/dist/jsx/FormsDemo.js +2 -3
- package/dist/jsx/FormsDemo.js.map +1 -1
- package/dist/jsx/FormsDemo.native.js +30 -0
- package/dist/jsx/FormsDemo.native.js.map +6 -0
- package/dist/jsx/Grid.js +8 -14
- package/dist/jsx/Grid.js.map +1 -1
- package/dist/jsx/Grid.native.js +28 -0
- package/dist/jsx/Grid.native.js.map +6 -0
- package/dist/jsx/GroupDemo.native.js +30 -0
- package/dist/jsx/GroupDemo.native.js.map +6 -0
- package/dist/jsx/HeadingsDemo.native.js +15 -0
- package/dist/jsx/HeadingsDemo.native.js.map +6 -0
- package/dist/jsx/ImageDemo.native.js +14 -0
- package/dist/jsx/ImageDemo.native.js.map +6 -0
- package/dist/jsx/InputsDemo.native.js +26 -0
- package/dist/jsx/InputsDemo.native.js.map +6 -0
- package/dist/jsx/LabelDemo.native.js +17 -0
- package/dist/jsx/LabelDemo.native.js.map +6 -0
- package/dist/jsx/LinearGradientDemo.native.js +32 -0
- package/dist/jsx/LinearGradientDemo.native.js.map +6 -0
- package/dist/jsx/ListItemDemo.native.js +40 -0
- package/dist/jsx/ListItemDemo.native.js.map +6 -0
- package/dist/jsx/LucideIconsDemo.js +2 -5
- package/dist/jsx/LucideIconsDemo.js.map +1 -1
- package/dist/jsx/LucideIconsDemo.native.js +44 -0
- package/dist/jsx/LucideIconsDemo.native.js.map +6 -0
- package/dist/jsx/PopoverDemo.js +1 -1
- package/dist/jsx/PopoverDemo.native.js +70 -0
- package/dist/jsx/PopoverDemo.native.js.map +6 -0
- package/dist/jsx/ProgressDemo.js +3 -6
- package/dist/jsx/ProgressDemo.js.map +1 -1
- package/dist/jsx/ProgressDemo.native.js +47 -0
- package/dist/jsx/ProgressDemo.native.js.map +6 -0
- package/dist/jsx/RadioGroupDemo.native.js +20 -0
- package/dist/jsx/RadioGroupDemo.native.js.map +6 -0
- package/dist/jsx/ReplaceThemeDemo.js +6 -10
- package/dist/jsx/ReplaceThemeDemo.js.map +1 -1
- package/dist/jsx/ReplaceThemeDemo.native.js +40 -0
- package/dist/jsx/ReplaceThemeDemo.native.js.map +6 -0
- package/dist/jsx/ScrollViewDemo.native.js +23 -0
- package/dist/jsx/ScrollViewDemo.native.js.map +6 -0
- package/dist/jsx/SelectDemo.js +8 -10
- package/dist/jsx/SelectDemo.js.map +1 -1
- package/dist/jsx/SelectDemo.native.js +145 -0
- package/dist/jsx/SelectDemo.native.js.map +6 -0
- package/dist/jsx/SeparatorDemo.native.js +19 -0
- package/dist/jsx/SeparatorDemo.native.js.map +6 -0
- package/dist/jsx/ShapesDemo.native.js +11 -0
- package/dist/jsx/ShapesDemo.native.js.map +6 -0
- package/dist/jsx/SheetDemo.js +19 -28
- package/dist/jsx/SheetDemo.js.map +1 -1
- package/dist/jsx/SheetDemo.native.js +79 -0
- package/dist/jsx/SheetDemo.native.js.map +6 -0
- package/dist/jsx/SliderDemo.native.js +18 -0
- package/dist/jsx/SliderDemo.native.js.map +6 -0
- package/dist/jsx/SpinnerDemo.native.js +11 -0
- package/dist/jsx/SpinnerDemo.native.js.map +6 -0
- package/dist/jsx/StacksDemo.native.js +60 -0
- package/dist/jsx/StacksDemo.native.js.map +6 -0
- package/dist/jsx/SwitchDemo.native.js +40 -0
- package/dist/jsx/SwitchDemo.native.js.map +6 -0
- package/dist/jsx/TabsAdvancedDemo.js +28 -71
- package/dist/jsx/TabsAdvancedDemo.js.map +1 -1
- package/dist/jsx/TabsAdvancedDemo.native.js +183 -0
- package/dist/jsx/TabsAdvancedDemo.native.js.map +6 -0
- package/dist/jsx/TabsDemo.js +61 -71
- package/dist/jsx/TabsDemo.js.map +1 -1
- package/dist/jsx/TabsDemo.native.js +102 -0
- package/dist/jsx/TabsDemo.native.js.map +6 -0
- package/dist/jsx/TextDemo.native.js +15 -0
- package/dist/jsx/TextDemo.native.js.map +6 -0
- package/dist/jsx/ThemeBuilderDemo.native.js +103 -0
- package/dist/jsx/ThemeBuilderDemo.native.js.map +6 -0
- package/dist/jsx/ThemeInverseDemo.js +1 -2
- package/dist/jsx/ThemeInverseDemo.js.map +1 -1
- package/dist/jsx/ThemeInverseDemo.native.js +33 -0
- package/dist/jsx/ThemeInverseDemo.native.js.map +6 -0
- package/dist/jsx/ToastDemo.js +25 -32
- package/dist/jsx/ToastDemo.js.map +1 -1
- package/dist/jsx/ToastDemo.native.js +71 -0
- package/dist/jsx/ToastDemo.native.js.map +6 -0
- package/dist/jsx/ToastDuplicateDemo.native.js +35 -0
- package/dist/jsx/ToastDuplicateDemo.native.js.map +6 -0
- package/dist/jsx/ToggleGroupDemo.js +1 -1
- package/dist/jsx/ToggleGroupDemo.js.map +1 -1
- package/dist/jsx/ToggleGroupDemo.native.js +40 -0
- package/dist/jsx/ToggleGroupDemo.native.js.map +6 -0
- package/dist/jsx/TokensDemo.js +38 -46
- package/dist/jsx/TokensDemo.js.map +1 -1
- package/dist/jsx/TokensDemo.native.js +69 -0
- package/dist/jsx/TokensDemo.native.js.map +6 -0
- package/dist/jsx/TooltipDemo.js +1 -1
- package/dist/jsx/TooltipDemo.native.js +62 -0
- package/dist/jsx/TooltipDemo.native.js.map +6 -0
- package/dist/jsx/UpdateThemeDemo.js +7 -12
- package/dist/jsx/UpdateThemeDemo.js.map +1 -1
- package/dist/jsx/UpdateThemeDemo.native.js +46 -0
- package/dist/jsx/UpdateThemeDemo.native.js.map +6 -0
- package/dist/jsx/index.native.js +50 -0
- package/dist/jsx/index.native.js.map +6 -0
- package/dist/jsx/tamagui.config.native.js +8 -0
- package/dist/jsx/tamagui.config.native.js.map +6 -0
- package/dist/jsx/useOnIntersecting.js +17 -35
- package/dist/jsx/useOnIntersecting.js.map +1 -1
- package/dist/jsx/useOnIntersecting.native.js +50 -0
- package/dist/jsx/useOnIntersecting.native.js.map +6 -0
- package/package.json +18 -18
- package/src/DialogDemo.tsx +1 -1
- package/src/SheetDemo.tsx +28 -22
package/dist/jsx/TokensDemo.js
CHANGED
|
@@ -3,71 +3,63 @@ import { useState } from "react";
|
|
|
3
3
|
import { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from "tamagui";
|
|
4
4
|
const sections = [
|
|
5
5
|
{
|
|
6
|
-
name:
|
|
7
|
-
key:
|
|
6
|
+
name: "Size",
|
|
7
|
+
key: "size"
|
|
8
8
|
},
|
|
9
9
|
{
|
|
10
|
-
name:
|
|
10
|
+
name: "Space",
|
|
11
11
|
key: "space"
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
|
-
name:
|
|
15
|
-
key:
|
|
14
|
+
name: "Space (-)",
|
|
15
|
+
key: "spaceNegative"
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
|
-
name:
|
|
19
|
-
key:
|
|
18
|
+
name: "Radius",
|
|
19
|
+
key: "radius"
|
|
20
20
|
}
|
|
21
21
|
];
|
|
22
22
|
function TokensDemo() {
|
|
23
23
|
const [section, setSection] = useState("size");
|
|
24
24
|
return <YStack space>
|
|
25
|
-
<XGroup alignItems="center" alignSelf="center">{sections.map(({ name, key }) => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
>{name}</Button></XGroup.Item>;
|
|
32
|
-
})}</XGroup>
|
|
25
|
+
<XGroup alignItems="center" alignSelf="center">{sections.map(({ name, key }) => <XGroup.Item key={key}><Button
|
|
26
|
+
size="$3"
|
|
27
|
+
theme={section === key ? "active" : null}
|
|
28
|
+
fontFamily="$silkscreen"
|
|
29
|
+
onPress={() => setSection(key)}
|
|
30
|
+
>{name}</Button></XGroup.Item>)}</XGroup>
|
|
33
31
|
{(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
|
|
34
32
|
</YStack>;
|
|
35
33
|
}
|
|
36
34
|
function SizeSection({ section }) {
|
|
37
|
-
const allTokens = getConfig().tokens;
|
|
38
|
-
const tokens = allTokens[section.startsWith("space") ? "space" : section];
|
|
39
|
-
const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
|
|
40
|
-
const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
|
|
41
|
-
const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
|
|
35
|
+
const allTokens = getConfig().tokens, tokens = allTokens[section.startsWith("space") ? "space" : section], st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1), spaceTokens = st.filter((t) => parseFloat(t) >= 0), spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
|
|
42
36
|
return <YStack flex={1} space>
|
|
43
37
|
<H2>Sizes</H2>
|
|
44
38
|
<YStack width="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
45
|
-
(token) => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
</XStack>;
|
|
70
|
-
}
|
|
39
|
+
(token) => <XStack width="100%" alignItems="center" key={token}>
|
|
40
|
+
<YStack width="25%"><H3 size="$6">
|
|
41
|
+
{"$"}
|
|
42
|
+
{token}
|
|
43
|
+
</H3></YStack>
|
|
44
|
+
<YStack width="20%"><H4 size="$5">
|
|
45
|
+
{tokens[token]?.val}
|
|
46
|
+
{"px"}
|
|
47
|
+
</H4></YStack>
|
|
48
|
+
<Square
|
|
49
|
+
size={tokens[token]?.val}
|
|
50
|
+
backgroundColor="$color5"
|
|
51
|
+
{...section === "spaceNegative" && {
|
|
52
|
+
backgroundColor: "$red5",
|
|
53
|
+
size: -tokens[spaceTokensNegative.find(
|
|
54
|
+
(t) => parseFloat(t) === -parseFloat(token)
|
|
55
|
+
) ?? token]?.val
|
|
56
|
+
}}
|
|
57
|
+
{...section === "radius" && {
|
|
58
|
+
size: allTokens.size[token]?.val,
|
|
59
|
+
borderRadius: tokens[token]?.val
|
|
60
|
+
}}
|
|
61
|
+
/>
|
|
62
|
+
</XStack>
|
|
71
63
|
)}</YStack>
|
|
72
64
|
</YStack>;
|
|
73
65
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,WAAW,SAAS,UAAU,UACnC,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,
|
|
4
|
+
"mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,WAAW,SAAS,UAAU,UACnC,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAEvB,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,MACC,KAAK;AAAA,MACL,OAAO,YAAY,MAAM,WAAW;AAAA,MACpC,WAAW;AAAA,MACX,SAAS,MAAM,WAAW,GAAG;AAAA,MAE5B,KACH,EAPC,OAQH,EATC,OAAO,KAWX,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE,QACxB,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO,GAClE,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG,GAChF,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GACjD,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,CAAC,OAAO,MAAM,GAAG;AAAA,IACf,CAAC,GAAG,KAAK,EAAR;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,MAAM,KAAK,WAAW,CAAC,UAAU,MAClD,YAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAEG,CAAC,OAAO,MAAM,OAAO,WAAW,SAAS,KAAK;AAAA,QAC5C,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,WAAK;AAAA,WAAE;AAAA,QAAM,EAArB,GACH,EAFC;AAAA,QAGD,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,WAAM,OAAO,KAAK,GAAG;AAAA,WAAI;AAAA,QAAE,EAAnC,GACH,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,MAAM,OAAO,KAAK,GAAG;AAAA,UACrB,gBAAgB;AAAA,cACX,YAAY,mBAAmB;AAAA,YAClC,iBAAiB;AAAA,YACjB,MAAM,CAAC,OACL,oBAAoB;AAAA,cAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,YAC5C,KAAK,KACP,GAAG;AAAA,UACL;AAAA,cACK,YAAY,YAAY;AAAA,YAC3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,YAC7B,cAAc,OAAO,KAAK,GAAG;AAAA,UAC/B;AAAA,QACF;AAAA,MACF,EAvBC;AAAA,IA0BP,EACF,EA/BC;AAAA,EAgCH,EAlCC;AAoCL;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { getConfig } from "@tamagui/core";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from "tamagui";
|
|
4
|
+
const sections = [
|
|
5
|
+
{
|
|
6
|
+
name: "Size",
|
|
7
|
+
key: "size"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: "Space",
|
|
11
|
+
key: "space"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
name: "Space (-)",
|
|
15
|
+
key: "spaceNegative"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: "Radius",
|
|
19
|
+
key: "radius"
|
|
20
|
+
}
|
|
21
|
+
];
|
|
22
|
+
function TokensDemo() {
|
|
23
|
+
const [section, setSection] = useState("size");
|
|
24
|
+
return <YStack space>
|
|
25
|
+
<XGroup alignItems="center" alignSelf="center">{sections.map(({ name, key }) => <XGroup.Item key={key}><Button
|
|
26
|
+
size="$3"
|
|
27
|
+
theme={section === key ? "active" : null}
|
|
28
|
+
fontFamily="$silkscreen"
|
|
29
|
+
onPress={() => setSection(key)}
|
|
30
|
+
>{name}</Button></XGroup.Item>)}</XGroup>
|
|
31
|
+
{(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
|
|
32
|
+
</YStack>;
|
|
33
|
+
}
|
|
34
|
+
function SizeSection({ section }) {
|
|
35
|
+
const allTokens = getConfig().tokens, tokens = allTokens[section.startsWith("space") ? "space" : section], st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1), spaceTokens = st.filter((t) => parseFloat(t) >= 0), spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
|
|
36
|
+
return <YStack flex={1} space>
|
|
37
|
+
<H2>Sizes</H2>
|
|
38
|
+
<YStack width="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
39
|
+
(token) => <XStack width="100%" alignItems="center" key={token}>
|
|
40
|
+
<YStack width="25%"><H3 size="$6">
|
|
41
|
+
{"$"}
|
|
42
|
+
{token}
|
|
43
|
+
</H3></YStack>
|
|
44
|
+
<YStack width="20%"><H4 size="$5">
|
|
45
|
+
{tokens[token]?.val}
|
|
46
|
+
{"px"}
|
|
47
|
+
</H4></YStack>
|
|
48
|
+
<Square
|
|
49
|
+
size={tokens[token]?.val}
|
|
50
|
+
backgroundColor="$color5"
|
|
51
|
+
{...section === "spaceNegative" && {
|
|
52
|
+
backgroundColor: "$red5",
|
|
53
|
+
size: -tokens[spaceTokensNegative.find(
|
|
54
|
+
(t) => parseFloat(t) === -parseFloat(token)
|
|
55
|
+
) ?? token]?.val
|
|
56
|
+
}}
|
|
57
|
+
{...section === "radius" && {
|
|
58
|
+
size: allTokens.size[token]?.val,
|
|
59
|
+
borderRadius: tokens[token]?.val
|
|
60
|
+
}}
|
|
61
|
+
/>
|
|
62
|
+
</XStack>
|
|
63
|
+
)}</YStack>
|
|
64
|
+
</YStack>;
|
|
65
|
+
}
|
|
66
|
+
export {
|
|
67
|
+
TokensDemo
|
|
68
|
+
};
|
|
69
|
+
//# sourceMappingURL=TokensDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,WAAW,SAAS,UAAU,UACnC,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAEvB,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,MACC,KAAK;AAAA,MACL,OAAO,YAAY,MAAM,WAAW;AAAA,MACpC,WAAW;AAAA,MACX,SAAS,MAAM,WAAW,GAAG;AAAA,MAE5B,KACH,EAPC,OAQH,EATC,OAAO,KAWX,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE,QACxB,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO,GAClE,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG,GAChF,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GACjD,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,CAAC,OAAO,MAAM,GAAG;AAAA,IACf,CAAC,GAAG,KAAK,EAAR;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,MAAM,KAAK,WAAW,CAAC,UAAU,MAClD,YAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAEG,CAAC,OAAO,MAAM,OAAO,WAAW,SAAS,KAAK;AAAA,QAC5C,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,WAAK;AAAA,WAAE;AAAA,QAAM,EAArB,GACH,EAFC;AAAA,QAGD,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,WAAM,OAAO,KAAK,GAAG;AAAA,WAAI;AAAA,QAAE,EAAnC,GACH,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,MAAM,OAAO,KAAK,GAAG;AAAA,UACrB,gBAAgB;AAAA,cACX,YAAY,mBAAmB;AAAA,YAClC,iBAAiB;AAAA,YACjB,MAAM,CAAC,OACL,oBAAoB;AAAA,cAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,YAC5C,KAAK,KACP,GAAG;AAAA,UACL;AAAA,cACK,YAAY,YAAY;AAAA,YAC3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,YAC7B,cAAc,OAAO,KAAK,GAAG;AAAA,UAC/B;AAAA,QACF;AAAA,MACF,EAvBC;AAAA,IA0BP,EACF,EA/BC;AAAA,EAgCH,EAlCC;AAoCL;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
package/dist/jsx/TooltipDemo.js
CHANGED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ChevronDown,
|
|
3
|
+
ChevronLeft,
|
|
4
|
+
ChevronRight,
|
|
5
|
+
ChevronUp,
|
|
6
|
+
Circle
|
|
7
|
+
} from "@tamagui/lucide-icons";
|
|
8
|
+
import {
|
|
9
|
+
Button,
|
|
10
|
+
Paragraph,
|
|
11
|
+
Tooltip,
|
|
12
|
+
TooltipGroup,
|
|
13
|
+
XStack,
|
|
14
|
+
YStack
|
|
15
|
+
} from "tamagui";
|
|
16
|
+
function TooltipDemo() {
|
|
17
|
+
return <TooltipGroup delay={{ open: 3e3, close: 100 }}><YStack space="$2" alignSelf="center">
|
|
18
|
+
<XStack space="$2">
|
|
19
|
+
<Demo groupId="0" placement="top-end" Icon={Circle} />
|
|
20
|
+
<Demo groupId="1" placement="top" Icon={ChevronUp} />
|
|
21
|
+
<Demo groupId="2" placement="top-start" Icon={Circle} />
|
|
22
|
+
</XStack>
|
|
23
|
+
<XStack space="$2">
|
|
24
|
+
<Demo groupId="3" placement="left" Icon={ChevronLeft} />
|
|
25
|
+
<YStack flex={1} />
|
|
26
|
+
<Demo groupId="4" placement="right" Icon={ChevronRight} />
|
|
27
|
+
</XStack>
|
|
28
|
+
<XStack space="$2">
|
|
29
|
+
<Demo groupId="5" placement="bottom-end" Icon={Circle} />
|
|
30
|
+
<Demo groupId="6" placement="bottom" Icon={ChevronDown} />
|
|
31
|
+
<Demo groupId="7" placement="bottom-start" Icon={Circle} />
|
|
32
|
+
</XStack>
|
|
33
|
+
</YStack></TooltipGroup>;
|
|
34
|
+
}
|
|
35
|
+
function Demo({ Icon, ...props }) {
|
|
36
|
+
return <Tooltip {...props}>
|
|
37
|
+
<Tooltip.Trigger><Button icon={Icon} circular /></Tooltip.Trigger>
|
|
38
|
+
<Tooltip.Content
|
|
39
|
+
enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
|
|
40
|
+
exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
|
|
41
|
+
scale={1}
|
|
42
|
+
x={0}
|
|
43
|
+
y={0}
|
|
44
|
+
opacity={1}
|
|
45
|
+
animation={[
|
|
46
|
+
"quick",
|
|
47
|
+
{
|
|
48
|
+
opacity: {
|
|
49
|
+
overshootClamping: !0
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
]}
|
|
53
|
+
>
|
|
54
|
+
<Tooltip.Arrow />
|
|
55
|
+
<Paragraph size="$2" lineHeight="$1">Hello world</Paragraph>
|
|
56
|
+
</Tooltip.Content>
|
|
57
|
+
</Tooltip>;
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
TooltipDemo
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=TooltipDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/TooltipDemo.tsx"],
|
|
4
|
+
"mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,CAAC,aAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,CAAC,OAAO,MAAM,KAAK,UAAU;AAAA,IAC3B,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,UAAU,MAAM,QAAQ;AAAA,MACpD,CAAC,KAAK,QAAQ,IAAI,UAAU,MAAM,MAAM,WAAW;AAAA,MACnD,CAAC,KAAK,QAAQ,IAAI,UAAU,YAAY,MAAM,QAAQ;AAAA,IACxD,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,OAAO,MAAM,aAAa;AAAA,MACtD,CAAC,OAAO,MAAM,GAAG;AAAA,MACjB,CAAC,KAAK,QAAQ,IAAI,UAAU,QAAQ,MAAM,cAAc;AAAA,IAC1D,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,aAAa,MAAM,QAAQ;AAAA,MACvD,CAAC,KAAK,QAAQ,IAAI,UAAU,SAAS,MAAM,aAAa;AAAA,MACxD,CAAC,KAAK,QAAQ,IAAI,UAAU,eAAe,MAAM,QAAQ;AAAA,IAC3D,EAJC;AAAA,EAKH,EAhBC,OAiBH,EAlBC;AAoBL;AAEA,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AAC/D,SACE,CAAC,YAAY;AAAA,IACX,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,SAAS,EAC/B,EAFC,QAAQ;AAAA,IAGT,CAAC,QAAQ;AAAA,MACP,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,MAClD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,MACjD,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA;AAAA,MAEA,CAAC,QAAQ,MAAM;AAAA,MACf,CAAC,UAAU,KAAK,KAAK,WAAW,KAAK,WAErC,EAFC;AAAA,IAGH,EApBC,QAAQ;AAAA,EAqBX,EAzBC;AA2BL;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -11,23 +11,19 @@ import {
|
|
|
11
11
|
useForceUpdate,
|
|
12
12
|
useIsomorphicLayoutEffect
|
|
13
13
|
} from "tamagui";
|
|
14
|
-
const colors = Config.config.tokens.color;
|
|
15
|
-
const colorKeys = Object.keys(colors);
|
|
14
|
+
const colors = Config.config.tokens.color, colorKeys = Object.keys(colors);
|
|
16
15
|
function UpdateThemeDemo() {
|
|
17
|
-
const [theme, setTheme] = useState();
|
|
18
|
-
|
|
19
|
-
useIsomorphicLayoutEffect(() => {
|
|
16
|
+
const [theme, setTheme] = useState(), update = useForceUpdate();
|
|
17
|
+
return useIsomorphicLayoutEffect(() => {
|
|
20
18
|
addTheme({
|
|
21
19
|
name: "custom",
|
|
22
|
-
insertCSS:
|
|
20
|
+
insertCSS: !0,
|
|
23
21
|
theme: {
|
|
24
22
|
color: "red",
|
|
25
23
|
color2: "blue"
|
|
26
24
|
}
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
}, []);
|
|
30
|
-
return <YStack alignItems="center" space>
|
|
25
|
+
}), setTheme("custom");
|
|
26
|
+
}, []), <YStack alignItems="center" space>
|
|
31
27
|
<XStack gap="$5"><Theme name={theme ?? null}><Square borderRadius="$8" size={100} backgroundColor="$color" /></Theme></XStack>
|
|
32
28
|
<Button
|
|
33
29
|
onPress={() => {
|
|
@@ -39,8 +35,7 @@ function UpdateThemeDemo() {
|
|
|
39
35
|
theme: {
|
|
40
36
|
color: randomColor
|
|
41
37
|
}
|
|
42
|
-
});
|
|
43
|
-
update();
|
|
38
|
+
}), update();
|
|
44
39
|
}}
|
|
45
40
|
>Set to random color</Button>
|
|
46
41
|
</YStack>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/UpdateThemeDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,YAAY,YAAY;AACxB,SAAS,UAAU,mBAAmB;AACtC,SAAgB,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,OAAO,OAAO,OAAO
|
|
4
|
+
"mappings": "AAAA,YAAY,YAAY;AACxB,SAAS,UAAU,mBAAmB;AACtC,SAAgB,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,OAAO,OAAO,OAAO,OAC9B,YAAY,OAAO,KAAK,MAAM;AAE7B,SAAS,kBAAkB;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,GAClC,SAAS,eAAe;AAE9B,mCAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC,GACD,SAAS,QAAQ;AAAA,EACnB,GAAG,CAAC,CAAC,GAGH,CAAC,OAAO,WAAW,SAAS;AAAA,IAC1B,CAAC,OAAO,IAAK,KACX,CAAC,MAAM,MAAM,SAAS,MACpB,CAAC,OAAO,aAAa,KAAK,MAAM,KAAK,gBAAgB,SAAS,EAChE,EAFC,MAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,cAAc;AAAA,UAClB,OAAO,UAAU,KAAK,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,CAAC,CAAC;AAAA,QAChE;AACA,oBAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QACF,CAAC,GACD,OAAO;AAAA,MACT;AAAA,KACD,mBAED,EAfC;AAAA,EAgBH,EAvBC;AAyBL;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as Config from "@tamagui/site-config";
|
|
2
|
+
import { addTheme, updateTheme } from "@tamagui/theme";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import {
|
|
5
|
+
Button,
|
|
6
|
+
Square,
|
|
7
|
+
Theme,
|
|
8
|
+
XStack,
|
|
9
|
+
YStack,
|
|
10
|
+
getVariableValue,
|
|
11
|
+
useForceUpdate,
|
|
12
|
+
useIsomorphicLayoutEffect
|
|
13
|
+
} from "tamagui";
|
|
14
|
+
const colors = Config.config.tokens.color, colorKeys = Object.keys(colors);
|
|
15
|
+
function UpdateThemeDemo() {
|
|
16
|
+
const [theme, setTheme] = useState(), update = useForceUpdate();
|
|
17
|
+
return useIsomorphicLayoutEffect(() => {
|
|
18
|
+
addTheme({
|
|
19
|
+
name: "custom",
|
|
20
|
+
insertCSS: !0,
|
|
21
|
+
theme: {
|
|
22
|
+
color: "red",
|
|
23
|
+
color2: "blue"
|
|
24
|
+
}
|
|
25
|
+
}), setTheme("custom");
|
|
26
|
+
}, []), <YStack alignItems="center" space>
|
|
27
|
+
<XStack gap="$5"><Theme name={theme ?? null}><Square borderRadius="$8" size={100} backgroundColor="$color" /></Theme></XStack>
|
|
28
|
+
<Button
|
|
29
|
+
onPress={() => {
|
|
30
|
+
const randomColor = getVariableValue(
|
|
31
|
+
colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
|
|
32
|
+
);
|
|
33
|
+
updateTheme({
|
|
34
|
+
name: "custom",
|
|
35
|
+
theme: {
|
|
36
|
+
color: randomColor
|
|
37
|
+
}
|
|
38
|
+
}), update();
|
|
39
|
+
}}
|
|
40
|
+
>Set to random color</Button>
|
|
41
|
+
</YStack>;
|
|
42
|
+
}
|
|
43
|
+
export {
|
|
44
|
+
UpdateThemeDemo
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=UpdateThemeDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/UpdateThemeDemo.tsx"],
|
|
4
|
+
"mappings": "AAAA,YAAY,YAAY;AACxB,SAAS,UAAU,mBAAmB;AACtC,SAAgB,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,OAAO,OAAO,OAAO,OAC9B,YAAY,OAAO,KAAK,MAAM;AAE7B,SAAS,kBAAkB;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,GAClC,SAAS,eAAe;AAE9B,mCAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC,GACD,SAAS,QAAQ;AAAA,EACnB,GAAG,CAAC,CAAC,GAGH,CAAC,OAAO,WAAW,SAAS;AAAA,IAC1B,CAAC,OAAO,IAAK,KACX,CAAC,MAAM,MAAM,SAAS,MACpB,CAAC,OAAO,aAAa,KAAK,MAAM,KAAK,gBAAgB,SAAS,EAChE,EAFC,MAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,cAAc;AAAA,UAClB,OAAO,UAAU,KAAK,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,CAAC,CAAC;AAAA,QAChE;AACA,oBAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QACF,CAAC,GACD,OAAO;AAAA,MACT;AAAA,KACD,mBAED,EAfC;AAAA,EAgBH,EAvBC;AAyBL;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export * from "./AccordionDemo";
|
|
2
|
+
export * from "./AddThemeDemo";
|
|
3
|
+
export * from "./AlertDialogDemo";
|
|
4
|
+
export * from "./AnimationsDemo";
|
|
5
|
+
export * from "./AnimationsEnterDemo";
|
|
6
|
+
export * from "./AnimationsHoverDemo";
|
|
7
|
+
export * from "./AnimationsPresenceDemo";
|
|
8
|
+
export * from "./AnimationsTimingDemo";
|
|
9
|
+
export * from "./AvatarDemo";
|
|
10
|
+
export * from "./BuildAButtonDemo";
|
|
11
|
+
export * from "./ButtonDemo";
|
|
12
|
+
export * from "./ThemeBuilderDemo";
|
|
13
|
+
export * from "./CardDemo";
|
|
14
|
+
export * from "./CheckboxDemo";
|
|
15
|
+
export * from "./ColorsDemo";
|
|
16
|
+
export * from "./DialogDemo";
|
|
17
|
+
export * from "./FormsDemo";
|
|
18
|
+
export * from "./GroupDemo";
|
|
19
|
+
export * from "./HeadingsDemo";
|
|
20
|
+
export * from "./ImageDemo";
|
|
21
|
+
export * from "./InputsDemo";
|
|
22
|
+
export * from "./LabelDemo";
|
|
23
|
+
export * from "./LinearGradientDemo";
|
|
24
|
+
export * from "./ListItemDemo";
|
|
25
|
+
export * from "./LucideIconsDemo";
|
|
26
|
+
export * from "./PopoverDemo";
|
|
27
|
+
export * from "./ProgressDemo";
|
|
28
|
+
export * from "./RadioGroupDemo";
|
|
29
|
+
export * from "./ReplaceThemeDemo";
|
|
30
|
+
export * from "./ScrollViewDemo";
|
|
31
|
+
export * from "./SelectDemo";
|
|
32
|
+
export * from "./SeparatorDemo";
|
|
33
|
+
export * from "./ShapesDemo";
|
|
34
|
+
export * from "./SheetDemo";
|
|
35
|
+
export * from "./SliderDemo";
|
|
36
|
+
export * from "./SpinnerDemo";
|
|
37
|
+
export * from "./StacksDemo";
|
|
38
|
+
export * from "./SwitchDemo";
|
|
39
|
+
export * from "./TabsAdvancedDemo";
|
|
40
|
+
export * from "./TabsDemo";
|
|
41
|
+
export * from "./TextDemo";
|
|
42
|
+
export * from "./ThemeInverseDemo";
|
|
43
|
+
export * from "./ToastDemo";
|
|
44
|
+
export * from "./ToastDuplicateDemo";
|
|
45
|
+
export * from "./ToggleGroupDemo";
|
|
46
|
+
export * from "./TokensDemo";
|
|
47
|
+
export * from "./TooltipDemo";
|
|
48
|
+
export * from "./UpdateThemeDemo";
|
|
49
|
+
export * from "./useOnIntersecting";
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/index.tsx"],
|
|
4
|
+
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -2,25 +2,17 @@ import { useEffect, useState } from "react";
|
|
|
2
2
|
import { isWeb, useEvent } from "tamagui";
|
|
3
3
|
function useIsIntersecting(refs, { once, ...opts } = {}) {
|
|
4
4
|
const [values, setValues] = useState([]);
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
return next;
|
|
18
|
-
});
|
|
19
|
-
},
|
|
20
|
-
opts
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
return Array.isArray(refs) ? values : values[0];
|
|
5
|
+
return isWeb && useOnIntersecting(
|
|
6
|
+
refs,
|
|
7
|
+
(entries) => {
|
|
8
|
+
const intersecting = entries.some((x) => x?.isIntersecting);
|
|
9
|
+
once && !intersecting || setValues((prev) => {
|
|
10
|
+
const next = entries.map((e) => e?.isIntersecting ?? !1);
|
|
11
|
+
return prev.length === next.length && prev.every((e, i) => e === next[i]) ? prev : next;
|
|
12
|
+
});
|
|
13
|
+
},
|
|
14
|
+
opts
|
|
15
|
+
), Array.isArray(refs) ? values : values[0];
|
|
24
16
|
}
|
|
25
17
|
function useOnIntersecting(refsIn, incomingCbRaw, { threshold = 0, root, rootMargin } = {}, mountArgs = []) {
|
|
26
18
|
const onIntersectEvent = useEvent(incomingCbRaw);
|
|
@@ -28,28 +20,18 @@ function useOnIntersecting(refsIn, incomingCbRaw, { threshold = 0, root, rootMar
|
|
|
28
20
|
const refs = Array.isArray(refsIn) ? refsIn : [refsIn];
|
|
29
21
|
if (!refs.length)
|
|
30
22
|
return;
|
|
31
|
-
let dispose = null;
|
|
32
|
-
let currentEntries = [];
|
|
23
|
+
let dispose = null, currentEntries = [];
|
|
33
24
|
const options = {
|
|
34
25
|
threshold,
|
|
35
26
|
root,
|
|
36
27
|
rootMargin
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
currentEntries = refs.map((ref, index) => {
|
|
40
|
-
return entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null;
|
|
41
|
-
});
|
|
42
|
-
dispose?.();
|
|
43
|
-
dispose = onIntersectEvent(currentEntries) || null;
|
|
28
|
+
}, io = new IntersectionObserver((entries) => {
|
|
29
|
+
currentEntries = refs.map((ref, index) => entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null), dispose?.(), dispose = onIntersectEvent(currentEntries) || null;
|
|
44
30
|
}, options);
|
|
45
|
-
for (const ref of refs)
|
|
46
|
-
|
|
47
|
-
io.observe(ref.current);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
31
|
+
for (const ref of refs)
|
|
32
|
+
ref.current && io.observe(ref.current);
|
|
50
33
|
return () => {
|
|
51
|
-
dispose?.();
|
|
52
|
-
io.disconnect();
|
|
34
|
+
dispose?.(), io.disconnect();
|
|
53
35
|
};
|
|
54
36
|
}, [
|
|
55
37
|
onIntersectEvent,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useOnIntersecting.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAA2B,WAAW,gBAAgB;AACtD,SAAS,OAAO,gBAAgB;AAWzB,SAAS,kBACd,MACA,EAAE,MAAM,GAAG,KAAK,IAAmD,CAAC,GAC3B;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAoB,CAAC,CAAC;AAElD,
|
|
4
|
+
"mappings": "AAAA,SAA2B,WAAW,gBAAgB;AACtD,SAAS,OAAO,gBAAgB;AAWzB,SAAS,kBACd,MACA,EAAE,MAAM,GAAG,KAAK,IAAmD,CAAC,GAC3B;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAoB,CAAC,CAAC;AAElD,SAAI,SACF;AAAA,IACE;AAAA,IACA,CAAC,YAAY;AACX,YAAM,eAAe,QAAQ,KAAK,CAAC,MAAM,GAAG,cAAc;AAC1D,MAAI,QAAQ,CAAC,gBACb,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,QAAQ,IAAI,CAAC,MAAM,GAAG,kBAAkB,EAAK;AAC1D,eAAI,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC,CAAC,IAC5D,OAEF;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA;AAAA,EACF,GAGM,MAAM,QAAQ,IAAI,IAAI,SAAS,OAAO,CAAC;AACjD;AAEO,SAAS,kBACd,QACA,eACA,EAAE,YAAY,GAAG,MAAM,WAAW,IAA8B,CAAC,GACjE,YAAmB,CAAC,GACpB;AACA,QAAM,mBAAmB,SAAS,aAAa;AAE/C,YAAU,MAAM;AACd,UAAM,OAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,QAAI,CAAC,KAAK;AAAQ;AAElB,QAAI,UAA4B,MAC5B,iBAAuD,CAAC;AAC5D,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF,GACM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,uBAAiB,KAAK,IAAI,CAAC,KAAK,UAE5B,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,IAAI,OAAO,KAAK,eAAe,KAAK,KAAK,IAE7E,GACD,UAAU,GACV,UAAU,iBAAiB,cAAc,KAAK;AAAA,IAChD,GAAG,OAAO;AAEV,eAAW,OAAO;AAChB,MAAI,IAAI,WACN,GAAG,QAAQ,IAAI,OAAO;AAI1B,WAAO,MAAM;AACX,gBAAU,GACV,GAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,GAAG;AAAA,EACL,CAAC;AACH;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
import { isWeb, useEvent } from "tamagui";
|
|
3
|
+
function useIsIntersecting(refs, { once, ...opts } = {}) {
|
|
4
|
+
const [values, setValues] = useState([]);
|
|
5
|
+
return isWeb && useOnIntersecting(
|
|
6
|
+
refs,
|
|
7
|
+
(entries) => {
|
|
8
|
+
const intersecting = entries.some((x) => x?.isIntersecting);
|
|
9
|
+
once && !intersecting || setValues((prev) => {
|
|
10
|
+
const next = entries.map((e) => e?.isIntersecting ?? !1);
|
|
11
|
+
return prev.length === next.length && prev.every((e, i) => e === next[i]) ? prev : next;
|
|
12
|
+
});
|
|
13
|
+
},
|
|
14
|
+
opts
|
|
15
|
+
), Array.isArray(refs) ? values : values[0];
|
|
16
|
+
}
|
|
17
|
+
function useOnIntersecting(refsIn, incomingCbRaw, { threshold = 0, root, rootMargin } = {}, mountArgs = []) {
|
|
18
|
+
const onIntersectEvent = useEvent(incomingCbRaw);
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
const refs = Array.isArray(refsIn) ? refsIn : [refsIn];
|
|
21
|
+
if (!refs.length)
|
|
22
|
+
return;
|
|
23
|
+
let dispose = null, currentEntries = [];
|
|
24
|
+
const options = {
|
|
25
|
+
threshold,
|
|
26
|
+
root,
|
|
27
|
+
rootMargin
|
|
28
|
+
}, io = new IntersectionObserver((entries) => {
|
|
29
|
+
currentEntries = refs.map((ref, index) => entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null), dispose?.(), dispose = onIntersectEvent(currentEntries) || null;
|
|
30
|
+
}, options);
|
|
31
|
+
for (const ref of refs)
|
|
32
|
+
ref.current && io.observe(ref.current);
|
|
33
|
+
return () => {
|
|
34
|
+
dispose?.(), io.disconnect();
|
|
35
|
+
};
|
|
36
|
+
}, [
|
|
37
|
+
onIntersectEvent,
|
|
38
|
+
refsIn,
|
|
39
|
+
root,
|
|
40
|
+
rootMargin,
|
|
41
|
+
threshold,
|
|
42
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
43
|
+
...mountArgs
|
|
44
|
+
]);
|
|
45
|
+
}
|
|
46
|
+
export {
|
|
47
|
+
useIsIntersecting,
|
|
48
|
+
useOnIntersecting
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=useOnIntersecting.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/useOnIntersecting.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAA2B,WAAW,gBAAgB;AACtD,SAAS,OAAO,gBAAgB;AAWzB,SAAS,kBACd,MACA,EAAE,MAAM,GAAG,KAAK,IAAmD,CAAC,GAC3B;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAoB,CAAC,CAAC;AAElD,SAAI,SACF;AAAA,IACE;AAAA,IACA,CAAC,YAAY;AACX,YAAM,eAAe,QAAQ,KAAK,CAAC,MAAM,GAAG,cAAc;AAC1D,MAAI,QAAQ,CAAC,gBACb,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,QAAQ,IAAI,CAAC,MAAM,GAAG,kBAAkB,EAAK;AAC1D,eAAI,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC,CAAC,IAC5D,OAEF;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA;AAAA,EACF,GAGM,MAAM,QAAQ,IAAI,IAAI,SAAS,OAAO,CAAC;AACjD;AAEO,SAAS,kBACd,QACA,eACA,EAAE,YAAY,GAAG,MAAM,WAAW,IAA8B,CAAC,GACjE,YAAmB,CAAC,GACpB;AACA,QAAM,mBAAmB,SAAS,aAAa;AAE/C,YAAU,MAAM;AACd,UAAM,OAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,QAAI,CAAC,KAAK;AAAQ;AAElB,QAAI,UAA4B,MAC5B,iBAAuD,CAAC;AAC5D,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF,GACM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,uBAAiB,KAAK,IAAI,CAAC,KAAK,UAE5B,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,IAAI,OAAO,KAAK,eAAe,KAAK,KAAK,IAE7E,GACD,UAAU,GACV,UAAU,iBAAiB,cAAc,KAAK;AAAA,IAChD,GAAG,OAAO;AAEV,eAAW,OAAO;AAChB,MAAI,IAAI,WACN,GAAG,QAAQ,IAAI,OAAO;AAI1B,WAAO,MAAM;AACX,gBAAU,GACV,GAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,GAAG;AAAA,EACL,CAAC;AACH;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|