@tamagui/demos 1.61.2 → 1.62.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AccordionDemo.js +6 -12
- package/dist/cjs/AccordionDemo.js.map +1 -1
- package/dist/cjs/AccordionDemo.native.js +44 -0
- package/dist/cjs/AccordionDemo.native.js.map +6 -0
- package/dist/cjs/AddThemeDemo.js +9 -17
- package/dist/cjs/AddThemeDemo.js.map +1 -1
- package/dist/cjs/AddThemeDemo.native.js +53 -0
- package/dist/cjs/AddThemeDemo.native.js.map +6 -0
- package/dist/cjs/AlertDialogDemo.js +14 -19
- package/dist/cjs/AlertDialogDemo.js.map +1 -1
- package/dist/cjs/AlertDialogDemo.native.js +73 -0
- package/dist/cjs/AlertDialogDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsDemo.js +9 -20
- package/dist/cjs/AnimationsDemo.js.map +1 -1
- package/dist/cjs/AnimationsDemo.native.js +105 -0
- package/dist/cjs/AnimationsDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsEnterDemo.js +9 -22
- package/dist/cjs/AnimationsEnterDemo.js.map +1 -1
- package/dist/cjs/AnimationsEnterDemo.native.js +52 -0
- package/dist/cjs/AnimationsEnterDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsHoverDemo.js +6 -12
- package/dist/cjs/AnimationsHoverDemo.js.map +1 -1
- package/dist/cjs/AnimationsHoverDemo.native.js +46 -0
- package/dist/cjs/AnimationsHoverDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsPresenceDemo.js +15 -33
- package/dist/cjs/AnimationsPresenceDemo.js.map +1 -1
- package/dist/cjs/AnimationsPresenceDemo.native.js +91 -0
- package/dist/cjs/AnimationsPresenceDemo.native.js.map +6 -0
- package/dist/cjs/AnimationsTimingDemo.js +6 -12
- package/dist/cjs/AnimationsTimingDemo.js.map +1 -1
- package/dist/cjs/AnimationsTimingDemo.native.js +45 -0
- package/dist/cjs/AnimationsTimingDemo.native.js.map +6 -0
- package/dist/cjs/AvatarDemo.js +8 -13
- package/dist/cjs/AvatarDemo.js.map +1 -1
- package/dist/cjs/AvatarDemo.native.js +50 -0
- package/dist/cjs/AvatarDemo.native.js.map +6 -0
- package/dist/cjs/BuildAButtonDemo.js +7 -13
- package/dist/cjs/BuildAButtonDemo.js.map +1 -1
- package/dist/cjs/BuildAButtonDemo.native.js +62 -0
- package/dist/cjs/BuildAButtonDemo.native.js.map +6 -0
- package/dist/cjs/ButtonDemo.js +9 -15
- package/dist/cjs/ButtonDemo.js.map +1 -1
- package/dist/cjs/ButtonDemo.native.js +44 -0
- package/dist/cjs/ButtonDemo.native.js.map +6 -0
- package/dist/cjs/CardDemo.js +10 -15
- package/dist/cjs/CardDemo.js.map +1 -1
- package/dist/cjs/CardDemo.native.js +69 -0
- package/dist/cjs/CardDemo.native.js.map +6 -0
- package/dist/cjs/CheckboxDemo.js +7 -13
- package/dist/cjs/CheckboxDemo.js.map +1 -1
- package/dist/cjs/CheckboxDemo.native.js +42 -0
- package/dist/cjs/CheckboxDemo.native.js.map +6 -0
- package/dist/cjs/ColorsDemo.js +47 -61
- package/dist/cjs/ColorsDemo.js.map +1 -1
- package/dist/cjs/ColorsDemo.native.js +100 -0
- package/dist/cjs/ColorsDemo.native.js.map +6 -0
- package/dist/cjs/DialogDemo.js +18 -26
- package/dist/cjs/DialogDemo.js.map +1 -1
- package/dist/cjs/DialogDemo.native.js +114 -0
- package/dist/cjs/DialogDemo.native.js.map +6 -0
- package/dist/cjs/FormsDemo.js +10 -17
- package/dist/cjs/FormsDemo.js.map +1 -1
- package/dist/cjs/FormsDemo.native.js +54 -0
- package/dist/cjs/FormsDemo.native.js.map +6 -0
- package/dist/cjs/Grid.js +20 -35
- package/dist/cjs/Grid.js.map +1 -1
- package/dist/cjs/Grid.native.js +63 -0
- package/dist/cjs/Grid.native.js.map +6 -0
- package/dist/cjs/GroupDemo.js +6 -12
- package/dist/cjs/GroupDemo.js.map +1 -1
- package/dist/cjs/GroupDemo.native.js +44 -0
- package/dist/cjs/GroupDemo.native.js.map +6 -0
- package/dist/cjs/HeadingsDemo.js +6 -11
- package/dist/cjs/HeadingsDemo.js.map +1 -1
- package/dist/cjs/HeadingsDemo.native.js +36 -0
- package/dist/cjs/HeadingsDemo.native.js.map +6 -0
- package/dist/cjs/ImageDemo.js +6 -11
- package/dist/cjs/ImageDemo.js.map +1 -1
- package/dist/cjs/ImageDemo.native.js +38 -0
- package/dist/cjs/ImageDemo.native.js.map +6 -0
- package/dist/cjs/InputsDemo.js +6 -11
- package/dist/cjs/InputsDemo.js.map +1 -1
- package/dist/cjs/InputsDemo.native.js +51 -0
- package/dist/cjs/InputsDemo.native.js.map +6 -0
- package/dist/cjs/LabelDemo.js +6 -11
- package/dist/cjs/LabelDemo.js.map +1 -1
- package/dist/cjs/LabelDemo.native.js +38 -0
- package/dist/cjs/LabelDemo.native.js.map +6 -0
- package/dist/cjs/LinearGradientDemo.js +7 -13
- package/dist/cjs/LinearGradientDemo.js.map +1 -1
- package/dist/cjs/LinearGradientDemo.native.js +52 -0
- package/dist/cjs/LinearGradientDemo.native.js.map +6 -0
- package/dist/cjs/ListItemDemo.js +17 -23
- package/dist/cjs/ListItemDemo.js.map +1 -1
- package/dist/cjs/ListItemDemo.native.js +66 -0
- package/dist/cjs/ListItemDemo.native.js.map +6 -0
- package/dist/cjs/LucideIconsDemo.js +11 -25
- package/dist/cjs/LucideIconsDemo.js.map +1 -1
- package/dist/cjs/LucideIconsDemo.native.js +77 -0
- package/dist/cjs/LucideIconsDemo.native.js.map +6 -0
- package/dist/cjs/PopoverDemo.js +12 -19
- package/dist/cjs/PopoverDemo.js.map +1 -1
- package/dist/cjs/PopoverDemo.native.js +93 -0
- package/dist/cjs/PopoverDemo.native.js.map +6 -0
- package/dist/cjs/ProgressDemo.js +12 -21
- package/dist/cjs/ProgressDemo.js.map +1 -1
- package/dist/cjs/ProgressDemo.native.js +75 -0
- package/dist/cjs/ProgressDemo.native.js.map +6 -0
- package/dist/cjs/RadioGroupDemo.js +6 -11
- package/dist/cjs/RadioGroupDemo.js.map +1 -1
- package/dist/cjs/RadioGroupDemo.native.js +42 -0
- package/dist/cjs/RadioGroupDemo.native.js.map +6 -0
- package/dist/cjs/ReplaceThemeDemo.js +12 -23
- package/dist/cjs/ReplaceThemeDemo.js.map +1 -1
- package/dist/cjs/ReplaceThemeDemo.native.js +55 -0
- package/dist/cjs/ReplaceThemeDemo.native.js.map +6 -0
- package/dist/cjs/ScrollViewDemo.js +6 -11
- package/dist/cjs/ScrollViewDemo.js.map +1 -1
- package/dist/cjs/ScrollViewDemo.native.js +48 -0
- package/dist/cjs/ScrollViewDemo.native.js.map +6 -0
- package/dist/cjs/SelectDemo.js +26 -36
- package/dist/cjs/SelectDemo.js.map +1 -1
- package/dist/cjs/SelectDemo.native.js +183 -0
- package/dist/cjs/SelectDemo.native.js.map +6 -0
- package/dist/cjs/SeparatorDemo.js +8 -13
- package/dist/cjs/SeparatorDemo.js.map +1 -1
- package/dist/cjs/SeparatorDemo.native.js +40 -0
- package/dist/cjs/SeparatorDemo.native.js.map +6 -0
- package/dist/cjs/ShapesDemo.js +6 -11
- package/dist/cjs/ShapesDemo.js.map +1 -1
- package/dist/cjs/ShapesDemo.native.js +32 -0
- package/dist/cjs/ShapesDemo.native.js.map +6 -0
- package/dist/cjs/SheetDemo.js +32 -49
- package/dist/cjs/SheetDemo.js.map +1 -1
- package/dist/cjs/SheetDemo.native.js +117 -0
- package/dist/cjs/SheetDemo.native.js.map +6 -0
- package/dist/cjs/SliderDemo.js +7 -12
- package/dist/cjs/SliderDemo.js.map +1 -1
- package/dist/cjs/SliderDemo.native.js +39 -0
- package/dist/cjs/SliderDemo.native.js.map +6 -0
- package/dist/cjs/SpinnerDemo.js +6 -11
- package/dist/cjs/SpinnerDemo.js.map +1 -1
- package/dist/cjs/SpinnerDemo.native.js +32 -0
- package/dist/cjs/SpinnerDemo.native.js.map +6 -0
- package/dist/cjs/StacksDemo.js +10 -15
- package/dist/cjs/StacksDemo.js.map +1 -1
- package/dist/cjs/StacksDemo.native.js +98 -0
- package/dist/cjs/StacksDemo.native.js.map +6 -0
- package/dist/cjs/SwitchDemo.js +11 -16
- package/dist/cjs/SwitchDemo.js.map +1 -1
- package/dist/cjs/SwitchDemo.native.js +66 -0
- package/dist/cjs/SwitchDemo.native.js.map +6 -0
- package/dist/cjs/TabsAdvancedDemo.js +51 -100
- package/dist/cjs/TabsAdvancedDemo.js.map +1 -1
- package/dist/cjs/TabsAdvancedDemo.native.js +248 -0
- package/dist/cjs/TabsAdvancedDemo.native.js.map +6 -0
- package/dist/cjs/TabsDemo.js +90 -106
- package/dist/cjs/TabsDemo.js.map +1 -1
- package/dist/cjs/TabsDemo.native.js +141 -0
- package/dist/cjs/TabsDemo.native.js.map +6 -0
- package/dist/cjs/TextDemo.js +7 -12
- package/dist/cjs/TextDemo.js.map +1 -1
- package/dist/cjs/TextDemo.native.js +36 -0
- package/dist/cjs/TextDemo.native.js.map +6 -0
- package/dist/cjs/ThemeBuilderDemo.js +7 -12
- package/dist/cjs/ThemeBuilderDemo.js.map +1 -1
- package/dist/cjs/ThemeBuilderDemo.native.js +154 -0
- package/dist/cjs/ThemeBuilderDemo.native.js.map +6 -0
- package/dist/cjs/ThemeInverseDemo.js +10 -16
- package/dist/cjs/ThemeInverseDemo.js.map +1 -1
- package/dist/cjs/ThemeInverseDemo.native.js +61 -0
- package/dist/cjs/ThemeInverseDemo.native.js.map +6 -0
- package/dist/cjs/ToastDemo.js +41 -57
- package/dist/cjs/ToastDemo.js.map +1 -1
- package/dist/cjs/ToastDemo.native.js +117 -0
- package/dist/cjs/ToastDemo.native.js.map +6 -0
- package/dist/cjs/ToastDuplicateDemo.js +9 -19
- package/dist/cjs/ToastDuplicateDemo.js.map +1 -1
- package/dist/cjs/ToastDuplicateDemo.native.js +69 -0
- package/dist/cjs/ToastDuplicateDemo.native.js.map +6 -0
- package/dist/cjs/ToggleGroupDemo.js +7 -13
- package/dist/cjs/ToggleGroupDemo.js.map +1 -1
- package/dist/cjs/ToggleGroupDemo.native.js +68 -0
- package/dist/cjs/ToggleGroupDemo.native.js.map +6 -0
- package/dist/cjs/TokensDemo.js +52 -68
- package/dist/cjs/TokensDemo.js.map +1 -1
- package/dist/cjs/TokensDemo.native.js +95 -0
- package/dist/cjs/TokensDemo.native.js.map +6 -0
- package/dist/cjs/TooltipDemo.js +8 -14
- package/dist/cjs/TooltipDemo.js.map +1 -1
- package/dist/cjs/TooltipDemo.native.js +73 -0
- package/dist/cjs/TooltipDemo.native.js.map +6 -0
- package/dist/cjs/UpdateThemeDemo.js +15 -30
- package/dist/cjs/UpdateThemeDemo.js.map +1 -1
- package/dist/cjs/UpdateThemeDemo.native.js +67 -0
- package/dist/cjs/UpdateThemeDemo.native.js.map +6 -0
- package/dist/cjs/index.js +4 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index.native.js +116 -0
- package/dist/cjs/index.native.js.map +6 -0
- package/dist/cjs/tamagui.config.js +6 -12
- package/dist/cjs/tamagui.config.js.map +1 -1
- package/dist/cjs/tamagui.config.native.js +27 -0
- package/dist/cjs/tamagui.config.native.js.map +6 -0
- package/dist/cjs/useOnIntersecting.js +23 -46
- package/dist/cjs/useOnIntersecting.js.map +1 -1
- package/dist/cjs/useOnIntersecting.native.js +71 -0
- package/dist/cjs/useOnIntersecting.native.js.map +6 -0
- package/dist/esm/AccordionDemo.js +1 -1
- package/dist/esm/AccordionDemo.js.map +1 -1
- package/dist/esm/AddThemeDemo.js +4 -5
- package/dist/esm/AddThemeDemo.js.map +1 -1
- package/dist/esm/AlertDialogDemo.js +9 -9
- package/dist/esm/AlertDialogDemo.js.map +1 -1
- package/dist/esm/AnimationsDemo.js +4 -8
- package/dist/esm/AnimationsDemo.js.map +1 -1
- package/dist/esm/AnimationsEnterDemo.js +4 -9
- package/dist/esm/AnimationsEnterDemo.js.map +1 -1
- package/dist/esm/AnimationsHoverDemo.js +1 -1
- package/dist/esm/AnimationsHoverDemo.js.map +1 -1
- package/dist/esm/AnimationsPresenceDemo.js +8 -13
- package/dist/esm/AnimationsPresenceDemo.js.map +1 -1
- package/dist/esm/AnimationsTimingDemo.js +1 -1
- package/dist/esm/AnimationsTimingDemo.js.map +1 -1
- package/dist/esm/AvatarDemo.js +3 -3
- package/dist/esm/AvatarDemo.js.map +1 -1
- package/dist/esm/BuildAButtonDemo.js +2 -2
- package/dist/esm/BuildAButtonDemo.js.map +1 -1
- package/dist/esm/ButtonDemo.js +4 -4
- package/dist/esm/ButtonDemo.js.map +1 -1
- package/dist/esm/CardDemo.js +5 -5
- package/dist/esm/CardDemo.js.map +1 -1
- package/dist/esm/CheckboxDemo.js +2 -2
- package/dist/esm/CheckboxDemo.js.map +1 -1
- package/dist/esm/ColorsDemo.js +42 -51
- package/dist/esm/ColorsDemo.js.map +1 -1
- package/dist/esm/DialogDemo.js +13 -13
- package/dist/esm/DialogDemo.js.map +1 -1
- package/dist/esm/FormsDemo.js +5 -6
- package/dist/esm/FormsDemo.js.map +1 -1
- package/dist/esm/Grid.js +13 -19
- package/dist/esm/Grid.js.map +1 -1
- package/dist/esm/GroupDemo.js +1 -1
- package/dist/esm/GroupDemo.js.map +1 -1
- package/dist/esm/HeadingsDemo.js +1 -1
- package/dist/esm/HeadingsDemo.js.map +1 -1
- package/dist/esm/ImageDemo.js +1 -1
- package/dist/esm/ImageDemo.js.map +1 -1
- package/dist/esm/InputsDemo.js +1 -1
- package/dist/esm/InputsDemo.js.map +1 -1
- package/dist/esm/LabelDemo.js +1 -1
- package/dist/esm/LabelDemo.js.map +1 -1
- package/dist/esm/LinearGradientDemo.js +2 -2
- package/dist/esm/LinearGradientDemo.js.map +1 -1
- package/dist/esm/ListItemDemo.js +12 -12
- package/dist/esm/ListItemDemo.js.map +1 -1
- package/dist/esm/LucideIconsDemo.js +4 -7
- package/dist/esm/LucideIconsDemo.js.map +1 -1
- package/dist/esm/PopoverDemo.js +7 -7
- package/dist/esm/PopoverDemo.js.map +1 -1
- package/dist/esm/ProgressDemo.js +7 -10
- package/dist/esm/ProgressDemo.js.map +1 -1
- package/dist/esm/RadioGroupDemo.js +1 -1
- package/dist/esm/RadioGroupDemo.js.map +1 -1
- package/dist/esm/ReplaceThemeDemo.js +7 -11
- package/dist/esm/ReplaceThemeDemo.js.map +1 -1
- package/dist/esm/ScrollViewDemo.js +1 -1
- package/dist/esm/ScrollViewDemo.js.map +1 -1
- package/dist/esm/SelectDemo.js +21 -23
- package/dist/esm/SelectDemo.js.map +1 -1
- package/dist/esm/SeparatorDemo.js +3 -3
- package/dist/esm/SeparatorDemo.js.map +1 -1
- package/dist/esm/ShapesDemo.js +1 -1
- package/dist/esm/ShapesDemo.js.map +1 -1
- package/dist/esm/SheetDemo.js +28 -37
- package/dist/esm/SheetDemo.js.map +1 -1
- package/dist/esm/SliderDemo.js +2 -2
- package/dist/esm/SliderDemo.js.map +1 -1
- package/dist/esm/SpinnerDemo.js +1 -1
- package/dist/esm/SpinnerDemo.js.map +1 -1
- package/dist/esm/StacksDemo.js +5 -5
- package/dist/esm/StacksDemo.js.map +1 -1
- package/dist/esm/SwitchDemo.js +6 -6
- package/dist/esm/SwitchDemo.js.map +1 -1
- package/dist/esm/TabsAdvancedDemo.js +46 -89
- package/dist/esm/TabsAdvancedDemo.js.map +1 -1
- package/dist/esm/TabsDemo.js +85 -95
- package/dist/esm/TabsDemo.js.map +1 -1
- package/dist/esm/TextDemo.js +2 -2
- package/dist/esm/TextDemo.js.map +1 -1
- package/dist/esm/ThemeBuilderDemo.js +2 -2
- package/dist/esm/ThemeBuilderDemo.js.map +1 -1
- package/dist/esm/ThemeInverseDemo.js +5 -6
- package/dist/esm/ThemeInverseDemo.js.map +1 -1
- package/dist/esm/ToastDemo.js +34 -41
- package/dist/esm/ToastDemo.js.map +1 -1
- package/dist/esm/ToastDuplicateDemo.js +2 -2
- package/dist/esm/ToastDuplicateDemo.js.map +1 -1
- package/dist/esm/ToggleGroupDemo.js +2 -2
- package/dist/esm/ToggleGroupDemo.js.map +1 -1
- package/dist/esm/TokensDemo.js +47 -56
- package/dist/esm/TokensDemo.js.map +1 -1
- package/dist/esm/TooltipDemo.js +3 -3
- package/dist/esm/TooltipDemo.js.map +1 -1
- package/dist/esm/UpdateThemeDemo.js +8 -13
- package/dist/esm/UpdateThemeDemo.js.map +1 -1
- package/dist/esm/useOnIntersecting.js +17 -35
- package/dist/esm/useOnIntersecting.js.map +1 -1
- package/dist/jsx/AccordionDemo.native.js +24 -0
- package/dist/jsx/AccordionDemo.native.js.map +6 -0
- package/dist/jsx/AddThemeDemo.js +2 -3
- package/dist/jsx/AddThemeDemo.js.map +1 -1
- package/dist/jsx/AddThemeDemo.native.js +30 -0
- package/dist/jsx/AddThemeDemo.native.js.map +6 -0
- package/dist/jsx/AlertDialogDemo.js +1 -1
- package/dist/jsx/AlertDialogDemo.native.js +45 -0
- package/dist/jsx/AlertDialogDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsDemo.js +2 -6
- package/dist/jsx/AnimationsDemo.js.map +1 -1
- package/dist/jsx/AnimationsDemo.native.js +78 -0
- package/dist/jsx/AnimationsDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsEnterDemo.js +3 -8
- package/dist/jsx/AnimationsEnterDemo.js.map +1 -1
- package/dist/jsx/AnimationsEnterDemo.native.js +30 -0
- package/dist/jsx/AnimationsEnterDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsHoverDemo.native.js +22 -0
- package/dist/jsx/AnimationsHoverDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsPresenceDemo.js +3 -8
- package/dist/jsx/AnimationsPresenceDemo.js.map +1 -1
- package/dist/jsx/AnimationsPresenceDemo.native.js +57 -0
- package/dist/jsx/AnimationsPresenceDemo.native.js.map +6 -0
- package/dist/jsx/AnimationsTimingDemo.native.js +21 -0
- package/dist/jsx/AnimationsTimingDemo.native.js.map +6 -0
- package/dist/jsx/AvatarDemo.native.js +23 -0
- package/dist/jsx/AvatarDemo.native.js.map +6 -0
- package/dist/jsx/BuildAButtonDemo.native.js +42 -0
- package/dist/jsx/BuildAButtonDemo.native.js.map +6 -0
- package/dist/jsx/ButtonDemo.native.js +24 -0
- package/dist/jsx/ButtonDemo.native.js.map +6 -0
- package/dist/jsx/CardDemo.native.js +41 -0
- package/dist/jsx/CardDemo.native.js.map +6 -0
- package/dist/jsx/CheckboxDemo.native.js +21 -0
- package/dist/jsx/CheckboxDemo.native.js.map +6 -0
- package/dist/jsx/ColorsDemo.js +32 -41
- package/dist/jsx/ColorsDemo.js.map +1 -1
- package/dist/jsx/ColorsDemo.native.js +77 -0
- package/dist/jsx/ColorsDemo.native.js.map +6 -0
- package/dist/jsx/DialogDemo.js +3 -3
- package/dist/jsx/DialogDemo.js.map +1 -1
- package/dist/jsx/DialogDemo.native.js +91 -0
- package/dist/jsx/DialogDemo.native.js.map +6 -0
- package/dist/jsx/FormsDemo.js +2 -3
- package/dist/jsx/FormsDemo.js.map +1 -1
- package/dist/jsx/FormsDemo.native.js +30 -0
- package/dist/jsx/FormsDemo.native.js.map +6 -0
- package/dist/jsx/Grid.js +8 -14
- package/dist/jsx/Grid.js.map +1 -1
- package/dist/jsx/Grid.native.js +28 -0
- package/dist/jsx/Grid.native.js.map +6 -0
- package/dist/jsx/GroupDemo.native.js +30 -0
- package/dist/jsx/GroupDemo.native.js.map +6 -0
- package/dist/jsx/HeadingsDemo.native.js +15 -0
- package/dist/jsx/HeadingsDemo.native.js.map +6 -0
- package/dist/jsx/ImageDemo.native.js +14 -0
- package/dist/jsx/ImageDemo.native.js.map +6 -0
- package/dist/jsx/InputsDemo.native.js +26 -0
- package/dist/jsx/InputsDemo.native.js.map +6 -0
- package/dist/jsx/LabelDemo.native.js +17 -0
- package/dist/jsx/LabelDemo.native.js.map +6 -0
- package/dist/jsx/LinearGradientDemo.native.js +32 -0
- package/dist/jsx/LinearGradientDemo.native.js.map +6 -0
- package/dist/jsx/ListItemDemo.native.js +40 -0
- package/dist/jsx/ListItemDemo.native.js.map +6 -0
- package/dist/jsx/LucideIconsDemo.js +2 -5
- package/dist/jsx/LucideIconsDemo.js.map +1 -1
- package/dist/jsx/LucideIconsDemo.native.js +44 -0
- package/dist/jsx/LucideIconsDemo.native.js.map +6 -0
- package/dist/jsx/PopoverDemo.js +1 -1
- package/dist/jsx/PopoverDemo.native.js +70 -0
- package/dist/jsx/PopoverDemo.native.js.map +6 -0
- package/dist/jsx/ProgressDemo.js +3 -6
- package/dist/jsx/ProgressDemo.js.map +1 -1
- package/dist/jsx/ProgressDemo.native.js +47 -0
- package/dist/jsx/ProgressDemo.native.js.map +6 -0
- package/dist/jsx/RadioGroupDemo.native.js +20 -0
- package/dist/jsx/RadioGroupDemo.native.js.map +6 -0
- package/dist/jsx/ReplaceThemeDemo.js +6 -10
- package/dist/jsx/ReplaceThemeDemo.js.map +1 -1
- package/dist/jsx/ReplaceThemeDemo.native.js +40 -0
- package/dist/jsx/ReplaceThemeDemo.native.js.map +6 -0
- package/dist/jsx/ScrollViewDemo.native.js +23 -0
- package/dist/jsx/ScrollViewDemo.native.js.map +6 -0
- package/dist/jsx/SelectDemo.js +8 -10
- package/dist/jsx/SelectDemo.js.map +1 -1
- package/dist/jsx/SelectDemo.native.js +145 -0
- package/dist/jsx/SelectDemo.native.js.map +6 -0
- package/dist/jsx/SeparatorDemo.native.js +19 -0
- package/dist/jsx/SeparatorDemo.native.js.map +6 -0
- package/dist/jsx/ShapesDemo.native.js +11 -0
- package/dist/jsx/ShapesDemo.native.js.map +6 -0
- package/dist/jsx/SheetDemo.js +19 -28
- package/dist/jsx/SheetDemo.js.map +1 -1
- package/dist/jsx/SheetDemo.native.js +79 -0
- package/dist/jsx/SheetDemo.native.js.map +6 -0
- package/dist/jsx/SliderDemo.native.js +18 -0
- package/dist/jsx/SliderDemo.native.js.map +6 -0
- package/dist/jsx/SpinnerDemo.native.js +11 -0
- package/dist/jsx/SpinnerDemo.native.js.map +6 -0
- package/dist/jsx/StacksDemo.native.js +60 -0
- package/dist/jsx/StacksDemo.native.js.map +6 -0
- package/dist/jsx/SwitchDemo.native.js +40 -0
- package/dist/jsx/SwitchDemo.native.js.map +6 -0
- package/dist/jsx/TabsAdvancedDemo.js +28 -71
- package/dist/jsx/TabsAdvancedDemo.js.map +1 -1
- package/dist/jsx/TabsAdvancedDemo.native.js +183 -0
- package/dist/jsx/TabsAdvancedDemo.native.js.map +6 -0
- package/dist/jsx/TabsDemo.js +61 -71
- package/dist/jsx/TabsDemo.js.map +1 -1
- package/dist/jsx/TabsDemo.native.js +102 -0
- package/dist/jsx/TabsDemo.native.js.map +6 -0
- package/dist/jsx/TextDemo.native.js +15 -0
- package/dist/jsx/TextDemo.native.js.map +6 -0
- package/dist/jsx/ThemeBuilderDemo.native.js +103 -0
- package/dist/jsx/ThemeBuilderDemo.native.js.map +6 -0
- package/dist/jsx/ThemeInverseDemo.js +1 -2
- package/dist/jsx/ThemeInverseDemo.js.map +1 -1
- package/dist/jsx/ThemeInverseDemo.native.js +33 -0
- package/dist/jsx/ThemeInverseDemo.native.js.map +6 -0
- package/dist/jsx/ToastDemo.js +25 -32
- package/dist/jsx/ToastDemo.js.map +1 -1
- package/dist/jsx/ToastDemo.native.js +71 -0
- package/dist/jsx/ToastDemo.native.js.map +6 -0
- package/dist/jsx/ToastDuplicateDemo.native.js +35 -0
- package/dist/jsx/ToastDuplicateDemo.native.js.map +6 -0
- package/dist/jsx/ToggleGroupDemo.js +1 -1
- package/dist/jsx/ToggleGroupDemo.js.map +1 -1
- package/dist/jsx/ToggleGroupDemo.native.js +40 -0
- package/dist/jsx/ToggleGroupDemo.native.js.map +6 -0
- package/dist/jsx/TokensDemo.js +38 -46
- package/dist/jsx/TokensDemo.js.map +1 -1
- package/dist/jsx/TokensDemo.native.js +69 -0
- package/dist/jsx/TokensDemo.native.js.map +6 -0
- package/dist/jsx/TooltipDemo.js +1 -1
- package/dist/jsx/TooltipDemo.native.js +62 -0
- package/dist/jsx/TooltipDemo.native.js.map +6 -0
- package/dist/jsx/UpdateThemeDemo.js +7 -12
- package/dist/jsx/UpdateThemeDemo.js.map +1 -1
- package/dist/jsx/UpdateThemeDemo.native.js +46 -0
- package/dist/jsx/UpdateThemeDemo.native.js.map +6 -0
- package/dist/jsx/index.native.js +50 -0
- package/dist/jsx/index.native.js.map +6 -0
- package/dist/jsx/tamagui.config.native.js +8 -0
- package/dist/jsx/tamagui.config.native.js.map +6 -0
- package/dist/jsx/useOnIntersecting.js +17 -35
- package/dist/jsx/useOnIntersecting.js.map +1 -1
- package/dist/jsx/useOnIntersecting.native.js +50 -0
- package/dist/jsx/useOnIntersecting.native.js.map +6 -0
- package/package.json +18 -18
- package/src/DialogDemo.tsx +1 -1
- package/src/SheetDemo.tsx +28 -22
package/dist/jsx/ColorsDemo.js
CHANGED
|
@@ -10,8 +10,7 @@ import {
|
|
|
10
10
|
} from "tamagui";
|
|
11
11
|
const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
|
|
12
12
|
function ColorsDemo() {
|
|
13
|
-
const colors = getTokens({ prefixed:
|
|
14
|
-
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
|
|
13
|
+
const colors = getTokens({ prefixed: !1 }).color, [colorsLight, colorsDark] = [getColors(colors), getColors(colors, !0)];
|
|
15
14
|
return <YStack marginTop="$4" space="$8">
|
|
16
15
|
<ColorsRow title="Light" colors={colorsLight} />
|
|
17
16
|
<Separator />
|
|
@@ -23,39 +22,33 @@ function ColorsRow({ title, colors }) {
|
|
|
23
22
|
<H2 size="$2">{title}</H2>
|
|
24
23
|
<XStack space alignSelf="center">
|
|
25
24
|
<YStack space $sm={{ space: "$2" }} alignSelf="center">
|
|
26
|
-
{colors.map((group, index) => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
width
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
$xs={{
|
|
54
|
-
width: "$1"
|
|
55
|
-
}}
|
|
56
|
-
key={index}
|
|
57
|
-
>{index}</Paragraph>;
|
|
58
|
-
})}</XStack>
|
|
25
|
+
{colors.map((group, index) => <XStack space="$2" key={index}>{group.map((color) => <Square
|
|
26
|
+
key={`${color.key}${index}`}
|
|
27
|
+
borderRadius="$2"
|
|
28
|
+
size="$4"
|
|
29
|
+
height="$4"
|
|
30
|
+
borderWidth={1}
|
|
31
|
+
backgroundColor={getVariableValue(color)}
|
|
32
|
+
borderColor="$color7"
|
|
33
|
+
$sm={{
|
|
34
|
+
size: "$2"
|
|
35
|
+
}}
|
|
36
|
+
$xs={{
|
|
37
|
+
size: "$1"
|
|
38
|
+
}}
|
|
39
|
+
/>)}</XStack>)}
|
|
40
|
+
<XStack space="$2" alignSelf="center">{new Array(13).fill(0).slice(1).map((_, index) => <Paragraph
|
|
41
|
+
color="$color10"
|
|
42
|
+
textAlign="center"
|
|
43
|
+
width="$4"
|
|
44
|
+
$sm={{
|
|
45
|
+
width: "$2"
|
|
46
|
+
}}
|
|
47
|
+
$xs={{
|
|
48
|
+
width: "$1"
|
|
49
|
+
}}
|
|
50
|
+
key={index}
|
|
51
|
+
>{index}</Paragraph>)}</XStack>
|
|
59
52
|
</YStack>
|
|
60
53
|
<YStack space="$4" marginTop="$2">{colorGroups.map((name) => <Paragraph
|
|
61
54
|
theme={name}
|
|
@@ -73,12 +66,10 @@ function ColorsRow({ title, colors }) {
|
|
|
73
66
|
</XStack>
|
|
74
67
|
</YStack>;
|
|
75
68
|
}
|
|
76
|
-
function getColors(colors, dark =
|
|
77
|
-
return colorGroups.map((group) =>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
).map((key) => colors[key]);
|
|
81
|
-
});
|
|
69
|
+
function getColors(colors, dark = !1) {
|
|
70
|
+
return colorGroups.map((group) => Object.keys(colors).filter(
|
|
71
|
+
(color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
|
|
72
|
+
).map((key) => colors[key]));
|
|
82
73
|
}
|
|
83
74
|
export {
|
|
84
75
|
ColorsDemo
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ColorsDemo.tsx"],
|
|
4
|
-
"mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,
|
|
4
|
+
"mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,GAAM,CAAC,EAAE,OACxC,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,EAAI,CAAC;AAE7E,SACE,CAAC,OAAO,UAAU,KAAK,MAAM;AAAA,IAC3B,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,UAAU;AAAA,SAC3C,OAAO,IAAI,CAAC,OAAO,UAEhB,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAER,CAAC;AAAA,UACC,KAAK,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,UACzB,aAAa;AAAA,UACb,KAAK;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA,UACb,iBAAiB,iBAAiB,KAAK;AAAA,UACvC,YAAY;AAAA,UACZ,KAAK;AAAA,YACH,MAAM;AAAA,UACR;AAAA,UACA,KAAK;AAAA,YACH,MAAM;AAAA,UACR;AAAA,QACF,EAEH,EACH,EApBC,OAsBJ;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAEL,CAAC;AAAA,UACC,MAAM;AAAA,UACN,UAAU;AAAA,UACV,MAAM;AAAA,UACN,KAAK;AAAA,YACH,OAAO;AAAA,UACT;AAAA,UACA,KAAK;AAAA,YACH,OAAO;AAAA,UACT;AAAA,UACA,KAAK;AAAA,UAEJ,MACH,EAbC,UAeJ,EACL,EAtBC;AAAA,MAuBH,EAlDC;AAAA,MAoDD,CAAC,OAAO,MAAM,KAAK,UAAU,MAC1B,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAxEC;AAAA,EAyEH,EA5EC;AA8EL;AAEA,SAAS,UAAU,QAAkC,OAAO,IAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UACf,OAAO,KAAK,MAAM,EACtB;AAAA,IACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,EAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC,CAC5B;AACH;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import {
|
|
2
|
+
H2,
|
|
3
|
+
Paragraph,
|
|
4
|
+
Separator,
|
|
5
|
+
Square,
|
|
6
|
+
XStack,
|
|
7
|
+
YStack,
|
|
8
|
+
getTokens,
|
|
9
|
+
getVariableValue
|
|
10
|
+
} from "tamagui";
|
|
11
|
+
const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
|
|
12
|
+
function ColorsDemo() {
|
|
13
|
+
const colors = getTokens({ prefixed: !1 }).color, [colorsLight, colorsDark] = [getColors(colors), getColors(colors, !0)];
|
|
14
|
+
return <YStack marginTop="$4" space="$8">
|
|
15
|
+
<ColorsRow title="Light" colors={colorsLight} />
|
|
16
|
+
<Separator />
|
|
17
|
+
<ColorsRow title="Dark" colors={colorsDark} />
|
|
18
|
+
</YStack>;
|
|
19
|
+
}
|
|
20
|
+
function ColorsRow({ title, colors }) {
|
|
21
|
+
return <YStack space $sm={{ space: "$2" }}>
|
|
22
|
+
<H2 size="$2">{title}</H2>
|
|
23
|
+
<XStack space alignSelf="center">
|
|
24
|
+
<YStack space $sm={{ space: "$2" }} alignSelf="center">
|
|
25
|
+
{colors.map((group, index) => <XStack space="$2" key={index}>{group.map((color) => <Square
|
|
26
|
+
key={`${color.key}${index}`}
|
|
27
|
+
borderRadius="$2"
|
|
28
|
+
size="$4"
|
|
29
|
+
height="$4"
|
|
30
|
+
borderWidth={1}
|
|
31
|
+
backgroundColor={getVariableValue(color)}
|
|
32
|
+
borderColor="$color7"
|
|
33
|
+
$sm={{
|
|
34
|
+
size: "$2"
|
|
35
|
+
}}
|
|
36
|
+
$xs={{
|
|
37
|
+
size: "$1"
|
|
38
|
+
}}
|
|
39
|
+
/>)}</XStack>)}
|
|
40
|
+
<XStack space="$2" alignSelf="center">{new Array(13).fill(0).slice(1).map((_, index) => <Paragraph
|
|
41
|
+
color="$color10"
|
|
42
|
+
textAlign="center"
|
|
43
|
+
width="$4"
|
|
44
|
+
$sm={{
|
|
45
|
+
width: "$2"
|
|
46
|
+
}}
|
|
47
|
+
$xs={{
|
|
48
|
+
width: "$1"
|
|
49
|
+
}}
|
|
50
|
+
key={index}
|
|
51
|
+
>{index}</Paragraph>)}</XStack>
|
|
52
|
+
</YStack>
|
|
53
|
+
<YStack space="$4" marginTop="$2">{colorGroups.map((name) => <Paragraph
|
|
54
|
+
theme={name}
|
|
55
|
+
color="$color10"
|
|
56
|
+
height="$4"
|
|
57
|
+
rotate="-10deg"
|
|
58
|
+
$sm={{
|
|
59
|
+
height: "$2"
|
|
60
|
+
}}
|
|
61
|
+
$xs={{
|
|
62
|
+
height: "$1"
|
|
63
|
+
}}
|
|
64
|
+
key={name}
|
|
65
|
+
>{name}</Paragraph>)}</YStack>
|
|
66
|
+
</XStack>
|
|
67
|
+
</YStack>;
|
|
68
|
+
}
|
|
69
|
+
function getColors(colors, dark = !1) {
|
|
70
|
+
return colorGroups.map((group) => Object.keys(colors).filter(
|
|
71
|
+
(color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
|
|
72
|
+
).map((key) => colors[key]));
|
|
73
|
+
}
|
|
74
|
+
export {
|
|
75
|
+
ColorsDemo
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=ColorsDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ColorsDemo.tsx"],
|
|
4
|
+
"mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,GAAM,CAAC,EAAE,OACxC,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,EAAI,CAAC;AAE7E,SACE,CAAC,OAAO,UAAU,KAAK,MAAM;AAAA,IAC3B,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,UAAU;AAAA,SAC3C,OAAO,IAAI,CAAC,OAAO,UAEhB,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAER,CAAC;AAAA,UACC,KAAK,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,UACzB,aAAa;AAAA,UACb,KAAK;AAAA,UACL,OAAO;AAAA,UACP,aAAa;AAAA,UACb,iBAAiB,iBAAiB,KAAK;AAAA,UACvC,YAAY;AAAA,UACZ,KAAK;AAAA,YACH,MAAM;AAAA,UACR;AAAA,UACA,KAAK;AAAA,YACH,MAAM;AAAA,UACR;AAAA,QACF,EAEH,EACH,EApBC,OAsBJ;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAEL,CAAC;AAAA,UACC,MAAM;AAAA,UACN,UAAU;AAAA,UACV,MAAM;AAAA,UACN,KAAK;AAAA,YACH,OAAO;AAAA,UACT;AAAA,UACA,KAAK;AAAA,YACH,OAAO;AAAA,UACT;AAAA,UACA,KAAK;AAAA,UAEJ,MACH,EAbC,UAeJ,EACL,EAtBC;AAAA,MAuBH,EAlDC;AAAA,MAoDD,CAAC,OAAO,MAAM,KAAK,UAAU,MAC1B,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAxEC;AAAA,EAyEH,EA5EC;AA8EL;AAEA,SAAS,UAAU,QAAkC,OAAO,IAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UACf,OAAO,KAAK,MAAM,EACtB;AAAA,IACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,EAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC,CAC5B;AACH;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
package/dist/jsx/DialogDemo.js
CHANGED
|
@@ -18,7 +18,7 @@ function DialogDemo() {
|
|
|
18
18
|
return <DialogInstance />;
|
|
19
19
|
}
|
|
20
20
|
function DialogInstance() {
|
|
21
|
-
const [open, setOpen] = useState(
|
|
21
|
+
const [open, setOpen] = useState(!1);
|
|
22
22
|
return <Dialog
|
|
23
23
|
modal
|
|
24
24
|
onOpenChange={(open2) => {
|
|
@@ -26,7 +26,7 @@ function DialogInstance() {
|
|
|
26
26
|
}}
|
|
27
27
|
>
|
|
28
28
|
<Dialog.Trigger asChild><Button>Show Dialog</Button></Dialog.Trigger>
|
|
29
|
-
<Adapt when="sm" platform="touch"><Sheet zIndex={2e5} modal dismissOnSnapToBottom>
|
|
29
|
+
<Adapt when="sm" platform="touch"><Sheet animation="medium" zIndex={2e5} modal dismissOnSnapToBottom>
|
|
30
30
|
<Sheet.Frame padding="$4" gap="$4"><Adapt.Contents /></Sheet.Frame>
|
|
31
31
|
<Sheet.Overlay
|
|
32
32
|
animation="lazy"
|
|
@@ -51,7 +51,7 @@ function DialogInstance() {
|
|
|
51
51
|
"quick",
|
|
52
52
|
{
|
|
53
53
|
opacity: {
|
|
54
|
-
overshootClamping:
|
|
54
|
+
overshootClamping: !0
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DialogDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,SAAS;AAClB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,sBAAsB;AAExB,SAAS,aAAa;AAC3B,SAAO,CAAC,eAAe;AACzB;AAEA,SAAS,iBAAiB;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["open"]
|
|
6
6
|
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { X } from "@tamagui/lucide-icons";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import {
|
|
4
|
+
Adapt,
|
|
5
|
+
Button,
|
|
6
|
+
Dialog,
|
|
7
|
+
Fieldset,
|
|
8
|
+
Input,
|
|
9
|
+
Label,
|
|
10
|
+
Paragraph,
|
|
11
|
+
Sheet,
|
|
12
|
+
TooltipSimple,
|
|
13
|
+
Unspaced,
|
|
14
|
+
XStack
|
|
15
|
+
} from "tamagui";
|
|
16
|
+
import { SelectDemoItem } from "./SelectDemo";
|
|
17
|
+
function DialogDemo() {
|
|
18
|
+
return <DialogInstance />;
|
|
19
|
+
}
|
|
20
|
+
function DialogInstance() {
|
|
21
|
+
const [open, setOpen] = useState(!1);
|
|
22
|
+
return <Dialog
|
|
23
|
+
modal
|
|
24
|
+
onOpenChange={(open2) => {
|
|
25
|
+
setOpen(open2);
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
<Dialog.Trigger asChild><Button>Show Dialog</Button></Dialog.Trigger>
|
|
29
|
+
<Adapt when="sm" platform="touch"><Sheet animation="medium" zIndex={2e5} modal dismissOnSnapToBottom>
|
|
30
|
+
<Sheet.Frame padding="$4" gap="$4"><Adapt.Contents /></Sheet.Frame>
|
|
31
|
+
<Sheet.Overlay
|
|
32
|
+
animation="lazy"
|
|
33
|
+
enterStyle={{ opacity: 0 }}
|
|
34
|
+
exitStyle={{ opacity: 0 }}
|
|
35
|
+
/>
|
|
36
|
+
</Sheet></Adapt>
|
|
37
|
+
<Dialog.Portal>
|
|
38
|
+
<Dialog.Overlay
|
|
39
|
+
key="overlay"
|
|
40
|
+
animation="quick"
|
|
41
|
+
opacity={0.5}
|
|
42
|
+
enterStyle={{ opacity: 0 }}
|
|
43
|
+
exitStyle={{ opacity: 0 }}
|
|
44
|
+
/>
|
|
45
|
+
<Dialog.Content
|
|
46
|
+
bordered
|
|
47
|
+
elevate
|
|
48
|
+
key="content"
|
|
49
|
+
animateOnly={["transform", "opacity"]}
|
|
50
|
+
animation={[
|
|
51
|
+
"quick",
|
|
52
|
+
{
|
|
53
|
+
opacity: {
|
|
54
|
+
overshootClamping: !0
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
]}
|
|
58
|
+
enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
|
|
59
|
+
exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
|
|
60
|
+
gap="$4"
|
|
61
|
+
>
|
|
62
|
+
<Dialog.Title>Edit profile</Dialog.Title>
|
|
63
|
+
<Dialog.Description>Make changes to your profile here. Click save when you're done.</Dialog.Description>
|
|
64
|
+
<Fieldset gap="$4" horizontal>
|
|
65
|
+
<Label width={160} justifyContent="flex-end" htmlFor="name">Name</Label>
|
|
66
|
+
<Input flex={1} id="name" defaultValue="Nate Wienert" />
|
|
67
|
+
</Fieldset>
|
|
68
|
+
<Fieldset gap="$4" horizontal>
|
|
69
|
+
<Label width={160} justifyContent="flex-end" htmlFor="username"><TooltipSimple label="Pick your favorite" placement="bottom-start"><Paragraph>Food</Paragraph></TooltipSimple></Label>
|
|
70
|
+
<SelectDemoItem />
|
|
71
|
+
</Fieldset>
|
|
72
|
+
<XStack alignSelf="flex-end" gap="$4">
|
|
73
|
+
<DialogInstance />
|
|
74
|
+
<Dialog.Close displayWhenAdapted asChild><Button theme="alt1" aria-label="Close">Save changes</Button></Dialog.Close>
|
|
75
|
+
</XStack>
|
|
76
|
+
<Unspaced><Dialog.Close asChild><Button
|
|
77
|
+
position="absolute"
|
|
78
|
+
top="$3"
|
|
79
|
+
right="$3"
|
|
80
|
+
size="$2"
|
|
81
|
+
circular
|
|
82
|
+
icon={X}
|
|
83
|
+
/></Dialog.Close></Unspaced>
|
|
84
|
+
</Dialog.Content>
|
|
85
|
+
</Dialog.Portal>
|
|
86
|
+
</Dialog>;
|
|
87
|
+
}
|
|
88
|
+
export {
|
|
89
|
+
DialogDemo
|
|
90
|
+
};
|
|
91
|
+
//# sourceMappingURL=DialogDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/DialogDemo.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["open"]
|
|
6
|
+
}
|
package/dist/jsx/FormsDemo.js
CHANGED
|
@@ -2,15 +2,14 @@ import { useEffect, useState } from "react";
|
|
|
2
2
|
import { Button, Form, H4, Spinner } from "tamagui";
|
|
3
3
|
function FormsDemo(props) {
|
|
4
4
|
const [status, setStatus] = useState("off");
|
|
5
|
-
useEffect(() => {
|
|
5
|
+
return useEffect(() => {
|
|
6
6
|
if (status === "submitting") {
|
|
7
7
|
const timer = setTimeout(() => setStatus("off"), 2e3);
|
|
8
8
|
return () => {
|
|
9
9
|
clearTimeout(timer);
|
|
10
10
|
};
|
|
11
11
|
}
|
|
12
|
-
}, [status])
|
|
13
|
-
return <Form
|
|
12
|
+
}, [status]), <Form
|
|
14
13
|
alignItems="center"
|
|
15
14
|
minWidth={300}
|
|
16
15
|
gap
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/FormsDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAAe;AAE/C,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,
|
|
4
|
+
"mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAAe;AAE/C,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,mBAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC,GAGT,CAAC;AAAA,IACC,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,UAAU,MAAM,UAAU,YAAY;AAAA,IACtC,aAAa;AAAA,IACb,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA;AAAA,IAER,CAAC,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,EAAE,EAA9C;AAAA,IAED,CAAC,KAAK,QAAQ,QAAQ,UAAU,WAAW,OACzC,CAAC,OAAO,MAAM,WAAW,eAAe,MAAM,CAAC,QAAQ,KAAK,QAAW,MAEvE,EAFC,OAGH,EAJC,KAAK;AAAA,EAKR,EAlBC;AAoBL;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
import { Button, Form, H4, Spinner } from "tamagui";
|
|
3
|
+
function FormsDemo(props) {
|
|
4
|
+
const [status, setStatus] = useState("off");
|
|
5
|
+
return useEffect(() => {
|
|
6
|
+
if (status === "submitting") {
|
|
7
|
+
const timer = setTimeout(() => setStatus("off"), 2e3);
|
|
8
|
+
return () => {
|
|
9
|
+
clearTimeout(timer);
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
}, [status]), <Form
|
|
13
|
+
alignItems="center"
|
|
14
|
+
minWidth={300}
|
|
15
|
+
gap
|
|
16
|
+
onSubmit={() => setStatus("submitting")}
|
|
17
|
+
borderWidth={1}
|
|
18
|
+
borderRadius="$4"
|
|
19
|
+
backgroundColor="$background"
|
|
20
|
+
borderColor="$borderColor"
|
|
21
|
+
padding="$8"
|
|
22
|
+
>
|
|
23
|
+
<H4>{status[0].toUpperCase() + status.slice(1)}</H4>
|
|
24
|
+
<Form.Trigger asChild disabled={status !== "off"}><Button icon={status === "submitting" ? () => <Spinner /> : void 0}>Submit</Button></Form.Trigger>
|
|
25
|
+
</Form>;
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
FormsDemo
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=FormsDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/FormsDemo.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAAe;AAE/C,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,mBAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC,GAGT,CAAC;AAAA,IACC,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,UAAU,MAAM,UAAU,YAAY;AAAA,IACtC,aAAa;AAAA,IACb,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA;AAAA,IAER,CAAC,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,EAAE,EAA9C;AAAA,IAED,CAAC,KAAK,QAAQ,QAAQ,UAAU,WAAW,OACzC,CAAC,OAAO,MAAM,WAAW,eAAe,MAAM,CAAC,QAAQ,KAAK,QAAW,MAEvE,EAFC,OAGH,EAJC,KAAK;AAAA,EAKR,EAlBC;AAoBL;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
package/dist/jsx/Grid.js
CHANGED
|
@@ -2,7 +2,7 @@ import { isWeb } from "@tamagui/core";
|
|
|
2
2
|
import { XStack } from "@tamagui/stacks";
|
|
3
3
|
import React from "react";
|
|
4
4
|
function Grid({ children, columns, itemMinWidth = 200, gap }) {
|
|
5
|
-
if (isWeb)
|
|
5
|
+
if (isWeb)
|
|
6
6
|
return <div
|
|
7
7
|
style={{
|
|
8
8
|
gap,
|
|
@@ -13,20 +13,14 @@ function Grid({ children, columns, itemMinWidth = 200, gap }) {
|
|
|
13
13
|
// gridTemplateColumns: '1fr 1fr',
|
|
14
14
|
}}
|
|
15
15
|
>{children}</div>;
|
|
16
|
-
}
|
|
17
16
|
const childrenList = React.Children.toArray(children);
|
|
18
|
-
return <XStack alignItems="center" justifyContent="center" flexWrap="wrap">{childrenList.map((child, i) =>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
minWidth={itemMinWidth}
|
|
26
|
-
marginRight={gap}
|
|
27
|
-
marginBottom={gap}
|
|
28
|
-
>{child}</XStack>;
|
|
29
|
-
})}</XStack>;
|
|
17
|
+
return <XStack alignItems="center" justifyContent="center" flexWrap="wrap">{childrenList.map((child, i) => child ? <XStack
|
|
18
|
+
key={i}
|
|
19
|
+
flex={1}
|
|
20
|
+
minWidth={itemMinWidth}
|
|
21
|
+
marginRight={gap}
|
|
22
|
+
marginBottom={gap}
|
|
23
|
+
>{child}</XStack> : null)}</XStack>;
|
|
30
24
|
}
|
|
31
25
|
export {
|
|
32
26
|
Grid
|
package/dist/jsx/Grid.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Grid.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,OAAO,WAAW;AASX,SAAS,KAAK,EAAE,UAAU,SAAS,eAAe,KAAK,IAAI,GAAc;AAC9E,MAAI
|
|
4
|
+
"mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,OAAO,WAAW;AASX,SAAS,KAAK,EAAE,UAAU,SAAS,eAAe,KAAK,IAAI,GAAc;AAC9E,MAAI;AACF,WACE,CAAC;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT,gBAAgB;AAAA;AAAA,QAEhB,qBAAqB,4BAA4B,YAAY;AAAA;AAAA,MAE/D;AAAA,MAEC,SACH,EAXC;AAeL,QAAM,eAAe,MAAM,SAAS,QAAQ,QAAQ;AAEpD,SACE,CAAC,OAAO,WAAW,SAAS,eAAe,SAAS,SAAS,QAC1D,aAAa,IAAI,CAAC,OAAO,MACnB,QAMH,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,cAAc;AAAA,IAEb,MACH,EARC,UALM,IAeV,EACH,EAnBC;AAqBL;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { isWeb } from "@tamagui/core";
|
|
2
|
+
import { XStack } from "@tamagui/stacks";
|
|
3
|
+
import React from "react";
|
|
4
|
+
function Grid({ children, columns, itemMinWidth = 200, gap }) {
|
|
5
|
+
if (isWeb)
|
|
6
|
+
return <div
|
|
7
|
+
style={{
|
|
8
|
+
gap,
|
|
9
|
+
display: "grid",
|
|
10
|
+
justifyContent: "stretch",
|
|
11
|
+
// gridTemplateRows: 'repeat(4, 1fr)',
|
|
12
|
+
gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
|
|
13
|
+
// gridTemplateColumns: '1fr 1fr',
|
|
14
|
+
}}
|
|
15
|
+
>{children}</div>;
|
|
16
|
+
const childrenList = React.Children.toArray(children);
|
|
17
|
+
return <XStack alignItems="center" justifyContent="center" flexWrap="wrap">{childrenList.map((child, i) => child ? <XStack
|
|
18
|
+
key={i}
|
|
19
|
+
flex={1}
|
|
20
|
+
minWidth={itemMinWidth}
|
|
21
|
+
marginRight={gap}
|
|
22
|
+
marginBottom={gap}
|
|
23
|
+
>{child}</XStack> : null)}</XStack>;
|
|
24
|
+
}
|
|
25
|
+
export {
|
|
26
|
+
Grid
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Grid.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Grid.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,OAAO,WAAW;AASX,SAAS,KAAK,EAAE,UAAU,SAAS,eAAe,KAAK,IAAI,GAAc;AAC9E,MAAI;AACF,WACE,CAAC;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,QACT,gBAAgB;AAAA;AAAA,QAEhB,qBAAqB,4BAA4B,YAAY;AAAA;AAAA,MAE/D;AAAA,MAEC,SACH,EAXC;AAeL,QAAM,eAAe,MAAM,SAAS,QAAQ,QAAQ;AAEpD,SACE,CAAC,OAAO,WAAW,SAAS,eAAe,SAAS,SAAS,QAC1D,aAAa,IAAI,CAAC,OAAO,MACnB,QAMH,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,cAAc;AAAA,IAEb,MACH,EARC,UALM,IAeV,EACH,EAnBC;AAqBL;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Activity, Airplay } from "@tamagui/lucide-icons";
|
|
2
|
+
import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
|
|
3
|
+
function GroupDemo() {
|
|
4
|
+
return <YStack padding="$3" space="$2" alignItems="center">
|
|
5
|
+
<Group orientation="horizontal">
|
|
6
|
+
<Group.Item><Button>First</Button></Group.Item>
|
|
7
|
+
<Group.Item><Button>Second</Button></Group.Item>
|
|
8
|
+
<Group.Item><Button>Third</Button></Group.Item>
|
|
9
|
+
</Group>
|
|
10
|
+
{
|
|
11
|
+
/* responsive + size */
|
|
12
|
+
}
|
|
13
|
+
<XGroup size="$3" $gtSm={{ size: "$5" }}>
|
|
14
|
+
<XGroup.Item><Button size="$3" icon={Activity}>First</Button></XGroup.Item>
|
|
15
|
+
<XGroup.Item><Button size="$3" icon={Airplay}>Second</Button></XGroup.Item>
|
|
16
|
+
</XGroup>
|
|
17
|
+
{
|
|
18
|
+
/* Separator */
|
|
19
|
+
}
|
|
20
|
+
<YGroup separator={<Separator />}>
|
|
21
|
+
<YGroup.Item><ListItem title="First" /></YGroup.Item>
|
|
22
|
+
<YGroup.Item><ListItem title="Second" subTitle="Second subtitle" /></YGroup.Item>
|
|
23
|
+
<YGroup.Item><ListItem>Third</ListItem></YGroup.Item>
|
|
24
|
+
</YGroup>
|
|
25
|
+
</YStack>;
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
GroupDemo
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=GroupDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/GroupDemo.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW;AAAA,IACzC,CAAC,MAAM,YAAY;AAAA,MACjB,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,MAAM,EAAb,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,IAGT,EAVC;AAAA;AAAA;AAAA;AAAA,IAaD,CAAC,OAAO,KAAK,KAAK,OAAO,EAAE,MAAM,KAAK;AAAA,MACpC,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,UAAU,KAElC,EAFC,OAGH,EAJC,OAAO;AAAA,MAKR,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,SAAS,MAEjC,EAFC,OAGH,EAJC,OAAO;AAAA,IAKV,EAXC;AAAA;AAAA;AAAA;AAAA,IAcD,CAAC,OAAO,WAAW,CAAC,UAAU;AAAA,MAC5B,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,QAAQ,EAC1B,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,SAAS,SAAS,kBAAkB,EACtD,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,KAAK,EAAd,SACH,EAFC,OAAO;AAAA,IAGV,EAVC;AAAA,EAWH,EAvCC;AAyCL;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
|
|
2
|
+
function HeadingsDemo() {
|
|
3
|
+
return <YStack alignSelf="center">
|
|
4
|
+
<H1>Heading 1</H1>
|
|
5
|
+
<H2>Heading 2</H2>
|
|
6
|
+
<H3>Heading 3</H3>
|
|
7
|
+
<H4>Heading 4</H4>
|
|
8
|
+
<H5>Heading 5</H5>
|
|
9
|
+
<H6>Heading 6</H6>
|
|
10
|
+
</YStack>;
|
|
11
|
+
}
|
|
12
|
+
export {
|
|
13
|
+
HeadingsDemo
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=HeadingsDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/HeadingsDemo.tsx"],
|
|
4
|
+
"mappings": "AACA,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,CAAC,OAAO,UAAU;AAAA,IAChB,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,EACH,EAPC;AASL;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Button, Input, TextArea, XStack, YStack } from "tamagui";
|
|
2
|
+
function InputsDemo() {
|
|
3
|
+
return <YStack
|
|
4
|
+
width={200}
|
|
5
|
+
minHeight={250}
|
|
6
|
+
overflow="hidden"
|
|
7
|
+
space="$2"
|
|
8
|
+
margin="$3"
|
|
9
|
+
padding="$2"
|
|
10
|
+
>
|
|
11
|
+
<InputDemo size="$2" />
|
|
12
|
+
<InputDemo size="$3" />
|
|
13
|
+
<InputDemo size="$4" />
|
|
14
|
+
<TextArea placeholder="Enter your details..." />
|
|
15
|
+
</YStack>;
|
|
16
|
+
}
|
|
17
|
+
function InputDemo(props) {
|
|
18
|
+
return <XStack alignItems="center" space="$2">
|
|
19
|
+
<Input flex={1} size={props.size} placeholder={`Size ${props.size}...`} />
|
|
20
|
+
<Button size={props.size}>Go</Button>
|
|
21
|
+
</XStack>;
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
InputsDemo
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=InputsDemo.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/InputsDemo.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAE7D,SAAS,aAAa;AAC3B,SACE,CAAC;AAAA,IACC,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA;AAAA,IAER,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,SAAS,YAAY,wBAAwB;AAAA,EAChD,EAZC;AAcL;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,MAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,IAAI,OAAO;AAAA,IACxE,CAAC,OAAO,MAAM,MAAM,MAAM,EAAE,EAA3B;AAAA,EACH,EAHC;AAKL;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Input, Label, Switch, XStack, YStack } from "tamagui";
|
|
2
|
+
function LabelDemo() {
|
|
3
|
+
return <YStack padding="$3" minWidth={300} space="$4">
|
|
4
|
+
<XStack alignItems="center" space="$4">
|
|
5
|
+
<Label width={90} htmlFor="name">Name</Label>
|
|
6
|
+
<Input flex={1} id="name" defaultValue="Nate Wienert" />
|
|
7
|
+
</XStack>
|
|
8
|
+
<XStack alignItems="center" space="$4">
|
|
9
|
+
<Label width={90} htmlFor="notify">Notifications</Label>
|
|
10
|
+
<Switch id="notify"><Switch.Thumb animation="quick" /></Switch>
|
|
11
|
+
</XStack>
|
|
12
|
+
</YStack>;
|
|
13
|
+
}
|
|
14
|
+
export {
|
|
15
|
+
LabelDemo
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=LabelDemo.js.map
|