@tamagui/demos 1.13.3 → 1.13.4
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/AddThemeDemo.js +1 -59
- package/dist/cjs/AddThemeDemo.js.map +2 -2
- package/dist/cjs/AlertDialogDemo.js +1 -76
- package/dist/cjs/AlertDialogDemo.js.map +2 -2
- package/dist/cjs/AnimationsDemo.js +1 -113
- package/dist/cjs/AnimationsDemo.js.map +2 -2
- package/dist/cjs/AnimationsEnterDemo.js +1 -63
- package/dist/cjs/AnimationsEnterDemo.js.map +2 -2
- package/dist/cjs/AnimationsHoverDemo.js +1 -49
- package/dist/cjs/AnimationsHoverDemo.js.map +2 -2
- package/dist/cjs/AnimationsPresenceDemo.js +1 -96
- package/dist/cjs/AnimationsPresenceDemo.js.map +2 -2
- package/dist/cjs/AnimationsTimingDemo.js +1 -49
- package/dist/cjs/AnimationsTimingDemo.js.map +2 -2
- package/dist/cjs/AvatarDemo.js +1 -53
- package/dist/cjs/AvatarDemo.js.map +2 -2
- package/dist/cjs/ButtonDemo.js +1 -48
- package/dist/cjs/ButtonDemo.js.map +2 -2
- package/dist/cjs/CardDemo.js +1 -69
- package/dist/cjs/CardDemo.js.map +2 -2
- package/dist/cjs/CheckboxDemo.js +1 -44
- package/dist/cjs/CheckboxDemo.js.map +2 -2
- package/dist/cjs/ColorsDemo.js +1 -112
- package/dist/cjs/ColorsDemo.js.map +2 -2
- package/dist/cjs/DialogDemo.js +1 -85
- package/dist/cjs/DialogDemo.js.map +2 -2
- package/dist/cjs/FormsDemo.js +1 -59
- package/dist/cjs/FormsDemo.js.map +2 -2
- package/dist/cjs/GroupDemo.js +1 -48
- package/dist/cjs/GroupDemo.js.map +2 -2
- package/dist/cjs/HeadingsDemo.js +1 -39
- package/dist/cjs/HeadingsDemo.js.map +2 -2
- package/dist/cjs/ImageDemo.js +1 -32
- package/dist/cjs/ImageDemo.js.map +2 -2
- package/dist/cjs/InputsDemo.js +1 -43
- package/dist/cjs/InputsDemo.js.map +2 -2
- package/dist/cjs/LabelDemo.js +1 -41
- package/dist/cjs/LabelDemo.js.map +2 -2
- package/dist/cjs/LinearGradientDemo.js +1 -56
- package/dist/cjs/LinearGradientDemo.js.map +2 -2
- package/dist/cjs/ListItemDemo.js +1 -70
- package/dist/cjs/ListItemDemo.js.map +2 -2
- package/dist/cjs/LucideIconsDemo.js +1 -66
- package/dist/cjs/LucideIconsDemo.js.map +2 -2
- package/dist/cjs/PopoverDemo.js +1 -92
- package/dist/cjs/PopoverDemo.js.map +2 -2
- package/dist/cjs/ProgressDemo.js +1 -71
- package/dist/cjs/ProgressDemo.js.map +2 -2
- package/dist/cjs/RadioGroupDemo.js +1 -43
- package/dist/cjs/RadioGroupDemo.js.map +2 -2
- package/dist/cjs/ScrollViewDemo.js +1 -41
- package/dist/cjs/ScrollViewDemo.js.map +2 -2
- package/dist/cjs/SelectDemo.js +1 -103
- package/dist/cjs/SelectDemo.js.map +2 -2
- package/dist/cjs/SeparatorDemo.js +1 -43
- package/dist/cjs/SeparatorDemo.js.map +2 -2
- package/dist/cjs/ShapesDemo.js +1 -35
- package/dist/cjs/ShapesDemo.js.map +2 -2
- package/dist/cjs/SheetDemo.js +1 -103
- package/dist/cjs/SheetDemo.js.map +2 -2
- package/dist/cjs/SliderDemo.js +1 -42
- package/dist/cjs/SliderDemo.js.map +2 -2
- package/dist/cjs/SpinnerDemo.js +1 -35
- package/dist/cjs/SpinnerDemo.js.map +2 -2
- package/dist/cjs/StacksDemo.js +1 -81
- package/dist/cjs/StacksDemo.js.map +2 -2
- package/dist/cjs/SwitchDemo.js +1 -55
- package/dist/cjs/SwitchDemo.js.map +2 -2
- package/dist/cjs/TabsAdvancedDemo.js +1 -282
- package/dist/cjs/TabsAdvancedDemo.js.map +2 -2
- package/dist/cjs/TabsDemo.js +1 -146
- package/dist/cjs/TabsDemo.js.map +2 -2
- package/dist/cjs/TextDemo.js +1 -39
- package/dist/cjs/TextDemo.js.map +2 -2
- package/dist/cjs/ThemeInverseDemo.js +1 -43
- package/dist/cjs/ThemeInverseDemo.js.map +2 -2
- package/dist/cjs/ToastDemo.js +1 -128
- package/dist/cjs/ToastDemo.js.map +3 -3
- package/dist/cjs/ToastDuplicateDemo.js +1 -77
- package/dist/cjs/ToastDuplicateDemo.js.map +2 -2
- package/dist/cjs/ToggleGroupDemo.js +1 -72
- package/dist/cjs/ToggleGroupDemo.js.map +2 -2
- package/dist/cjs/TokensDemo.js +1 -110
- package/dist/cjs/TokensDemo.js.map +2 -2
- package/dist/cjs/TooltipDemo.js +1 -79
- package/dist/cjs/TooltipDemo.js.map +2 -2
- package/dist/cjs/UpdateThemeDemo.js +1 -79
- package/dist/cjs/UpdateThemeDemo.js.map +2 -2
- package/dist/cjs/conf.js +1 -28
- package/dist/cjs/conf.js.map +2 -2
- package/dist/cjs/index.js +1 -159
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/tamagui.config.js +1 -27
- package/dist/cjs/tamagui.config.js.map +2 -2
- package/dist/cjs/useOnIntersecting.js +1 -92
- package/dist/cjs/useOnIntersecting.js.map +2 -2
- package/dist/esm/AddThemeDemo.js +1 -35
- package/dist/esm/AddThemeDemo.js.map +2 -2
- package/dist/esm/AddThemeDemo.mjs +1 -35
- package/dist/esm/AddThemeDemo.mjs.map +2 -2
- package/dist/esm/AlertDialogDemo.js +1 -52
- package/dist/esm/AlertDialogDemo.js.map +2 -2
- package/dist/esm/AlertDialogDemo.mjs +1 -52
- package/dist/esm/AlertDialogDemo.mjs.map +2 -2
- package/dist/esm/AnimationsDemo.js +1 -88
- package/dist/esm/AnimationsDemo.js.map +2 -2
- package/dist/esm/AnimationsDemo.mjs +1 -88
- package/dist/esm/AnimationsDemo.mjs.map +2 -2
- package/dist/esm/AnimationsEnterDemo.js +1 -39
- package/dist/esm/AnimationsEnterDemo.js.map +2 -2
- package/dist/esm/AnimationsEnterDemo.mjs +1 -39
- package/dist/esm/AnimationsEnterDemo.mjs.map +2 -2
- package/dist/esm/AnimationsHoverDemo.js +1 -25
- package/dist/esm/AnimationsHoverDemo.js.map +2 -2
- package/dist/esm/AnimationsHoverDemo.mjs +1 -25
- package/dist/esm/AnimationsHoverDemo.mjs.map +2 -2
- package/dist/esm/AnimationsPresenceDemo.js +1 -61
- package/dist/esm/AnimationsPresenceDemo.js.map +2 -2
- package/dist/esm/AnimationsPresenceDemo.mjs +1 -61
- package/dist/esm/AnimationsPresenceDemo.mjs.map +2 -2
- package/dist/esm/AnimationsTimingDemo.js +1 -25
- package/dist/esm/AnimationsTimingDemo.js.map +2 -2
- package/dist/esm/AnimationsTimingDemo.mjs +1 -25
- package/dist/esm/AnimationsTimingDemo.mjs.map +2 -2
- package/dist/esm/AvatarDemo.js +1 -29
- package/dist/esm/AvatarDemo.js.map +2 -2
- package/dist/esm/AvatarDemo.mjs +1 -29
- package/dist/esm/AvatarDemo.mjs.map +2 -2
- package/dist/esm/ButtonDemo.js +1 -24
- package/dist/esm/ButtonDemo.js.map +2 -2
- package/dist/esm/ButtonDemo.mjs +1 -24
- package/dist/esm/ButtonDemo.mjs.map +2 -2
- package/dist/esm/CardDemo.js +1 -45
- package/dist/esm/CardDemo.js.map +2 -2
- package/dist/esm/CardDemo.mjs +1 -45
- package/dist/esm/CardDemo.mjs.map +2 -2
- package/dist/esm/CheckboxDemo.js +1 -20
- package/dist/esm/CheckboxDemo.js.map +2 -2
- package/dist/esm/CheckboxDemo.mjs +1 -20
- package/dist/esm/CheckboxDemo.mjs.map +2 -2
- package/dist/esm/ColorsDemo.js +1 -97
- package/dist/esm/ColorsDemo.js.map +2 -2
- package/dist/esm/ColorsDemo.mjs +1 -97
- package/dist/esm/ColorsDemo.mjs.map +2 -2
- package/dist/esm/DialogDemo.js +1 -73
- package/dist/esm/DialogDemo.js.map +2 -2
- package/dist/esm/DialogDemo.mjs +1 -73
- package/dist/esm/DialogDemo.mjs.map +2 -2
- package/dist/esm/FormsDemo.js +1 -35
- package/dist/esm/FormsDemo.js.map +2 -2
- package/dist/esm/FormsDemo.mjs +1 -35
- package/dist/esm/FormsDemo.mjs.map +2 -2
- package/dist/esm/GroupDemo.js +1 -24
- package/dist/esm/GroupDemo.js.map +2 -2
- package/dist/esm/GroupDemo.mjs +1 -24
- package/dist/esm/GroupDemo.mjs.map +2 -2
- package/dist/esm/HeadingsDemo.js +1 -15
- package/dist/esm/HeadingsDemo.js.map +2 -2
- package/dist/esm/HeadingsDemo.mjs +1 -15
- package/dist/esm/HeadingsDemo.mjs.map +2 -2
- package/dist/esm/ImageDemo.js +1 -8
- package/dist/esm/ImageDemo.js.map +2 -2
- package/dist/esm/ImageDemo.mjs +1 -8
- package/dist/esm/ImageDemo.mjs.map +2 -2
- package/dist/esm/InputsDemo.js +1 -19
- package/dist/esm/InputsDemo.js.map +2 -2
- package/dist/esm/InputsDemo.mjs +1 -19
- package/dist/esm/InputsDemo.mjs.map +2 -2
- package/dist/esm/LabelDemo.js +1 -17
- package/dist/esm/LabelDemo.js.map +2 -2
- package/dist/esm/LabelDemo.mjs +1 -17
- package/dist/esm/LabelDemo.mjs.map +2 -2
- package/dist/esm/LinearGradientDemo.js +1 -32
- package/dist/esm/LinearGradientDemo.js.map +2 -2
- package/dist/esm/LinearGradientDemo.mjs +1 -32
- package/dist/esm/LinearGradientDemo.mjs.map +2 -2
- package/dist/esm/ListItemDemo.js +1 -46
- package/dist/esm/ListItemDemo.js.map +2 -2
- package/dist/esm/ListItemDemo.mjs +1 -46
- package/dist/esm/ListItemDemo.mjs.map +2 -2
- package/dist/esm/LucideIconsDemo.js +1 -32
- package/dist/esm/LucideIconsDemo.js.map +2 -2
- package/dist/esm/LucideIconsDemo.mjs +1 -32
- package/dist/esm/LucideIconsDemo.mjs.map +2 -2
- package/dist/esm/PopoverDemo.js +1 -75
- package/dist/esm/PopoverDemo.js.map +2 -2
- package/dist/esm/PopoverDemo.mjs +1 -75
- package/dist/esm/PopoverDemo.mjs.map +2 -2
- package/dist/esm/ProgressDemo.js +1 -47
- package/dist/esm/ProgressDemo.js.map +2 -2
- package/dist/esm/ProgressDemo.mjs +1 -47
- package/dist/esm/ProgressDemo.mjs.map +2 -2
- package/dist/esm/RadioGroupDemo.js +1 -19
- package/dist/esm/RadioGroupDemo.js.map +2 -2
- package/dist/esm/RadioGroupDemo.mjs +1 -19
- package/dist/esm/RadioGroupDemo.mjs.map +2 -2
- package/dist/esm/ScrollViewDemo.js +1 -17
- package/dist/esm/ScrollViewDemo.js.map +2 -2
- package/dist/esm/ScrollViewDemo.mjs +1 -17
- package/dist/esm/ScrollViewDemo.mjs.map +2 -2
- package/dist/esm/SelectDemo.js +1 -79
- package/dist/esm/SelectDemo.js.map +2 -2
- package/dist/esm/SelectDemo.mjs +1 -79
- package/dist/esm/SelectDemo.mjs.map +2 -2
- package/dist/esm/SeparatorDemo.js +1 -19
- package/dist/esm/SeparatorDemo.js.map +2 -2
- package/dist/esm/SeparatorDemo.mjs +1 -19
- package/dist/esm/SeparatorDemo.mjs.map +2 -2
- package/dist/esm/ShapesDemo.js +1 -11
- package/dist/esm/ShapesDemo.js.map +2 -2
- package/dist/esm/ShapesDemo.mjs +1 -11
- package/dist/esm/ShapesDemo.mjs.map +2 -2
- package/dist/esm/SheetDemo.js +1 -79
- package/dist/esm/SheetDemo.js.map +2 -2
- package/dist/esm/SheetDemo.mjs +1 -79
- package/dist/esm/SheetDemo.mjs.map +2 -2
- package/dist/esm/SliderDemo.js +1 -18
- package/dist/esm/SliderDemo.js.map +2 -2
- package/dist/esm/SliderDemo.mjs +1 -18
- package/dist/esm/SliderDemo.mjs.map +2 -2
- package/dist/esm/SpinnerDemo.js +1 -11
- package/dist/esm/SpinnerDemo.js.map +2 -2
- package/dist/esm/SpinnerDemo.mjs +1 -11
- package/dist/esm/SpinnerDemo.mjs.map +2 -2
- package/dist/esm/StacksDemo.js +1 -57
- package/dist/esm/StacksDemo.js.map +2 -2
- package/dist/esm/StacksDemo.mjs +1 -57
- package/dist/esm/StacksDemo.mjs.map +2 -2
- package/dist/esm/SwitchDemo.js +1 -31
- package/dist/esm/SwitchDemo.js.map +2 -2
- package/dist/esm/SwitchDemo.mjs +1 -31
- package/dist/esm/SwitchDemo.mjs.map +2 -2
- package/dist/esm/TabsAdvancedDemo.js +1 -268
- package/dist/esm/TabsAdvancedDemo.js.map +2 -2
- package/dist/esm/TabsAdvancedDemo.mjs +1 -268
- package/dist/esm/TabsAdvancedDemo.mjs.map +2 -2
- package/dist/esm/TabsDemo.js +1 -130
- package/dist/esm/TabsDemo.js.map +2 -2
- package/dist/esm/TabsDemo.mjs +1 -130
- package/dist/esm/TabsDemo.mjs.map +2 -2
- package/dist/esm/TextDemo.js +1 -15
- package/dist/esm/TextDemo.js.map +2 -2
- package/dist/esm/TextDemo.mjs +1 -15
- package/dist/esm/TextDemo.mjs.map +2 -2
- package/dist/esm/ThemeInverseDemo.js +1 -19
- package/dist/esm/ThemeInverseDemo.js.map +2 -2
- package/dist/esm/ThemeInverseDemo.mjs +1 -19
- package/dist/esm/ThemeInverseDemo.mjs.map +2 -2
- package/dist/esm/ToastDemo.js +1 -94
- package/dist/esm/ToastDemo.js.map +3 -3
- package/dist/esm/ToastDemo.mjs +1 -94
- package/dist/esm/ToastDemo.mjs.map +3 -3
- package/dist/esm/ToastDuplicateDemo.js +1 -43
- package/dist/esm/ToastDuplicateDemo.js.map +2 -2
- package/dist/esm/ToastDuplicateDemo.mjs +1 -43
- package/dist/esm/ToastDuplicateDemo.mjs.map +2 -2
- package/dist/esm/ToggleGroupDemo.js +1 -48
- package/dist/esm/ToggleGroupDemo.js.map +2 -2
- package/dist/esm/ToggleGroupDemo.mjs +1 -48
- package/dist/esm/ToggleGroupDemo.mjs.map +2 -2
- package/dist/esm/TokensDemo.js +1 -86
- package/dist/esm/TokensDemo.js.map +2 -2
- package/dist/esm/TokensDemo.mjs +1 -86
- package/dist/esm/TokensDemo.mjs.map +2 -2
- package/dist/esm/TooltipDemo.js +1 -68
- package/dist/esm/TooltipDemo.js.map +2 -2
- package/dist/esm/TooltipDemo.mjs +1 -68
- package/dist/esm/TooltipDemo.mjs.map +2 -2
- package/dist/esm/UpdateThemeDemo.js +1 -53
- package/dist/esm/UpdateThemeDemo.js.map +2 -2
- package/dist/esm/UpdateThemeDemo.mjs +1 -53
- package/dist/esm/UpdateThemeDemo.mjs.map +2 -2
- package/dist/esm/conf.js +1 -4
- package/dist/esm/conf.js.map +1 -1
- package/dist/esm/conf.mjs +1 -4
- package/dist/esm/conf.mjs.map +1 -1
- package/dist/esm/index.js +1 -91
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/index.mjs +1 -91
- package/dist/esm/index.mjs.map +2 -2
- package/dist/esm/tamagui.config.js +1 -5
- package/dist/esm/tamagui.config.js.map +2 -2
- package/dist/esm/tamagui.config.mjs +1 -5
- package/dist/esm/tamagui.config.mjs.map +2 -2
- package/dist/esm/useOnIntersecting.js +1 -67
- package/dist/esm/useOnIntersecting.js.map +2 -2
- package/dist/esm/useOnIntersecting.mjs +1 -67
- package/dist/esm/useOnIntersecting.mjs.map +2 -2
- package/dist/jsx/AddThemeDemo.js +1 -30
- package/dist/jsx/AddThemeDemo.js.map +2 -2
- package/dist/jsx/AddThemeDemo.mjs +1 -30
- package/dist/jsx/AddThemeDemo.mjs.map +2 -2
- package/dist/jsx/AlertDialogDemo.js +1 -44
- package/dist/jsx/AlertDialogDemo.js.map +2 -2
- package/dist/jsx/AlertDialogDemo.mjs +1 -44
- package/dist/jsx/AlertDialogDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsDemo.js +1 -80
- package/dist/jsx/AnimationsDemo.js.map +2 -2
- package/dist/jsx/AnimationsDemo.mjs +1 -80
- package/dist/jsx/AnimationsDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsEnterDemo.js +1 -34
- package/dist/jsx/AnimationsEnterDemo.js.map +2 -2
- package/dist/jsx/AnimationsEnterDemo.mjs +1 -34
- package/dist/jsx/AnimationsEnterDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsHoverDemo.js +1 -20
- package/dist/jsx/AnimationsHoverDemo.js.map +2 -2
- package/dist/jsx/AnimationsHoverDemo.mjs +1 -20
- package/dist/jsx/AnimationsHoverDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsPresenceDemo.js +1 -54
- package/dist/jsx/AnimationsPresenceDemo.js.map +2 -2
- package/dist/jsx/AnimationsPresenceDemo.mjs +1 -54
- package/dist/jsx/AnimationsPresenceDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsTimingDemo.js +1 -20
- package/dist/jsx/AnimationsTimingDemo.js.map +2 -2
- package/dist/jsx/AnimationsTimingDemo.mjs +1 -20
- package/dist/jsx/AnimationsTimingDemo.mjs.map +2 -2
- package/dist/jsx/AvatarDemo.js +1 -22
- package/dist/jsx/AvatarDemo.js.map +2 -2
- package/dist/jsx/AvatarDemo.mjs +1 -22
- package/dist/jsx/AvatarDemo.mjs.map +2 -2
- package/dist/jsx/ButtonDemo.js +1 -23
- package/dist/jsx/ButtonDemo.js.map +2 -2
- package/dist/jsx/ButtonDemo.mjs +1 -23
- package/dist/jsx/ButtonDemo.mjs.map +2 -2
- package/dist/jsx/CardDemo.js +1 -38
- package/dist/jsx/CardDemo.js.map +2 -2
- package/dist/jsx/CardDemo.mjs +1 -38
- package/dist/jsx/CardDemo.mjs.map +2 -2
- package/dist/jsx/CheckboxDemo.js +1 -19
- package/dist/jsx/CheckboxDemo.js.map +2 -2
- package/dist/jsx/CheckboxDemo.mjs +1 -19
- package/dist/jsx/CheckboxDemo.mjs.map +2 -2
- package/dist/jsx/ColorsDemo.js +1 -85
- package/dist/jsx/ColorsDemo.js.map +2 -2
- package/dist/jsx/ColorsDemo.mjs +1 -85
- package/dist/jsx/ColorsDemo.mjs.map +2 -2
- package/dist/jsx/DialogDemo.js +1 -65
- package/dist/jsx/DialogDemo.js.map +2 -2
- package/dist/jsx/DialogDemo.mjs +1 -65
- package/dist/jsx/DialogDemo.mjs.map +2 -2
- package/dist/jsx/FormsDemo.js +1 -30
- package/dist/jsx/FormsDemo.js.map +2 -2
- package/dist/jsx/FormsDemo.mjs +1 -30
- package/dist/jsx/FormsDemo.mjs.map +2 -2
- package/dist/jsx/GroupDemo.js +1 -23
- package/dist/jsx/GroupDemo.js.map +2 -2
- package/dist/jsx/GroupDemo.mjs +1 -23
- package/dist/jsx/GroupDemo.mjs.map +2 -2
- package/dist/jsx/HeadingsDemo.js +1 -14
- package/dist/jsx/HeadingsDemo.js.map +2 -2
- package/dist/jsx/HeadingsDemo.mjs +1 -14
- package/dist/jsx/HeadingsDemo.mjs.map +2 -2
- package/dist/jsx/ImageDemo.js +1 -7
- package/dist/jsx/ImageDemo.js.map +2 -2
- package/dist/jsx/ImageDemo.mjs +1 -7
- package/dist/jsx/ImageDemo.mjs.map +2 -2
- package/dist/jsx/InputsDemo.js +1 -18
- package/dist/jsx/InputsDemo.js.map +2 -2
- package/dist/jsx/InputsDemo.mjs +1 -18
- package/dist/jsx/InputsDemo.mjs.map +2 -2
- package/dist/jsx/LabelDemo.js +1 -16
- package/dist/jsx/LabelDemo.js.map +2 -2
- package/dist/jsx/LabelDemo.mjs +1 -16
- package/dist/jsx/LabelDemo.mjs.map +2 -2
- package/dist/jsx/LinearGradientDemo.js +1 -25
- package/dist/jsx/LinearGradientDemo.js.map +2 -2
- package/dist/jsx/LinearGradientDemo.mjs +1 -25
- package/dist/jsx/LinearGradientDemo.mjs.map +2 -2
- package/dist/jsx/ListItemDemo.js +1 -39
- package/dist/jsx/ListItemDemo.js.map +2 -2
- package/dist/jsx/ListItemDemo.mjs +1 -39
- package/dist/jsx/ListItemDemo.mjs.map +2 -2
- package/dist/jsx/LucideIconsDemo.js +1 -31
- package/dist/jsx/LucideIconsDemo.js.map +2 -2
- package/dist/jsx/LucideIconsDemo.mjs +1 -31
- package/dist/jsx/LucideIconsDemo.mjs.map +2 -2
- package/dist/jsx/PopoverDemo.js +1 -66
- package/dist/jsx/PopoverDemo.js.map +2 -2
- package/dist/jsx/PopoverDemo.mjs +1 -66
- package/dist/jsx/PopoverDemo.mjs.map +2 -2
- package/dist/jsx/ProgressDemo.js +1 -42
- package/dist/jsx/ProgressDemo.js.map +2 -2
- package/dist/jsx/ProgressDemo.mjs +1 -42
- package/dist/jsx/ProgressDemo.mjs.map +2 -2
- package/dist/jsx/RadioGroupDemo.js +1 -18
- package/dist/jsx/RadioGroupDemo.js.map +2 -2
- package/dist/jsx/RadioGroupDemo.mjs +1 -18
- package/dist/jsx/RadioGroupDemo.mjs.map +2 -2
- package/dist/jsx/ScrollViewDemo.js +1 -16
- package/dist/jsx/ScrollViewDemo.js.map +2 -2
- package/dist/jsx/ScrollViewDemo.mjs +1 -16
- package/dist/jsx/ScrollViewDemo.mjs.map +2 -2
- package/dist/jsx/SelectDemo.js +1 -72
- package/dist/jsx/SelectDemo.js.map +2 -2
- package/dist/jsx/SelectDemo.mjs +1 -72
- package/dist/jsx/SelectDemo.mjs.map +2 -2
- package/dist/jsx/SeparatorDemo.js +1 -18
- package/dist/jsx/SeparatorDemo.js.map +2 -2
- package/dist/jsx/SeparatorDemo.mjs +1 -18
- package/dist/jsx/SeparatorDemo.mjs.map +2 -2
- package/dist/jsx/ShapesDemo.js +1 -10
- package/dist/jsx/ShapesDemo.js.map +2 -2
- package/dist/jsx/ShapesDemo.mjs +1 -10
- package/dist/jsx/ShapesDemo.mjs.map +2 -2
- package/dist/jsx/SheetDemo.js +1 -65
- package/dist/jsx/SheetDemo.js.map +2 -2
- package/dist/jsx/SheetDemo.mjs +1 -65
- package/dist/jsx/SheetDemo.mjs.map +2 -2
- package/dist/jsx/SliderDemo.js +1 -17
- package/dist/jsx/SliderDemo.js.map +2 -2
- package/dist/jsx/SliderDemo.mjs +1 -17
- package/dist/jsx/SliderDemo.mjs.map +2 -2
- package/dist/jsx/SpinnerDemo.js +1 -10
- package/dist/jsx/SpinnerDemo.js.map +2 -2
- package/dist/jsx/SpinnerDemo.mjs +1 -10
- package/dist/jsx/SpinnerDemo.mjs.map +2 -2
- package/dist/jsx/StacksDemo.js +1 -45
- package/dist/jsx/StacksDemo.js.map +2 -2
- package/dist/jsx/StacksDemo.mjs +1 -45
- package/dist/jsx/StacksDemo.mjs.map +2 -2
- package/dist/jsx/SwitchDemo.js +1 -26
- package/dist/jsx/SwitchDemo.js.map +2 -2
- package/dist/jsx/SwitchDemo.mjs +1 -26
- package/dist/jsx/SwitchDemo.mjs.map +2 -2
- package/dist/jsx/TabsAdvancedDemo.js +1 -219
- package/dist/jsx/TabsAdvancedDemo.js.map +2 -2
- package/dist/jsx/TabsAdvancedDemo.mjs +1 -219
- package/dist/jsx/TabsAdvancedDemo.mjs.map +2 -2
- package/dist/jsx/TabsDemo.js +1 -105
- package/dist/jsx/TabsDemo.js.map +2 -2
- package/dist/jsx/TabsDemo.mjs +1 -105
- package/dist/jsx/TabsDemo.mjs.map +2 -2
- package/dist/jsx/TextDemo.js +1 -14
- package/dist/jsx/TextDemo.js.map +2 -2
- package/dist/jsx/TextDemo.mjs +1 -14
- package/dist/jsx/TextDemo.mjs.map +2 -2
- package/dist/jsx/ThemeInverseDemo.js +1 -18
- package/dist/jsx/ThemeInverseDemo.js.map +2 -2
- package/dist/jsx/ThemeInverseDemo.mjs +1 -18
- package/dist/jsx/ThemeInverseDemo.mjs.map +2 -2
- package/dist/jsx/ToastDemo.js +1 -74
- package/dist/jsx/ToastDemo.js.map +3 -3
- package/dist/jsx/ToastDemo.mjs +1 -74
- package/dist/jsx/ToastDemo.mjs.map +3 -3
- package/dist/jsx/ToastDuplicateDemo.js +1 -34
- package/dist/jsx/ToastDuplicateDemo.js.map +2 -2
- package/dist/jsx/ToastDuplicateDemo.mjs +1 -34
- package/dist/jsx/ToastDuplicateDemo.mjs.map +2 -2
- package/dist/jsx/ToggleGroupDemo.js +1 -39
- package/dist/jsx/ToggleGroupDemo.js.map +2 -2
- package/dist/jsx/ToggleGroupDemo.mjs +1 -39
- package/dist/jsx/ToggleGroupDemo.mjs.map +2 -2
- package/dist/jsx/TokensDemo.js +1 -77
- package/dist/jsx/TokensDemo.js.map +2 -2
- package/dist/jsx/TokensDemo.mjs +1 -77
- package/dist/jsx/TokensDemo.mjs.map +2 -2
- package/dist/jsx/TooltipDemo.js +1 -63
- package/dist/jsx/TooltipDemo.js.map +2 -2
- package/dist/jsx/TooltipDemo.mjs +1 -63
- package/dist/jsx/TooltipDemo.mjs.map +2 -2
- package/dist/jsx/UpdateThemeDemo.js +1 -48
- package/dist/jsx/UpdateThemeDemo.js.map +2 -2
- package/dist/jsx/UpdateThemeDemo.mjs +1 -48
- package/dist/jsx/UpdateThemeDemo.mjs.map +2 -2
- package/dist/jsx/conf.js +1 -4
- package/dist/jsx/conf.js.map +1 -1
- package/dist/jsx/conf.mjs +1 -4
- package/dist/jsx/conf.mjs.map +1 -1
- package/dist/jsx/index.js +1 -91
- package/dist/jsx/index.js.map +2 -2
- package/dist/jsx/index.mjs +1 -91
- package/dist/jsx/index.mjs.map +2 -2
- package/dist/jsx/tamagui.config.js +1 -5
- package/dist/jsx/tamagui.config.js.map +2 -2
- package/dist/jsx/tamagui.config.mjs +1 -5
- package/dist/jsx/tamagui.config.mjs.map +2 -2
- package/dist/jsx/useOnIntersecting.js +1 -67
- package/dist/jsx/useOnIntersecting.js.map +2 -2
- package/dist/jsx/useOnIntersecting.mjs +1 -67
- package/dist/jsx/useOnIntersecting.mjs.map +2 -2
- package/package.json +18 -18
- package/src/ToastDemo.tsx +4 -4
|
@@ -1,45 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
function AlertDialogDemo() {
|
|
3
|
-
return <AlertDialog native>
|
|
4
|
-
<AlertDialog.Trigger asChild><Button>Show Alert</Button></AlertDialog.Trigger>
|
|
5
|
-
<AlertDialog.Portal>
|
|
6
|
-
<AlertDialog.Overlay
|
|
7
|
-
key="overlay"
|
|
8
|
-
animation="quick"
|
|
9
|
-
opacity={0.5}
|
|
10
|
-
enterStyle={{ opacity: 0 }}
|
|
11
|
-
exitStyle={{ opacity: 0 }}
|
|
12
|
-
/>
|
|
13
|
-
<AlertDialog.Content
|
|
14
|
-
bordered
|
|
15
|
-
elevate
|
|
16
|
-
key="content"
|
|
17
|
-
animation={[
|
|
18
|
-
"quick",
|
|
19
|
-
{
|
|
20
|
-
opacity: {
|
|
21
|
-
overshootClamping: true
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
]}
|
|
25
|
-
enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
|
|
26
|
-
exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
|
|
27
|
-
x={0}
|
|
28
|
-
scale={1}
|
|
29
|
-
opacity={1}
|
|
30
|
-
y={0}
|
|
31
|
-
><YStack space>
|
|
32
|
-
<AlertDialog.Title>Accept</AlertDialog.Title>
|
|
33
|
-
<AlertDialog.Description>By pressing yes, you accept our terms and conditions.</AlertDialog.Description>
|
|
34
|
-
<XStack space="$3" justifyContent="flex-end">
|
|
35
|
-
<AlertDialog.Cancel asChild><Button>Cancel</Button></AlertDialog.Cancel>
|
|
36
|
-
<AlertDialog.Action asChild><Button theme="active">Accept</Button></AlertDialog.Action>
|
|
37
|
-
</XStack>
|
|
38
|
-
</YStack></AlertDialog.Content>
|
|
39
|
-
</AlertDialog.Portal>
|
|
40
|
-
</AlertDialog>;
|
|
41
|
-
}
|
|
42
|
-
export {
|
|
43
|
-
AlertDialogDemo
|
|
44
|
-
};
|
|
1
|
+
import{AlertDialog as A,Button as D,XStack as C,YStack as S}from"tamagui";function k(){return<A native><A.Trigger asChild><D>Show Alert</D></A.Trigger><A.Portal><A.Overlay key="overlay"animation="quick"opacity={.5}enterStyle={{opacity:0}}exitStyle={{opacity:0}}/><A.Content bordered elevate key="content"animation={["quick",{opacity:{overshootClamping:!0}}]}enterStyle={{x:0,y:-20,opacity:0,scale:.9}}exitStyle={{x:0,y:10,opacity:0,scale:.95}}x={0}scale={1}opacity={1}y={0}><S space><A.Title>Accept</A.Title><A.Description>By pressing yes, you accept our terms and conditions.</A.Description><C space="$3"justifyContent="flex-end"><A.Cancel asChild><D>Cancel</D></A.Cancel><A.Action asChild><D theme="active">Accept</D></A.Action></C></S></A.Content></A.Portal></A>}export{k as AlertDialogDemo};
|
|
45
2
|
//# sourceMappingURL=AlertDialogDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AlertDialogDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n return (\n <AlertDialog native>\n <AlertDialog.Trigger asChild>\n <Button>Show Alert</Button>\n </AlertDialog.Trigger>\n\n <AlertDialog.Portal>\n <AlertDialog.Overlay\n key=\"overlay\"\n animation=\"quick\"\n opacity={0.5}\n enterStyle={{opacity:0 }}\n exitStyle={{opacity:0 }}\n />\n <AlertDialog.Content\n bordered\n elevate\n key=\"content\"\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n x={0}\n scale={1}\n opacity={1}\n y={0}\n >\n <YStack space>\n <AlertDialog.Title>Accept</AlertDialog.Title>\n <AlertDialog.Description>\n By pressing yes, you accept our terms and conditions.\n </AlertDialog.Description>\n\n <XStack space=\"$3\" justifyContent=\"flex-end\">\n <AlertDialog.Cancel asChild>\n <Button>Cancel</Button>\n </AlertDialog.Cancel>\n <AlertDialog.Action asChild>\n <Button theme=\"active\">Accept</Button>\n </AlertDialog.Action>\n </XStack>\n </YStack>\n </AlertDialog.Content>\n </AlertDialog.Portal>\n </AlertDialog>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,eAAAA,EAAa,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAE7C,SAASC,GAAkB,CAChC,MACE,CAACJ,EAAY,OACX,CAACA,EAAY,QAAQ,QACnB,CAACC,EAAO,UAAU,EAAjBA,EACH,EAFCD,EAAY,QAIb,CAACA,EAAY,OACX,CAACA,EAAY,QACX,IAAI,SACJ,UAAU,OACV,SAAS,GACT,YAAY,CAAC,QAAQ,CAAE,EACvB,WAAW,CAAC,QAAQ,CAAE,EACxB,EACA,CAACA,EAAY,QACX,SACA,QACA,IAAI,SACJ,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,GAAG,EACH,OAAO,EACP,SAAS,EACT,GAAG,GAEH,CAACG,EAAO,MACN,CAACH,EAAY,MAAM,MAAM,EAAxBA,EAAY,MACb,CAACA,EAAY,YAAY,qDAEzB,EAFCA,EAAY,YAIb,CAACE,EAAO,MAAM,IAAK,eAAe,WAChC,CAACF,EAAY,OAAO,QAClB,CAACC,EAAO,MAAM,EAAbA,EACH,EAFCD,EAAY,OAGb,CAACA,EAAY,OAAO,QAClB,CAACC,EAAO,MAAM,SAAS,MAAM,EAA5BA,EACH,EAFCD,EAAY,OAGf,EAPCE,EAQH,EAdCC,EAeH,EAlCCH,EAAY,QAmCf,EA3CCA,EAAY,OA4Cf,EAjDCA,EAmDL",
|
|
6
|
+
"names": ["AlertDialog", "Button", "XStack", "YStack", "AlertDialogDemo"]
|
|
7
7
|
}
|
|
@@ -1,45 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
function AlertDialogDemo() {
|
|
3
|
-
return <AlertDialog native>
|
|
4
|
-
<AlertDialog.Trigger asChild><Button>Show Alert</Button></AlertDialog.Trigger>
|
|
5
|
-
<AlertDialog.Portal>
|
|
6
|
-
<AlertDialog.Overlay
|
|
7
|
-
key="overlay"
|
|
8
|
-
animation="quick"
|
|
9
|
-
opacity={0.5}
|
|
10
|
-
enterStyle={{ opacity: 0 }}
|
|
11
|
-
exitStyle={{ opacity: 0 }}
|
|
12
|
-
/>
|
|
13
|
-
<AlertDialog.Content
|
|
14
|
-
bordered
|
|
15
|
-
elevate
|
|
16
|
-
key="content"
|
|
17
|
-
animation={[
|
|
18
|
-
"quick",
|
|
19
|
-
{
|
|
20
|
-
opacity: {
|
|
21
|
-
overshootClamping: true
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
]}
|
|
25
|
-
enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
|
|
26
|
-
exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
|
|
27
|
-
x={0}
|
|
28
|
-
scale={1}
|
|
29
|
-
opacity={1}
|
|
30
|
-
y={0}
|
|
31
|
-
><YStack space>
|
|
32
|
-
<AlertDialog.Title>Accept</AlertDialog.Title>
|
|
33
|
-
<AlertDialog.Description>By pressing yes, you accept our terms and conditions.</AlertDialog.Description>
|
|
34
|
-
<XStack space="$3" justifyContent="flex-end">
|
|
35
|
-
<AlertDialog.Cancel asChild><Button>Cancel</Button></AlertDialog.Cancel>
|
|
36
|
-
<AlertDialog.Action asChild><Button theme="active">Accept</Button></AlertDialog.Action>
|
|
37
|
-
</XStack>
|
|
38
|
-
</YStack></AlertDialog.Content>
|
|
39
|
-
</AlertDialog.Portal>
|
|
40
|
-
</AlertDialog>;
|
|
41
|
-
}
|
|
42
|
-
export {
|
|
43
|
-
AlertDialogDemo
|
|
44
|
-
};
|
|
1
|
+
import{AlertDialog as A,Button as D,XStack as C,YStack as S}from"tamagui";function k(){return<A native><A.Trigger asChild><D>Show Alert</D></A.Trigger><A.Portal><A.Overlay key="overlay"animation="quick"opacity={.5}enterStyle={{opacity:0}}exitStyle={{opacity:0}}/><A.Content bordered elevate key="content"animation={["quick",{opacity:{overshootClamping:!0}}]}enterStyle={{x:0,y:-20,opacity:0,scale:.9}}exitStyle={{x:0,y:10,opacity:0,scale:.95}}x={0}scale={1}opacity={1}y={0}><S space><A.Title>Accept</A.Title><A.Description>By pressing yes, you accept our terms and conditions.</A.Description><C space="$3"justifyContent="flex-end"><A.Cancel asChild><D>Cancel</D></A.Cancel><A.Action asChild><D theme="active">Accept</D></A.Action></C></S></A.Content></A.Portal></A>}export{k as AlertDialogDemo};
|
|
45
2
|
//# sourceMappingURL=AlertDialogDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AlertDialogDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n return (\n <AlertDialog native>\n <AlertDialog.Trigger asChild>\n <Button>Show Alert</Button>\n </AlertDialog.Trigger>\n\n <AlertDialog.Portal>\n <AlertDialog.Overlay\n key=\"overlay\"\n animation=\"quick\"\n opacity={0.5}\n enterStyle={{opacity:0 }}\n exitStyle={{opacity:0 }}\n />\n <AlertDialog.Content\n bordered\n elevate\n key=\"content\"\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n x={0}\n scale={1}\n opacity={1}\n y={0}\n >\n <YStack space>\n <AlertDialog.Title>Accept</AlertDialog.Title>\n <AlertDialog.Description>\n By pressing yes, you accept our terms and conditions.\n </AlertDialog.Description>\n\n <XStack space=\"$3\" justifyContent=\"flex-end\">\n <AlertDialog.Cancel asChild>\n <Button>Cancel</Button>\n </AlertDialog.Cancel>\n <AlertDialog.Action asChild>\n <Button theme=\"active\">Accept</Button>\n </AlertDialog.Action>\n </XStack>\n </YStack>\n </AlertDialog.Content>\n </AlertDialog.Portal>\n </AlertDialog>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,eAAAA,EAAa,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAE7C,SAASC,GAAkB,CAChC,MACE,CAACJ,EAAY,OACX,CAACA,EAAY,QAAQ,QACnB,CAACC,EAAO,UAAU,EAAjBA,EACH,EAFCD,EAAY,QAIb,CAACA,EAAY,OACX,CAACA,EAAY,QACX,IAAI,SACJ,UAAU,OACV,SAAS,GACT,YAAY,CAAC,QAAQ,CAAE,EACvB,WAAW,CAAC,QAAQ,CAAE,EACxB,EACA,CAACA,EAAY,QACX,SACA,QACA,IAAI,SACJ,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,GAAG,EACH,OAAO,EACP,SAAS,EACT,GAAG,GAEH,CAACG,EAAO,MACN,CAACH,EAAY,MAAM,MAAM,EAAxBA,EAAY,MACb,CAACA,EAAY,YAAY,qDAEzB,EAFCA,EAAY,YAIb,CAACE,EAAO,MAAM,IAAK,eAAe,WAChC,CAACF,EAAY,OAAO,QAClB,CAACC,EAAO,MAAM,EAAbA,EACH,EAFCD,EAAY,OAGb,CAACA,EAAY,OAAO,QAClB,CAACC,EAAO,MAAM,SAAS,MAAM,EAA5BA,EACH,EAFCD,EAAY,OAGf,EAPCE,EAQH,EAdCC,EAeH,EAlCCH,EAAY,QAmCf,EA3CCA,EAAY,OA4Cf,EAjDCA,EAmDL",
|
|
6
|
+
"names": ["AlertDialog", "Button", "XStack", "YStack", "AlertDialogDemo"]
|
|
7
7
|
}
|
|
@@ -1,81 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Play } from "@tamagui/lucide-icons";
|
|
3
|
-
import { Button, Square, useControllableState, useEvent } from "tamagui";
|
|
4
|
-
function AnimationsDemo(props) {
|
|
5
|
-
const [positionI, setPositionI] = useControllableState({
|
|
6
|
-
strategy: "most-recent-wins",
|
|
7
|
-
prop: props.position,
|
|
8
|
-
defaultProp: 0
|
|
9
|
-
});
|
|
10
|
-
const position = positions[positionI];
|
|
11
|
-
const onPress = useEvent(() => {
|
|
12
|
-
setPositionI((x) => {
|
|
13
|
-
return (x + 1) % positions.length;
|
|
14
|
-
});
|
|
15
|
-
});
|
|
16
|
-
return <>
|
|
17
|
-
<Square
|
|
18
|
-
animation={props.animation || "bouncy"}
|
|
19
|
-
onPress={onPress}
|
|
20
|
-
size={104}
|
|
21
|
-
borderColor="$borderColor"
|
|
22
|
-
borderWidth={1}
|
|
23
|
-
borderRadius="$9"
|
|
24
|
-
backgroundColor="$color9"
|
|
25
|
-
hoverStyle={{
|
|
26
|
-
scale: 1.1
|
|
27
|
-
}}
|
|
28
|
-
pressStyle={{
|
|
29
|
-
scale: 0.9
|
|
30
|
-
}}
|
|
31
|
-
{...position}
|
|
32
|
-
>{props.children || <LogoIcon downscale={0.75} />}</Square>
|
|
33
|
-
<Button
|
|
34
|
-
position="absolute"
|
|
35
|
-
bottom={20}
|
|
36
|
-
left={20}
|
|
37
|
-
icon={Play}
|
|
38
|
-
theme={props.tint}
|
|
39
|
-
size="$5"
|
|
40
|
-
circular
|
|
41
|
-
onPress={onPress}
|
|
42
|
-
/>
|
|
43
|
-
</>;
|
|
44
|
-
}
|
|
45
|
-
const positions = [
|
|
46
|
-
{
|
|
47
|
-
x: 0,
|
|
48
|
-
y: 0,
|
|
49
|
-
scale: 1,
|
|
50
|
-
rotate: "0deg"
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
x: -50,
|
|
54
|
-
y: -50,
|
|
55
|
-
scale: 0.5,
|
|
56
|
-
rotate: "-45deg",
|
|
57
|
-
hoverStyle: {
|
|
58
|
-
scale: 0.6
|
|
59
|
-
},
|
|
60
|
-
pressStyle: {
|
|
61
|
-
scale: 0.4
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
x: 50,
|
|
66
|
-
y: 50,
|
|
67
|
-
scale: 1,
|
|
68
|
-
rotate: "180deg",
|
|
69
|
-
hoverStyle: {
|
|
70
|
-
scale: 1.1
|
|
71
|
-
},
|
|
72
|
-
pressStyle: {
|
|
73
|
-
scale: 0.9
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
];
|
|
77
|
-
export {
|
|
78
|
-
AnimationsDemo,
|
|
79
|
-
positions
|
|
80
|
-
};
|
|
1
|
+
import{LogoIcon as S}from"@tamagui/logo";import{Play as g}from"@tamagui/lucide-icons";import{Button as P,Square as C,useControllableState as $,useEvent as I}from"tamagui";function k(o){const[r,s]=$({strategy:"most-recent-wins",prop:o.position,defaultProp:0}),n=t[r],e=I(()=>{s(i=>(i+1)%t.length)});return<><C animation={o.animation||"bouncy"}onPress={e}size={104}borderColor="$borderColor"borderWidth={1}borderRadius="$9"backgroundColor="$color9"hoverStyle={{scale:1.1}}pressStyle={{scale:.9}}{...n}>{o.children||<S downscale={.75}/>}</C><P position="absolute"bottom={20}left={20}icon={g}theme={o.tint}size="$5"circular onPress={e}/></>}const t=[{x:0,y:0,scale:1,rotate:"0deg"},{x:-50,y:-50,scale:.5,rotate:"-45deg",hoverStyle:{scale:.6},pressStyle:{scale:.4}},{x:50,y:50,scale:1,rotate:"180deg",hoverStyle:{scale:1.1},pressStyle:{scale:.9}}];export{k as AnimationsDemo,t as positions};
|
|
81
2
|
//# sourceMappingURL=AnimationsDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n const [positionI, setPositionI] = useControllableState({\n strategy: 'most-recent-wins',\n prop: props.position,\n defaultProp: 0,\n })\n const position = positions[positionI]\n const onPress = useEvent(() => {\n setPositionI((x) => {\n return (x + 1) % positions.length\n })\n })\n\n return (\n <>\n <Square\n animation={props.animation || 'bouncy'}\n onPress={onPress}\n size={104}\n borderColor=\"$borderColor\"\n borderWidth={1}\n borderRadius=\"$9\"\n backgroundColor=\"$color9\"\n hoverStyle={{\n scale: 1.1,\n }}\n pressStyle={{\n scale: 0.9,\n }}\n {...position}\n >\n {props.children || <LogoIcon downscale={0.75} />}\n </Square>\n\n <Button\n position=\"absolute\"\n bottom={20}\n left={20}\n icon={Play}\n theme={props.tint}\n size=\"$5\"\n circular\n onPress={onPress}\n />\n </>\n )\n}\n\nexport const positions = [\n {\n x: 0,\n y: 0,\n scale: 1,\n rotate: '0deg',\n },\n {\n x: -50,\n y: -50,\n scale: 0.5,\n rotate: '-45deg',\n hoverStyle: {\n scale: 0.6,\n },\n pressStyle: {\n scale: 0.4,\n },\n },\n {\n x: 50,\n y: 50,\n scale: 1,\n rotate: '180deg',\n hoverStyle: {\n scale: 1.1,\n },\n pressStyle: {\n scale: 0.9,\n },\n },\n]\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,QAAAC,MAAY,wBACrB,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,wBAAAC,EAAsB,YAAAC,MAAgB,UAExD,SAASC,EAAeC,EAAO,CACpC,KAAM,CAACC,EAAWC,CAAY,EAAIL,EAAqB,CACrD,SAAU,mBACV,KAAMG,EAAM,SACZ,YAAa,CACf,CAAC,EACKG,EAAWC,EAAUH,CAAS,EAC9BI,EAAUP,EAAS,IAAM,CAC7BI,EAAcI,IACJA,EAAI,GAAKF,EAAU,MAC5B,CACH,CAAC,EAED,MACE,EACE,CAACR,EACC,WAAWI,EAAM,WAAa,SAC9B,SAASK,EACT,MAAM,IACN,YAAY,cACZ,aAAa,EACb,aAAa,IACb,gBAAgB,SAChB,YAAY,CACV,MAAO,GACT,EACA,YAAY,CACV,MAAO,EACT,MACIF,IAEHH,EAAM,UAAY,CAACP,EAAS,WAAW,IAAM,GAChD,EAjBCG,EAmBD,CAACD,EACC,SAAS,UACT,QAAQ,GACR,MAAM,GACN,MAAMD,EACN,OAAOM,EAAM,KACb,KAAK,IACL,SACA,SAASK,EACX,EACF,GAEJ,CAEO,MAAMD,EAAY,CACvB,CACE,EAAG,EACH,EAAG,EACH,MAAO,EACP,OAAQ,MACV,EACA,CACE,EAAG,IACH,EAAG,IACH,MAAO,GACP,OAAQ,SACR,WAAY,CACV,MAAO,EACT,EACA,WAAY,CACV,MAAO,EACT,CACF,EACA,CACE,EAAG,GACH,EAAG,GACH,MAAO,EACP,OAAQ,SACR,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,CACF,CACF",
|
|
6
|
+
"names": ["LogoIcon", "Play", "Button", "Square", "useControllableState", "useEvent", "AnimationsDemo", "props", "positionI", "setPositionI", "position", "positions", "onPress", "x"]
|
|
7
7
|
}
|
|
@@ -1,81 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Play } from "@tamagui/lucide-icons";
|
|
3
|
-
import { Button, Square, useControllableState, useEvent } from "tamagui";
|
|
4
|
-
function AnimationsDemo(props) {
|
|
5
|
-
const [positionI, setPositionI] = useControllableState({
|
|
6
|
-
strategy: "most-recent-wins",
|
|
7
|
-
prop: props.position,
|
|
8
|
-
defaultProp: 0
|
|
9
|
-
});
|
|
10
|
-
const position = positions[positionI];
|
|
11
|
-
const onPress = useEvent(() => {
|
|
12
|
-
setPositionI((x) => {
|
|
13
|
-
return (x + 1) % positions.length;
|
|
14
|
-
});
|
|
15
|
-
});
|
|
16
|
-
return <>
|
|
17
|
-
<Square
|
|
18
|
-
animation={props.animation || "bouncy"}
|
|
19
|
-
onPress={onPress}
|
|
20
|
-
size={104}
|
|
21
|
-
borderColor="$borderColor"
|
|
22
|
-
borderWidth={1}
|
|
23
|
-
borderRadius="$9"
|
|
24
|
-
backgroundColor="$color9"
|
|
25
|
-
hoverStyle={{
|
|
26
|
-
scale: 1.1
|
|
27
|
-
}}
|
|
28
|
-
pressStyle={{
|
|
29
|
-
scale: 0.9
|
|
30
|
-
}}
|
|
31
|
-
{...position}
|
|
32
|
-
>{props.children || <LogoIcon downscale={0.75} />}</Square>
|
|
33
|
-
<Button
|
|
34
|
-
position="absolute"
|
|
35
|
-
bottom={20}
|
|
36
|
-
left={20}
|
|
37
|
-
icon={Play}
|
|
38
|
-
theme={props.tint}
|
|
39
|
-
size="$5"
|
|
40
|
-
circular
|
|
41
|
-
onPress={onPress}
|
|
42
|
-
/>
|
|
43
|
-
</>;
|
|
44
|
-
}
|
|
45
|
-
const positions = [
|
|
46
|
-
{
|
|
47
|
-
x: 0,
|
|
48
|
-
y: 0,
|
|
49
|
-
scale: 1,
|
|
50
|
-
rotate: "0deg"
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
x: -50,
|
|
54
|
-
y: -50,
|
|
55
|
-
scale: 0.5,
|
|
56
|
-
rotate: "-45deg",
|
|
57
|
-
hoverStyle: {
|
|
58
|
-
scale: 0.6
|
|
59
|
-
},
|
|
60
|
-
pressStyle: {
|
|
61
|
-
scale: 0.4
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
x: 50,
|
|
66
|
-
y: 50,
|
|
67
|
-
scale: 1,
|
|
68
|
-
rotate: "180deg",
|
|
69
|
-
hoverStyle: {
|
|
70
|
-
scale: 1.1
|
|
71
|
-
},
|
|
72
|
-
pressStyle: {
|
|
73
|
-
scale: 0.9
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
];
|
|
77
|
-
export {
|
|
78
|
-
AnimationsDemo,
|
|
79
|
-
positions
|
|
80
|
-
};
|
|
1
|
+
import{LogoIcon as S}from"@tamagui/logo";import{Play as g}from"@tamagui/lucide-icons";import{Button as P,Square as C,useControllableState as $,useEvent as I}from"tamagui";function k(o){const[r,s]=$({strategy:"most-recent-wins",prop:o.position,defaultProp:0}),n=t[r],e=I(()=>{s(i=>(i+1)%t.length)});return<><C animation={o.animation||"bouncy"}onPress={e}size={104}borderColor="$borderColor"borderWidth={1}borderRadius="$9"backgroundColor="$color9"hoverStyle={{scale:1.1}}pressStyle={{scale:.9}}{...n}>{o.children||<S downscale={.75}/>}</C><P position="absolute"bottom={20}left={20}icon={g}theme={o.tint}size="$5"circular onPress={e}/></>}const t=[{x:0,y:0,scale:1,rotate:"0deg"},{x:-50,y:-50,scale:.5,rotate:"-45deg",hoverStyle:{scale:.6},pressStyle:{scale:.4}},{x:50,y:50,scale:1,rotate:"180deg",hoverStyle:{scale:1.1},pressStyle:{scale:.9}}];export{k as AnimationsDemo,t as positions};
|
|
81
2
|
//# sourceMappingURL=AnimationsDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n const [positionI, setPositionI] = useControllableState({\n strategy: 'most-recent-wins',\n prop: props.position,\n defaultProp: 0,\n })\n const position = positions[positionI]\n const onPress = useEvent(() => {\n setPositionI((x) => {\n return (x + 1) % positions.length\n })\n })\n\n return (\n <>\n <Square\n animation={props.animation || 'bouncy'}\n onPress={onPress}\n size={104}\n borderColor=\"$borderColor\"\n borderWidth={1}\n borderRadius=\"$9\"\n backgroundColor=\"$color9\"\n hoverStyle={{\n scale: 1.1,\n }}\n pressStyle={{\n scale: 0.9,\n }}\n {...position}\n >\n {props.children || <LogoIcon downscale={0.75} />}\n </Square>\n\n <Button\n position=\"absolute\"\n bottom={20}\n left={20}\n icon={Play}\n theme={props.tint}\n size=\"$5\"\n circular\n onPress={onPress}\n />\n </>\n )\n}\n\nexport const positions = [\n {\n x: 0,\n y: 0,\n scale: 1,\n rotate: '0deg',\n },\n {\n x: -50,\n y: -50,\n scale: 0.5,\n rotate: '-45deg',\n hoverStyle: {\n scale: 0.6,\n },\n pressStyle: {\n scale: 0.4,\n },\n },\n {\n x: 50,\n y: 50,\n scale: 1,\n rotate: '180deg',\n hoverStyle: {\n scale: 1.1,\n },\n pressStyle: {\n scale: 0.9,\n },\n },\n]\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,QAAAC,MAAY,wBACrB,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,wBAAAC,EAAsB,YAAAC,MAAgB,UAExD,SAASC,EAAeC,EAAO,CACpC,KAAM,CAACC,EAAWC,CAAY,EAAIL,EAAqB,CACrD,SAAU,mBACV,KAAMG,EAAM,SACZ,YAAa,CACf,CAAC,EACKG,EAAWC,EAAUH,CAAS,EAC9BI,EAAUP,EAAS,IAAM,CAC7BI,EAAcI,IACJA,EAAI,GAAKF,EAAU,MAC5B,CACH,CAAC,EAED,MACE,EACE,CAACR,EACC,WAAWI,EAAM,WAAa,SAC9B,SAASK,EACT,MAAM,IACN,YAAY,cACZ,aAAa,EACb,aAAa,IACb,gBAAgB,SAChB,YAAY,CACV,MAAO,GACT,EACA,YAAY,CACV,MAAO,EACT,MACIF,IAEHH,EAAM,UAAY,CAACP,EAAS,WAAW,IAAM,GAChD,EAjBCG,EAmBD,CAACD,EACC,SAAS,UACT,QAAQ,GACR,MAAM,GACN,MAAMD,EACN,OAAOM,EAAM,KACb,KAAK,IACL,SACA,SAASK,EACX,EACF,GAEJ,CAEO,MAAMD,EAAY,CACvB,CACE,EAAG,EACH,EAAG,EACH,MAAO,EACP,OAAQ,MACV,EACA,CACE,EAAG,IACH,EAAG,IACH,MAAO,GACP,OAAQ,SACR,WAAY,CACV,MAAO,EACT,EACA,WAAY,CACV,MAAO,EACT,CACF,EACA,CACE,EAAG,GACH,EAAG,GACH,MAAO,EACP,OAAQ,SACR,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,CACF,CACF",
|
|
6
|
+
"names": ["LogoIcon", "Play", "Button", "Square", "useControllableState", "useEvent", "AnimationsDemo", "props", "positionI", "setPositionI", "position", "positions", "onPress", "x"]
|
|
7
7
|
}
|
|
@@ -1,35 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useRef, useState } from "react";
|
|
3
|
-
import { Button, Square, YStack } from "tamagui";
|
|
4
|
-
import { useIsIntersecting } from "./useOnIntersecting";
|
|
5
|
-
function AnimationsEnterDemo(props) {
|
|
6
|
-
const ref = useRef(null);
|
|
7
|
-
const hasIntersected = useIsIntersecting(ref, { once: true });
|
|
8
|
-
const [key, setKey] = useState(0);
|
|
9
|
-
if (!hasIntersected) {
|
|
10
|
-
return <YStack ref={ref} />;
|
|
11
|
-
}
|
|
12
|
-
return <>
|
|
13
|
-
<Square
|
|
14
|
-
key={key}
|
|
15
|
-
enterStyle={{
|
|
16
|
-
scale: 1.5,
|
|
17
|
-
y: -10,
|
|
18
|
-
opacity: 0
|
|
19
|
-
}}
|
|
20
|
-
animation="bouncy"
|
|
21
|
-
elevation="$4"
|
|
22
|
-
size={110}
|
|
23
|
-
opacity={1}
|
|
24
|
-
scale={1}
|
|
25
|
-
y={0}
|
|
26
|
-
backgroundColor="$pink10"
|
|
27
|
-
borderRadius="$9"
|
|
28
|
-
>{props.children ?? <LogoIcon downscale={0.75} />}</Square>
|
|
29
|
-
<Button size="$3" marginTop="$4" onPress={() => setKey(Math.random())}>Re-mount</Button>
|
|
30
|
-
</>;
|
|
31
|
-
}
|
|
32
|
-
export {
|
|
33
|
-
AnimationsEnterDemo
|
|
34
|
-
};
|
|
1
|
+
import{LogoIcon as S}from"@tamagui/logo";import{useRef as $,useState as g}from"react";import{Button as I,Square as R,YStack as B}from"tamagui";import{useIsIntersecting as E}from"./useOnIntersecting";function w(o){const e=$(null),t=E(e,{once:!0}),[n,r]=g(0);return t?<><R key={n}enterStyle={{scale:1.5,y:-10,opacity:0}}animation="bouncy"elevation="$4"size={110}opacity={1}scale={1}y={0}backgroundColor="$pink10"borderRadius="$9">{o.children??<S downscale={.75}/>}</R><I size="$3"marginTop="$4"onPress={()=>r(Math.random())}>Re-mount</I></>:<B ref={e}/>}export{w as AnimationsEnterDemo};
|
|
35
2
|
//# sourceMappingURL=AnimationsEnterDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsEnterDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n const ref = useRef<HTMLElement>(null)\n const hasIntersected = useIsIntersecting(ref, { once: true })\n const [key, setKey] = useState(0)\n\n if (!hasIntersected) {\n return <YStack ref={ref} />\n }\n\n return (\n <>\n <Square\n key={key}\n enterStyle={{\n scale: 1.5,\n y: -10,\n opacity: 0,\n }}\n animation=\"bouncy\"\n elevation=\"$4\"\n size={110}\n opacity={1}\n scale={1}\n y={0}\n backgroundColor=\"$pink10\"\n borderRadius=\"$9\"\n >\n {props.children ?? <LogoIcon downscale={0.75} />}\n </Square>\n\n <Button size=\"$3\" marginTop=\"$4\" onPress={() => setKey(Math.random())}>\n Re-mount\n </Button>\n </>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,UAAAC,EAAQ,YAAAC,MAAgB,QACjC,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEvC,OAAS,qBAAAC,MAAyB,sBAE3B,SAASC,EAAoBC,EAAY,CAC9C,MAAMC,EAAMR,EAAoB,IAAI,EAC9BS,EAAiBJ,EAAkBG,EAAK,CAAE,KAAM,EAAK,CAAC,EACtD,CAACE,EAAKC,CAAM,EAAIV,EAAS,CAAC,EAEhC,OAAKQ,EAKH,EACE,CAACN,EACC,KAAKO,EACL,YAAY,CACV,MAAO,IACP,EAAG,IACH,QAAS,CACX,EACA,UAAU,QACV,UAAU,IACV,MAAM,IACN,SAAS,EACT,OAAO,EACP,GAAG,EACH,gBAAgB,SAChB,aAAa,MAEZH,EAAM,UAAY,CAACR,EAAS,WAAW,IAAM,GAChD,EAjBCI,EAmBD,CAACD,EAAO,KAAK,IAAK,UAAU,IAAK,SAAS,IAAMS,EAAO,KAAK,OAAO,CAAC,GAAG,QAEvE,EAFCT,EAGH,IA3BO,CAACE,EAAO,KAAKI,EAAK,EA6B7B",
|
|
6
|
+
"names": ["LogoIcon", "useRef", "useState", "Button", "Square", "YStack", "useIsIntersecting", "AnimationsEnterDemo", "props", "ref", "hasIntersected", "key", "setKey"]
|
|
7
7
|
}
|
|
@@ -1,35 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useRef, useState } from "react";
|
|
3
|
-
import { Button, Square, YStack } from "tamagui";
|
|
4
|
-
import { useIsIntersecting } from "./useOnIntersecting";
|
|
5
|
-
function AnimationsEnterDemo(props) {
|
|
6
|
-
const ref = useRef(null);
|
|
7
|
-
const hasIntersected = useIsIntersecting(ref, { once: true });
|
|
8
|
-
const [key, setKey] = useState(0);
|
|
9
|
-
if (!hasIntersected) {
|
|
10
|
-
return <YStack ref={ref} />;
|
|
11
|
-
}
|
|
12
|
-
return <>
|
|
13
|
-
<Square
|
|
14
|
-
key={key}
|
|
15
|
-
enterStyle={{
|
|
16
|
-
scale: 1.5,
|
|
17
|
-
y: -10,
|
|
18
|
-
opacity: 0
|
|
19
|
-
}}
|
|
20
|
-
animation="bouncy"
|
|
21
|
-
elevation="$4"
|
|
22
|
-
size={110}
|
|
23
|
-
opacity={1}
|
|
24
|
-
scale={1}
|
|
25
|
-
y={0}
|
|
26
|
-
backgroundColor="$pink10"
|
|
27
|
-
borderRadius="$9"
|
|
28
|
-
>{props.children ?? <LogoIcon downscale={0.75} />}</Square>
|
|
29
|
-
<Button size="$3" marginTop="$4" onPress={() => setKey(Math.random())}>Re-mount</Button>
|
|
30
|
-
</>;
|
|
31
|
-
}
|
|
32
|
-
export {
|
|
33
|
-
AnimationsEnterDemo
|
|
34
|
-
};
|
|
1
|
+
import{LogoIcon as S}from"@tamagui/logo";import{useRef as $,useState as g}from"react";import{Button as I,Square as R,YStack as B}from"tamagui";import{useIsIntersecting as E}from"./useOnIntersecting";function w(o){const e=$(null),t=E(e,{once:!0}),[n,r]=g(0);return t?<><R key={n}enterStyle={{scale:1.5,y:-10,opacity:0}}animation="bouncy"elevation="$4"size={110}opacity={1}scale={1}y={0}backgroundColor="$pink10"borderRadius="$9">{o.children??<S downscale={.75}/>}</R><I size="$3"marginTop="$4"onPress={()=>r(Math.random())}>Re-mount</I></>:<B ref={e}/>}export{w as AnimationsEnterDemo};
|
|
35
2
|
//# sourceMappingURL=AnimationsEnterDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsEnterDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n const ref = useRef<HTMLElement>(null)\n const hasIntersected = useIsIntersecting(ref, { once: true })\n const [key, setKey] = useState(0)\n\n if (!hasIntersected) {\n return <YStack ref={ref} />\n }\n\n return (\n <>\n <Square\n key={key}\n enterStyle={{\n scale: 1.5,\n y: -10,\n opacity: 0,\n }}\n animation=\"bouncy\"\n elevation=\"$4\"\n size={110}\n opacity={1}\n scale={1}\n y={0}\n backgroundColor=\"$pink10\"\n borderRadius=\"$9\"\n >\n {props.children ?? <LogoIcon downscale={0.75} />}\n </Square>\n\n <Button size=\"$3\" marginTop=\"$4\" onPress={() => setKey(Math.random())}>\n Re-mount\n </Button>\n </>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,UAAAC,EAAQ,YAAAC,MAAgB,QACjC,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEvC,OAAS,qBAAAC,MAAyB,sBAE3B,SAASC,EAAoBC,EAAY,CAC9C,MAAMC,EAAMR,EAAoB,IAAI,EAC9BS,EAAiBJ,EAAkBG,EAAK,CAAE,KAAM,EAAK,CAAC,EACtD,CAACE,EAAKC,CAAM,EAAIV,EAAS,CAAC,EAEhC,OAAKQ,EAKH,EACE,CAACN,EACC,KAAKO,EACL,YAAY,CACV,MAAO,IACP,EAAG,IACH,QAAS,CACX,EACA,UAAU,QACV,UAAU,IACV,MAAM,IACN,SAAS,EACT,OAAO,EACP,GAAG,EACH,gBAAgB,SAChB,aAAa,MAEZH,EAAM,UAAY,CAACR,EAAS,WAAW,IAAM,GAChD,EAjBCI,EAmBD,CAACD,EAAO,KAAK,IAAK,UAAU,IAAK,SAAS,IAAMS,EAAO,KAAK,OAAO,CAAC,GAAG,QAEvE,EAFCT,EAGH,IA3BO,CAACE,EAAO,KAAKI,EAAK,EA6B7B",
|
|
6
|
+
"names": ["LogoIcon", "useRef", "useState", "Button", "Square", "YStack", "useIsIntersecting", "AnimationsEnterDemo", "props", "ref", "hasIntersected", "key", "setKey"]
|
|
7
7
|
}
|
|
@@ -1,21 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Square } from "tamagui";
|
|
3
|
-
function AnimationsHoverDemo() {
|
|
4
|
-
return <Square
|
|
5
|
-
borderColor="$pink10"
|
|
6
|
-
animation="bouncy"
|
|
7
|
-
elevation="$4"
|
|
8
|
-
size={110}
|
|
9
|
-
borderRadius="$9"
|
|
10
|
-
hoverStyle={{
|
|
11
|
-
scale: 1.2
|
|
12
|
-
}}
|
|
13
|
-
pressStyle={{
|
|
14
|
-
scale: 0.9
|
|
15
|
-
}}
|
|
16
|
-
><LogoIcon downscale={0.75} /></Square>;
|
|
17
|
-
}
|
|
18
|
-
export {
|
|
19
|
-
AnimationsHoverDemo
|
|
20
|
-
};
|
|
1
|
+
import{LogoIcon as S}from"@tamagui/logo";import{Square as $}from"tamagui";function h(){return<$ borderColor="$pink10"animation="bouncy"elevation="$4"size={110}borderRadius="$9"hoverStyle={{scale:1.2}}pressStyle={{scale:.9}}><S downscale={.75}/></$>}export{h as AnimationsHoverDemo};
|
|
21
2
|
//# sourceMappingURL=AnimationsHoverDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsHoverDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n return (\n <Square\n borderColor=\"$pink10\"\n animation=\"bouncy\"\n elevation=\"$4\"\n size={110}\n borderRadius=\"$9\"\n hoverStyle={{\n scale: 1.2,\n }}\n pressStyle={{\n scale: 0.9,\n }}\n >\n <LogoIcon downscale={0.75} />\n </Square>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,UAAAC,MAAc,UAEhB,SAASC,GAAsB,CACpC,MACE,CAACD,EACC,YAAY,SACZ,UAAU,QACV,UAAU,IACV,MAAM,IACN,aAAa,IACb,YAAY,CACV,MAAO,GACT,EACA,YAAY,CACV,MAAO,EACT,GAEA,CAACD,EAAS,WAAW,IAAM,EAC7B,EAdCC,EAgBL",
|
|
6
|
+
"names": ["LogoIcon", "Square", "AnimationsHoverDemo"]
|
|
7
7
|
}
|
|
@@ -1,21 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Square } from "tamagui";
|
|
3
|
-
function AnimationsHoverDemo() {
|
|
4
|
-
return <Square
|
|
5
|
-
borderColor="$pink10"
|
|
6
|
-
animation="bouncy"
|
|
7
|
-
elevation="$4"
|
|
8
|
-
size={110}
|
|
9
|
-
borderRadius="$9"
|
|
10
|
-
hoverStyle={{
|
|
11
|
-
scale: 1.2
|
|
12
|
-
}}
|
|
13
|
-
pressStyle={{
|
|
14
|
-
scale: 0.9
|
|
15
|
-
}}
|
|
16
|
-
><LogoIcon downscale={0.75} /></Square>;
|
|
17
|
-
}
|
|
18
|
-
export {
|
|
19
|
-
AnimationsHoverDemo
|
|
20
|
-
};
|
|
1
|
+
import{LogoIcon as S}from"@tamagui/logo";import{Square as $}from"tamagui";function h(){return<$ borderColor="$pink10"animation="bouncy"elevation="$4"size={110}borderRadius="$9"hoverStyle={{scale:1.2}}pressStyle={{scale:.9}}><S downscale={.75}/></$>}export{h as AnimationsHoverDemo};
|
|
21
2
|
//# sourceMappingURL=AnimationsHoverDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsHoverDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n return (\n <Square\n borderColor=\"$pink10\"\n animation=\"bouncy\"\n elevation=\"$4\"\n size={110}\n borderRadius=\"$9\"\n hoverStyle={{\n scale: 1.2,\n }}\n pressStyle={{\n scale: 0.9,\n }}\n >\n <LogoIcon downscale={0.75} />\n </Square>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,UAAAC,MAAc,UAEhB,SAASC,GAAsB,CACpC,MACE,CAACD,EACC,YAAY,SACZ,UAAU,QACV,UAAU,IACV,MAAM,IACN,aAAa,IACb,YAAY,CACV,MAAO,GACT,EACA,YAAY,CACV,MAAO,EACT,GAEA,CAACD,EAAS,WAAW,IAAM,EAC7B,EAdCC,EAgBL",
|
|
6
|
+
"names": ["LogoIcon", "Square", "AnimationsHoverDemo"]
|
|
7
7
|
}
|
|
@@ -1,55 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ArrowLeft, ArrowRight } from "@tamagui/lucide-icons";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
import { Button, Image, XStack, YStack, styled } from "tamagui";
|
|
5
|
-
import photo1 from "../../public/photo1.jpg";
|
|
6
|
-
import photo2 from "../../public/photo2.jpg";
|
|
7
|
-
import photo3 from "../../public/photo3.jpg";
|
|
8
|
-
const images = [photo1, photo2, photo3].map((x) => x.src || x);
|
|
9
|
-
const YStackEnterable = styled(YStack, {
|
|
10
|
-
variants: {
|
|
11
|
-
isLeft: { true: { x: -300, opacity: 0 } },
|
|
12
|
-
isRight: { true: { x: 300, opacity: 0 } }
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
function AnimationsPresenceDemo() {
|
|
16
|
-
const [[page, direction], setPage] = useState([0, 0]);
|
|
17
|
-
const imageIndex = wrap(0, images.length, page);
|
|
18
|
-
const paginate = (newDirection) => {
|
|
19
|
-
setPage([page + newDirection, newDirection]);
|
|
20
|
-
};
|
|
21
|
-
const enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft";
|
|
22
|
-
const exitVariant = direction === 1 ? "isLeft" : "isRight";
|
|
23
|
-
return <XStack overflow="hidden" backgroundColor="#000" position="relative" height={300} width="100%" alignItems="center">
|
|
24
|
-
<AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}><YStackEnterable key={page} animation="bouncy" fullscreen x={0} opacity={1}><Image src={images[imageIndex]} width={780} height={300} /></YStackEnterable></AnimatePresence>
|
|
25
|
-
<Button
|
|
26
|
-
accessibilityLabel="Carousel left"
|
|
27
|
-
icon={ArrowLeft}
|
|
28
|
-
size="$5"
|
|
29
|
-
position="absolute"
|
|
30
|
-
left="$4"
|
|
31
|
-
circular
|
|
32
|
-
elevate
|
|
33
|
-
onPress={() => paginate(-1)}
|
|
34
|
-
/>
|
|
35
|
-
<Button
|
|
36
|
-
accessibilityLabel="Carousel right"
|
|
37
|
-
icon={ArrowRight}
|
|
38
|
-
size="$5"
|
|
39
|
-
position="absolute"
|
|
40
|
-
right="$4"
|
|
41
|
-
circular
|
|
42
|
-
elevate
|
|
43
|
-
onPress={() => paginate(1)}
|
|
44
|
-
/>
|
|
45
|
-
</XStack>;
|
|
46
|
-
}
|
|
47
|
-
const wrap = (min, max, v) => {
|
|
48
|
-
const rangeSize = max - min;
|
|
49
|
-
return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
|
|
50
|
-
};
|
|
51
|
-
export {
|
|
52
|
-
AnimationsPresenceDemo,
|
|
53
|
-
images
|
|
54
|
-
};
|
|
1
|
+
import{AnimatePresence as A}from"@tamagui/animate-presence";import{ArrowLeft as R,ArrowRight as V}from"@tamagui/lucide-icons";import{useState as $}from"react";import{Button as S,Image as C,XStack as I,YStack as Y,styled as E}from"tamagui";import X from"../../public/photo1.jpg";import B from"../../public/photo2.jpg";import j from"../../public/photo3.jpg";const L=[X,B,j].map(t=>t.src||t),D=E(Y,{variants:{isLeft:{true:{x:-300,opacity:0}},isRight:{true:{x:300,opacity:0}}}});function Q(){const[[t,e],o]=$([0,0]),i=F(0,L.length,t),r=a=>{o([t+a,a])},P=e===1||e===0?"isRight":"isLeft",v=e===1?"isLeft":"isRight";return<I overflow="hidden"backgroundColor="#000"position="relative"height={300}width="100%"alignItems="center"><A enterVariant={P}exitVariant={v}><D key={t}animation="bouncy"fullscreen x={0}opacity={1}><C src={L[i]}width={780}height={300}/></D></A><S accessibilityLabel="Carousel left"icon={R}size="$5"position="absolute"left="$4"circular elevate onPress={()=>r(-1)}/><S accessibilityLabel="Carousel right"icon={V}size="$5"position="absolute"right="$4"circular elevate onPress={()=>r(1)}/></I>}const F=(t,e,o)=>{const i=e-t;return((o-t)%i+i)%i+t};export{Q as AnimationsPresenceDemo,L as images};
|
|
55
2
|
//# sourceMappingURL=AnimationsPresenceDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsPresenceDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1, photo2, photo3].map((x) => x.src || x)\n\nconst YStackEnterable = styled(YStack, {\n variants: {\n isLeft: { true: { x: -300, opacity: 0 } },\n isRight: { true: { x: 300, opacity: 0 } },\n } as const,\n})\n\nexport function AnimationsPresenceDemo() {\n const [[page, direction], setPage] = useState([0, 0])\n\n const imageIndex = wrap(0, images.length, page)\n\n const paginate = (newDirection: number) => {\n setPage([page + newDirection, newDirection])\n }\n\n const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n return (\n <XStack overflow=\"hidden\" backgroundColor=\"#000\" position=\"relative\" height={300} width=\"100%\" alignItems=\"center\">\n <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} opacity={1}>\n <Image src={images[imageIndex]} width={780} height={300} />\n </YStackEnterable>\n </AnimatePresence>\n\n <Button\n accessibilityLabel=\"Carousel left\"\n icon={ArrowLeft}\n size=\"$5\"\n position=\"absolute\"\n left=\"$4\"\n circular\n elevate\n onPress={() => paginate(-1)}\n />\n <Button\n accessibilityLabel=\"Carousel right\"\n icon={ArrowRight}\n size=\"$5\"\n position=\"absolute\"\n right=\"$4\"\n circular\n elevate\n onPress={() => paginate(1)}\n />\n </XStack>\n )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n const rangeSize = max - min\n return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,mBAAAA,MAAuB,4BAChC,OAAS,aAAAC,EAAW,cAAAC,MAAkB,wBACtC,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,SAAAC,EAAO,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAGtD,OAAOC,MAAY,0BAEnB,OAAOC,MAAY,0BAEnB,OAAOC,MAAY,0BAEZ,MAAMC,EAAS,CAACH,EAAQC,EAAQC,CAAM,EAAE,IAAKE,GAAMA,EAAE,KAAOA,CAAC,EAE9DC,EAAkBN,EAAOD,EAAQ,CACrC,SAAU,CACR,OAAQ,CAAE,KAAM,CAAE,EAAG,KAAM,QAAS,CAAE,CAAE,EACxC,QAAS,CAAE,KAAM,CAAE,EAAG,IAAK,QAAS,CAAE,CAAE,CAC1C,CACF,CAAC,EAEM,SAASQ,GAAyB,CACvC,KAAM,CAAC,CAACC,EAAMC,CAAS,EAAGC,CAAO,EAAIf,EAAS,CAAC,EAAG,CAAC,CAAC,EAE9CgB,EAAaC,EAAK,EAAGR,EAAO,OAAQI,CAAI,EAExCK,EAAYC,GAAyB,CACzCJ,EAAQ,CAACF,EAAOM,EAAcA,CAAY,CAAC,CAC7C,EAEMC,EAAeN,IAAc,GAAKA,IAAc,EAAI,UAAY,SAChEO,EAAcP,IAAc,EAAI,SAAW,UAEjD,MACE,CAACX,EAAO,SAAS,QAAS,gBAAgB,MAAO,SAAS,UAAW,QAAQ,IAAK,MAAM,MAAO,WAAW,SACxG,CAACN,EAAgB,cAAcuB,EAAc,aAAaC,GACxD,CAACV,EAAgB,KAAKE,EAAM,UAAU,QAAS,WAAW,GAAG,EAAG,SAAS,GACvE,CAACX,EAAM,KAAKO,EAAOO,CAAU,EAAG,OAAO,IAAK,QAAQ,IAAK,EAC3D,EAFCL,EAGH,EAJCd,EAMD,CAACI,EACC,mBAAmB,eACnB,MAAMH,EACN,KAAK,IACL,SAAS,UACT,KAAK,IACL,SACA,QACA,SAAS,IAAMoB,EAAS,EAAE,EAC5B,EACA,CAACjB,EACC,mBAAmB,gBACnB,MAAMF,EACN,KAAK,IACL,SAAS,UACT,MAAM,IACN,SACA,QACA,SAAS,IAAMmB,EAAS,CAAC,EAC3B,EACF,EA3BCf,EA6BL,CAEA,MAAMc,EAAO,CAACK,EAAaC,EAAaC,IAAc,CACpD,MAAMC,EAAYF,EAAMD,EACxB,QAAWE,EAAIF,GAAOG,EAAaA,GAAaA,EAAaH,CAC/D",
|
|
6
|
+
"names": ["AnimatePresence", "ArrowLeft", "ArrowRight", "useState", "Button", "Image", "XStack", "YStack", "styled", "photo1", "photo2", "photo3", "images", "x", "YStackEnterable", "AnimationsPresenceDemo", "page", "direction", "setPage", "imageIndex", "wrap", "paginate", "newDirection", "enterVariant", "exitVariant", "min", "max", "v", "rangeSize"]
|
|
7
7
|
}
|