@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
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastDuplicateDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport { Toast } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n const [savedCount, setSavedCount] = React.useState(0)\n\n return (\n <YStack alignItems=\"center\">\n <Button\n onPress={() => {\n setSavedCount((old) => old + 1)\n }}\n >\n Show toast\n </Button>\n {[...Array(savedCount)].map((_, index) => (\n <Toast\n viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n key={index}\n duration={4000}\n enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n y={0}\n opacity={1}\n scale={1}\n animation=\"100ms\"\n >\n <XStack space alignItems=\"center\">\n <YStack>\n <CheckCircle2 />\n </YStack>\n\n <YStack>\n <Toast.Title>Successfully saved!</Toast.Title>\n <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n </YStack>\n </XStack>\n </Toast>\n ))}\n </YStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,gBAAAA,MAAoB,wBAC7B,OAAS,SAAAC,MAAa,iBACtB,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEhC,MAAMC,EAAqB,IAAM,CACtC,KAAM,CAACC,EAAYC,CAAa,EAAIN,EAAM,SAAS,CAAC,EAEpD,MACE,CAACG,EAAO,WAAW,SACjB,CAACF,EACC,SAAS,IAAM,CACbK,EAAeC,GAAQA,EAAM,CAAC,CAChC,GACD,UAED,EANCN,GAOA,CAAC,GAAG,MAAMI,CAAU,CAAC,EAAE,IAAI,CAACG,EAAGC,IAC9B,CAACV,EACC,aAAa,mBACb,KAAKU,EACL,UAAU,IACV,YAAY,CAAE,QAAS,EAAG,MAAO,GAAK,EAAG,GAAI,EAC7C,WAAW,CAAE,QAAS,EAAG,MAAO,EAAG,EAAG,GAAI,EAC1C,GAAG,EACH,SAAS,EACT,OAAO,EACP,UAAU,QAEV,CAACP,EAAO,MAAM,WAAW,SACvB,CAACC,EACC,CAACL,CAAa,EAChB,EAFCK,EAID,CAACA,EACC,CAACJ,EAAM,MAAM,mBAAmB,EAA/BA,EAAM,MACP,CAACA,EAAM,YAAY,mCAAmC,EAArDA,EAAM,YACT,EAHCI,EAIH,EATCD,EAUH,EArBCH,EAsBF,EACH,EAhCCI,EAkCL",
|
|
6
|
+
"names": ["CheckCircle2", "Toast", "React", "Button", "XStack", "YStack", "ToastDuplicateDemo", "savedCount", "setSavedCount", "old", "_", "index"]
|
|
7
7
|
}
|
|
@@ -1,40 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Label, ToggleGroup, XStack, YStack } from "tamagui";
|
|
3
|
-
function ToggleGroupDemo() {
|
|
4
|
-
return <YStack paddingHorizontal="$4"><XStack alignItems="center" space="$10">
|
|
5
|
-
<YStack alignItems="center" space="$6">
|
|
6
|
-
<ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
|
|
7
|
-
<ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
|
|
8
|
-
</YStack>
|
|
9
|
-
<XStack alignItems="center" space="$6">
|
|
10
|
-
<ToggleGroupComponent type="single" size="$3" orientation="vertical" />
|
|
11
|
-
<ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
|
|
12
|
-
</XStack>
|
|
13
|
-
</XStack></YStack>;
|
|
14
|
-
}
|
|
15
|
-
function ToggleGroupComponent(props) {
|
|
16
|
-
const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
|
|
17
|
-
return <XStack
|
|
18
|
-
flexDirection={props.orientation === "horizontal" ? "row" : "column"}
|
|
19
|
-
alignItems="center"
|
|
20
|
-
justifyContent="center"
|
|
21
|
-
space="$4"
|
|
22
|
-
>
|
|
23
|
-
<Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
|
|
24
|
-
<ToggleGroup
|
|
25
|
-
orientation={props.orientation}
|
|
26
|
-
id={id}
|
|
27
|
-
type={props.type}
|
|
28
|
-
size={props.size}
|
|
29
|
-
disableDeactivation={props.type === "single" ? true : void 0}
|
|
30
|
-
>
|
|
31
|
-
<ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
|
|
32
|
-
<ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
|
|
33
|
-
<ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
|
|
34
|
-
</ToggleGroup>
|
|
35
|
-
</XStack>;
|
|
36
|
-
}
|
|
37
|
-
export {
|
|
38
|
-
ToggleGroupDemo
|
|
39
|
-
};
|
|
1
|
+
import{AlignCenter as G,AlignLeft as C,AlignRight as L}from"@tamagui/lucide-icons";import{Label as X,ToggleGroup as $,XStack as I,YStack as T}from"tamagui";function R(){return<T paddingHorizontal="$4"><I alignItems="center"space="$10"><T alignItems="center"space="$6"><S type="single"size="$3"orientation="horizontal"/><S type="multiple"size="$4"orientation="horizontal"/></T><I alignItems="center"space="$6"><S type="single"size="$3"orientation="vertical"/><S type="multiple"size="$4"orientation="vertical"/></I></I></T>}function S(e){const k=`switch-${e.size.toString().slice(1)}-${e.type}`;return<I flexDirection={e.orientation==="horizontal"?"row":"column"}alignItems="center"justifyContent="center"space="$4"><X paddingRight="$0"justifyContent="flex-end"size={e.size}htmlFor={k}>{e.type==="single"?"Single":"Multiple"}</X><$ orientation={e.orientation}id={k}type={e.type}size={e.size}disableDeactivation={e.type==="single"?!0:void 0}><$.Item value="left"aria-label="Left aligned"><C/></$.Item><$.Item value="center"aria-label="Center aligned"><G/></$.Item><$.Item value="right"aria-label="Right aligned"><L/></$.Item></$></I>}export{R as ToggleGroupDemo};
|
|
40
2
|
//# sourceMappingURL=ToggleGroupDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroupDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <YStack paddingHorizontal=\"$4\">\n <XStack alignItems=\"center\" space=\"$10\">\n <YStack alignItems=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack alignItems=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n alignItems=\"center\"\n justifyContent=\"center\"\n space=\"$4\"\n >\n <Label paddingRight=\"$0\" justifyContent=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === 'single' ? true : undefined}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,eAAAA,EAAa,aAAAC,EAAW,cAAAC,MAAkB,wBACnD,OAAS,SAAAC,EAAmB,eAAAC,EAAa,UAAAC,EAAQ,UAAAC,MAAc,UAExD,SAASC,GAAkB,CAChC,MACE,CAACD,EAAO,kBAAkB,KACxB,CAACD,EAAO,WAAW,QAAS,MAAM,MAChC,CAACC,EAAO,WAAW,QAAS,MAAM,KAChC,CAACE,EAAqB,KAAK,QAAS,KAAK,IAAK,YAAY,YAAa,EACvE,CAACA,EAAqB,KAAK,UAAW,KAAK,IAAK,YAAY,YAAa,EAC3E,EAHCF,EAID,CAACD,EAAO,WAAW,QAAS,MAAM,KAChC,CAACG,EAAqB,KAAK,QAAS,KAAK,IAAK,YAAY,UAAW,EACrE,CAACA,EAAqB,KAAK,UAAW,KAAK,IAAK,YAAY,UAAW,EACzE,EAHCH,EAIH,EATCA,EAUH,EAXCC,EAaL,CAEA,SAASE,EAAqBC,EAI3B,CACD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAKA,EAAM,OAC7D,MACE,CAACJ,EACC,eAAeI,EAAM,cAAgB,aAAe,MAAQ,SAC5D,WAAW,QACX,eAAe,QACf,MAAM,KAEN,CAACN,EAAM,aAAa,IAAK,eAAe,UAAW,MAAMM,EAAM,KAAM,SAASC,IAC3ED,EAAM,OAAS,SAAW,SAAW,WACxC,EAFCN,EAKD,CAACC,EACC,aAAaK,EAAM,YACnB,IAAIC,EACJ,MAAMD,EAAM,KACZ,MAAMA,EAAM,KACZ,qBAAqBA,EAAM,OAAS,SAAW,GAAO,QAEtD,CAACL,EAAY,KAAK,MAAM,MAAO,WAAW,eACxC,CAACH,CAAU,EACb,EAFCG,EAAY,KAGb,CAACA,EAAY,KAAK,MAAM,QAAS,WAAW,iBAC1C,CAACJ,CAAY,EACf,EAFCI,EAAY,KAGb,CAACA,EAAY,KAAK,MAAM,OAAQ,WAAW,gBACzC,CAACF,CAAW,EACd,EAFCE,EAAY,KAGf,EAhBCA,EAiBH,EA5BCC,EA8BL",
|
|
6
|
+
"names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "ToggleGroup", "XStack", "YStack", "ToggleGroupDemo", "ToggleGroupComponent", "props", "id"]
|
|
7
7
|
}
|
|
@@ -1,40 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Label, ToggleGroup, XStack, YStack } from "tamagui";
|
|
3
|
-
function ToggleGroupDemo() {
|
|
4
|
-
return <YStack paddingHorizontal="$4"><XStack alignItems="center" space="$10">
|
|
5
|
-
<YStack alignItems="center" space="$6">
|
|
6
|
-
<ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
|
|
7
|
-
<ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
|
|
8
|
-
</YStack>
|
|
9
|
-
<XStack alignItems="center" space="$6">
|
|
10
|
-
<ToggleGroupComponent type="single" size="$3" orientation="vertical" />
|
|
11
|
-
<ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
|
|
12
|
-
</XStack>
|
|
13
|
-
</XStack></YStack>;
|
|
14
|
-
}
|
|
15
|
-
function ToggleGroupComponent(props) {
|
|
16
|
-
const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
|
|
17
|
-
return <XStack
|
|
18
|
-
flexDirection={props.orientation === "horizontal" ? "row" : "column"}
|
|
19
|
-
alignItems="center"
|
|
20
|
-
justifyContent="center"
|
|
21
|
-
space="$4"
|
|
22
|
-
>
|
|
23
|
-
<Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
|
|
24
|
-
<ToggleGroup
|
|
25
|
-
orientation={props.orientation}
|
|
26
|
-
id={id}
|
|
27
|
-
type={props.type}
|
|
28
|
-
size={props.size}
|
|
29
|
-
disableDeactivation={props.type === "single" ? true : void 0}
|
|
30
|
-
>
|
|
31
|
-
<ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
|
|
32
|
-
<ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
|
|
33
|
-
<ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
|
|
34
|
-
</ToggleGroup>
|
|
35
|
-
</XStack>;
|
|
36
|
-
}
|
|
37
|
-
export {
|
|
38
|
-
ToggleGroupDemo
|
|
39
|
-
};
|
|
1
|
+
import{AlignCenter as G,AlignLeft as C,AlignRight as L}from"@tamagui/lucide-icons";import{Label as X,ToggleGroup as $,XStack as I,YStack as T}from"tamagui";function R(){return<T paddingHorizontal="$4"><I alignItems="center"space="$10"><T alignItems="center"space="$6"><S type="single"size="$3"orientation="horizontal"/><S type="multiple"size="$4"orientation="horizontal"/></T><I alignItems="center"space="$6"><S type="single"size="$3"orientation="vertical"/><S type="multiple"size="$4"orientation="vertical"/></I></I></T>}function S(e){const k=`switch-${e.size.toString().slice(1)}-${e.type}`;return<I flexDirection={e.orientation==="horizontal"?"row":"column"}alignItems="center"justifyContent="center"space="$4"><X paddingRight="$0"justifyContent="flex-end"size={e.size}htmlFor={k}>{e.type==="single"?"Single":"Multiple"}</X><$ orientation={e.orientation}id={k}type={e.type}size={e.size}disableDeactivation={e.type==="single"?!0:void 0}><$.Item value="left"aria-label="Left aligned"><C/></$.Item><$.Item value="center"aria-label="Center aligned"><G/></$.Item><$.Item value="right"aria-label="Right aligned"><L/></$.Item></$></I>}export{R as ToggleGroupDemo};
|
|
40
2
|
//# sourceMappingURL=ToggleGroupDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroupDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <YStack paddingHorizontal=\"$4\">\n <XStack alignItems=\"center\" space=\"$10\">\n <YStack alignItems=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack alignItems=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n alignItems=\"center\"\n justifyContent=\"center\"\n space=\"$4\"\n >\n <Label paddingRight=\"$0\" justifyContent=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === 'single' ? true : undefined}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,eAAAA,EAAa,aAAAC,EAAW,cAAAC,MAAkB,wBACnD,OAAS,SAAAC,EAAmB,eAAAC,EAAa,UAAAC,EAAQ,UAAAC,MAAc,UAExD,SAASC,GAAkB,CAChC,MACE,CAACD,EAAO,kBAAkB,KACxB,CAACD,EAAO,WAAW,QAAS,MAAM,MAChC,CAACC,EAAO,WAAW,QAAS,MAAM,KAChC,CAACE,EAAqB,KAAK,QAAS,KAAK,IAAK,YAAY,YAAa,EACvE,CAACA,EAAqB,KAAK,UAAW,KAAK,IAAK,YAAY,YAAa,EAC3E,EAHCF,EAID,CAACD,EAAO,WAAW,QAAS,MAAM,KAChC,CAACG,EAAqB,KAAK,QAAS,KAAK,IAAK,YAAY,UAAW,EACrE,CAACA,EAAqB,KAAK,UAAW,KAAK,IAAK,YAAY,UAAW,EACzE,EAHCH,EAIH,EATCA,EAUH,EAXCC,EAaL,CAEA,SAASE,EAAqBC,EAI3B,CACD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAKA,EAAM,OAC7D,MACE,CAACJ,EACC,eAAeI,EAAM,cAAgB,aAAe,MAAQ,SAC5D,WAAW,QACX,eAAe,QACf,MAAM,KAEN,CAACN,EAAM,aAAa,IAAK,eAAe,UAAW,MAAMM,EAAM,KAAM,SAASC,IAC3ED,EAAM,OAAS,SAAW,SAAW,WACxC,EAFCN,EAKD,CAACC,EACC,aAAaK,EAAM,YACnB,IAAIC,EACJ,MAAMD,EAAM,KACZ,MAAMA,EAAM,KACZ,qBAAqBA,EAAM,OAAS,SAAW,GAAO,QAEtD,CAACL,EAAY,KAAK,MAAM,MAAO,WAAW,eACxC,CAACH,CAAU,EACb,EAFCG,EAAY,KAGb,CAACA,EAAY,KAAK,MAAM,QAAS,WAAW,iBAC1C,CAACJ,CAAY,EACf,EAFCI,EAAY,KAGb,CAACA,EAAY,KAAK,MAAM,OAAQ,WAAW,gBACzC,CAACF,CAAW,EACd,EAFCE,EAAY,KAGf,EAhBCA,EAiBH,EA5BCC,EA8BL",
|
|
6
|
+
"names": ["AlignCenter", "AlignLeft", "AlignRight", "Label", "ToggleGroup", "XStack", "YStack", "ToggleGroupDemo", "ToggleGroupComponent", "props", "id"]
|
|
7
7
|
}
|
package/dist/jsx/TokensDemo.js
CHANGED
|
@@ -1,78 +1,2 @@
|
|
|
1
|
-
import
|
|
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 }) => {
|
|
26
|
-
return <XGroup.Item key={key}><Button
|
|
27
|
-
size="$3"
|
|
28
|
-
theme={section === key ? "active" : null}
|
|
29
|
-
fontFamily="$silkscreen"
|
|
30
|
-
onPress={() => setSection(key)}
|
|
31
|
-
>{name}</Button></XGroup.Item>;
|
|
32
|
-
})}</XGroup>
|
|
33
|
-
{(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
|
|
34
|
-
</YStack>;
|
|
35
|
-
}
|
|
36
|
-
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);
|
|
42
|
-
return <YStack flex={1} space>
|
|
43
|
-
<H2>Sizes</H2>
|
|
44
|
-
<YStack width="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
45
|
-
(token) => {
|
|
46
|
-
return <XStack width="100%" alignItems="center" key={token}>
|
|
47
|
-
<YStack width="25%"><H3 size="$6">
|
|
48
|
-
{"$"}
|
|
49
|
-
{token}
|
|
50
|
-
</H3></YStack>
|
|
51
|
-
<YStack width="20%"><H4 size="$5">
|
|
52
|
-
{tokens[token]?.val}
|
|
53
|
-
{"px"}
|
|
54
|
-
</H4></YStack>
|
|
55
|
-
<Square
|
|
56
|
-
size={tokens[token]?.val}
|
|
57
|
-
backgroundColor="$color5"
|
|
58
|
-
{...section === "spaceNegative" && {
|
|
59
|
-
backgroundColor: "$red5",
|
|
60
|
-
size: -tokens[spaceTokensNegative.find(
|
|
61
|
-
(t) => parseFloat(t) === -parseFloat(token)
|
|
62
|
-
) ?? token]?.val
|
|
63
|
-
}}
|
|
64
|
-
{...section === "radius" && {
|
|
65
|
-
// @ts-ignore
|
|
66
|
-
size: allTokens.size[token]?.val,
|
|
67
|
-
borderRadius: tokens[token]?.val
|
|
68
|
-
}}
|
|
69
|
-
/>
|
|
70
|
-
</XStack>;
|
|
71
|
-
}
|
|
72
|
-
)}</YStack>
|
|
73
|
-
</YStack>;
|
|
74
|
-
}
|
|
75
|
-
export {
|
|
76
|
-
TokensDemo
|
|
77
|
-
};
|
|
1
|
+
import{getConfig as h}from"@tamagui/core";import{useState as H}from"react";import{Button as N,H2 as T,H3 as Y,H4 as X,Separator as I,Square as C,XGroup as F,XStack as G,YStack as S}from"tamagui";const B=[{name:"Size",key:"size"},{name:"Space",key:"space"},{name:"Space (-)",key:"spaceNegative"},{name:"Radius",key:"radius"}];function P(){const[a,u]=H("size");return<S space><F alignItems="center"alignSelf="center">{B.map(({name:t,key:s})=><F.Item key={s}><N size="$3"theme={a===s?"active":null}fontFamily="$silkscreen"onPress={()=>u(s)}>{t}</N></F.Item>)}</F>{(a==="size"||a==="spaceNegative"||a==="space"||a==="radius")&&<R section={a}/>}</S>}function R({section:a}){const u=h().tokens,t=u[a.startsWith("space")?"space":a],s=Object.keys(t).sort((e,o)=>parseFloat(e)>parseFloat(o)?1:-1),$=s.filter(e=>parseFloat(e)>=0),m=s.filter(e=>parseFloat(e)<0).sort((e,o)=>parseFloat(e)>parseFloat(o)?-1:1);return<S flex={1}space><T>Sizes</T><S width="100%"space="$2"separator={<I/>}>{(a==="spaceNegative"?m:$).map(e=><G width="100%"alignItems="center"key={e}><S width="25%"><Y size="$6">${e}</Y></S><S width="20%"><X size="$5">{t[e]?.val}px</X></S><C size={t[e]?.val}backgroundColor="$color5"{...a==="spaceNegative"&&{backgroundColor:"$red5",size:-t[m.find(o=>parseFloat(o)===-parseFloat(e))??e]?.val}}{...a==="radius"&&{size:u.size[e]?.val,borderRadius:t[e]?.val}}/></G>)}</S></S>}export{P as TokensDemo};
|
|
78
2
|
//# sourceMappingURL=TokensDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup alignItems=\"center\" alignSelf=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0)\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack flex={1} space>\n <H2>Sizes</H2>\n <YStack width=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack width=\"100%\" alignItems=\"center\" key={token}>\n <YStack width=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack width=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n backgroundColor=\"$color5\"\n {...(section === 'spaceNegative' && {\n backgroundColor: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n borderRadius: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAiB,aAAAA,MAAiB,gBAClC,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,MAAAC,EAAI,MAAAC,EAAI,MAAAC,EAAI,aAAAC,EAAW,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAI9E,MAAMC,EAA6C,CACjD,CACE,KAAM,OACN,IAAK,MACP,EACA,CACE,KAAM,QACN,IAAK,OACP,EACA,CACE,KAAM,YACN,IAAK,eACP,EACA,CACE,KAAM,SACN,IAAK,QACP,CACF,EAEO,SAASC,GAAa,CAC3B,KAAM,CAACC,EAASC,CAAU,EAAIb,EAAkB,MAAM,EAEtD,MACE,CAACS,EAAO,MACN,CAACF,EAAO,WAAW,QAAS,UAAU,UACnCG,EAAS,IAAI,CAAC,CAAE,KAAAI,EAAM,IAAAC,CAAI,IAEvB,CAACR,EAAO,KAAK,KAAKQ,GAChB,CAACd,EACC,KAAK,IACL,OAAOW,IAAYG,EAAM,SAAW,KACpC,WAAW,aACX,SAAS,IAAMF,EAAWE,CAAG,IAE5BD,EACH,EAPCb,EAQH,EATCM,EAAO,KAWX,EACH,EAfCA,IAiBCK,IAAY,QACZA,IAAY,iBACZA,IAAY,SACZA,IAAY,WAAa,CAACI,EAAY,SAASJ,EAAS,GAC5D,EAtBCH,EAwBL,CAEA,SAASO,EAAY,CAAE,QAAAJ,CAAQ,EAAyB,CACtD,MAAMK,EAAYlB,EAAU,EAAE,OACxBmB,EAASD,EAAUL,EAAQ,WAAW,OAAO,EAAI,QAAUA,CAAO,EAClEO,EAAK,OAAO,KAAKD,CAAM,EAAE,KAAK,CAACE,EAAGC,IAAO,WAAWD,CAAC,EAAI,WAAWC,CAAC,EAAI,EAAI,EAAG,EAChFC,EAAcH,EAAG,OAAQI,GAAM,WAAWA,CAAC,GAAK,CAAC,EACjDC,EAAsBL,EACzB,OAAQI,GAAM,WAAWA,CAAC,EAAI,CAAC,EAC/B,KAAK,CAACH,EAAGC,IAAO,WAAWD,CAAC,EAAI,WAAWC,CAAC,EAAI,GAAK,CAAE,EAE1D,MACE,CAACZ,EAAO,MAAM,EAAG,MACf,CAACP,EAAG,KAAK,EAARA,EACD,CAACO,EAAO,MAAM,MAAO,MAAM,IAAK,WAAW,CAACJ,CAAU,MAClDO,IAAY,gBAAkBY,EAAsBF,GAAa,IAChEG,GAEG,CAACjB,EAAO,MAAM,MAAO,WAAW,QAAS,KAAKiB,GAC5C,CAAChB,EAAO,MAAM,MACZ,CAACN,EAAG,KAAK,KAAK,EAAEsB,EAAM,EAArBtB,EACH,EAFCM,EAGD,CAACA,EAAO,MAAM,MACZ,CAACL,EAAG,KAAK,MAAMc,EAAOO,CAAK,GAAG,IAAI,EAAE,EAAnCrB,EACH,EAFCK,EAGD,CAACH,EACC,MAAMY,EAAOO,CAAK,GAAG,IACrB,gBAAgB,aACXb,IAAY,iBAAmB,CAClC,gBAAiB,QACjB,KAAM,CAACM,EACLM,EAAoB,KACjBD,GAAM,WAAWA,CAAC,IAAM,CAAC,WAAWE,CAAK,CAC5C,GAAKA,CACP,GAAG,GACL,MACKb,IAAY,UAAY,CAE3B,KAAMK,EAAU,KAAKQ,CAAK,GAAG,IAC7B,aAAcP,EAAOO,CAAK,GAAG,GAC/B,EACF,EACF,EAxBCjB,EA2BP,EACF,EAhCCC,EAiCH,EAnCCA,EAqCL",
|
|
6
|
+
"names": ["getConfig", "useState", "Button", "H2", "H3", "H4", "Separator", "Square", "XGroup", "XStack", "YStack", "sections", "TokensDemo", "section", "setSection", "name", "key", "SizeSection", "allTokens", "tokens", "st", "a", "b", "spaceTokens", "t", "spaceTokensNegative", "token"]
|
|
7
7
|
}
|
package/dist/jsx/TokensDemo.mjs
CHANGED
|
@@ -1,78 +1,2 @@
|
|
|
1
|
-
import
|
|
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 }) => {
|
|
26
|
-
return <XGroup.Item key={key}><Button
|
|
27
|
-
size="$3"
|
|
28
|
-
theme={section === key ? "active" : null}
|
|
29
|
-
fontFamily="$silkscreen"
|
|
30
|
-
onPress={() => setSection(key)}
|
|
31
|
-
>{name}</Button></XGroup.Item>;
|
|
32
|
-
})}</XGroup>
|
|
33
|
-
{(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
|
|
34
|
-
</YStack>;
|
|
35
|
-
}
|
|
36
|
-
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);
|
|
42
|
-
return <YStack flex={1} space>
|
|
43
|
-
<H2>Sizes</H2>
|
|
44
|
-
<YStack width="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
|
|
45
|
-
(token) => {
|
|
46
|
-
return <XStack width="100%" alignItems="center" key={token}>
|
|
47
|
-
<YStack width="25%"><H3 size="$6">
|
|
48
|
-
{"$"}
|
|
49
|
-
{token}
|
|
50
|
-
</H3></YStack>
|
|
51
|
-
<YStack width="20%"><H4 size="$5">
|
|
52
|
-
{tokens[token]?.val}
|
|
53
|
-
{"px"}
|
|
54
|
-
</H4></YStack>
|
|
55
|
-
<Square
|
|
56
|
-
size={tokens[token]?.val}
|
|
57
|
-
backgroundColor="$color5"
|
|
58
|
-
{...section === "spaceNegative" && {
|
|
59
|
-
backgroundColor: "$red5",
|
|
60
|
-
size: -tokens[spaceTokensNegative.find(
|
|
61
|
-
(t) => parseFloat(t) === -parseFloat(token)
|
|
62
|
-
) ?? token]?.val
|
|
63
|
-
}}
|
|
64
|
-
{...section === "radius" && {
|
|
65
|
-
// @ts-ignore
|
|
66
|
-
size: allTokens.size[token]?.val,
|
|
67
|
-
borderRadius: tokens[token]?.val
|
|
68
|
-
}}
|
|
69
|
-
/>
|
|
70
|
-
</XStack>;
|
|
71
|
-
}
|
|
72
|
-
)}</YStack>
|
|
73
|
-
</YStack>;
|
|
74
|
-
}
|
|
75
|
-
export {
|
|
76
|
-
TokensDemo
|
|
77
|
-
};
|
|
1
|
+
import{getConfig as h}from"@tamagui/core";import{useState as H}from"react";import{Button as N,H2 as T,H3 as Y,H4 as X,Separator as I,Square as C,XGroup as F,XStack as G,YStack as S}from"tamagui";const B=[{name:"Size",key:"size"},{name:"Space",key:"space"},{name:"Space (-)",key:"spaceNegative"},{name:"Radius",key:"radius"}];function P(){const[a,u]=H("size");return<S space><F alignItems="center"alignSelf="center">{B.map(({name:t,key:s})=><F.Item key={s}><N size="$3"theme={a===s?"active":null}fontFamily="$silkscreen"onPress={()=>u(s)}>{t}</N></F.Item>)}</F>{(a==="size"||a==="spaceNegative"||a==="space"||a==="radius")&&<R section={a}/>}</S>}function R({section:a}){const u=h().tokens,t=u[a.startsWith("space")?"space":a],s=Object.keys(t).sort((e,o)=>parseFloat(e)>parseFloat(o)?1:-1),$=s.filter(e=>parseFloat(e)>=0),m=s.filter(e=>parseFloat(e)<0).sort((e,o)=>parseFloat(e)>parseFloat(o)?-1:1);return<S flex={1}space><T>Sizes</T><S width="100%"space="$2"separator={<I/>}>{(a==="spaceNegative"?m:$).map(e=><G width="100%"alignItems="center"key={e}><S width="25%"><Y size="$6">${e}</Y></S><S width="20%"><X size="$5">{t[e]?.val}px</X></S><C size={t[e]?.val}backgroundColor="$color5"{...a==="spaceNegative"&&{backgroundColor:"$red5",size:-t[m.find(o=>parseFloat(o)===-parseFloat(e))??e]?.val}}{...a==="radius"&&{size:u.size[e]?.val,borderRadius:t[e]?.val}}/></G>)}</S></S>}export{P as TokensDemo};
|
|
78
2
|
//# sourceMappingURL=TokensDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TokensDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n {\n name: `Size`,\n key: `size`,\n },\n {\n name: `Space`,\n key: 'space',\n },\n {\n name: `Space (-)`,\n key: `spaceNegative`,\n },\n {\n name: `Radius`,\n key: `radius`,\n },\n]\n\nexport function TokensDemo() {\n const [section, setSection] = useState<Section>('size')\n\n return (\n <YStack space>\n <XGroup alignItems=\"center\" alignSelf=\"center\">\n {sections.map(({ name, key }) => {\n return (\n <XGroup.Item key={key}>\n <Button\n size=\"$3\"\n theme={section === key ? 'active' : null}\n fontFamily=\"$silkscreen\"\n onPress={() => setSection(key)}\n >\n {name}\n </Button>\n </XGroup.Item>\n )\n })}\n </XGroup>\n\n {(section === 'size' ||\n section === 'spaceNegative' ||\n section === 'space' ||\n section === 'radius') && <SizeSection section={section} />}\n </YStack>\n )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n const allTokens = getConfig().tokens\n const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n const spaceTokensNegative = st\n .filter((t) => parseFloat(t) < 0)\n .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n return (\n <YStack flex={1} space>\n <H2>Sizes</H2>\n <YStack width=\"100%\" space=\"$2\" separator={<Separator />}>\n {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n (token) => {\n return (\n <XStack width=\"100%\" alignItems=\"center\" key={token}>\n <YStack width=\"25%\">\n <H3 size=\"$6\">${token}</H3>\n </YStack>\n <YStack width=\"20%\">\n <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n </YStack>\n <Square\n size={tokens[token]?.val}\n backgroundColor=\"$color5\"\n {...(section === 'spaceNegative' && {\n backgroundColor: '$red5',\n size: -tokens[\n spaceTokensNegative.find(\n (t) => parseFloat(t) === -parseFloat(token)\n ) ?? token\n ]?.val,\n })}\n {...(section === 'radius' && {\n // @ts-ignore\n size: allTokens.size[token]?.val,\n borderRadius: tokens[token]?.val,\n })}\n />\n </XStack>\n )\n }\n )}\n </YStack>\n </YStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAiB,aAAAA,MAAiB,gBAClC,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,MAAAC,EAAI,MAAAC,EAAI,MAAAC,EAAI,aAAAC,EAAW,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAI9E,MAAMC,EAA6C,CACjD,CACE,KAAM,OACN,IAAK,MACP,EACA,CACE,KAAM,QACN,IAAK,OACP,EACA,CACE,KAAM,YACN,IAAK,eACP,EACA,CACE,KAAM,SACN,IAAK,QACP,CACF,EAEO,SAASC,GAAa,CAC3B,KAAM,CAACC,EAASC,CAAU,EAAIb,EAAkB,MAAM,EAEtD,MACE,CAACS,EAAO,MACN,CAACF,EAAO,WAAW,QAAS,UAAU,UACnCG,EAAS,IAAI,CAAC,CAAE,KAAAI,EAAM,IAAAC,CAAI,IAEvB,CAACR,EAAO,KAAK,KAAKQ,GAChB,CAACd,EACC,KAAK,IACL,OAAOW,IAAYG,EAAM,SAAW,KACpC,WAAW,aACX,SAAS,IAAMF,EAAWE,CAAG,IAE5BD,EACH,EAPCb,EAQH,EATCM,EAAO,KAWX,EACH,EAfCA,IAiBCK,IAAY,QACZA,IAAY,iBACZA,IAAY,SACZA,IAAY,WAAa,CAACI,EAAY,SAASJ,EAAS,GAC5D,EAtBCH,EAwBL,CAEA,SAASO,EAAY,CAAE,QAAAJ,CAAQ,EAAyB,CACtD,MAAMK,EAAYlB,EAAU,EAAE,OACxBmB,EAASD,EAAUL,EAAQ,WAAW,OAAO,EAAI,QAAUA,CAAO,EAClEO,EAAK,OAAO,KAAKD,CAAM,EAAE,KAAK,CAACE,EAAGC,IAAO,WAAWD,CAAC,EAAI,WAAWC,CAAC,EAAI,EAAI,EAAG,EAChFC,EAAcH,EAAG,OAAQI,GAAM,WAAWA,CAAC,GAAK,CAAC,EACjDC,EAAsBL,EACzB,OAAQI,GAAM,WAAWA,CAAC,EAAI,CAAC,EAC/B,KAAK,CAACH,EAAGC,IAAO,WAAWD,CAAC,EAAI,WAAWC,CAAC,EAAI,GAAK,CAAE,EAE1D,MACE,CAACZ,EAAO,MAAM,EAAG,MACf,CAACP,EAAG,KAAK,EAARA,EACD,CAACO,EAAO,MAAM,MAAO,MAAM,IAAK,WAAW,CAACJ,CAAU,MAClDO,IAAY,gBAAkBY,EAAsBF,GAAa,IAChEG,GAEG,CAACjB,EAAO,MAAM,MAAO,WAAW,QAAS,KAAKiB,GAC5C,CAAChB,EAAO,MAAM,MACZ,CAACN,EAAG,KAAK,KAAK,EAAEsB,EAAM,EAArBtB,EACH,EAFCM,EAGD,CAACA,EAAO,MAAM,MACZ,CAACL,EAAG,KAAK,MAAMc,EAAOO,CAAK,GAAG,IAAI,EAAE,EAAnCrB,EACH,EAFCK,EAGD,CAACH,EACC,MAAMY,EAAOO,CAAK,GAAG,IACrB,gBAAgB,aACXb,IAAY,iBAAmB,CAClC,gBAAiB,QACjB,KAAM,CAACM,EACLM,EAAoB,KACjBD,GAAM,WAAWA,CAAC,IAAM,CAAC,WAAWE,CAAK,CAC5C,GAAKA,CACP,GAAG,GACL,MACKb,IAAY,UAAY,CAE3B,KAAMK,EAAU,KAAKQ,CAAK,GAAG,IAC7B,aAAcP,EAAOO,CAAK,GAAG,GAC/B,EACF,EACF,EAxBCjB,EA2BP,EACF,EAhCCC,EAiCH,EAnCCA,EAqCL",
|
|
6
|
+
"names": ["getConfig", "useState", "Button", "H2", "H3", "H4", "Separator", "Square", "XGroup", "XStack", "YStack", "sections", "TokensDemo", "section", "setSection", "name", "key", "SizeSection", "allTokens", "tokens", "st", "a", "b", "spaceTokens", "t", "spaceTokensNegative", "token"]
|
|
7
7
|
}
|
package/dist/jsx/TooltipDemo.js
CHANGED
|
@@ -1,64 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ChevronDown,
|
|
3
|
-
ChevronLeft,
|
|
4
|
-
ChevronRight,
|
|
5
|
-
ChevronUp,
|
|
6
|
-
Circle
|
|
7
|
-
} from "@tamagui/lucide-icons";
|
|
8
|
-
import {
|
|
9
|
-
Button,
|
|
10
|
-
Paragraph,
|
|
11
|
-
Theme,
|
|
12
|
-
Tooltip,
|
|
13
|
-
TooltipGroup,
|
|
14
|
-
XStack,
|
|
15
|
-
YStack
|
|
16
|
-
} from "tamagui";
|
|
17
|
-
function TooltipDemo() {
|
|
18
|
-
return <TooltipGroup delay={{ open: 3e3, close: 100 }}><YStack space="$2" alignSelf="center">
|
|
19
|
-
<XStack space="$2">
|
|
20
|
-
<Demo groupId="0" placement="top-end" Icon={Circle} />
|
|
21
|
-
<Demo groupId="1" placement="top" Icon={ChevronUp} />
|
|
22
|
-
<Demo groupId="2" placement="top-start" Icon={Circle} />
|
|
23
|
-
</XStack>
|
|
24
|
-
<XStack space="$2">
|
|
25
|
-
<Demo groupId="3" placement="left" Icon={ChevronLeft} />
|
|
26
|
-
<YStack flex={1} />
|
|
27
|
-
<Demo groupId="4" placement="right" Icon={ChevronRight} />
|
|
28
|
-
</XStack>
|
|
29
|
-
<XStack space="$2">
|
|
30
|
-
<Demo groupId="5" placement="bottom-end" Icon={Circle} />
|
|
31
|
-
<Demo groupId="6" placement="bottom" Icon={ChevronDown} />
|
|
32
|
-
<Demo groupId="7" placement="bottom-start" Icon={Circle} />
|
|
33
|
-
</XStack>
|
|
34
|
-
</YStack></TooltipGroup>;
|
|
35
|
-
}
|
|
36
|
-
function Demo({ Icon, ...props }) {
|
|
37
|
-
return <Tooltip {...props}>
|
|
38
|
-
<Tooltip.Trigger><Button icon={Icon} circular /></Tooltip.Trigger>
|
|
39
|
-
<Theme inverse><Tooltip.Content
|
|
40
|
-
enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
|
|
41
|
-
exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
|
|
42
|
-
scale={1}
|
|
43
|
-
x={0}
|
|
44
|
-
y={0}
|
|
45
|
-
opacity={1}
|
|
46
|
-
animation={[
|
|
47
|
-
"quick",
|
|
48
|
-
{
|
|
49
|
-
opacity: {
|
|
50
|
-
overshootClamping: true
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
]}
|
|
54
|
-
>
|
|
55
|
-
<Tooltip.Arrow />
|
|
56
|
-
<Paragraph size="$2" lineHeight="$1">Hello world</Paragraph>
|
|
57
|
-
</Tooltip.Content></Theme>
|
|
58
|
-
</Tooltip>;
|
|
59
|
-
}
|
|
60
|
-
export {
|
|
61
|
-
Demo,
|
|
62
|
-
TooltipDemo
|
|
63
|
-
};
|
|
1
|
+
import{ChevronDown as v,ChevronLeft as $,ChevronRight as P,ChevronUp as X,Circle as s}from"@tamagui/lucide-icons";import{Button as D,Paragraph as G,Theme as H,Tooltip as T,TooltipGroup as R,XStack as S,YStack as C}from"tamagui";function L(){return<R delay={{open:3e3,close:100}}><C space="$2"alignSelf="center"><S space="$2"><I groupId="0"placement="top-end"Icon={s}/><I groupId="1"placement="top"Icon={X}/><I groupId="2"placement="top-start"Icon={s}/></S><S space="$2"><I groupId="3"placement="left"Icon={$}/><C flex={1}/><I groupId="4"placement="right"Icon={P}/></S><S space="$2"><I groupId="5"placement="bottom-end"Icon={s}/><I groupId="6"placement="bottom"Icon={v}/><I groupId="7"placement="bottom-start"Icon={s}/></S></C></R>}function I({Icon:k,...x}){return<T{...x}><T.Trigger><D icon={k}circular/></T.Trigger><H inverse><T.Content enterStyle={{x:0,y:-5,opacity:0,scale:.9}}exitStyle={{x:0,y:-5,opacity:0,scale:.9}}scale={1}x={0}y={0}opacity={1}animation={["quick",{opacity:{overshootClamping:!0}}]}><T.Arrow/><G size="$2"lineHeight="$1">Hello world</G></T.Content></H></T>}export{I as Demo,L as TooltipDemo};
|
|
64
2
|
//# sourceMappingURL=TooltipDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TooltipDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n ChevronUp,\n Circle,\n} from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n Button,\n Paragraph,\n Theme,\n Tooltip,\n TooltipGroup,\n TooltipProps,\n XStack,\n YStack,\n} from 'tamagui'\n\nexport function TooltipDemo() {\n return (\n <TooltipGroup delay={{ open: 3000, close: 100 }}>\n <YStack space=\"$2\" alignSelf=\"center\">\n <XStack space=\"$2\">\n <Demo groupId=\"0\" placement=\"top-end\" Icon={Circle} />\n <Demo groupId=\"1\" placement=\"top\" Icon={ChevronUp} />\n <Demo groupId=\"2\" placement=\"top-start\" Icon={Circle} />\n </XStack>\n <XStack space=\"$2\">\n <Demo groupId=\"3\" placement=\"left\" Icon={ChevronLeft} />\n <YStack flex={1} />\n <Demo groupId=\"4\" placement=\"right\" Icon={ChevronRight} />\n </XStack>\n <XStack space=\"$2\">\n <Demo groupId=\"5\" placement=\"bottom-end\" Icon={Circle} />\n <Demo groupId=\"6\" placement=\"bottom\" Icon={ChevronDown} />\n <Demo groupId=\"7\" placement=\"bottom-start\" Icon={Circle} />\n </XStack>\n </YStack>\n </TooltipGroup>\n )\n}\n\nexport function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {\n return (\n <Tooltip {...props}>\n <Tooltip.Trigger>\n <Button icon={Icon} circular />\n </Tooltip.Trigger>\n <Theme inverse>\n <Tooltip.Content\n enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}\n exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}\n scale={1}\n x={0}\n y={0}\n opacity={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n >\n <Tooltip.Arrow />\n <Paragraph size=\"$2\" lineHeight=\"$1\">\n Hello world\n </Paragraph>\n </Tooltip.Content>\n </Theme>\n </Tooltip>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OACE,eAAAA,EACA,eAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,UAAAC,MACK,wBAEP,OACE,UAAAC,EACA,aAAAC,EACA,SAAAC,EACA,WAAAC,EACA,gBAAAC,EAEA,UAAAC,EACA,UAAAC,MACK,UAEA,SAASC,GAAc,CAC5B,MACE,CAACH,EAAa,OAAO,CAAE,KAAM,IAAM,MAAO,GAAI,GAC5C,CAACE,EAAO,MAAM,IAAK,UAAU,SAC3B,CAACD,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,SAAU,MAAMT,EAAQ,EACpD,CAACS,EAAK,QAAQ,GAAI,UAAU,KAAM,MAAMV,EAAW,EACnD,CAACU,EAAK,QAAQ,GAAI,UAAU,WAAY,MAAMT,EAAQ,EACxD,EAJCM,EAKD,CAACA,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,MAAO,MAAMZ,EAAa,EACtD,CAACU,EAAO,MAAM,EAAG,EACjB,CAACE,EAAK,QAAQ,GAAI,UAAU,OAAQ,MAAMX,EAAc,EAC1D,EAJCQ,EAKD,CAACA,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,YAAa,MAAMT,EAAQ,EACvD,CAACS,EAAK,QAAQ,GAAI,UAAU,QAAS,MAAMb,EAAa,EACxD,CAACa,EAAK,QAAQ,GAAI,UAAU,cAAe,MAAMT,EAAQ,EAC3D,EAJCM,EAKH,EAhBCC,EAiBH,EAlBCF,EAoBL,CAEO,SAASI,EAAK,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAkC,CACtE,MACE,CAACP,KAAYO,GACX,CAACP,EAAQ,QACP,CAACH,EAAO,MAAMS,EAAM,QAAS,EAC/B,EAFCN,EAAQ,QAGT,CAACD,EAAM,QACL,CAACC,EAAQ,QACP,YAAY,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EAClD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EACjD,OAAO,EACP,GAAG,EACH,GAAG,EACH,SAAS,EACT,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,GAEA,CAACA,EAAQ,KAAM,EACf,CAACF,EAAU,KAAK,IAAK,WAAW,KAAK,WAErC,EAFCA,EAGH,EApBCE,EAAQ,QAqBX,EAtBCD,EAuBH,EA3BCC,EA6BL",
|
|
6
|
+
"names": ["ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Circle", "Button", "Paragraph", "Theme", "Tooltip", "TooltipGroup", "XStack", "YStack", "TooltipDemo", "Demo", "Icon", "props"]
|
|
7
7
|
}
|
package/dist/jsx/TooltipDemo.mjs
CHANGED
|
@@ -1,64 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ChevronDown,
|
|
3
|
-
ChevronLeft,
|
|
4
|
-
ChevronRight,
|
|
5
|
-
ChevronUp,
|
|
6
|
-
Circle
|
|
7
|
-
} from "@tamagui/lucide-icons";
|
|
8
|
-
import {
|
|
9
|
-
Button,
|
|
10
|
-
Paragraph,
|
|
11
|
-
Theme,
|
|
12
|
-
Tooltip,
|
|
13
|
-
TooltipGroup,
|
|
14
|
-
XStack,
|
|
15
|
-
YStack
|
|
16
|
-
} from "tamagui";
|
|
17
|
-
function TooltipDemo() {
|
|
18
|
-
return <TooltipGroup delay={{ open: 3e3, close: 100 }}><YStack space="$2" alignSelf="center">
|
|
19
|
-
<XStack space="$2">
|
|
20
|
-
<Demo groupId="0" placement="top-end" Icon={Circle} />
|
|
21
|
-
<Demo groupId="1" placement="top" Icon={ChevronUp} />
|
|
22
|
-
<Demo groupId="2" placement="top-start" Icon={Circle} />
|
|
23
|
-
</XStack>
|
|
24
|
-
<XStack space="$2">
|
|
25
|
-
<Demo groupId="3" placement="left" Icon={ChevronLeft} />
|
|
26
|
-
<YStack flex={1} />
|
|
27
|
-
<Demo groupId="4" placement="right" Icon={ChevronRight} />
|
|
28
|
-
</XStack>
|
|
29
|
-
<XStack space="$2">
|
|
30
|
-
<Demo groupId="5" placement="bottom-end" Icon={Circle} />
|
|
31
|
-
<Demo groupId="6" placement="bottom" Icon={ChevronDown} />
|
|
32
|
-
<Demo groupId="7" placement="bottom-start" Icon={Circle} />
|
|
33
|
-
</XStack>
|
|
34
|
-
</YStack></TooltipGroup>;
|
|
35
|
-
}
|
|
36
|
-
function Demo({ Icon, ...props }) {
|
|
37
|
-
return <Tooltip {...props}>
|
|
38
|
-
<Tooltip.Trigger><Button icon={Icon} circular /></Tooltip.Trigger>
|
|
39
|
-
<Theme inverse><Tooltip.Content
|
|
40
|
-
enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
|
|
41
|
-
exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
|
|
42
|
-
scale={1}
|
|
43
|
-
x={0}
|
|
44
|
-
y={0}
|
|
45
|
-
opacity={1}
|
|
46
|
-
animation={[
|
|
47
|
-
"quick",
|
|
48
|
-
{
|
|
49
|
-
opacity: {
|
|
50
|
-
overshootClamping: true
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
]}
|
|
54
|
-
>
|
|
55
|
-
<Tooltip.Arrow />
|
|
56
|
-
<Paragraph size="$2" lineHeight="$1">Hello world</Paragraph>
|
|
57
|
-
</Tooltip.Content></Theme>
|
|
58
|
-
</Tooltip>;
|
|
59
|
-
}
|
|
60
|
-
export {
|
|
61
|
-
Demo,
|
|
62
|
-
TooltipDemo
|
|
63
|
-
};
|
|
1
|
+
import{ChevronDown as v,ChevronLeft as $,ChevronRight as P,ChevronUp as X,Circle as s}from"@tamagui/lucide-icons";import{Button as D,Paragraph as G,Theme as H,Tooltip as T,TooltipGroup as R,XStack as S,YStack as C}from"tamagui";function L(){return<R delay={{open:3e3,close:100}}><C space="$2"alignSelf="center"><S space="$2"><I groupId="0"placement="top-end"Icon={s}/><I groupId="1"placement="top"Icon={X}/><I groupId="2"placement="top-start"Icon={s}/></S><S space="$2"><I groupId="3"placement="left"Icon={$}/><C flex={1}/><I groupId="4"placement="right"Icon={P}/></S><S space="$2"><I groupId="5"placement="bottom-end"Icon={s}/><I groupId="6"placement="bottom"Icon={v}/><I groupId="7"placement="bottom-start"Icon={s}/></S></C></R>}function I({Icon:k,...x}){return<T{...x}><T.Trigger><D icon={k}circular/></T.Trigger><H inverse><T.Content enterStyle={{x:0,y:-5,opacity:0,scale:.9}}exitStyle={{x:0,y:-5,opacity:0,scale:.9}}scale={1}x={0}y={0}opacity={1}animation={["quick",{opacity:{overshootClamping:!0}}]}><T.Arrow/><G size="$2"lineHeight="$1">Hello world</G></T.Content></H></T>}export{I as Demo,L as TooltipDemo};
|
|
64
2
|
//# sourceMappingURL=TooltipDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TooltipDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n ChevronUp,\n Circle,\n} from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n Button,\n Paragraph,\n Theme,\n Tooltip,\n TooltipGroup,\n TooltipProps,\n XStack,\n YStack,\n} from 'tamagui'\n\nexport function TooltipDemo() {\n return (\n <TooltipGroup delay={{ open: 3000, close: 100 }}>\n <YStack space=\"$2\" alignSelf=\"center\">\n <XStack space=\"$2\">\n <Demo groupId=\"0\" placement=\"top-end\" Icon={Circle} />\n <Demo groupId=\"1\" placement=\"top\" Icon={ChevronUp} />\n <Demo groupId=\"2\" placement=\"top-start\" Icon={Circle} />\n </XStack>\n <XStack space=\"$2\">\n <Demo groupId=\"3\" placement=\"left\" Icon={ChevronLeft} />\n <YStack flex={1} />\n <Demo groupId=\"4\" placement=\"right\" Icon={ChevronRight} />\n </XStack>\n <XStack space=\"$2\">\n <Demo groupId=\"5\" placement=\"bottom-end\" Icon={Circle} />\n <Demo groupId=\"6\" placement=\"bottom\" Icon={ChevronDown} />\n <Demo groupId=\"7\" placement=\"bottom-start\" Icon={Circle} />\n </XStack>\n </YStack>\n </TooltipGroup>\n )\n}\n\nexport function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {\n return (\n <Tooltip {...props}>\n <Tooltip.Trigger>\n <Button icon={Icon} circular />\n </Tooltip.Trigger>\n <Theme inverse>\n <Tooltip.Content\n enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}\n exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}\n scale={1}\n x={0}\n y={0}\n opacity={1}\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n >\n <Tooltip.Arrow />\n <Paragraph size=\"$2\" lineHeight=\"$1\">\n Hello world\n </Paragraph>\n </Tooltip.Content>\n </Theme>\n </Tooltip>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OACE,eAAAA,EACA,eAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,UAAAC,MACK,wBAEP,OACE,UAAAC,EACA,aAAAC,EACA,SAAAC,EACA,WAAAC,EACA,gBAAAC,EAEA,UAAAC,EACA,UAAAC,MACK,UAEA,SAASC,GAAc,CAC5B,MACE,CAACH,EAAa,OAAO,CAAE,KAAM,IAAM,MAAO,GAAI,GAC5C,CAACE,EAAO,MAAM,IAAK,UAAU,SAC3B,CAACD,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,SAAU,MAAMT,EAAQ,EACpD,CAACS,EAAK,QAAQ,GAAI,UAAU,KAAM,MAAMV,EAAW,EACnD,CAACU,EAAK,QAAQ,GAAI,UAAU,WAAY,MAAMT,EAAQ,EACxD,EAJCM,EAKD,CAACA,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,MAAO,MAAMZ,EAAa,EACtD,CAACU,EAAO,MAAM,EAAG,EACjB,CAACE,EAAK,QAAQ,GAAI,UAAU,OAAQ,MAAMX,EAAc,EAC1D,EAJCQ,EAKD,CAACA,EAAO,MAAM,KACZ,CAACG,EAAK,QAAQ,GAAI,UAAU,YAAa,MAAMT,EAAQ,EACvD,CAACS,EAAK,QAAQ,GAAI,UAAU,QAAS,MAAMb,EAAa,EACxD,CAACa,EAAK,QAAQ,GAAI,UAAU,cAAe,MAAMT,EAAQ,EAC3D,EAJCM,EAKH,EAhBCC,EAiBH,EAlBCF,EAoBL,CAEO,SAASI,EAAK,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAkC,CACtE,MACE,CAACP,KAAYO,GACX,CAACP,EAAQ,QACP,CAACH,EAAO,MAAMS,EAAM,QAAS,EAC/B,EAFCN,EAAQ,QAGT,CAACD,EAAM,QACL,CAACC,EAAQ,QACP,YAAY,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EAClD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,EAAI,EACjD,OAAO,EACP,GAAG,EACH,GAAG,EACH,SAAS,EACT,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,GAEA,CAACA,EAAQ,KAAM,EACf,CAACF,EAAU,KAAK,IAAK,WAAW,KAAK,WAErC,EAFCA,EAGH,EApBCE,EAAQ,QAqBX,EAtBCD,EAuBH,EA3BCC,EA6BL",
|
|
6
|
+
"names": ["ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Circle", "Button", "Paragraph", "Theme", "Tooltip", "TooltipGroup", "XStack", "YStack", "TooltipDemo", "Demo", "Icon", "props"]
|
|
7
7
|
}
|