@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
package/dist/esm/ColorsDemo.js
CHANGED
|
@@ -1,98 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
H2,
|
|
4
|
-
Paragraph,
|
|
5
|
-
Separator,
|
|
6
|
-
Square,
|
|
7
|
-
XStack,
|
|
8
|
-
YStack,
|
|
9
|
-
getTokens,
|
|
10
|
-
getVariableValue
|
|
11
|
-
} from "tamagui";
|
|
12
|
-
const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
|
|
13
|
-
function ColorsDemo() {
|
|
14
|
-
const colors = getTokens({ prefixed: false }).color;
|
|
15
|
-
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
|
|
16
|
-
return /* @__PURE__ */ jsxs(YStack, { marginTop: "$4", space: "$8", children: [
|
|
17
|
-
/* @__PURE__ */ jsx(ColorsRow, { title: "Light", colors: colorsLight }),
|
|
18
|
-
/* @__PURE__ */ jsx(Separator, {}),
|
|
19
|
-
/* @__PURE__ */ jsx(ColorsRow, { title: "Dark", colors: colorsDark })
|
|
20
|
-
] });
|
|
21
|
-
}
|
|
22
|
-
function ColorsRow({ title, colors }) {
|
|
23
|
-
return /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, children: [
|
|
24
|
-
/* @__PURE__ */ jsx(H2, { size: "$2", children: title }),
|
|
25
|
-
/* @__PURE__ */ jsxs(XStack, { space: true, alignSelf: "center", children: [
|
|
26
|
-
/* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, als: "center", children: [
|
|
27
|
-
colors.map((group, index) => {
|
|
28
|
-
return /* @__PURE__ */ jsx(XStack, { space: "$2", children: group.map((color) => {
|
|
29
|
-
return /* @__PURE__ */ jsx(
|
|
30
|
-
Square,
|
|
31
|
-
{
|
|
32
|
-
borderRadius: "$2",
|
|
33
|
-
size: "$4",
|
|
34
|
-
height: "$4",
|
|
35
|
-
borderWidth: 1,
|
|
36
|
-
backgroundColor: getVariableValue(color),
|
|
37
|
-
borderColor: "$color7",
|
|
38
|
-
$sm: {
|
|
39
|
-
size: "$2"
|
|
40
|
-
},
|
|
41
|
-
$xs: {
|
|
42
|
-
size: "$1"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
`${color.key}${index}`
|
|
46
|
-
);
|
|
47
|
-
}) }, index);
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsx(XStack, { space: "$2", alignSelf: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
|
|
50
|
-
return /* @__PURE__ */ jsx(
|
|
51
|
-
Paragraph,
|
|
52
|
-
{
|
|
53
|
-
color: "$color10",
|
|
54
|
-
textAlign: "center",
|
|
55
|
-
width: "$4",
|
|
56
|
-
$sm: {
|
|
57
|
-
width: "$2"
|
|
58
|
-
},
|
|
59
|
-
$xs: {
|
|
60
|
-
width: "$1"
|
|
61
|
-
},
|
|
62
|
-
children: index
|
|
63
|
-
},
|
|
64
|
-
index
|
|
65
|
-
);
|
|
66
|
-
}) })
|
|
67
|
-
] }),
|
|
68
|
-
/* @__PURE__ */ jsx(YStack, { space: "$4", marginTop: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
|
|
69
|
-
Paragraph,
|
|
70
|
-
{
|
|
71
|
-
theme: name,
|
|
72
|
-
color: "$color10",
|
|
73
|
-
height: "$4",
|
|
74
|
-
rotate: "-10deg",
|
|
75
|
-
$sm: {
|
|
76
|
-
height: "$2"
|
|
77
|
-
},
|
|
78
|
-
$xs: {
|
|
79
|
-
height: "$1"
|
|
80
|
-
},
|
|
81
|
-
children: name
|
|
82
|
-
},
|
|
83
|
-
name
|
|
84
|
-
)) })
|
|
85
|
-
] })
|
|
86
|
-
] });
|
|
87
|
-
}
|
|
88
|
-
function getColors(colors, dark = false) {
|
|
89
|
-
return colorGroups.map((group) => {
|
|
90
|
-
return Object.keys(colors).filter(
|
|
91
|
-
(color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
|
|
92
|
-
).map((key) => colors[key]);
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
export {
|
|
96
|
-
ColorsDemo
|
|
97
|
-
};
|
|
1
|
+
import{jsx as t,jsxs as c}from"react/jsx-runtime";import{H2 as k,Paragraph as $,Separator as h,Square as u,XStack as i,YStack as s,getTokens as m,getVariableValue as d}from"tamagui";const n=["orange","yellow","green","blue","purple","pink","red"];function y(){const a=m({prefixed:!1}).color,[o,r]=[g(a),g(a,!0)];return c(s,{marginTop:"$4",space:"$8",children:[t(p,{title:"Light",colors:o}),t(h,{}),t(p,{title:"Dark",colors:r})]})}function p({title:a,colors:o}){return c(s,{space:!0,$sm:{space:"$2"},children:[t(k,{size:"$2",children:a}),c(i,{space:!0,alignSelf:"center",children:[c(s,{space:!0,$sm:{space:"$2"},als:"center",children:[o.map((r,e)=>t(i,{space:"$2",children:r.map(l=>t(u,{borderRadius:"$2",size:"$4",height:"$4",borderWidth:1,backgroundColor:d(l),borderColor:"$color7",$sm:{size:"$2"},$xs:{size:"$1"}},`${l.key}${e}`))},e)),t(i,{space:"$2",alignSelf:"center",children:new Array(13).fill(0).slice(1).map((r,e)=>t($,{color:"$color10",textAlign:"center",width:"$4",$sm:{width:"$2"},$xs:{width:"$1"},children:e},e))})]}),t(s,{space:"$4",marginTop:"$2",children:n.map(r=>t($,{theme:r,color:"$color10",height:"$4",rotate:"-10deg",$sm:{height:"$2"},$xs:{height:"$1"},children:r},r))})]})]})}function g(a,o=!1){return n.map(r=>Object.keys(a).filter(e=>e.startsWith(r)&&(o?e.endsWith("Dark"):!e.endsWith("Dark"))).map(e=>a[e]))}export{y as ColorsDemo};
|
|
98
2
|
//# sourceMappingURL=ColorsDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ColorsDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n H2,\n Paragraph,\n Separator,\n Square,\n XStack,\n YStack,\n getTokens,\n getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n const colors = getTokens({ prefixed: false }).color\n const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n return (\n <YStack marginTop=\"$4\" space=\"$8\">\n <ColorsRow title=\"Light\" colors={colorsLight} />\n <Separator />\n <ColorsRow title=\"Dark\" colors={colorsDark} />\n </YStack>\n )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n return (\n <YStack space $sm={{ space: '$2' }}>\n <H2 size=\"$2\">{title}</H2>\n\n <XStack space alignSelf=\"center\">\n <YStack space $sm={{ space: '$2' }} als=\"center\">\n {colors.map((group, index) => {\n return (\n <XStack space=\"$2\" key={index}>\n {group.map((color) => {\n return (\n <Square\n key={`${color.key}${index}`}\n borderRadius=\"$2\"\n size=\"$4\"\n height=\"$4\"\n borderWidth={1}\n backgroundColor={getVariableValue(color)}\n borderColor=\"$color7\"\n $sm={{\n size: '$2',\n }}\n $xs={{\n size: '$1',\n }}\n />\n )\n })}\n </XStack>\n )\n })}\n\n <XStack space=\"$2\" alignSelf=\"center\">\n {new Array(13)\n .fill(0)\n .slice(1)\n .map((_, index) => {\n return (\n <Paragraph\n color=\"$color10\"\n textAlign=\"center\"\n width=\"$4\"\n $sm={{\n width:'$2',\n }}\n $xs={{\n width: '$1',\n }}\n key={index}\n >\n {index}\n </Paragraph>\n )\n })}\n </XStack>\n </YStack>\n\n <YStack space=\"$4\" marginTop=\"$2\">\n {colorGroups.map((name) => (\n <Paragraph\n theme={name as any}\n color=\"$color10\"\n height=\"$4\"\n rotate=\"-10deg\"\n $sm={{\n height: '$2',\n }}\n $xs={{\n height: '$1',\n }}\n key={name}\n >\n {name}\n </Paragraph>\n ))}\n </YStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n return colorGroups.map((group) => {\n return Object.keys(colors)\n .filter(\n (color) =>\n color.startsWith(group) &&\n (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n )\n .map((key) => colors[key])\n })\n}\n"],
|
|
5
|
-
"mappings": "AAmBI,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAmBI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlBJ,OACE,MAAAC,EACA,aAAAC,EACA,aAAAC,EACA,UAAAC,EACA,UAAAC,EACA,UAAAC,EACA,aAAAC,EACA,oBAAAC,MACK,UAEP,MAAMC,EAAc,CAAC,SAAU,SAAU,QAAS,OAAQ,SAAU,OAAQ,KAAK,EAE1E,SAASC,GAAa,CAC3B,MAAMC,EAASJ,EAAU,CAAE,SAAU,EAAM,CAAC,EAAE,MACxC,CAACK,EAAaC,CAAU,EAAI,CAACC,EAAUH,CAAM,EAAGG,EAAUH,EAAQ,EAAI,CAAC,EAE7E,OACEX,EAACM,EAAA,CAAO,UAAU,KAAK,MAAM,KAC3B,UAAAP,EAACgB,EAAA,CAAU,MAAM,QAAQ,OAAQH,EAAa,EAC9Cb,EAACI,EAAA,EAAU,EACXJ,EAACgB,EAAA,CAAU,MAAM,OAAO,OAAQF,EAAY,GAC9C,CAEJ,CAEA,SAASE,EAAU,CAAE,MAAAC,EAAO,OAAAL,CAAO,EAA4C,CAC7E,OACEX,EAACM,EAAA,CAAO,MAAK,GAAC,IAAK,CAAE,MAAO,IAAK,EAC/B,UAAAP,EAACE,EAAA,CAAG,KAAK,KAAM,SAAAe,EAAM,EAErBhB,EAACK,EAAA,CAAO,MAAK,GAAC,UAAU,SACtB,UAAAL,EAACM,EAAA,CAAO,MAAK,GAAC,IAAK,CAAE,MAAO,IAAK,EAAG,IAAI,SACrC,UAAAK,EAAO,IAAI,CAACM,EAAOC,IAEhBnB,EAACM,EAAA,CAAO,MAAM,KACX,SAAAY,EAAM,IAAKE,GAERpB,EAACK,EAAA,CAEC,aAAa,KACb,KAAK,KACL,OAAO,KACP,YAAa,EACb,gBAAiBI,EAAiBW,CAAK,EACvC,YAAY,UACZ,IAAK,CACH,KAAM,IACR,EACA,IAAK,CACH,KAAM,IACR,GAZK,GAAGA,EAAM,MAAMD,GAatB,CAEH,GAnBqBA,CAoBxB,CAEH,EAEDnB,EAACM,EAAA,CAAO,MAAM,KAAK,UAAU,SAC1B,aAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAACe,EAAGF,IAELnB,EAACG,EAAA,CACC,MAAM,WACN,UAAU,SACV,MAAM,KACN,IAAK,CACJ,MAAM,IACP,EACA,IAAK,CACH,MAAO,IACT,EAGC,SAAAgB,GAFIA,CAGP,CAEH,EACL,GACF,EAEAnB,EAACO,EAAA,CAAO,MAAM,KAAK,UAAU,KAC1B,SAAAG,EAAY,IAAKY,GAChBtB,EAACG,EAAA,CACC,MAAOmB,EACP,MAAM,WACN,OAAO,KACP,OAAO,SACP,IAAK,CACH,OAAQ,IACV,EACA,IAAK,CACH,OAAQ,IACV,EAGC,SAAAA,GAFIA,CAGP,CACD,EACH,GACF,GACF,CAEJ,CAEA,SAASP,EAAUH,EAAkCW,EAAO,GAAO,CACjE,OAAOb,EAAY,IAAKQ,GACf,OAAO,KAAKN,CAAM,EACtB,OACEQ,GACCA,EAAM,WAAWF,CAAK,IACrBK,EAAOH,EAAM,SAAS,MAAM,EAAI,CAACA,EAAM,SAAS,MAAM,EAC3D,EACC,IAAKI,GAAQZ,EAAOY,CAAG,CAAC,CAC5B,CACH",
|
|
6
|
+
"names": ["jsx", "jsxs", "H2", "Paragraph", "Separator", "Square", "XStack", "YStack", "getTokens", "getVariableValue", "colorGroups", "ColorsDemo", "colors", "colorsLight", "colorsDark", "getColors", "ColorsRow", "title", "group", "index", "color", "_", "name", "dark", "key"]
|
|
7
7
|
}
|
package/dist/esm/ColorsDemo.mjs
CHANGED
|
@@ -1,98 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
H2,
|
|
4
|
-
Paragraph,
|
|
5
|
-
Separator,
|
|
6
|
-
Square,
|
|
7
|
-
XStack,
|
|
8
|
-
YStack,
|
|
9
|
-
getTokens,
|
|
10
|
-
getVariableValue
|
|
11
|
-
} from "tamagui";
|
|
12
|
-
const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
|
|
13
|
-
function ColorsDemo() {
|
|
14
|
-
const colors = getTokens({ prefixed: false }).color;
|
|
15
|
-
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
|
|
16
|
-
return /* @__PURE__ */ jsxs(YStack, { marginTop: "$4", space: "$8", children: [
|
|
17
|
-
/* @__PURE__ */ jsx(ColorsRow, { title: "Light", colors: colorsLight }),
|
|
18
|
-
/* @__PURE__ */ jsx(Separator, {}),
|
|
19
|
-
/* @__PURE__ */ jsx(ColorsRow, { title: "Dark", colors: colorsDark })
|
|
20
|
-
] });
|
|
21
|
-
}
|
|
22
|
-
function ColorsRow({ title, colors }) {
|
|
23
|
-
return /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, children: [
|
|
24
|
-
/* @__PURE__ */ jsx(H2, { size: "$2", children: title }),
|
|
25
|
-
/* @__PURE__ */ jsxs(XStack, { space: true, alignSelf: "center", children: [
|
|
26
|
-
/* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, als: "center", children: [
|
|
27
|
-
colors.map((group, index) => {
|
|
28
|
-
return /* @__PURE__ */ jsx(XStack, { space: "$2", children: group.map((color) => {
|
|
29
|
-
return /* @__PURE__ */ jsx(
|
|
30
|
-
Square,
|
|
31
|
-
{
|
|
32
|
-
borderRadius: "$2",
|
|
33
|
-
size: "$4",
|
|
34
|
-
height: "$4",
|
|
35
|
-
borderWidth: 1,
|
|
36
|
-
backgroundColor: getVariableValue(color),
|
|
37
|
-
borderColor: "$color7",
|
|
38
|
-
$sm: {
|
|
39
|
-
size: "$2"
|
|
40
|
-
},
|
|
41
|
-
$xs: {
|
|
42
|
-
size: "$1"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
`${color.key}${index}`
|
|
46
|
-
);
|
|
47
|
-
}) }, index);
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsx(XStack, { space: "$2", alignSelf: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
|
|
50
|
-
return /* @__PURE__ */ jsx(
|
|
51
|
-
Paragraph,
|
|
52
|
-
{
|
|
53
|
-
color: "$color10",
|
|
54
|
-
textAlign: "center",
|
|
55
|
-
width: "$4",
|
|
56
|
-
$sm: {
|
|
57
|
-
width: "$2"
|
|
58
|
-
},
|
|
59
|
-
$xs: {
|
|
60
|
-
width: "$1"
|
|
61
|
-
},
|
|
62
|
-
children: index
|
|
63
|
-
},
|
|
64
|
-
index
|
|
65
|
-
);
|
|
66
|
-
}) })
|
|
67
|
-
] }),
|
|
68
|
-
/* @__PURE__ */ jsx(YStack, { space: "$4", marginTop: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
|
|
69
|
-
Paragraph,
|
|
70
|
-
{
|
|
71
|
-
theme: name,
|
|
72
|
-
color: "$color10",
|
|
73
|
-
height: "$4",
|
|
74
|
-
rotate: "-10deg",
|
|
75
|
-
$sm: {
|
|
76
|
-
height: "$2"
|
|
77
|
-
},
|
|
78
|
-
$xs: {
|
|
79
|
-
height: "$1"
|
|
80
|
-
},
|
|
81
|
-
children: name
|
|
82
|
-
},
|
|
83
|
-
name
|
|
84
|
-
)) })
|
|
85
|
-
] })
|
|
86
|
-
] });
|
|
87
|
-
}
|
|
88
|
-
function getColors(colors, dark = false) {
|
|
89
|
-
return colorGroups.map((group) => {
|
|
90
|
-
return Object.keys(colors).filter(
|
|
91
|
-
(color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
|
|
92
|
-
).map((key) => colors[key]);
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
export {
|
|
96
|
-
ColorsDemo
|
|
97
|
-
};
|
|
1
|
+
import{jsx as t,jsxs as c}from"react/jsx-runtime";import{H2 as k,Paragraph as $,Separator as h,Square as u,XStack as i,YStack as s,getTokens as m,getVariableValue as d}from"tamagui";const n=["orange","yellow","green","blue","purple","pink","red"];function y(){const a=m({prefixed:!1}).color,[o,r]=[g(a),g(a,!0)];return c(s,{marginTop:"$4",space:"$8",children:[t(p,{title:"Light",colors:o}),t(h,{}),t(p,{title:"Dark",colors:r})]})}function p({title:a,colors:o}){return c(s,{space:!0,$sm:{space:"$2"},children:[t(k,{size:"$2",children:a}),c(i,{space:!0,alignSelf:"center",children:[c(s,{space:!0,$sm:{space:"$2"},als:"center",children:[o.map((r,e)=>t(i,{space:"$2",children:r.map(l=>t(u,{borderRadius:"$2",size:"$4",height:"$4",borderWidth:1,backgroundColor:d(l),borderColor:"$color7",$sm:{size:"$2"},$xs:{size:"$1"}},`${l.key}${e}`))},e)),t(i,{space:"$2",alignSelf:"center",children:new Array(13).fill(0).slice(1).map((r,e)=>t($,{color:"$color10",textAlign:"center",width:"$4",$sm:{width:"$2"},$xs:{width:"$1"},children:e},e))})]}),t(s,{space:"$4",marginTop:"$2",children:n.map(r=>t($,{theme:r,color:"$color10",height:"$4",rotate:"-10deg",$sm:{height:"$2"},$xs:{height:"$1"},children:r},r))})]})]})}function g(a,o=!1){return n.map(r=>Object.keys(a).filter(e=>e.startsWith(r)&&(o?e.endsWith("Dark"):!e.endsWith("Dark"))).map(e=>a[e]))}export{y as ColorsDemo};
|
|
98
2
|
//# sourceMappingURL=ColorsDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ColorsDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n H2,\n Paragraph,\n Separator,\n Square,\n XStack,\n YStack,\n getTokens,\n getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n const colors = getTokens({ prefixed: false }).color\n const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n return (\n <YStack marginTop=\"$4\" space=\"$8\">\n <ColorsRow title=\"Light\" colors={colorsLight} />\n <Separator />\n <ColorsRow title=\"Dark\" colors={colorsDark} />\n </YStack>\n )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n return (\n <YStack space $sm={{ space: '$2' }}>\n <H2 size=\"$2\">{title}</H2>\n\n <XStack space alignSelf=\"center\">\n <YStack space $sm={{ space: '$2' }} als=\"center\">\n {colors.map((group, index) => {\n return (\n <XStack space=\"$2\" key={index}>\n {group.map((color) => {\n return (\n <Square\n key={`${color.key}${index}`}\n borderRadius=\"$2\"\n size=\"$4\"\n height=\"$4\"\n borderWidth={1}\n backgroundColor={getVariableValue(color)}\n borderColor=\"$color7\"\n $sm={{\n size: '$2',\n }}\n $xs={{\n size: '$1',\n }}\n />\n )\n })}\n </XStack>\n )\n })}\n\n <XStack space=\"$2\" alignSelf=\"center\">\n {new Array(13)\n .fill(0)\n .slice(1)\n .map((_, index) => {\n return (\n <Paragraph\n color=\"$color10\"\n textAlign=\"center\"\n width=\"$4\"\n $sm={{\n width:'$2',\n }}\n $xs={{\n width: '$1',\n }}\n key={index}\n >\n {index}\n </Paragraph>\n )\n })}\n </XStack>\n </YStack>\n\n <YStack space=\"$4\" marginTop=\"$2\">\n {colorGroups.map((name) => (\n <Paragraph\n theme={name as any}\n color=\"$color10\"\n height=\"$4\"\n rotate=\"-10deg\"\n $sm={{\n height: '$2',\n }}\n $xs={{\n height: '$1',\n }}\n key={name}\n >\n {name}\n </Paragraph>\n ))}\n </YStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n return colorGroups.map((group) => {\n return Object.keys(colors)\n .filter(\n (color) =>\n color.startsWith(group) &&\n (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n )\n .map((key) => colors[key])\n })\n}\n"],
|
|
5
|
-
"mappings": "AAmBI,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAmBI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlBJ,OACE,MAAAC,EACA,aAAAC,EACA,aAAAC,EACA,UAAAC,EACA,UAAAC,EACA,UAAAC,EACA,aAAAC,EACA,oBAAAC,MACK,UAEP,MAAMC,EAAc,CAAC,SAAU,SAAU,QAAS,OAAQ,SAAU,OAAQ,KAAK,EAE1E,SAASC,GAAa,CAC3B,MAAMC,EAASJ,EAAU,CAAE,SAAU,EAAM,CAAC,EAAE,MACxC,CAACK,EAAaC,CAAU,EAAI,CAACC,EAAUH,CAAM,EAAGG,EAAUH,EAAQ,EAAI,CAAC,EAE7E,OACEX,EAACM,EAAA,CAAO,UAAU,KAAK,MAAM,KAC3B,UAAAP,EAACgB,EAAA,CAAU,MAAM,QAAQ,OAAQH,EAAa,EAC9Cb,EAACI,EAAA,EAAU,EACXJ,EAACgB,EAAA,CAAU,MAAM,OAAO,OAAQF,EAAY,GAC9C,CAEJ,CAEA,SAASE,EAAU,CAAE,MAAAC,EAAO,OAAAL,CAAO,EAA4C,CAC7E,OACEX,EAACM,EAAA,CAAO,MAAK,GAAC,IAAK,CAAE,MAAO,IAAK,EAC/B,UAAAP,EAACE,EAAA,CAAG,KAAK,KAAM,SAAAe,EAAM,EAErBhB,EAACK,EAAA,CAAO,MAAK,GAAC,UAAU,SACtB,UAAAL,EAACM,EAAA,CAAO,MAAK,GAAC,IAAK,CAAE,MAAO,IAAK,EAAG,IAAI,SACrC,UAAAK,EAAO,IAAI,CAACM,EAAOC,IAEhBnB,EAACM,EAAA,CAAO,MAAM,KACX,SAAAY,EAAM,IAAKE,GAERpB,EAACK,EAAA,CAEC,aAAa,KACb,KAAK,KACL,OAAO,KACP,YAAa,EACb,gBAAiBI,EAAiBW,CAAK,EACvC,YAAY,UACZ,IAAK,CACH,KAAM,IACR,EACA,IAAK,CACH,KAAM,IACR,GAZK,GAAGA,EAAM,MAAMD,GAatB,CAEH,GAnBqBA,CAoBxB,CAEH,EAEDnB,EAACM,EAAA,CAAO,MAAM,KAAK,UAAU,SAC1B,aAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAACe,EAAGF,IAELnB,EAACG,EAAA,CACC,MAAM,WACN,UAAU,SACV,MAAM,KACN,IAAK,CACJ,MAAM,IACP,EACA,IAAK,CACH,MAAO,IACT,EAGC,SAAAgB,GAFIA,CAGP,CAEH,EACL,GACF,EAEAnB,EAACO,EAAA,CAAO,MAAM,KAAK,UAAU,KAC1B,SAAAG,EAAY,IAAKY,GAChBtB,EAACG,EAAA,CACC,MAAOmB,EACP,MAAM,WACN,OAAO,KACP,OAAO,SACP,IAAK,CACH,OAAQ,IACV,EACA,IAAK,CACH,OAAQ,IACV,EAGC,SAAAA,GAFIA,CAGP,CACD,EACH,GACF,GACF,CAEJ,CAEA,SAASP,EAAUH,EAAkCW,EAAO,GAAO,CACjE,OAAOb,EAAY,IAAKQ,GACf,OAAO,KAAKN,CAAM,EACtB,OACEQ,GACCA,EAAM,WAAWF,CAAK,IACrBK,EAAOH,EAAM,SAAS,MAAM,EAAI,CAACA,EAAM,SAAS,MAAM,EAC3D,EACC,IAAKI,GAAQZ,EAAOY,CAAG,CAAC,CAC5B,CACH",
|
|
6
|
+
"names": ["jsx", "jsxs", "H2", "Paragraph", "Separator", "Square", "XStack", "YStack", "getTokens", "getVariableValue", "colorGroups", "ColorsDemo", "colors", "colorsLight", "colorsDark", "getColors", "ColorsRow", "title", "group", "index", "color", "_", "name", "dark", "key"]
|
|
7
7
|
}
|
package/dist/esm/DialogDemo.js
CHANGED
|
@@ -1,74 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { X } from "@tamagui/lucide-icons";
|
|
3
|
-
import {
|
|
4
|
-
Adapt,
|
|
5
|
-
Button,
|
|
6
|
-
Dialog,
|
|
7
|
-
Fieldset,
|
|
8
|
-
Input,
|
|
9
|
-
Label,
|
|
10
|
-
Paragraph,
|
|
11
|
-
Sheet,
|
|
12
|
-
TooltipSimple,
|
|
13
|
-
Unspaced,
|
|
14
|
-
YStack
|
|
15
|
-
} from "tamagui";
|
|
16
|
-
import { SelectDemo } from "./SelectDemo";
|
|
17
|
-
function DialogDemo() {
|
|
18
|
-
return /* @__PURE__ */ jsxs(Dialog, { modal: true, children: [
|
|
19
|
-
/* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Edit Profile" }) }),
|
|
20
|
-
/* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { zIndex: 2e5, modal: true, dismissOnSnapToBottom: true, children: [
|
|
21
|
-
/* @__PURE__ */ jsx(Sheet.Frame, { padding: "$4", space: true, children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
|
|
22
|
-
/* @__PURE__ */ jsx(Sheet.Overlay, {})
|
|
23
|
-
] }) }),
|
|
24
|
-
/* @__PURE__ */ jsxs(Dialog.Portal, { children: [
|
|
25
|
-
/* @__PURE__ */ jsx(
|
|
26
|
-
Dialog.Overlay,
|
|
27
|
-
{
|
|
28
|
-
animation: "quick",
|
|
29
|
-
opacity: 0.5,
|
|
30
|
-
enterStyle: { opacity: 0 },
|
|
31
|
-
exitStyle: { opacity: 0 }
|
|
32
|
-
},
|
|
33
|
-
"overlay"
|
|
34
|
-
),
|
|
35
|
-
/* @__PURE__ */ jsxs(
|
|
36
|
-
Dialog.Content,
|
|
37
|
-
{
|
|
38
|
-
bordered: true,
|
|
39
|
-
elevate: true,
|
|
40
|
-
animation: [
|
|
41
|
-
"quick",
|
|
42
|
-
{
|
|
43
|
-
opacity: {
|
|
44
|
-
overshootClamping: true
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
],
|
|
48
|
-
enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
|
|
49
|
-
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
50
|
-
space: true,
|
|
51
|
-
children: [
|
|
52
|
-
/* @__PURE__ */ jsx(Dialog.Title, { children: "Edit profile" }),
|
|
53
|
-
/* @__PURE__ */ jsx(Dialog.Description, { children: "Make changes to your profile here. Click save when you're done." }),
|
|
54
|
-
/* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
|
|
55
|
-
/* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "name", children: "Name" }),
|
|
56
|
-
/* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
|
|
57
|
-
] }),
|
|
58
|
-
/* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
|
|
59
|
-
/* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "username", children: /* @__PURE__ */ jsx(TooltipSimple, { label: "Pick your favorite", placement: "bottom-start", children: /* @__PURE__ */ jsx(Paragraph, { children: "Food" }) }) }),
|
|
60
|
-
/* @__PURE__ */ jsx(SelectDemo, {})
|
|
61
|
-
] }),
|
|
62
|
-
/* @__PURE__ */ jsx(YStack, { alignItems: "flex-end", marginTop: "$2", children: /* @__PURE__ */ jsx(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx(Button, { theme: "alt1", "aria-label": "Close", children: "Save changes" }) }) }),
|
|
63
|
-
/* @__PURE__ */ jsx(Unspaced, { children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { position: "absolute", top: "$3", right: "$3", size: "$2", circular: true, icon: X }) }) })
|
|
64
|
-
]
|
|
65
|
-
},
|
|
66
|
-
"content"
|
|
67
|
-
)
|
|
68
|
-
] })
|
|
69
|
-
] });
|
|
70
|
-
}
|
|
71
|
-
export {
|
|
72
|
-
DialogDemo
|
|
73
|
-
};
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{X as p}from"@tamagui/lucide-icons";import{Adapt as l,Button as a,Dialog as t,Fieldset as n,Input as s,Label as r,Paragraph as d,Sheet as i,TooltipSimple as c,Unspaced as m,YStack as h}from"tamagui";import{SelectDemo as g}from"./SelectDemo";function D(){return o(t,{modal:!0,children:[e(t.Trigger,{asChild:!0,children:e(a,{children:"Edit Profile"})}),e(l,{when:"sm",platform:"touch",children:o(i,{zIndex:2e5,modal:!0,dismissOnSnapToBottom:!0,children:[e(i.Frame,{padding:"$4",space:!0,children:e(l.Contents,{})}),e(i.Overlay,{})]})}),o(t.Portal,{children:[e(t.Overlay,{animation:"quick",opacity:.5,enterStyle:{opacity:0},exitStyle:{opacity:0}},"overlay"),o(t.Content,{bordered:!0,elevate:!0,animation:["quick",{opacity:{overshootClamping:!0}}],enterStyle:{x:0,y:-20,opacity:0,scale:.9},exitStyle:{x:0,y:10,opacity:0,scale:.95},space:!0,children:[e(t.Title,{children:"Edit profile"}),e(t.Description,{children:"Make changes to your profile here. Click save when you're done."}),o(n,{space:"$4",horizontal:!0,children:[e(r,{width:160,justifyContent:"flex-end",htmlFor:"name",children:"Name"}),e(s,{flex:1,id:"name",defaultValue:"Nate Wienert"})]}),o(n,{space:"$4",horizontal:!0,children:[e(r,{width:160,justifyContent:"flex-end",htmlFor:"username",children:e(c,{label:"Pick your favorite",placement:"bottom-start",children:e(d,{children:"Food"})})}),e(g,{})]}),e(h,{alignItems:"flex-end",marginTop:"$2",children:e(t.Close,{displayWhenAdapted:!0,asChild:!0,children:e(a,{theme:"alt1","aria-label":"Close",children:"Save changes"})})}),e(m,{children:e(t.Close,{asChild:!0,children:e(a,{position:"absolute",top:"$3",right:"$3",size:"$2",circular:!0,icon:p})})})]},"content")]})]})}export{D as DialogDemo};
|
|
74
2
|
//# sourceMappingURL=DialogDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DialogDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { X } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Dialog,\n Fieldset,\n H2,\n Input,\n Label,\n Paragraph,\n Sheet,\n TooltipSimple,\n Unspaced,\n YStack,\n} from 'tamagui'\n\nimport { SelectDemo } from './SelectDemo'\n\nexport function DialogDemo() {\n return (\n <Dialog modal>\n <Dialog.Trigger asChild>\n <Button>Edit Profile</Button>\n </Dialog.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet zIndex={200000} modal dismissOnSnapToBottom>\n <Sheet.Frame padding=\"$4\" space>\n <Adapt.Contents />\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Dialog.Portal>\n <Dialog.Overlay\n key=\"overlay\"\n animation=\"quick\"\n opacity={0.5}\n enterStyle={{ opacity: 0 }}\n exitStyle={{ opacity: 0 }}\n />\n\n <Dialog.Content\n bordered\n elevate\n key=\"content\"\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n space\n >\n <Dialog.Title>Edit profile</Dialog.Title>\n <Dialog.Description>\n Make changes to your profile here. Click save when you're done.\n </Dialog.Description>\n <Fieldset space=\"$4\" horizontal>\n <Label width={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n Name\n </Label>\n <Input flex={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n </Fieldset>\n <Fieldset space=\"$4\" horizontal>\n <Label width={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n <TooltipSimple label=\"Pick your favorite\" placement=\"bottom-start\">\n <Paragraph>Food</Paragraph>\n </TooltipSimple>\n </Label>\n <SelectDemo />\n </Fieldset>\n\n <YStack alignItems=\"flex-end\" marginTop=\"$2\">\n <Dialog.Close displayWhenAdapted asChild>\n <Button theme=\"alt1\" aria-label=\"Close\">\n Save changes\n </Button>\n </Dialog.Close>\n </YStack>\n\n <Unspaced>\n <Dialog.Close asChild>\n <Button position=\"absolute\" top=\"$3\" right=\"$3\" size=\"$2\" circular icon={X} />\n </Dialog.Close>\n </Unspaced>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAsBQ,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAsBQ,cAAAA,EAIA,QAAAC,MAJA,oBAtBR,OAAS,KAAAC,MAAS,wBAClB,OACE,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EAEA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,MACK,UAEP,OAAS,cAAAC,MAAkB,eAEpB,SAASC,GAAa,CAC3B,OACEd,EAACI,EAAA,CAAO,MAAK,GACX,UAAAL,EAACK,EAAO,QAAP,CAAe,QAAO,GACrB,SAAAL,EAACI,EAAA,CAAO,wBAAY,EACtB,EAEAJ,EAACG,EAAA,CAAM,KAAK,KAAK,SAAS,QACxB,SAAAF,EAACS,EAAA,CAAM,OAAQ,IAAQ,MAAK,GAAC,sBAAqB,GAChD,UAAAV,EAACU,EAAM,MAAN,CAAY,QAAQ,KAAK,MAAK,GAC7B,SAAAV,EAACG,EAAM,SAAN,EAAe,EAClB,EACAH,EAACU,EAAM,QAAN,EAAc,GACjB,EACF,EAEAT,EAACI,EAAO,OAAP,CACC,UAAAL,EAACK,EAAO,QAAP,CAEC,UAAU,QACV,QAAS,GACT,WAAY,CAAE,QAAS,CAAE,EACzB,UAAW,CAAE,QAAS,CAAE,GAJpB,SAKN,EAEAJ,EAACI,EAAO,QAAP,CACC,SAAQ,GACR,QAAO,GAEP,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,WAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,UAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,MAAK,GAEL,UAAAL,EAACK,EAAO,MAAP,CAAa,wBAAY,EAC1BL,EAACK,EAAO,YAAP,CAAmB,2EAEpB,EACAJ,EAACK,EAAA,CAAS,MAAM,KAAK,WAAU,GAC7B,UAAAN,EAACQ,EAAA,CAAM,MAAO,IAAK,eAAe,WAAW,QAAQ,OAAO,gBAE5D,EACAR,EAACO,EAAA,CAAM,KAAM,EAAG,GAAG,OAAO,aAAa,eAAe,GACxD,EACAN,EAACK,EAAA,CAAS,MAAM,KAAK,WAAU,GAC7B,UAAAN,EAACQ,EAAA,CAAM,MAAO,IAAK,eAAe,WAAW,QAAQ,WACnD,SAAAR,EAACW,EAAA,CAAc,MAAM,qBAAqB,UAAU,eAClD,SAAAX,EAACS,EAAA,CAAU,gBAAI,EACjB,EACF,EACAT,EAACc,EAAA,EAAW,GACd,EAEAd,EAACa,EAAA,CAAO,WAAW,WAAW,UAAU,KACtC,SAAAb,EAACK,EAAO,MAAP,CAAa,mBAAkB,GAAC,QAAO,GACtC,SAAAL,EAACI,EAAA,CAAO,MAAM,OAAO,aAAW,QAAQ,wBAExC,EACF,EACF,EAEAJ,EAACY,EAAA,CACC,SAAAZ,EAACK,EAAO,MAAP,CAAa,QAAO,GACnB,SAAAL,EAACI,EAAA,CAAO,SAAS,WAAW,IAAI,KAAK,MAAM,KAAK,KAAK,KAAK,SAAQ,GAAC,KAAMF,EAAG,EAC9E,EACF,IA5CI,SA6CN,GACF,GACF,CAEJ",
|
|
6
|
+
"names": ["jsx", "jsxs", "X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "YStack", "SelectDemo", "DialogDemo"]
|
|
7
7
|
}
|
package/dist/esm/DialogDemo.mjs
CHANGED
|
@@ -1,74 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { X } from "@tamagui/lucide-icons";
|
|
3
|
-
import {
|
|
4
|
-
Adapt,
|
|
5
|
-
Button,
|
|
6
|
-
Dialog,
|
|
7
|
-
Fieldset,
|
|
8
|
-
Input,
|
|
9
|
-
Label,
|
|
10
|
-
Paragraph,
|
|
11
|
-
Sheet,
|
|
12
|
-
TooltipSimple,
|
|
13
|
-
Unspaced,
|
|
14
|
-
YStack
|
|
15
|
-
} from "tamagui";
|
|
16
|
-
import { SelectDemo } from "./SelectDemo";
|
|
17
|
-
function DialogDemo() {
|
|
18
|
-
return /* @__PURE__ */ jsxs(Dialog, { modal: true, children: [
|
|
19
|
-
/* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Edit Profile" }) }),
|
|
20
|
-
/* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { zIndex: 2e5, modal: true, dismissOnSnapToBottom: true, children: [
|
|
21
|
-
/* @__PURE__ */ jsx(Sheet.Frame, { padding: "$4", space: true, children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }),
|
|
22
|
-
/* @__PURE__ */ jsx(Sheet.Overlay, {})
|
|
23
|
-
] }) }),
|
|
24
|
-
/* @__PURE__ */ jsxs(Dialog.Portal, { children: [
|
|
25
|
-
/* @__PURE__ */ jsx(
|
|
26
|
-
Dialog.Overlay,
|
|
27
|
-
{
|
|
28
|
-
animation: "quick",
|
|
29
|
-
opacity: 0.5,
|
|
30
|
-
enterStyle: { opacity: 0 },
|
|
31
|
-
exitStyle: { opacity: 0 }
|
|
32
|
-
},
|
|
33
|
-
"overlay"
|
|
34
|
-
),
|
|
35
|
-
/* @__PURE__ */ jsxs(
|
|
36
|
-
Dialog.Content,
|
|
37
|
-
{
|
|
38
|
-
bordered: true,
|
|
39
|
-
elevate: true,
|
|
40
|
-
animation: [
|
|
41
|
-
"quick",
|
|
42
|
-
{
|
|
43
|
-
opacity: {
|
|
44
|
-
overshootClamping: true
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
],
|
|
48
|
-
enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
|
|
49
|
-
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
50
|
-
space: true,
|
|
51
|
-
children: [
|
|
52
|
-
/* @__PURE__ */ jsx(Dialog.Title, { children: "Edit profile" }),
|
|
53
|
-
/* @__PURE__ */ jsx(Dialog.Description, { children: "Make changes to your profile here. Click save when you're done." }),
|
|
54
|
-
/* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
|
|
55
|
-
/* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "name", children: "Name" }),
|
|
56
|
-
/* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
|
|
57
|
-
] }),
|
|
58
|
-
/* @__PURE__ */ jsxs(Fieldset, { space: "$4", horizontal: true, children: [
|
|
59
|
-
/* @__PURE__ */ jsx(Label, { width: 160, justifyContent: "flex-end", htmlFor: "username", children: /* @__PURE__ */ jsx(TooltipSimple, { label: "Pick your favorite", placement: "bottom-start", children: /* @__PURE__ */ jsx(Paragraph, { children: "Food" }) }) }),
|
|
60
|
-
/* @__PURE__ */ jsx(SelectDemo, {})
|
|
61
|
-
] }),
|
|
62
|
-
/* @__PURE__ */ jsx(YStack, { alignItems: "flex-end", marginTop: "$2", children: /* @__PURE__ */ jsx(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx(Button, { theme: "alt1", "aria-label": "Close", children: "Save changes" }) }) }),
|
|
63
|
-
/* @__PURE__ */ jsx(Unspaced, { children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { position: "absolute", top: "$3", right: "$3", size: "$2", circular: true, icon: X }) }) })
|
|
64
|
-
]
|
|
65
|
-
},
|
|
66
|
-
"content"
|
|
67
|
-
)
|
|
68
|
-
] })
|
|
69
|
-
] });
|
|
70
|
-
}
|
|
71
|
-
export {
|
|
72
|
-
DialogDemo
|
|
73
|
-
};
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{X as p}from"@tamagui/lucide-icons";import{Adapt as l,Button as a,Dialog as t,Fieldset as n,Input as s,Label as r,Paragraph as d,Sheet as i,TooltipSimple as c,Unspaced as m,YStack as h}from"tamagui";import{SelectDemo as g}from"./SelectDemo";function D(){return o(t,{modal:!0,children:[e(t.Trigger,{asChild:!0,children:e(a,{children:"Edit Profile"})}),e(l,{when:"sm",platform:"touch",children:o(i,{zIndex:2e5,modal:!0,dismissOnSnapToBottom:!0,children:[e(i.Frame,{padding:"$4",space:!0,children:e(l.Contents,{})}),e(i.Overlay,{})]})}),o(t.Portal,{children:[e(t.Overlay,{animation:"quick",opacity:.5,enterStyle:{opacity:0},exitStyle:{opacity:0}},"overlay"),o(t.Content,{bordered:!0,elevate:!0,animation:["quick",{opacity:{overshootClamping:!0}}],enterStyle:{x:0,y:-20,opacity:0,scale:.9},exitStyle:{x:0,y:10,opacity:0,scale:.95},space:!0,children:[e(t.Title,{children:"Edit profile"}),e(t.Description,{children:"Make changes to your profile here. Click save when you're done."}),o(n,{space:"$4",horizontal:!0,children:[e(r,{width:160,justifyContent:"flex-end",htmlFor:"name",children:"Name"}),e(s,{flex:1,id:"name",defaultValue:"Nate Wienert"})]}),o(n,{space:"$4",horizontal:!0,children:[e(r,{width:160,justifyContent:"flex-end",htmlFor:"username",children:e(c,{label:"Pick your favorite",placement:"bottom-start",children:e(d,{children:"Food"})})}),e(g,{})]}),e(h,{alignItems:"flex-end",marginTop:"$2",children:e(t.Close,{displayWhenAdapted:!0,asChild:!0,children:e(a,{theme:"alt1","aria-label":"Close",children:"Save changes"})})}),e(m,{children:e(t.Close,{asChild:!0,children:e(a,{position:"absolute",top:"$3",right:"$3",size:"$2",circular:!0,icon:p})})})]},"content")]})]})}export{D as DialogDemo};
|
|
74
2
|
//# sourceMappingURL=DialogDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DialogDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { X } from '@tamagui/lucide-icons'\nimport {\n Adapt,\n Button,\n Dialog,\n Fieldset,\n H2,\n Input,\n Label,\n Paragraph,\n Sheet,\n TooltipSimple,\n Unspaced,\n YStack,\n} from 'tamagui'\n\nimport { SelectDemo } from './SelectDemo'\n\nexport function DialogDemo() {\n return (\n <Dialog modal>\n <Dialog.Trigger asChild>\n <Button>Edit Profile</Button>\n </Dialog.Trigger>\n\n <Adapt when=\"sm\" platform=\"touch\">\n <Sheet zIndex={200000} modal dismissOnSnapToBottom>\n <Sheet.Frame padding=\"$4\" space>\n <Adapt.Contents />\n </Sheet.Frame>\n <Sheet.Overlay />\n </Sheet>\n </Adapt>\n\n <Dialog.Portal>\n <Dialog.Overlay\n key=\"overlay\"\n animation=\"quick\"\n opacity={0.5}\n enterStyle={{ opacity: 0 }}\n exitStyle={{ opacity: 0 }}\n />\n\n <Dialog.Content\n bordered\n elevate\n key=\"content\"\n animation={[\n 'quick',\n {\n opacity: {\n overshootClamping: true,\n },\n },\n ]}\n enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n space\n >\n <Dialog.Title>Edit profile</Dialog.Title>\n <Dialog.Description>\n Make changes to your profile here. Click save when you're done.\n </Dialog.Description>\n <Fieldset space=\"$4\" horizontal>\n <Label width={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n Name\n </Label>\n <Input flex={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n </Fieldset>\n <Fieldset space=\"$4\" horizontal>\n <Label width={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n <TooltipSimple label=\"Pick your favorite\" placement=\"bottom-start\">\n <Paragraph>Food</Paragraph>\n </TooltipSimple>\n </Label>\n <SelectDemo />\n </Fieldset>\n\n <YStack alignItems=\"flex-end\" marginTop=\"$2\">\n <Dialog.Close displayWhenAdapted asChild>\n <Button theme=\"alt1\" aria-label=\"Close\">\n Save changes\n </Button>\n </Dialog.Close>\n </YStack>\n\n <Unspaced>\n <Dialog.Close asChild>\n <Button position=\"absolute\" top=\"$3\" right=\"$3\" size=\"$2\" circular icon={X} />\n </Dialog.Close>\n </Unspaced>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAsBQ,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAsBQ,cAAAA,EAIA,QAAAC,MAJA,oBAtBR,OAAS,KAAAC,MAAS,wBAClB,OACE,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EAEA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,MACK,UAEP,OAAS,cAAAC,MAAkB,eAEpB,SAASC,GAAa,CAC3B,OACEd,EAACI,EAAA,CAAO,MAAK,GACX,UAAAL,EAACK,EAAO,QAAP,CAAe,QAAO,GACrB,SAAAL,EAACI,EAAA,CAAO,wBAAY,EACtB,EAEAJ,EAACG,EAAA,CAAM,KAAK,KAAK,SAAS,QACxB,SAAAF,EAACS,EAAA,CAAM,OAAQ,IAAQ,MAAK,GAAC,sBAAqB,GAChD,UAAAV,EAACU,EAAM,MAAN,CAAY,QAAQ,KAAK,MAAK,GAC7B,SAAAV,EAACG,EAAM,SAAN,EAAe,EAClB,EACAH,EAACU,EAAM,QAAN,EAAc,GACjB,EACF,EAEAT,EAACI,EAAO,OAAP,CACC,UAAAL,EAACK,EAAO,QAAP,CAEC,UAAU,QACV,QAAS,GACT,WAAY,CAAE,QAAS,CAAE,EACzB,UAAW,CAAE,QAAS,CAAE,GAJpB,SAKN,EAEAJ,EAACI,EAAO,QAAP,CACC,SAAQ,GACR,QAAO,GAEP,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,WAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,UAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,MAAK,GAEL,UAAAL,EAACK,EAAO,MAAP,CAAa,wBAAY,EAC1BL,EAACK,EAAO,YAAP,CAAmB,2EAEpB,EACAJ,EAACK,EAAA,CAAS,MAAM,KAAK,WAAU,GAC7B,UAAAN,EAACQ,EAAA,CAAM,MAAO,IAAK,eAAe,WAAW,QAAQ,OAAO,gBAE5D,EACAR,EAACO,EAAA,CAAM,KAAM,EAAG,GAAG,OAAO,aAAa,eAAe,GACxD,EACAN,EAACK,EAAA,CAAS,MAAM,KAAK,WAAU,GAC7B,UAAAN,EAACQ,EAAA,CAAM,MAAO,IAAK,eAAe,WAAW,QAAQ,WACnD,SAAAR,EAACW,EAAA,CAAc,MAAM,qBAAqB,UAAU,eAClD,SAAAX,EAACS,EAAA,CAAU,gBAAI,EACjB,EACF,EACAT,EAACc,EAAA,EAAW,GACd,EAEAd,EAACa,EAAA,CAAO,WAAW,WAAW,UAAU,KACtC,SAAAb,EAACK,EAAO,MAAP,CAAa,mBAAkB,GAAC,QAAO,GACtC,SAAAL,EAACI,EAAA,CAAO,MAAM,OAAO,aAAW,QAAQ,wBAExC,EACF,EACF,EAEAJ,EAACY,EAAA,CACC,SAAAZ,EAACK,EAAO,MAAP,CAAa,QAAO,GACnB,SAAAL,EAACI,EAAA,CAAO,SAAS,WAAW,IAAI,KAAK,MAAM,KAAK,KAAK,KAAK,SAAQ,GAAC,KAAMF,EAAG,EAC9E,EACF,IA5CI,SA6CN,GACF,GACF,CAEJ",
|
|
6
|
+
"names": ["jsx", "jsxs", "X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "YStack", "SelectDemo", "DialogDemo"]
|
|
7
7
|
}
|
package/dist/esm/FormsDemo.js
CHANGED
|
@@ -1,36 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import { Button, Form, H4, Spinner } from "tamagui";
|
|
4
|
-
function FormsDemo(props) {
|
|
5
|
-
const [status, setStatus] = useState("off");
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
if (status === "submitting") {
|
|
8
|
-
const timer = setTimeout(() => setStatus("off"), 2e3);
|
|
9
|
-
return () => {
|
|
10
|
-
clearTimeout(timer);
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
}, [status]);
|
|
14
|
-
return /* @__PURE__ */ jsxs(
|
|
15
|
-
Form,
|
|
16
|
-
{
|
|
17
|
-
alignItems: "center",
|
|
18
|
-
minWidth: 300,
|
|
19
|
-
space: true,
|
|
20
|
-
onSubmit: () => setStatus("submitting"),
|
|
21
|
-
borderWidth: 1,
|
|
22
|
-
borderRadius: "$4",
|
|
23
|
-
backgroundColor: "$background",
|
|
24
|
-
borderColor: "$borderColor",
|
|
25
|
-
padding: "$8",
|
|
26
|
-
children: [
|
|
27
|
-
/* @__PURE__ */ jsx(H4, { children: status[0].toUpperCase() + status.slice(1) }),
|
|
28
|
-
/* @__PURE__ */ jsx(Form.Trigger, { asChild: true, disabled: status !== "off", children: /* @__PURE__ */ jsx(Button, { icon: status === "submitting" ? () => /* @__PURE__ */ jsx(Spinner, {}) : void 0, children: "Submit" }) })
|
|
29
|
-
]
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
export {
|
|
34
|
-
FormsDemo
|
|
35
|
-
};
|
|
1
|
+
import{jsx as o,jsxs as f}from"react/jsx-runtime";import{useEffect as s,useState as n}from"react";import{Button as m,Form as e,H4 as u,Spinner as d}from"tamagui";function T(a){const[t,r]=n("off");return s(()=>{if(t==="submitting"){const i=setTimeout(()=>r("off"),2e3);return()=>{clearTimeout(i)}}},[t]),f(e,{alignItems:"center",minWidth:300,space:!0,onSubmit:()=>r("submitting"),borderWidth:1,borderRadius:"$4",backgroundColor:"$background",borderColor:"$borderColor",padding:"$8",children:[o(u,{children:t[0].toUpperCase()+t.slice(1)}),o(e.Trigger,{asChild:!0,disabled:t!=="off",children:o(m,{icon:t==="submitting"?()=>o(d,{}):void 0,children:"Submit"})})]})}export{T as FormsDemo};
|
|
36
2
|
//# sourceMappingURL=FormsDemo.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/FormsDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { stat } from 'fs'\n\nimport { useEffect, useState } from 'react'\nimport { Button, Form, H4, SizeTokens, Spinner, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo(props: { size: SizeTokens }) {\n const [status, setStatus] = useState<'off' | 'submitting' | 'submitted'>('off')\n\n useEffect(() => {\n if (status === 'submitting') {\n const timer = setTimeout(() => setStatus('off'), 2000)\n return () => {\n clearTimeout(timer)\n }\n }\n }, [status])\n\n return (\n <Form\n alignItems=\"center\"\n minWidth={300}\n space\n onSubmit={() => setStatus('submitting')}\n borderWidth={1}\n borderRadius=\"$4\"\n backgroundColor=\"$background\"\n borderColor=\"$borderColor\"\n padding=\"$8\"\n >\n <H4>{status[0].toUpperCase() + status.slice(1)}</H4>\n\n <Form.Trigger asChild disabled={status !== 'off'}>\n <Button icon={status === 'submitting' ? () => <Spinner /> : undefined}>\n Submit\n </Button>\n </Form.Trigger>\n </Form>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAkBI,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAkBI,OAWE,OAAAA,EAXF,QAAAC,MAAA,oBAhBJ,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OAAS,UAAAC,EAAQ,QAAAC,EAAM,MAAAC,EAAgB,WAAAC,MAA+B,UAE/D,SAASC,EAAUC,EAA6B,CACrD,KAAM,CAACC,EAAQC,CAAS,EAAIR,EAA6C,KAAK,EAE9E,OAAAD,EAAU,IAAM,CACd,GAAIQ,IAAW,aAAc,CAC3B,MAAME,EAAQ,WAAW,IAAMD,EAAU,KAAK,EAAG,GAAI,EACrD,MAAO,IAAM,CACX,aAAaC,CAAK,CACpB,CACF,CACF,EAAG,CAACF,CAAM,CAAC,EAGTT,EAACI,EAAA,CACC,WAAW,SACX,SAAU,IACV,MAAK,GACL,SAAU,IAAMM,EAAU,YAAY,EACtC,YAAa,EACb,aAAa,KACb,gBAAgB,cAChB,YAAY,eACZ,QAAQ,KAER,UAAAX,EAACM,EAAA,CAAI,SAAAI,EAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,MAAM,CAAC,EAAE,EAE/CV,EAACK,EAAK,QAAL,CAAa,QAAO,GAAC,SAAUK,IAAW,MACzC,SAAAV,EAACI,EAAA,CAAO,KAAMM,IAAW,aAAe,IAAMV,EAACO,EAAA,EAAQ,EAAK,OAAW,kBAEvE,EACF,GACF,CAEJ",
|
|
6
|
+
"names": ["jsx", "jsxs", "useEffect", "useState", "Button", "Form", "H4", "Spinner", "FormsDemo", "props", "status", "setStatus", "timer"]
|
|
7
7
|
}
|
package/dist/esm/FormsDemo.mjs
CHANGED
|
@@ -1,36 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import { Button, Form, H4, Spinner } from "tamagui";
|
|
4
|
-
function FormsDemo(props) {
|
|
5
|
-
const [status, setStatus] = useState("off");
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
if (status === "submitting") {
|
|
8
|
-
const timer = setTimeout(() => setStatus("off"), 2e3);
|
|
9
|
-
return () => {
|
|
10
|
-
clearTimeout(timer);
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
}, [status]);
|
|
14
|
-
return /* @__PURE__ */ jsxs(
|
|
15
|
-
Form,
|
|
16
|
-
{
|
|
17
|
-
alignItems: "center",
|
|
18
|
-
minWidth: 300,
|
|
19
|
-
space: true,
|
|
20
|
-
onSubmit: () => setStatus("submitting"),
|
|
21
|
-
borderWidth: 1,
|
|
22
|
-
borderRadius: "$4",
|
|
23
|
-
backgroundColor: "$background",
|
|
24
|
-
borderColor: "$borderColor",
|
|
25
|
-
padding: "$8",
|
|
26
|
-
children: [
|
|
27
|
-
/* @__PURE__ */ jsx(H4, { children: status[0].toUpperCase() + status.slice(1) }),
|
|
28
|
-
/* @__PURE__ */ jsx(Form.Trigger, { asChild: true, disabled: status !== "off", children: /* @__PURE__ */ jsx(Button, { icon: status === "submitting" ? () => /* @__PURE__ */ jsx(Spinner, {}) : void 0, children: "Submit" }) })
|
|
29
|
-
]
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
export {
|
|
34
|
-
FormsDemo
|
|
35
|
-
};
|
|
1
|
+
import{jsx as o,jsxs as f}from"react/jsx-runtime";import{useEffect as s,useState as n}from"react";import{Button as m,Form as e,H4 as u,Spinner as d}from"tamagui";function T(a){const[t,r]=n("off");return s(()=>{if(t==="submitting"){const i=setTimeout(()=>r("off"),2e3);return()=>{clearTimeout(i)}}},[t]),f(e,{alignItems:"center",minWidth:300,space:!0,onSubmit:()=>r("submitting"),borderWidth:1,borderRadius:"$4",backgroundColor:"$background",borderColor:"$borderColor",padding:"$8",children:[o(u,{children:t[0].toUpperCase()+t.slice(1)}),o(e.Trigger,{asChild:!0,disabled:t!=="off",children:o(m,{icon:t==="submitting"?()=>o(d,{}):void 0,children:"Submit"})})]})}export{T as FormsDemo};
|
|
36
2
|
//# sourceMappingURL=FormsDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/FormsDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { stat } from 'fs'\n\nimport { useEffect, useState } from 'react'\nimport { Button, Form, H4, SizeTokens, Spinner, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo(props: { size: SizeTokens }) {\n const [status, setStatus] = useState<'off' | 'submitting' | 'submitted'>('off')\n\n useEffect(() => {\n if (status === 'submitting') {\n const timer = setTimeout(() => setStatus('off'), 2000)\n return () => {\n clearTimeout(timer)\n }\n }\n }, [status])\n\n return (\n <Form\n alignItems=\"center\"\n minWidth={300}\n space\n onSubmit={() => setStatus('submitting')}\n borderWidth={1}\n borderRadius=\"$4\"\n backgroundColor=\"$background\"\n borderColor=\"$borderColor\"\n padding=\"$8\"\n >\n <H4>{status[0].toUpperCase() + status.slice(1)}</H4>\n\n <Form.Trigger asChild disabled={status !== 'off'}>\n <Button icon={status === 'submitting' ? () => <Spinner /> : undefined}>\n Submit\n </Button>\n </Form.Trigger>\n </Form>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAkBI,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAkBI,OAWE,OAAAA,EAXF,QAAAC,MAAA,oBAhBJ,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OAAS,UAAAC,EAAQ,QAAAC,EAAM,MAAAC,EAAgB,WAAAC,MAA+B,UAE/D,SAASC,EAAUC,EAA6B,CACrD,KAAM,CAACC,EAAQC,CAAS,EAAIR,EAA6C,KAAK,EAE9E,OAAAD,EAAU,IAAM,CACd,GAAIQ,IAAW,aAAc,CAC3B,MAAME,EAAQ,WAAW,IAAMD,EAAU,KAAK,EAAG,GAAI,EACrD,MAAO,IAAM,CACX,aAAaC,CAAK,CACpB,CACF,CACF,EAAG,CAACF,CAAM,CAAC,EAGTT,EAACI,EAAA,CACC,WAAW,SACX,SAAU,IACV,MAAK,GACL,SAAU,IAAMM,EAAU,YAAY,EACtC,YAAa,EACb,aAAa,KACb,gBAAgB,cAChB,YAAY,eACZ,QAAQ,KAER,UAAAX,EAACM,EAAA,CAAI,SAAAI,EAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,MAAM,CAAC,EAAE,EAE/CV,EAACK,EAAK,QAAL,CAAa,QAAO,GAAC,SAAUK,IAAW,MACzC,SAAAV,EAACI,EAAA,CAAO,KAAMM,IAAW,aAAe,IAAMV,EAACO,EAAA,EAAQ,EAAK,OAAW,kBAEvE,EACF,GACF,CAEJ",
|
|
6
|
+
"names": ["jsx", "jsxs", "useEffect", "useState", "Button", "Form", "H4", "Spinner", "FormsDemo", "props", "status", "setStatus", "timer"]
|
|
7
7
|
}
|