@tamagui/demos 1.13.3 → 1.13.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AddThemeDemo.js +1 -59
- package/dist/cjs/AddThemeDemo.js.map +2 -2
- package/dist/cjs/AlertDialogDemo.js +1 -76
- package/dist/cjs/AlertDialogDemo.js.map +2 -2
- package/dist/cjs/AnimationsDemo.js +1 -113
- package/dist/cjs/AnimationsDemo.js.map +2 -2
- package/dist/cjs/AnimationsEnterDemo.js +1 -63
- package/dist/cjs/AnimationsEnterDemo.js.map +2 -2
- package/dist/cjs/AnimationsHoverDemo.js +1 -49
- package/dist/cjs/AnimationsHoverDemo.js.map +2 -2
- package/dist/cjs/AnimationsPresenceDemo.js +1 -96
- package/dist/cjs/AnimationsPresenceDemo.js.map +2 -2
- package/dist/cjs/AnimationsTimingDemo.js +1 -49
- package/dist/cjs/AnimationsTimingDemo.js.map +2 -2
- package/dist/cjs/AvatarDemo.js +1 -53
- package/dist/cjs/AvatarDemo.js.map +2 -2
- package/dist/cjs/ButtonDemo.js +1 -48
- package/dist/cjs/ButtonDemo.js.map +2 -2
- package/dist/cjs/CardDemo.js +1 -69
- package/dist/cjs/CardDemo.js.map +2 -2
- package/dist/cjs/CheckboxDemo.js +1 -44
- package/dist/cjs/CheckboxDemo.js.map +2 -2
- package/dist/cjs/ColorsDemo.js +1 -112
- package/dist/cjs/ColorsDemo.js.map +2 -2
- package/dist/cjs/DialogDemo.js +1 -85
- package/dist/cjs/DialogDemo.js.map +2 -2
- package/dist/cjs/FormsDemo.js +1 -59
- package/dist/cjs/FormsDemo.js.map +2 -2
- package/dist/cjs/GroupDemo.js +1 -48
- package/dist/cjs/GroupDemo.js.map +2 -2
- package/dist/cjs/HeadingsDemo.js +1 -39
- package/dist/cjs/HeadingsDemo.js.map +2 -2
- package/dist/cjs/ImageDemo.js +1 -32
- package/dist/cjs/ImageDemo.js.map +2 -2
- package/dist/cjs/InputsDemo.js +1 -43
- package/dist/cjs/InputsDemo.js.map +2 -2
- package/dist/cjs/LabelDemo.js +1 -41
- package/dist/cjs/LabelDemo.js.map +2 -2
- package/dist/cjs/LinearGradientDemo.js +1 -56
- package/dist/cjs/LinearGradientDemo.js.map +2 -2
- package/dist/cjs/ListItemDemo.js +1 -70
- package/dist/cjs/ListItemDemo.js.map +2 -2
- package/dist/cjs/LucideIconsDemo.js +1 -66
- package/dist/cjs/LucideIconsDemo.js.map +2 -2
- package/dist/cjs/PopoverDemo.js +1 -92
- package/dist/cjs/PopoverDemo.js.map +2 -2
- package/dist/cjs/ProgressDemo.js +1 -71
- package/dist/cjs/ProgressDemo.js.map +2 -2
- package/dist/cjs/RadioGroupDemo.js +1 -43
- package/dist/cjs/RadioGroupDemo.js.map +2 -2
- package/dist/cjs/ScrollViewDemo.js +1 -41
- package/dist/cjs/ScrollViewDemo.js.map +2 -2
- package/dist/cjs/SelectDemo.js +1 -103
- package/dist/cjs/SelectDemo.js.map +2 -2
- package/dist/cjs/SeparatorDemo.js +1 -43
- package/dist/cjs/SeparatorDemo.js.map +2 -2
- package/dist/cjs/ShapesDemo.js +1 -35
- package/dist/cjs/ShapesDemo.js.map +2 -2
- package/dist/cjs/SheetDemo.js +1 -103
- package/dist/cjs/SheetDemo.js.map +2 -2
- package/dist/cjs/SliderDemo.js +1 -42
- package/dist/cjs/SliderDemo.js.map +2 -2
- package/dist/cjs/SpinnerDemo.js +1 -35
- package/dist/cjs/SpinnerDemo.js.map +2 -2
- package/dist/cjs/StacksDemo.js +1 -81
- package/dist/cjs/StacksDemo.js.map +2 -2
- package/dist/cjs/SwitchDemo.js +1 -55
- package/dist/cjs/SwitchDemo.js.map +2 -2
- package/dist/cjs/TabsAdvancedDemo.js +1 -282
- package/dist/cjs/TabsAdvancedDemo.js.map +2 -2
- package/dist/cjs/TabsDemo.js +1 -146
- package/dist/cjs/TabsDemo.js.map +2 -2
- package/dist/cjs/TextDemo.js +1 -39
- package/dist/cjs/TextDemo.js.map +2 -2
- package/dist/cjs/ThemeInverseDemo.js +1 -43
- package/dist/cjs/ThemeInverseDemo.js.map +2 -2
- package/dist/cjs/ToastDemo.js +1 -128
- package/dist/cjs/ToastDemo.js.map +3 -3
- package/dist/cjs/ToastDuplicateDemo.js +1 -77
- package/dist/cjs/ToastDuplicateDemo.js.map +2 -2
- package/dist/cjs/ToggleGroupDemo.js +1 -72
- package/dist/cjs/ToggleGroupDemo.js.map +2 -2
- package/dist/cjs/TokensDemo.js +1 -110
- package/dist/cjs/TokensDemo.js.map +2 -2
- package/dist/cjs/TooltipDemo.js +1 -79
- package/dist/cjs/TooltipDemo.js.map +2 -2
- package/dist/cjs/UpdateThemeDemo.js +1 -79
- package/dist/cjs/UpdateThemeDemo.js.map +2 -2
- package/dist/cjs/conf.js +1 -28
- package/dist/cjs/conf.js.map +2 -2
- package/dist/cjs/index.js +1 -159
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/tamagui.config.js +1 -27
- package/dist/cjs/tamagui.config.js.map +2 -2
- package/dist/cjs/useOnIntersecting.js +1 -92
- package/dist/cjs/useOnIntersecting.js.map +2 -2
- package/dist/esm/AddThemeDemo.js +1 -35
- package/dist/esm/AddThemeDemo.js.map +2 -2
- package/dist/esm/AddThemeDemo.mjs +1 -35
- package/dist/esm/AddThemeDemo.mjs.map +2 -2
- package/dist/esm/AlertDialogDemo.js +1 -52
- package/dist/esm/AlertDialogDemo.js.map +2 -2
- package/dist/esm/AlertDialogDemo.mjs +1 -52
- package/dist/esm/AlertDialogDemo.mjs.map +2 -2
- package/dist/esm/AnimationsDemo.js +1 -88
- package/dist/esm/AnimationsDemo.js.map +2 -2
- package/dist/esm/AnimationsDemo.mjs +1 -88
- package/dist/esm/AnimationsDemo.mjs.map +2 -2
- package/dist/esm/AnimationsEnterDemo.js +1 -39
- package/dist/esm/AnimationsEnterDemo.js.map +2 -2
- package/dist/esm/AnimationsEnterDemo.mjs +1 -39
- package/dist/esm/AnimationsEnterDemo.mjs.map +2 -2
- package/dist/esm/AnimationsHoverDemo.js +1 -25
- package/dist/esm/AnimationsHoverDemo.js.map +2 -2
- package/dist/esm/AnimationsHoverDemo.mjs +1 -25
- package/dist/esm/AnimationsHoverDemo.mjs.map +2 -2
- package/dist/esm/AnimationsPresenceDemo.js +1 -61
- package/dist/esm/AnimationsPresenceDemo.js.map +2 -2
- package/dist/esm/AnimationsPresenceDemo.mjs +1 -61
- package/dist/esm/AnimationsPresenceDemo.mjs.map +2 -2
- package/dist/esm/AnimationsTimingDemo.js +1 -25
- package/dist/esm/AnimationsTimingDemo.js.map +2 -2
- package/dist/esm/AnimationsTimingDemo.mjs +1 -25
- package/dist/esm/AnimationsTimingDemo.mjs.map +2 -2
- package/dist/esm/AvatarDemo.js +1 -29
- package/dist/esm/AvatarDemo.js.map +2 -2
- package/dist/esm/AvatarDemo.mjs +1 -29
- package/dist/esm/AvatarDemo.mjs.map +2 -2
- package/dist/esm/ButtonDemo.js +1 -24
- package/dist/esm/ButtonDemo.js.map +2 -2
- package/dist/esm/ButtonDemo.mjs +1 -24
- package/dist/esm/ButtonDemo.mjs.map +2 -2
- package/dist/esm/CardDemo.js +1 -45
- package/dist/esm/CardDemo.js.map +2 -2
- package/dist/esm/CardDemo.mjs +1 -45
- package/dist/esm/CardDemo.mjs.map +2 -2
- package/dist/esm/CheckboxDemo.js +1 -20
- package/dist/esm/CheckboxDemo.js.map +2 -2
- package/dist/esm/CheckboxDemo.mjs +1 -20
- package/dist/esm/CheckboxDemo.mjs.map +2 -2
- package/dist/esm/ColorsDemo.js +1 -97
- package/dist/esm/ColorsDemo.js.map +2 -2
- package/dist/esm/ColorsDemo.mjs +1 -97
- package/dist/esm/ColorsDemo.mjs.map +2 -2
- package/dist/esm/DialogDemo.js +1 -73
- package/dist/esm/DialogDemo.js.map +2 -2
- package/dist/esm/DialogDemo.mjs +1 -73
- package/dist/esm/DialogDemo.mjs.map +2 -2
- package/dist/esm/FormsDemo.js +1 -35
- package/dist/esm/FormsDemo.js.map +2 -2
- package/dist/esm/FormsDemo.mjs +1 -35
- package/dist/esm/FormsDemo.mjs.map +2 -2
- package/dist/esm/GroupDemo.js +1 -24
- package/dist/esm/GroupDemo.js.map +2 -2
- package/dist/esm/GroupDemo.mjs +1 -24
- package/dist/esm/GroupDemo.mjs.map +2 -2
- package/dist/esm/HeadingsDemo.js +1 -15
- package/dist/esm/HeadingsDemo.js.map +2 -2
- package/dist/esm/HeadingsDemo.mjs +1 -15
- package/dist/esm/HeadingsDemo.mjs.map +2 -2
- package/dist/esm/ImageDemo.js +1 -8
- package/dist/esm/ImageDemo.js.map +2 -2
- package/dist/esm/ImageDemo.mjs +1 -8
- package/dist/esm/ImageDemo.mjs.map +2 -2
- package/dist/esm/InputsDemo.js +1 -19
- package/dist/esm/InputsDemo.js.map +2 -2
- package/dist/esm/InputsDemo.mjs +1 -19
- package/dist/esm/InputsDemo.mjs.map +2 -2
- package/dist/esm/LabelDemo.js +1 -17
- package/dist/esm/LabelDemo.js.map +2 -2
- package/dist/esm/LabelDemo.mjs +1 -17
- package/dist/esm/LabelDemo.mjs.map +2 -2
- package/dist/esm/LinearGradientDemo.js +1 -32
- package/dist/esm/LinearGradientDemo.js.map +2 -2
- package/dist/esm/LinearGradientDemo.mjs +1 -32
- package/dist/esm/LinearGradientDemo.mjs.map +2 -2
- package/dist/esm/ListItemDemo.js +1 -46
- package/dist/esm/ListItemDemo.js.map +2 -2
- package/dist/esm/ListItemDemo.mjs +1 -46
- package/dist/esm/ListItemDemo.mjs.map +2 -2
- package/dist/esm/LucideIconsDemo.js +1 -32
- package/dist/esm/LucideIconsDemo.js.map +2 -2
- package/dist/esm/LucideIconsDemo.mjs +1 -32
- package/dist/esm/LucideIconsDemo.mjs.map +2 -2
- package/dist/esm/PopoverDemo.js +1 -75
- package/dist/esm/PopoverDemo.js.map +2 -2
- package/dist/esm/PopoverDemo.mjs +1 -75
- package/dist/esm/PopoverDemo.mjs.map +2 -2
- package/dist/esm/ProgressDemo.js +1 -47
- package/dist/esm/ProgressDemo.js.map +2 -2
- package/dist/esm/ProgressDemo.mjs +1 -47
- package/dist/esm/ProgressDemo.mjs.map +2 -2
- package/dist/esm/RadioGroupDemo.js +1 -19
- package/dist/esm/RadioGroupDemo.js.map +2 -2
- package/dist/esm/RadioGroupDemo.mjs +1 -19
- package/dist/esm/RadioGroupDemo.mjs.map +2 -2
- package/dist/esm/ScrollViewDemo.js +1 -17
- package/dist/esm/ScrollViewDemo.js.map +2 -2
- package/dist/esm/ScrollViewDemo.mjs +1 -17
- package/dist/esm/ScrollViewDemo.mjs.map +2 -2
- package/dist/esm/SelectDemo.js +1 -79
- package/dist/esm/SelectDemo.js.map +2 -2
- package/dist/esm/SelectDemo.mjs +1 -79
- package/dist/esm/SelectDemo.mjs.map +2 -2
- package/dist/esm/SeparatorDemo.js +1 -19
- package/dist/esm/SeparatorDemo.js.map +2 -2
- package/dist/esm/SeparatorDemo.mjs +1 -19
- package/dist/esm/SeparatorDemo.mjs.map +2 -2
- package/dist/esm/ShapesDemo.js +1 -11
- package/dist/esm/ShapesDemo.js.map +2 -2
- package/dist/esm/ShapesDemo.mjs +1 -11
- package/dist/esm/ShapesDemo.mjs.map +2 -2
- package/dist/esm/SheetDemo.js +1 -79
- package/dist/esm/SheetDemo.js.map +2 -2
- package/dist/esm/SheetDemo.mjs +1 -79
- package/dist/esm/SheetDemo.mjs.map +2 -2
- package/dist/esm/SliderDemo.js +1 -18
- package/dist/esm/SliderDemo.js.map +2 -2
- package/dist/esm/SliderDemo.mjs +1 -18
- package/dist/esm/SliderDemo.mjs.map +2 -2
- package/dist/esm/SpinnerDemo.js +1 -11
- package/dist/esm/SpinnerDemo.js.map +2 -2
- package/dist/esm/SpinnerDemo.mjs +1 -11
- package/dist/esm/SpinnerDemo.mjs.map +2 -2
- package/dist/esm/StacksDemo.js +1 -57
- package/dist/esm/StacksDemo.js.map +2 -2
- package/dist/esm/StacksDemo.mjs +1 -57
- package/dist/esm/StacksDemo.mjs.map +2 -2
- package/dist/esm/SwitchDemo.js +1 -31
- package/dist/esm/SwitchDemo.js.map +2 -2
- package/dist/esm/SwitchDemo.mjs +1 -31
- package/dist/esm/SwitchDemo.mjs.map +2 -2
- package/dist/esm/TabsAdvancedDemo.js +1 -268
- package/dist/esm/TabsAdvancedDemo.js.map +2 -2
- package/dist/esm/TabsAdvancedDemo.mjs +1 -268
- package/dist/esm/TabsAdvancedDemo.mjs.map +2 -2
- package/dist/esm/TabsDemo.js +1 -130
- package/dist/esm/TabsDemo.js.map +2 -2
- package/dist/esm/TabsDemo.mjs +1 -130
- package/dist/esm/TabsDemo.mjs.map +2 -2
- package/dist/esm/TextDemo.js +1 -15
- package/dist/esm/TextDemo.js.map +2 -2
- package/dist/esm/TextDemo.mjs +1 -15
- package/dist/esm/TextDemo.mjs.map +2 -2
- package/dist/esm/ThemeInverseDemo.js +1 -19
- package/dist/esm/ThemeInverseDemo.js.map +2 -2
- package/dist/esm/ThemeInverseDemo.mjs +1 -19
- package/dist/esm/ThemeInverseDemo.mjs.map +2 -2
- package/dist/esm/ToastDemo.js +1 -94
- package/dist/esm/ToastDemo.js.map +3 -3
- package/dist/esm/ToastDemo.mjs +1 -94
- package/dist/esm/ToastDemo.mjs.map +3 -3
- package/dist/esm/ToastDuplicateDemo.js +1 -43
- package/dist/esm/ToastDuplicateDemo.js.map +2 -2
- package/dist/esm/ToastDuplicateDemo.mjs +1 -43
- package/dist/esm/ToastDuplicateDemo.mjs.map +2 -2
- package/dist/esm/ToggleGroupDemo.js +1 -48
- package/dist/esm/ToggleGroupDemo.js.map +2 -2
- package/dist/esm/ToggleGroupDemo.mjs +1 -48
- package/dist/esm/ToggleGroupDemo.mjs.map +2 -2
- package/dist/esm/TokensDemo.js +1 -86
- package/dist/esm/TokensDemo.js.map +2 -2
- package/dist/esm/TokensDemo.mjs +1 -86
- package/dist/esm/TokensDemo.mjs.map +2 -2
- package/dist/esm/TooltipDemo.js +1 -68
- package/dist/esm/TooltipDemo.js.map +2 -2
- package/dist/esm/TooltipDemo.mjs +1 -68
- package/dist/esm/TooltipDemo.mjs.map +2 -2
- package/dist/esm/UpdateThemeDemo.js +1 -53
- package/dist/esm/UpdateThemeDemo.js.map +2 -2
- package/dist/esm/UpdateThemeDemo.mjs +1 -53
- package/dist/esm/UpdateThemeDemo.mjs.map +2 -2
- package/dist/esm/conf.js +1 -4
- package/dist/esm/conf.js.map +1 -1
- package/dist/esm/conf.mjs +1 -4
- package/dist/esm/conf.mjs.map +1 -1
- package/dist/esm/index.js +1 -91
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/index.mjs +1 -91
- package/dist/esm/index.mjs.map +2 -2
- package/dist/esm/tamagui.config.js +1 -5
- package/dist/esm/tamagui.config.js.map +2 -2
- package/dist/esm/tamagui.config.mjs +1 -5
- package/dist/esm/tamagui.config.mjs.map +2 -2
- package/dist/esm/useOnIntersecting.js +1 -67
- package/dist/esm/useOnIntersecting.js.map +2 -2
- package/dist/esm/useOnIntersecting.mjs +1 -67
- package/dist/esm/useOnIntersecting.mjs.map +2 -2
- package/dist/jsx/AddThemeDemo.js +1 -30
- package/dist/jsx/AddThemeDemo.js.map +2 -2
- package/dist/jsx/AddThemeDemo.mjs +1 -30
- package/dist/jsx/AddThemeDemo.mjs.map +2 -2
- package/dist/jsx/AlertDialogDemo.js +1 -44
- package/dist/jsx/AlertDialogDemo.js.map +2 -2
- package/dist/jsx/AlertDialogDemo.mjs +1 -44
- package/dist/jsx/AlertDialogDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsDemo.js +1 -80
- package/dist/jsx/AnimationsDemo.js.map +2 -2
- package/dist/jsx/AnimationsDemo.mjs +1 -80
- package/dist/jsx/AnimationsDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsEnterDemo.js +1 -34
- package/dist/jsx/AnimationsEnterDemo.js.map +2 -2
- package/dist/jsx/AnimationsEnterDemo.mjs +1 -34
- package/dist/jsx/AnimationsEnterDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsHoverDemo.js +1 -20
- package/dist/jsx/AnimationsHoverDemo.js.map +2 -2
- package/dist/jsx/AnimationsHoverDemo.mjs +1 -20
- package/dist/jsx/AnimationsHoverDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsPresenceDemo.js +1 -54
- package/dist/jsx/AnimationsPresenceDemo.js.map +2 -2
- package/dist/jsx/AnimationsPresenceDemo.mjs +1 -54
- package/dist/jsx/AnimationsPresenceDemo.mjs.map +2 -2
- package/dist/jsx/AnimationsTimingDemo.js +1 -20
- package/dist/jsx/AnimationsTimingDemo.js.map +2 -2
- package/dist/jsx/AnimationsTimingDemo.mjs +1 -20
- package/dist/jsx/AnimationsTimingDemo.mjs.map +2 -2
- package/dist/jsx/AvatarDemo.js +1 -22
- package/dist/jsx/AvatarDemo.js.map +2 -2
- package/dist/jsx/AvatarDemo.mjs +1 -22
- package/dist/jsx/AvatarDemo.mjs.map +2 -2
- package/dist/jsx/ButtonDemo.js +1 -23
- package/dist/jsx/ButtonDemo.js.map +2 -2
- package/dist/jsx/ButtonDemo.mjs +1 -23
- package/dist/jsx/ButtonDemo.mjs.map +2 -2
- package/dist/jsx/CardDemo.js +1 -38
- package/dist/jsx/CardDemo.js.map +2 -2
- package/dist/jsx/CardDemo.mjs +1 -38
- package/dist/jsx/CardDemo.mjs.map +2 -2
- package/dist/jsx/CheckboxDemo.js +1 -19
- package/dist/jsx/CheckboxDemo.js.map +2 -2
- package/dist/jsx/CheckboxDemo.mjs +1 -19
- package/dist/jsx/CheckboxDemo.mjs.map +2 -2
- package/dist/jsx/ColorsDemo.js +1 -85
- package/dist/jsx/ColorsDemo.js.map +2 -2
- package/dist/jsx/ColorsDemo.mjs +1 -85
- package/dist/jsx/ColorsDemo.mjs.map +2 -2
- package/dist/jsx/DialogDemo.js +1 -65
- package/dist/jsx/DialogDemo.js.map +2 -2
- package/dist/jsx/DialogDemo.mjs +1 -65
- package/dist/jsx/DialogDemo.mjs.map +2 -2
- package/dist/jsx/FormsDemo.js +1 -30
- package/dist/jsx/FormsDemo.js.map +2 -2
- package/dist/jsx/FormsDemo.mjs +1 -30
- package/dist/jsx/FormsDemo.mjs.map +2 -2
- package/dist/jsx/GroupDemo.js +1 -23
- package/dist/jsx/GroupDemo.js.map +2 -2
- package/dist/jsx/GroupDemo.mjs +1 -23
- package/dist/jsx/GroupDemo.mjs.map +2 -2
- package/dist/jsx/HeadingsDemo.js +1 -14
- package/dist/jsx/HeadingsDemo.js.map +2 -2
- package/dist/jsx/HeadingsDemo.mjs +1 -14
- package/dist/jsx/HeadingsDemo.mjs.map +2 -2
- package/dist/jsx/ImageDemo.js +1 -7
- package/dist/jsx/ImageDemo.js.map +2 -2
- package/dist/jsx/ImageDemo.mjs +1 -7
- package/dist/jsx/ImageDemo.mjs.map +2 -2
- package/dist/jsx/InputsDemo.js +1 -18
- package/dist/jsx/InputsDemo.js.map +2 -2
- package/dist/jsx/InputsDemo.mjs +1 -18
- package/dist/jsx/InputsDemo.mjs.map +2 -2
- package/dist/jsx/LabelDemo.js +1 -16
- package/dist/jsx/LabelDemo.js.map +2 -2
- package/dist/jsx/LabelDemo.mjs +1 -16
- package/dist/jsx/LabelDemo.mjs.map +2 -2
- package/dist/jsx/LinearGradientDemo.js +1 -25
- package/dist/jsx/LinearGradientDemo.js.map +2 -2
- package/dist/jsx/LinearGradientDemo.mjs +1 -25
- package/dist/jsx/LinearGradientDemo.mjs.map +2 -2
- package/dist/jsx/ListItemDemo.js +1 -39
- package/dist/jsx/ListItemDemo.js.map +2 -2
- package/dist/jsx/ListItemDemo.mjs +1 -39
- package/dist/jsx/ListItemDemo.mjs.map +2 -2
- package/dist/jsx/LucideIconsDemo.js +1 -31
- package/dist/jsx/LucideIconsDemo.js.map +2 -2
- package/dist/jsx/LucideIconsDemo.mjs +1 -31
- package/dist/jsx/LucideIconsDemo.mjs.map +2 -2
- package/dist/jsx/PopoverDemo.js +1 -66
- package/dist/jsx/PopoverDemo.js.map +2 -2
- package/dist/jsx/PopoverDemo.mjs +1 -66
- package/dist/jsx/PopoverDemo.mjs.map +2 -2
- package/dist/jsx/ProgressDemo.js +1 -42
- package/dist/jsx/ProgressDemo.js.map +2 -2
- package/dist/jsx/ProgressDemo.mjs +1 -42
- package/dist/jsx/ProgressDemo.mjs.map +2 -2
- package/dist/jsx/RadioGroupDemo.js +1 -18
- package/dist/jsx/RadioGroupDemo.js.map +2 -2
- package/dist/jsx/RadioGroupDemo.mjs +1 -18
- package/dist/jsx/RadioGroupDemo.mjs.map +2 -2
- package/dist/jsx/ScrollViewDemo.js +1 -16
- package/dist/jsx/ScrollViewDemo.js.map +2 -2
- package/dist/jsx/ScrollViewDemo.mjs +1 -16
- package/dist/jsx/ScrollViewDemo.mjs.map +2 -2
- package/dist/jsx/SelectDemo.js +1 -72
- package/dist/jsx/SelectDemo.js.map +2 -2
- package/dist/jsx/SelectDemo.mjs +1 -72
- package/dist/jsx/SelectDemo.mjs.map +2 -2
- package/dist/jsx/SeparatorDemo.js +1 -18
- package/dist/jsx/SeparatorDemo.js.map +2 -2
- package/dist/jsx/SeparatorDemo.mjs +1 -18
- package/dist/jsx/SeparatorDemo.mjs.map +2 -2
- package/dist/jsx/ShapesDemo.js +1 -10
- package/dist/jsx/ShapesDemo.js.map +2 -2
- package/dist/jsx/ShapesDemo.mjs +1 -10
- package/dist/jsx/ShapesDemo.mjs.map +2 -2
- package/dist/jsx/SheetDemo.js +1 -65
- package/dist/jsx/SheetDemo.js.map +2 -2
- package/dist/jsx/SheetDemo.mjs +1 -65
- package/dist/jsx/SheetDemo.mjs.map +2 -2
- package/dist/jsx/SliderDemo.js +1 -17
- package/dist/jsx/SliderDemo.js.map +2 -2
- package/dist/jsx/SliderDemo.mjs +1 -17
- package/dist/jsx/SliderDemo.mjs.map +2 -2
- package/dist/jsx/SpinnerDemo.js +1 -10
- package/dist/jsx/SpinnerDemo.js.map +2 -2
- package/dist/jsx/SpinnerDemo.mjs +1 -10
- package/dist/jsx/SpinnerDemo.mjs.map +2 -2
- package/dist/jsx/StacksDemo.js +1 -45
- package/dist/jsx/StacksDemo.js.map +2 -2
- package/dist/jsx/StacksDemo.mjs +1 -45
- package/dist/jsx/StacksDemo.mjs.map +2 -2
- package/dist/jsx/SwitchDemo.js +1 -26
- package/dist/jsx/SwitchDemo.js.map +2 -2
- package/dist/jsx/SwitchDemo.mjs +1 -26
- package/dist/jsx/SwitchDemo.mjs.map +2 -2
- package/dist/jsx/TabsAdvancedDemo.js +1 -219
- package/dist/jsx/TabsAdvancedDemo.js.map +2 -2
- package/dist/jsx/TabsAdvancedDemo.mjs +1 -219
- package/dist/jsx/TabsAdvancedDemo.mjs.map +2 -2
- package/dist/jsx/TabsDemo.js +1 -105
- package/dist/jsx/TabsDemo.js.map +2 -2
- package/dist/jsx/TabsDemo.mjs +1 -105
- package/dist/jsx/TabsDemo.mjs.map +2 -2
- package/dist/jsx/TextDemo.js +1 -14
- package/dist/jsx/TextDemo.js.map +2 -2
- package/dist/jsx/TextDemo.mjs +1 -14
- package/dist/jsx/TextDemo.mjs.map +2 -2
- package/dist/jsx/ThemeInverseDemo.js +1 -18
- package/dist/jsx/ThemeInverseDemo.js.map +2 -2
- package/dist/jsx/ThemeInverseDemo.mjs +1 -18
- package/dist/jsx/ThemeInverseDemo.mjs.map +2 -2
- package/dist/jsx/ToastDemo.js +1 -74
- package/dist/jsx/ToastDemo.js.map +3 -3
- package/dist/jsx/ToastDemo.mjs +1 -74
- package/dist/jsx/ToastDemo.mjs.map +3 -3
- package/dist/jsx/ToastDuplicateDemo.js +1 -34
- package/dist/jsx/ToastDuplicateDemo.js.map +2 -2
- package/dist/jsx/ToastDuplicateDemo.mjs +1 -34
- package/dist/jsx/ToastDuplicateDemo.mjs.map +2 -2
- package/dist/jsx/ToggleGroupDemo.js +1 -39
- package/dist/jsx/ToggleGroupDemo.js.map +2 -2
- package/dist/jsx/ToggleGroupDemo.mjs +1 -39
- package/dist/jsx/ToggleGroupDemo.mjs.map +2 -2
- package/dist/jsx/TokensDemo.js +1 -77
- package/dist/jsx/TokensDemo.js.map +2 -2
- package/dist/jsx/TokensDemo.mjs +1 -77
- package/dist/jsx/TokensDemo.mjs.map +2 -2
- package/dist/jsx/TooltipDemo.js +1 -63
- package/dist/jsx/TooltipDemo.js.map +2 -2
- package/dist/jsx/TooltipDemo.mjs +1 -63
- package/dist/jsx/TooltipDemo.mjs.map +2 -2
- package/dist/jsx/UpdateThemeDemo.js +1 -48
- package/dist/jsx/UpdateThemeDemo.js.map +2 -2
- package/dist/jsx/UpdateThemeDemo.mjs +1 -48
- package/dist/jsx/UpdateThemeDemo.mjs.map +2 -2
- package/dist/jsx/conf.js +1 -4
- package/dist/jsx/conf.js.map +1 -1
- package/dist/jsx/conf.mjs +1 -4
- package/dist/jsx/conf.mjs.map +1 -1
- package/dist/jsx/index.js +1 -91
- package/dist/jsx/index.js.map +2 -2
- package/dist/jsx/index.mjs +1 -91
- package/dist/jsx/index.mjs.map +2 -2
- package/dist/jsx/tamagui.config.js +1 -5
- package/dist/jsx/tamagui.config.js.map +2 -2
- package/dist/jsx/tamagui.config.mjs +1 -5
- package/dist/jsx/tamagui.config.mjs.map +2 -2
- package/dist/jsx/useOnIntersecting.js +1 -67
- package/dist/jsx/useOnIntersecting.js.map +2 -2
- package/dist/jsx/useOnIntersecting.mjs +1 -67
- package/dist/jsx/useOnIntersecting.mjs.map +2 -2
- package/package.json +18 -18
- package/src/ToastDemo.tsx +4 -4
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/CheckboxDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Check as CheckIcon } from '@tamagui/lucide-icons'\nimport { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'\n\nexport function CheckboxDemo() {\n return (\n <YStack width={300} alignItems=\"center\" space=\"$2\">\n <CheckboxWithLabel size=\"$3\" />\n <CheckboxWithLabel size=\"$4\" defaultChecked />\n <CheckboxWithLabel size=\"$5\" />\n </YStack>\n )\n}\n\nfunction CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {\n const id = `checkbox-${props.size.toString().slice(1)}`\n return (\n <XStack width={300} alignItems=\"center\" space=\"$4\">\n <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>\n <Checkbox.Indicator>\n <CheckIcon />\n </Checkbox.Indicator>\n </Checkbox>\n\n <Label size={props.size} htmlFor={id}>\n Accept terms and conditions\n </Label>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,SAASA,MAAiB,wBACnC,OAAS,YAAAC,EAAU,SAAAC,EAAmB,UAAAC,EAAQ,UAAAC,MAAc,UAErD,SAASC,GAAe,CAC7B,MACE,CAACD,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACE,EAAkB,KAAK,IAAK,EAC7B,CAACA,EAAkB,KAAK,IAAK,cAAe,EAC5C,CAACA,EAAkB,KAAK,IAAK,EAC/B,EAJCF,EAML,CAEA,SAASE,EAAkBC,EAAuD,CAChF,MAAMC,EAAK,YAAYD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IACpD,MACE,CAACJ,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACF,EAAS,IAAIO,EAAI,MAAMD,EAAM,KAAM,gBAAgBA,EAAM,gBACxD,CAACN,EAAS,UACR,CAACD,CAAU,EACb,EAFCC,EAAS,UAGZ,EAJCA,EAMD,CAACC,EAAM,MAAMK,EAAM,KAAM,SAASC,GAAI,2BAEtC,EAFCN,EAGH,EAVCC,EAYL",
|
|
6
|
+
"names": ["CheckIcon", "Checkbox", "Label", "XStack", "YStack", "CheckboxDemo", "CheckboxWithLabel", "props", "id"]
|
|
7
7
|
}
|
|
@@ -1,20 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Checkbox, Label, XStack, YStack } from "tamagui";
|
|
3
|
-
function CheckboxDemo() {
|
|
4
|
-
return <YStack width={300} alignItems="center" space="$2">
|
|
5
|
-
<CheckboxWithLabel size="$3" />
|
|
6
|
-
<CheckboxWithLabel size="$4" defaultChecked />
|
|
7
|
-
<CheckboxWithLabel size="$5" />
|
|
8
|
-
</YStack>;
|
|
9
|
-
}
|
|
10
|
-
function CheckboxWithLabel(props) {
|
|
11
|
-
const id = `checkbox-${props.size.toString().slice(1)}`;
|
|
12
|
-
return <XStack width={300} alignItems="center" space="$4">
|
|
13
|
-
<Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}><Checkbox.Indicator><CheckIcon /></Checkbox.Indicator></Checkbox>
|
|
14
|
-
<Label size={props.size} htmlFor={id}>Accept terms and conditions</Label>
|
|
15
|
-
</XStack>;
|
|
16
|
-
}
|
|
17
|
-
export {
|
|
18
|
-
CheckboxDemo
|
|
19
|
-
};
|
|
1
|
+
import{Check as $}from"@tamagui/lucide-icons";import{Checkbox as S,Label as I,XStack as L,YStack as T}from"tamagui";function D(){return<T width={300}alignItems="center"space="$2"><C size="$3"/><C size="$4"defaultChecked/><C size="$5"/></T>}function C(e){const b=`checkbox-${e.size.toString().slice(1)}`;return<L width={300}alignItems="center"space="$4"><S id={b}size={e.size}defaultChecked={e.defaultChecked}><S.Indicator><$/></S.Indicator></S><I size={e.size}htmlFor={b}>Accept terms and conditions</I></L>}export{D as CheckboxDemo};
|
|
20
2
|
//# sourceMappingURL=CheckboxDemo.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/CheckboxDemo.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Check as CheckIcon } from '@tamagui/lucide-icons'\nimport { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'\n\nexport function CheckboxDemo() {\n return (\n <YStack width={300} alignItems=\"center\" space=\"$2\">\n <CheckboxWithLabel size=\"$3\" />\n <CheckboxWithLabel size=\"$4\" defaultChecked />\n <CheckboxWithLabel size=\"$5\" />\n </YStack>\n )\n}\n\nfunction CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {\n const id = `checkbox-${props.size.toString().slice(1)}`\n return (\n <XStack width={300} alignItems=\"center\" space=\"$4\">\n <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>\n <Checkbox.Indicator>\n <CheckIcon />\n </Checkbox.Indicator>\n </Checkbox>\n\n <Label size={props.size} htmlFor={id}>\n Accept terms and conditions\n </Label>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,SAASA,MAAiB,wBACnC,OAAS,YAAAC,EAAU,SAAAC,EAAmB,UAAAC,EAAQ,UAAAC,MAAc,UAErD,SAASC,GAAe,CAC7B,MACE,CAACD,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACE,EAAkB,KAAK,IAAK,EAC7B,CAACA,EAAkB,KAAK,IAAK,cAAe,EAC5C,CAACA,EAAkB,KAAK,IAAK,EAC/B,EAJCF,EAML,CAEA,SAASE,EAAkBC,EAAuD,CAChF,MAAMC,EAAK,YAAYD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IACpD,MACE,CAACJ,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACF,EAAS,IAAIO,EAAI,MAAMD,EAAM,KAAM,gBAAgBA,EAAM,gBACxD,CAACN,EAAS,UACR,CAACD,CAAU,EACb,EAFCC,EAAS,UAGZ,EAJCA,EAMD,CAACC,EAAM,MAAMK,EAAM,KAAM,SAASC,GAAI,2BAEtC,EAFCN,EAGH,EAVCC,EAYL",
|
|
6
|
+
"names": ["CheckIcon", "Checkbox", "Label", "XStack", "YStack", "CheckboxDemo", "CheckboxWithLabel", "props", "id"]
|
|
7
7
|
}
|
package/dist/jsx/ColorsDemo.js
CHANGED
|
@@ -1,86 +1,2 @@
|
|
|
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: false }).color;
|
|
14
|
-
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
|
|
15
|
-
return <YStack marginTop="$4" space="$8">
|
|
16
|
-
<ColorsRow title="Light" colors={colorsLight} />
|
|
17
|
-
<Separator />
|
|
18
|
-
<ColorsRow title="Dark" colors={colorsDark} />
|
|
19
|
-
</YStack>;
|
|
20
|
-
}
|
|
21
|
-
function ColorsRow({ title, colors }) {
|
|
22
|
-
return <YStack space $sm={{ space: "$2" }}>
|
|
23
|
-
<H2 size="$2">{title}</H2>
|
|
24
|
-
<XStack space alignSelf="center">
|
|
25
|
-
<YStack space $sm={{ space: "$2" }} als="center">
|
|
26
|
-
{colors.map((group, index) => {
|
|
27
|
-
return <XStack space="$2" key={index}>{group.map((color) => {
|
|
28
|
-
return <Square
|
|
29
|
-
key={`${color.key}${index}`}
|
|
30
|
-
borderRadius="$2"
|
|
31
|
-
size="$4"
|
|
32
|
-
height="$4"
|
|
33
|
-
borderWidth={1}
|
|
34
|
-
backgroundColor={getVariableValue(color)}
|
|
35
|
-
borderColor="$color7"
|
|
36
|
-
$sm={{
|
|
37
|
-
size: "$2"
|
|
38
|
-
}}
|
|
39
|
-
$xs={{
|
|
40
|
-
size: "$1"
|
|
41
|
-
}}
|
|
42
|
-
/>;
|
|
43
|
-
})}</XStack>;
|
|
44
|
-
})}
|
|
45
|
-
<XStack space="$2" alignSelf="center">{new Array(13).fill(0).slice(1).map((_, index) => {
|
|
46
|
-
return <Paragraph
|
|
47
|
-
color="$color10"
|
|
48
|
-
textAlign="center"
|
|
49
|
-
width="$4"
|
|
50
|
-
$sm={{
|
|
51
|
-
width: "$2"
|
|
52
|
-
}}
|
|
53
|
-
$xs={{
|
|
54
|
-
width: "$1"
|
|
55
|
-
}}
|
|
56
|
-
key={index}
|
|
57
|
-
>{index}</Paragraph>;
|
|
58
|
-
})}</XStack>
|
|
59
|
-
</YStack>
|
|
60
|
-
<YStack space="$4" marginTop="$2">{colorGroups.map((name) => <Paragraph
|
|
61
|
-
theme={name}
|
|
62
|
-
color="$color10"
|
|
63
|
-
height="$4"
|
|
64
|
-
rotate="-10deg"
|
|
65
|
-
$sm={{
|
|
66
|
-
height: "$2"
|
|
67
|
-
}}
|
|
68
|
-
$xs={{
|
|
69
|
-
height: "$1"
|
|
70
|
-
}}
|
|
71
|
-
key={name}
|
|
72
|
-
>{name}</Paragraph>)}</YStack>
|
|
73
|
-
</XStack>
|
|
74
|
-
</YStack>;
|
|
75
|
-
}
|
|
76
|
-
function getColors(colors, dark = false) {
|
|
77
|
-
return colorGroups.map((group) => {
|
|
78
|
-
return Object.keys(colors).filter(
|
|
79
|
-
(color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
|
|
80
|
-
).map((key) => colors[key]);
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
export {
|
|
84
|
-
ColorsDemo
|
|
85
|
-
};
|
|
1
|
+
import{H2 as W,Paragraph as C,Separator as X,Square as P,XStack as S,YStack as $,getTokens as R,getVariableValue as T}from"tamagui";const D=["orange","yellow","green","blue","purple","pink","red"];function j(){const t=R({prefixed:!1}).color,[a,r]=[Y(t),Y(t,!0)];return<$ marginTop="$4"space="$8"><V title="Light"colors={a}/><X/><V title="Dark"colors={r}/></$>}function V({title:t,colors:a}){return<$ space $sm={{space:"$2"}}><W size="$2">{t}</W><S space alignSelf="center"><$ space $sm={{space:"$2"}}als="center">{a.map((r,e)=><S space="$2"key={e}>{r.map(f=><P key={`${f.key}${e}`}borderRadius="$2"size="$4"height="$4"borderWidth={1}backgroundColor={T(f)}borderColor="$color7"$sm={{size:"$2"}}$xs={{size:"$1"}}/>)}</S>)}<S space="$2"alignSelf="center">{new Array(13).fill(0).slice(1).map((r,e)=><C color="$color10"textAlign="center"width="$4"$sm={{width:"$2"}}$xs={{width:"$1"}}key={e}>{e}</C>)}</S></$><$ space="$4"marginTop="$2">{D.map(r=><C theme={r}color="$color10"height="$4"rotate="-10deg"$sm={{height:"$2"}}$xs={{height:"$1"}}key={r}>{r}</C>)}</$></S></$>}function Y(t,a=!1){return D.map(r=>Object.keys(t).filter(e=>e.startsWith(r)&&(a?e.endsWith("Dark"):!e.endsWith("Dark"))).map(e=>t[e]))}export{j as ColorsDemo};
|
|
86
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": "AACA
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AACA,OACE,MAAAA,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,MACE,CAACL,EAAO,UAAU,IAAK,MAAM,KAC3B,CAACS,EAAU,MAAM,OAAQ,QAAQH,EAAa,EAC9C,CAACT,CAAU,EACX,CAACY,EAAU,MAAM,MAAO,QAAQF,EAAY,EAC9C,EAJCP,EAML,CAEA,SAASS,EAAU,CAAE,MAAAC,EAAO,OAAAL,CAAO,EAA4C,CAC7E,MACE,CAACL,EAAO,MAAM,KAAK,CAAE,MAAO,IAAK,GAC/B,CAACL,EAAG,KAAK,MAAMe,EAAM,EAApBf,EAED,CAACI,EAAO,MAAM,UAAU,SACtB,CAACC,EAAO,MAAM,KAAK,CAAE,MAAO,IAAK,EAAG,IAAI,UACrCK,EAAO,IAAI,CAACM,EAAOC,IAEhB,CAACb,EAAO,MAAM,IAAK,KAAKa,IACrBD,EAAM,IAAKE,GAER,CAACf,EACC,KAAK,GAAGe,EAAM,MAAMD,IACpB,aAAa,IACb,KAAK,IACL,OAAO,IACP,aAAa,EACb,iBAAiBV,EAAiBW,CAAK,EACvC,YAAY,SACZ,KAAK,CACH,KAAM,IACR,EACA,KAAK,CACH,KAAM,IACR,EACF,EAEH,EACH,EApBCd,EAsBJ,EAED,CAACA,EAAO,MAAM,IAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAACe,EAAGF,IAEL,CAAChB,EACC,MAAM,UACN,UAAU,QACV,MAAM,IACN,KAAK,CACJ,MAAM,IACP,EACA,KAAK,CACH,MAAO,IACT,EACA,KAAKgB,IAEJA,EACH,EAbChB,EAeJ,EACL,EAtBCG,EAuBH,EAlDCC,EAoDD,CAACA,EAAO,MAAM,IAAK,UAAU,MAC1BG,EAAY,IAAKY,GAChB,CAACnB,EACC,OAAOmB,EACP,MAAM,UACN,OAAO,IACP,OAAO,QACP,KAAK,CACH,OAAQ,IACV,EACA,KAAK,CACH,OAAQ,IACV,EACA,KAAKA,IAEJA,EACH,EAdCnB,EAeF,EACH,EAlBCI,EAmBH,EAxECD,EAyEH,EA5ECC,EA8EL,CAEA,SAASQ,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": ["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/jsx/ColorsDemo.mjs
CHANGED
|
@@ -1,86 +1,2 @@
|
|
|
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: false }).color;
|
|
14
|
-
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
|
|
15
|
-
return <YStack marginTop="$4" space="$8">
|
|
16
|
-
<ColorsRow title="Light" colors={colorsLight} />
|
|
17
|
-
<Separator />
|
|
18
|
-
<ColorsRow title="Dark" colors={colorsDark} />
|
|
19
|
-
</YStack>;
|
|
20
|
-
}
|
|
21
|
-
function ColorsRow({ title, colors }) {
|
|
22
|
-
return <YStack space $sm={{ space: "$2" }}>
|
|
23
|
-
<H2 size="$2">{title}</H2>
|
|
24
|
-
<XStack space alignSelf="center">
|
|
25
|
-
<YStack space $sm={{ space: "$2" }} als="center">
|
|
26
|
-
{colors.map((group, index) => {
|
|
27
|
-
return <XStack space="$2" key={index}>{group.map((color) => {
|
|
28
|
-
return <Square
|
|
29
|
-
key={`${color.key}${index}`}
|
|
30
|
-
borderRadius="$2"
|
|
31
|
-
size="$4"
|
|
32
|
-
height="$4"
|
|
33
|
-
borderWidth={1}
|
|
34
|
-
backgroundColor={getVariableValue(color)}
|
|
35
|
-
borderColor="$color7"
|
|
36
|
-
$sm={{
|
|
37
|
-
size: "$2"
|
|
38
|
-
}}
|
|
39
|
-
$xs={{
|
|
40
|
-
size: "$1"
|
|
41
|
-
}}
|
|
42
|
-
/>;
|
|
43
|
-
})}</XStack>;
|
|
44
|
-
})}
|
|
45
|
-
<XStack space="$2" alignSelf="center">{new Array(13).fill(0).slice(1).map((_, index) => {
|
|
46
|
-
return <Paragraph
|
|
47
|
-
color="$color10"
|
|
48
|
-
textAlign="center"
|
|
49
|
-
width="$4"
|
|
50
|
-
$sm={{
|
|
51
|
-
width: "$2"
|
|
52
|
-
}}
|
|
53
|
-
$xs={{
|
|
54
|
-
width: "$1"
|
|
55
|
-
}}
|
|
56
|
-
key={index}
|
|
57
|
-
>{index}</Paragraph>;
|
|
58
|
-
})}</XStack>
|
|
59
|
-
</YStack>
|
|
60
|
-
<YStack space="$4" marginTop="$2">{colorGroups.map((name) => <Paragraph
|
|
61
|
-
theme={name}
|
|
62
|
-
color="$color10"
|
|
63
|
-
height="$4"
|
|
64
|
-
rotate="-10deg"
|
|
65
|
-
$sm={{
|
|
66
|
-
height: "$2"
|
|
67
|
-
}}
|
|
68
|
-
$xs={{
|
|
69
|
-
height: "$1"
|
|
70
|
-
}}
|
|
71
|
-
key={name}
|
|
72
|
-
>{name}</Paragraph>)}</YStack>
|
|
73
|
-
</XStack>
|
|
74
|
-
</YStack>;
|
|
75
|
-
}
|
|
76
|
-
function getColors(colors, dark = false) {
|
|
77
|
-
return colorGroups.map((group) => {
|
|
78
|
-
return Object.keys(colors).filter(
|
|
79
|
-
(color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
|
|
80
|
-
).map((key) => colors[key]);
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
export {
|
|
84
|
-
ColorsDemo
|
|
85
|
-
};
|
|
1
|
+
import{H2 as W,Paragraph as C,Separator as X,Square as P,XStack as S,YStack as $,getTokens as R,getVariableValue as T}from"tamagui";const D=["orange","yellow","green","blue","purple","pink","red"];function j(){const t=R({prefixed:!1}).color,[a,r]=[Y(t),Y(t,!0)];return<$ marginTop="$4"space="$8"><V title="Light"colors={a}/><X/><V title="Dark"colors={r}/></$>}function V({title:t,colors:a}){return<$ space $sm={{space:"$2"}}><W size="$2">{t}</W><S space alignSelf="center"><$ space $sm={{space:"$2"}}als="center">{a.map((r,e)=><S space="$2"key={e}>{r.map(f=><P key={`${f.key}${e}`}borderRadius="$2"size="$4"height="$4"borderWidth={1}backgroundColor={T(f)}borderColor="$color7"$sm={{size:"$2"}}$xs={{size:"$1"}}/>)}</S>)}<S space="$2"alignSelf="center">{new Array(13).fill(0).slice(1).map((r,e)=><C color="$color10"textAlign="center"width="$4"$sm={{width:"$2"}}$xs={{width:"$1"}}key={e}>{e}</C>)}</S></$><$ space="$4"marginTop="$2">{D.map(r=><C theme={r}color="$color10"height="$4"rotate="-10deg"$sm={{height:"$2"}}$xs={{height:"$1"}}key={r}>{r}</C>)}</$></S></$>}function Y(t,a=!1){return D.map(r=>Object.keys(t).filter(e=>e.startsWith(r)&&(a?e.endsWith("Dark"):!e.endsWith("Dark"))).map(e=>t[e]))}export{j as ColorsDemo};
|
|
86
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": "AACA
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AACA,OACE,MAAAA,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,MACE,CAACL,EAAO,UAAU,IAAK,MAAM,KAC3B,CAACS,EAAU,MAAM,OAAQ,QAAQH,EAAa,EAC9C,CAACT,CAAU,EACX,CAACY,EAAU,MAAM,MAAO,QAAQF,EAAY,EAC9C,EAJCP,EAML,CAEA,SAASS,EAAU,CAAE,MAAAC,EAAO,OAAAL,CAAO,EAA4C,CAC7E,MACE,CAACL,EAAO,MAAM,KAAK,CAAE,MAAO,IAAK,GAC/B,CAACL,EAAG,KAAK,MAAMe,EAAM,EAApBf,EAED,CAACI,EAAO,MAAM,UAAU,SACtB,CAACC,EAAO,MAAM,KAAK,CAAE,MAAO,IAAK,EAAG,IAAI,UACrCK,EAAO,IAAI,CAACM,EAAOC,IAEhB,CAACb,EAAO,MAAM,IAAK,KAAKa,IACrBD,EAAM,IAAKE,GAER,CAACf,EACC,KAAK,GAAGe,EAAM,MAAMD,IACpB,aAAa,IACb,KAAK,IACL,OAAO,IACP,aAAa,EACb,iBAAiBV,EAAiBW,CAAK,EACvC,YAAY,SACZ,KAAK,CACH,KAAM,IACR,EACA,KAAK,CACH,KAAM,IACR,EACF,EAEH,EACH,EApBCd,EAsBJ,EAED,CAACA,EAAO,MAAM,IAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAACe,EAAGF,IAEL,CAAChB,EACC,MAAM,UACN,UAAU,QACV,MAAM,IACN,KAAK,CACJ,MAAM,IACP,EACA,KAAK,CACH,MAAO,IACT,EACA,KAAKgB,IAEJA,EACH,EAbChB,EAeJ,EACL,EAtBCG,EAuBH,EAlDCC,EAoDD,CAACA,EAAO,MAAM,IAAK,UAAU,MAC1BG,EAAY,IAAKY,GAChB,CAACnB,EACC,OAAOmB,EACP,MAAM,UACN,OAAO,IACP,OAAO,QACP,KAAK,CACH,OAAQ,IACV,EACA,KAAK,CACH,OAAQ,IACV,EACA,KAAKA,IAEJA,EACH,EAdCnB,EAeF,EACH,EAlBCI,EAmBH,EAxECD,EAyEH,EA5ECC,EA8EL,CAEA,SAASQ,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": ["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/jsx/DialogDemo.js
CHANGED
|
@@ -1,66 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
Adapt,
|
|
4
|
-
Button,
|
|
5
|
-
Dialog,
|
|
6
|
-
Fieldset,
|
|
7
|
-
Input,
|
|
8
|
-
Label,
|
|
9
|
-
Paragraph,
|
|
10
|
-
Sheet,
|
|
11
|
-
TooltipSimple,
|
|
12
|
-
Unspaced,
|
|
13
|
-
YStack
|
|
14
|
-
} from "tamagui";
|
|
15
|
-
import { SelectDemo } from "./SelectDemo";
|
|
16
|
-
function DialogDemo() {
|
|
17
|
-
return <Dialog modal>
|
|
18
|
-
<Dialog.Trigger asChild><Button>Edit Profile</Button></Dialog.Trigger>
|
|
19
|
-
<Adapt when="sm" platform="touch"><Sheet zIndex={2e5} modal dismissOnSnapToBottom>
|
|
20
|
-
<Sheet.Frame padding="$4" space><Adapt.Contents /></Sheet.Frame>
|
|
21
|
-
<Sheet.Overlay />
|
|
22
|
-
</Sheet></Adapt>
|
|
23
|
-
<Dialog.Portal>
|
|
24
|
-
<Dialog.Overlay
|
|
25
|
-
key="overlay"
|
|
26
|
-
animation="quick"
|
|
27
|
-
opacity={0.5}
|
|
28
|
-
enterStyle={{ opacity: 0 }}
|
|
29
|
-
exitStyle={{ opacity: 0 }}
|
|
30
|
-
/>
|
|
31
|
-
<Dialog.Content
|
|
32
|
-
bordered
|
|
33
|
-
elevate
|
|
34
|
-
key="content"
|
|
35
|
-
animation={[
|
|
36
|
-
"quick",
|
|
37
|
-
{
|
|
38
|
-
opacity: {
|
|
39
|
-
overshootClamping: true
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
]}
|
|
43
|
-
enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
|
|
44
|
-
exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
|
|
45
|
-
space
|
|
46
|
-
>
|
|
47
|
-
<Dialog.Title>Edit profile</Dialog.Title>
|
|
48
|
-
<Dialog.Description>Make changes to your profile here. Click save when you're done.</Dialog.Description>
|
|
49
|
-
<Fieldset space="$4" horizontal>
|
|
50
|
-
<Label width={160} justifyContent="flex-end" htmlFor="name">Name</Label>
|
|
51
|
-
<Input flex={1} id="name" defaultValue="Nate Wienert" />
|
|
52
|
-
</Fieldset>
|
|
53
|
-
<Fieldset space="$4" horizontal>
|
|
54
|
-
<Label width={160} justifyContent="flex-end" htmlFor="username"><TooltipSimple label="Pick your favorite" placement="bottom-start"><Paragraph>Food</Paragraph></TooltipSimple></Label>
|
|
55
|
-
<SelectDemo />
|
|
56
|
-
</Fieldset>
|
|
57
|
-
<YStack alignItems="flex-end" marginTop="$2"><Dialog.Close displayWhenAdapted asChild><Button theme="alt1" aria-label="Close">Save changes</Button></Dialog.Close></YStack>
|
|
58
|
-
<Unspaced><Dialog.Close asChild><Button position="absolute" top="$3" right="$3" size="$2" circular icon={X} /></Dialog.Close></Unspaced>
|
|
59
|
-
</Dialog.Content>
|
|
60
|
-
</Dialog.Portal>
|
|
61
|
-
</Dialog>;
|
|
62
|
-
}
|
|
63
|
-
export {
|
|
64
|
-
DialogDemo
|
|
65
|
-
};
|
|
1
|
+
import{X as P}from"@tamagui/lucide-icons";import{Adapt as F,Button as D,Dialog as C,Fieldset as T,Input as B,Label as $,Paragraph as A,Sheet as S,TooltipSimple as I,Unspaced as L,YStack as O}from"tamagui";import{SelectDemo as E}from"./SelectDemo";function H(){return<C modal><C.Trigger asChild><D>Edit Profile</D></C.Trigger><F when="sm"platform="touch"><S zIndex={2e5}modal dismissOnSnapToBottom><S.Frame padding="$4"space><F.Contents/></S.Frame><S.Overlay/></S></F><C.Portal><C.Overlay key="overlay"animation="quick"opacity={.5}enterStyle={{opacity:0}}exitStyle={{opacity:0}}/><C.Content bordered elevate key="content"animation={["quick",{opacity:{overshootClamping:!0}}]}enterStyle={{x:0,y:-20,opacity:0,scale:.9}}exitStyle={{x:0,y:10,opacity:0,scale:.95}}space><C.Title>Edit profile</C.Title><C.Description>Make changes to your profile here. Click save when you're done.</C.Description><T space="$4"horizontal><$ width={160}justifyContent="flex-end"htmlFor="name">Name</$><B flex={1}id="name"defaultValue="Nate Wienert"/></T><T space="$4"horizontal><$ width={160}justifyContent="flex-end"htmlFor="username"><I label="Pick your favorite"placement="bottom-start"><A>Food</A></I></$><E/></T><O alignItems="flex-end"marginTop="$2"><C.Close displayWhenAdapted asChild><D theme="alt1"aria-label="Close">Save changes</D></C.Close></O><L><C.Close asChild><D position="absolute"top="$3"right="$3"size="$2"circular icon={P}/></C.Close></L></C.Content></C.Portal></C>}export{H as DialogDemo};
|
|
66
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": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,KAAAA,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,MACE,CAACV,EAAO,MACN,CAACA,EAAO,QAAQ,QACd,CAACD,EAAO,YAAY,EAAnBA,EACH,EAFCC,EAAO,QAIR,CAACF,EAAM,KAAK,IAAK,SAAS,QACxB,CAACO,EAAM,QAAQ,IAAQ,MAAM,sBAC3B,CAACA,EAAM,MAAM,QAAQ,IAAK,MACxB,CAACP,EAAM,QAAS,EAClB,EAFCO,EAAM,MAGP,CAACA,EAAM,OAAQ,EACjB,EALCA,EAMH,EAPCP,EASD,CAACE,EAAO,OACN,CAACA,EAAO,QACN,IAAI,SACJ,UAAU,OACV,SAAS,GACT,YAAY,CAAE,QAAS,CAAE,EACzB,WAAW,CAAE,QAAS,CAAE,EAC1B,EAEA,CAACA,EAAO,QACN,SACA,QACA,IAAI,SACJ,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,MAEA,CAACA,EAAO,MAAM,YAAY,EAAzBA,EAAO,MACR,CAACA,EAAO,YAAY,+DAEpB,EAFCA,EAAO,YAGR,CAACC,EAAS,MAAM,IAAK,WACnB,CAACE,EAAM,OAAO,IAAK,eAAe,UAAW,QAAQ,OAAO,IAE5D,EAFCA,EAGD,CAACD,EAAM,MAAM,EAAG,GAAG,MAAO,aAAa,cAAe,EACxD,EALCD,EAMD,CAACA,EAAS,MAAM,IAAK,WACnB,CAACE,EAAM,OAAO,IAAK,eAAe,UAAW,QAAQ,WACnD,CAACG,EAAc,MAAM,oBAAqB,UAAU,eAClD,CAACF,EAAU,IAAI,EAAdA,EACH,EAFCE,EAGH,EAJCH,EAKD,CAACM,CAAW,EACd,EAPCR,EASD,CAACO,EAAO,WAAW,UAAW,UAAU,KACtC,CAACR,EAAO,MAAM,mBAAmB,QAC/B,CAACD,EAAO,MAAM,MAAO,WAAW,QAAQ,YAExC,EAFCA,EAGH,EAJCC,EAAO,MAKV,EANCQ,EAQD,CAACD,EACC,CAACP,EAAO,MAAM,QACZ,CAACD,EAAO,SAAS,UAAW,IAAI,IAAK,MAAM,IAAK,KAAK,IAAK,SAAS,MAAMF,EAAG,EAC9E,EAFCG,EAAO,MAGV,EAJCO,EAKH,EAhDCP,EAAO,QAiDV,EA1DCA,EAAO,OA2DV,EAzECA,EA2EL",
|
|
6
|
+
"names": ["X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "YStack", "SelectDemo", "DialogDemo"]
|
|
7
7
|
}
|
package/dist/jsx/DialogDemo.mjs
CHANGED
|
@@ -1,66 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
Adapt,
|
|
4
|
-
Button,
|
|
5
|
-
Dialog,
|
|
6
|
-
Fieldset,
|
|
7
|
-
Input,
|
|
8
|
-
Label,
|
|
9
|
-
Paragraph,
|
|
10
|
-
Sheet,
|
|
11
|
-
TooltipSimple,
|
|
12
|
-
Unspaced,
|
|
13
|
-
YStack
|
|
14
|
-
} from "tamagui";
|
|
15
|
-
import { SelectDemo } from "./SelectDemo";
|
|
16
|
-
function DialogDemo() {
|
|
17
|
-
return <Dialog modal>
|
|
18
|
-
<Dialog.Trigger asChild><Button>Edit Profile</Button></Dialog.Trigger>
|
|
19
|
-
<Adapt when="sm" platform="touch"><Sheet zIndex={2e5} modal dismissOnSnapToBottom>
|
|
20
|
-
<Sheet.Frame padding="$4" space><Adapt.Contents /></Sheet.Frame>
|
|
21
|
-
<Sheet.Overlay />
|
|
22
|
-
</Sheet></Adapt>
|
|
23
|
-
<Dialog.Portal>
|
|
24
|
-
<Dialog.Overlay
|
|
25
|
-
key="overlay"
|
|
26
|
-
animation="quick"
|
|
27
|
-
opacity={0.5}
|
|
28
|
-
enterStyle={{ opacity: 0 }}
|
|
29
|
-
exitStyle={{ opacity: 0 }}
|
|
30
|
-
/>
|
|
31
|
-
<Dialog.Content
|
|
32
|
-
bordered
|
|
33
|
-
elevate
|
|
34
|
-
key="content"
|
|
35
|
-
animation={[
|
|
36
|
-
"quick",
|
|
37
|
-
{
|
|
38
|
-
opacity: {
|
|
39
|
-
overshootClamping: true
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
]}
|
|
43
|
-
enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
|
|
44
|
-
exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
|
|
45
|
-
space
|
|
46
|
-
>
|
|
47
|
-
<Dialog.Title>Edit profile</Dialog.Title>
|
|
48
|
-
<Dialog.Description>Make changes to your profile here. Click save when you're done.</Dialog.Description>
|
|
49
|
-
<Fieldset space="$4" horizontal>
|
|
50
|
-
<Label width={160} justifyContent="flex-end" htmlFor="name">Name</Label>
|
|
51
|
-
<Input flex={1} id="name" defaultValue="Nate Wienert" />
|
|
52
|
-
</Fieldset>
|
|
53
|
-
<Fieldset space="$4" horizontal>
|
|
54
|
-
<Label width={160} justifyContent="flex-end" htmlFor="username"><TooltipSimple label="Pick your favorite" placement="bottom-start"><Paragraph>Food</Paragraph></TooltipSimple></Label>
|
|
55
|
-
<SelectDemo />
|
|
56
|
-
</Fieldset>
|
|
57
|
-
<YStack alignItems="flex-end" marginTop="$2"><Dialog.Close displayWhenAdapted asChild><Button theme="alt1" aria-label="Close">Save changes</Button></Dialog.Close></YStack>
|
|
58
|
-
<Unspaced><Dialog.Close asChild><Button position="absolute" top="$3" right="$3" size="$2" circular icon={X} /></Dialog.Close></Unspaced>
|
|
59
|
-
</Dialog.Content>
|
|
60
|
-
</Dialog.Portal>
|
|
61
|
-
</Dialog>;
|
|
62
|
-
}
|
|
63
|
-
export {
|
|
64
|
-
DialogDemo
|
|
65
|
-
};
|
|
1
|
+
import{X as P}from"@tamagui/lucide-icons";import{Adapt as F,Button as D,Dialog as C,Fieldset as T,Input as B,Label as $,Paragraph as A,Sheet as S,TooltipSimple as I,Unspaced as L,YStack as O}from"tamagui";import{SelectDemo as E}from"./SelectDemo";function H(){return<C modal><C.Trigger asChild><D>Edit Profile</D></C.Trigger><F when="sm"platform="touch"><S zIndex={2e5}modal dismissOnSnapToBottom><S.Frame padding="$4"space><F.Contents/></S.Frame><S.Overlay/></S></F><C.Portal><C.Overlay key="overlay"animation="quick"opacity={.5}enterStyle={{opacity:0}}exitStyle={{opacity:0}}/><C.Content bordered elevate key="content"animation={["quick",{opacity:{overshootClamping:!0}}]}enterStyle={{x:0,y:-20,opacity:0,scale:.9}}exitStyle={{x:0,y:10,opacity:0,scale:.95}}space><C.Title>Edit profile</C.Title><C.Description>Make changes to your profile here. Click save when you're done.</C.Description><T space="$4"horizontal><$ width={160}justifyContent="flex-end"htmlFor="name">Name</$><B flex={1}id="name"defaultValue="Nate Wienert"/></T><T space="$4"horizontal><$ width={160}justifyContent="flex-end"htmlFor="username"><I label="Pick your favorite"placement="bottom-start"><A>Food</A></I></$><E/></T><O alignItems="flex-end"marginTop="$2"><C.Close displayWhenAdapted asChild><D theme="alt1"aria-label="Close">Save changes</D></C.Close></O><L><C.Close asChild><D position="absolute"top="$3"right="$3"size="$2"circular icon={P}/></C.Close></L></C.Content></C.Portal></C>}export{H as DialogDemo};
|
|
66
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": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,KAAAA,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,MACE,CAACV,EAAO,MACN,CAACA,EAAO,QAAQ,QACd,CAACD,EAAO,YAAY,EAAnBA,EACH,EAFCC,EAAO,QAIR,CAACF,EAAM,KAAK,IAAK,SAAS,QACxB,CAACO,EAAM,QAAQ,IAAQ,MAAM,sBAC3B,CAACA,EAAM,MAAM,QAAQ,IAAK,MACxB,CAACP,EAAM,QAAS,EAClB,EAFCO,EAAM,MAGP,CAACA,EAAM,OAAQ,EACjB,EALCA,EAMH,EAPCP,EASD,CAACE,EAAO,OACN,CAACA,EAAO,QACN,IAAI,SACJ,UAAU,OACV,SAAS,GACT,YAAY,CAAE,QAAS,CAAE,EACzB,WAAW,CAAE,QAAS,CAAE,EAC1B,EAEA,CAACA,EAAO,QACN,SACA,QACA,IAAI,SACJ,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,MAEA,CAACA,EAAO,MAAM,YAAY,EAAzBA,EAAO,MACR,CAACA,EAAO,YAAY,+DAEpB,EAFCA,EAAO,YAGR,CAACC,EAAS,MAAM,IAAK,WACnB,CAACE,EAAM,OAAO,IAAK,eAAe,UAAW,QAAQ,OAAO,IAE5D,EAFCA,EAGD,CAACD,EAAM,MAAM,EAAG,GAAG,MAAO,aAAa,cAAe,EACxD,EALCD,EAMD,CAACA,EAAS,MAAM,IAAK,WACnB,CAACE,EAAM,OAAO,IAAK,eAAe,UAAW,QAAQ,WACnD,CAACG,EAAc,MAAM,oBAAqB,UAAU,eAClD,CAACF,EAAU,IAAI,EAAdA,EACH,EAFCE,EAGH,EAJCH,EAKD,CAACM,CAAW,EACd,EAPCR,EASD,CAACO,EAAO,WAAW,UAAW,UAAU,KACtC,CAACR,EAAO,MAAM,mBAAmB,QAC/B,CAACD,EAAO,MAAM,MAAO,WAAW,QAAQ,YAExC,EAFCA,EAGH,EAJCC,EAAO,MAKV,EANCQ,EAQD,CAACD,EACC,CAACP,EAAO,MAAM,QACZ,CAACD,EAAO,SAAS,UAAW,IAAI,IAAK,MAAM,IAAK,KAAK,IAAK,SAAS,MAAMF,EAAG,EAC9E,EAFCG,EAAO,MAGV,EAJCO,EAKH,EAhDCP,EAAO,QAiDV,EA1DCA,EAAO,OA2DV,EAzECA,EA2EL",
|
|
6
|
+
"names": ["X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "YStack", "SelectDemo", "DialogDemo"]
|
|
7
7
|
}
|
package/dist/jsx/FormsDemo.js
CHANGED
|
@@ -1,31 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Button, Form, H4, Spinner } from "tamagui";
|
|
3
|
-
function FormsDemo(props) {
|
|
4
|
-
const [status, setStatus] = useState("off");
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
if (status === "submitting") {
|
|
7
|
-
const timer = setTimeout(() => setStatus("off"), 2e3);
|
|
8
|
-
return () => {
|
|
9
|
-
clearTimeout(timer);
|
|
10
|
-
};
|
|
11
|
-
}
|
|
12
|
-
}, [status]);
|
|
13
|
-
return <Form
|
|
14
|
-
alignItems="center"
|
|
15
|
-
minWidth={300}
|
|
16
|
-
space
|
|
17
|
-
onSubmit={() => setStatus("submitting")}
|
|
18
|
-
borderWidth={1}
|
|
19
|
-
borderRadius="$4"
|
|
20
|
-
backgroundColor="$background"
|
|
21
|
-
borderColor="$borderColor"
|
|
22
|
-
padding="$8"
|
|
23
|
-
>
|
|
24
|
-
<H4>{status[0].toUpperCase() + status.slice(1)}</H4>
|
|
25
|
-
<Form.Trigger asChild disabled={status !== "off"}><Button icon={status === "submitting" ? () => <Spinner /> : void 0}>Submit</Button></Form.Trigger>
|
|
26
|
-
</Form>;
|
|
27
|
-
}
|
|
28
|
-
export {
|
|
29
|
-
FormsDemo
|
|
30
|
-
};
|
|
1
|
+
import{useEffect as k,useState as T}from"react";import{Button as C,Form as S,H4 as F,Spinner as $}from"tamagui";function I(h){const[t,o]=T("off");return k(()=>{if(t==="submitting"){const l=setTimeout(()=>o("off"),2e3);return()=>{clearTimeout(l)}}},[t]),<S alignItems="center"minWidth={300}space onSubmit={()=>o("submitting")}borderWidth={1}borderRadius="$4"backgroundColor="$background"borderColor="$borderColor"padding="$8"><F>{t[0].toUpperCase()+t.slice(1)}</F><S.Trigger asChild disabled={t!=="off"}><C icon={t==="submitting"?()=><$/>:void 0}>Submit</C></S.Trigger></S>}export{I as FormsDemo};
|
|
31
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": "AAEA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAEA,OAAS,aAAAA,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,EAGT,CAACL,EACC,WAAW,QACX,UAAU,IACV,MACA,UAAU,IAAMM,EAAU,YAAY,EACtC,aAAa,EACb,aAAa,IACb,gBAAgB,aAChB,YAAY,cACZ,QAAQ,KAER,CAACL,GAAII,EAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,MAAM,CAAC,EAAE,EAA9CJ,EAED,CAACD,EAAK,QAAQ,QAAQ,UAAUK,IAAW,OACzC,CAACN,EAAO,MAAMM,IAAW,aAAe,IAAM,CAACH,CAAQ,GAAK,QAAW,MAEvE,EAFCH,EAGH,EAJCC,EAAK,QAKR,EAlBCA,EAoBL",
|
|
6
|
+
"names": ["useEffect", "useState", "Button", "Form", "H4", "Spinner", "FormsDemo", "props", "status", "setStatus", "timer"]
|
|
7
7
|
}
|
package/dist/jsx/FormsDemo.mjs
CHANGED
|
@@ -1,31 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Button, Form, H4, Spinner } from "tamagui";
|
|
3
|
-
function FormsDemo(props) {
|
|
4
|
-
const [status, setStatus] = useState("off");
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
if (status === "submitting") {
|
|
7
|
-
const timer = setTimeout(() => setStatus("off"), 2e3);
|
|
8
|
-
return () => {
|
|
9
|
-
clearTimeout(timer);
|
|
10
|
-
};
|
|
11
|
-
}
|
|
12
|
-
}, [status]);
|
|
13
|
-
return <Form
|
|
14
|
-
alignItems="center"
|
|
15
|
-
minWidth={300}
|
|
16
|
-
space
|
|
17
|
-
onSubmit={() => setStatus("submitting")}
|
|
18
|
-
borderWidth={1}
|
|
19
|
-
borderRadius="$4"
|
|
20
|
-
backgroundColor="$background"
|
|
21
|
-
borderColor="$borderColor"
|
|
22
|
-
padding="$8"
|
|
23
|
-
>
|
|
24
|
-
<H4>{status[0].toUpperCase() + status.slice(1)}</H4>
|
|
25
|
-
<Form.Trigger asChild disabled={status !== "off"}><Button icon={status === "submitting" ? () => <Spinner /> : void 0}>Submit</Button></Form.Trigger>
|
|
26
|
-
</Form>;
|
|
27
|
-
}
|
|
28
|
-
export {
|
|
29
|
-
FormsDemo
|
|
30
|
-
};
|
|
1
|
+
import{useEffect as k,useState as T}from"react";import{Button as C,Form as S,H4 as F,Spinner as $}from"tamagui";function I(h){const[t,o]=T("off");return k(()=>{if(t==="submitting"){const l=setTimeout(()=>o("off"),2e3);return()=>{clearTimeout(l)}}},[t]),<S alignItems="center"minWidth={300}space onSubmit={()=>o("submitting")}borderWidth={1}borderRadius="$4"backgroundColor="$background"borderColor="$borderColor"padding="$8"><F>{t[0].toUpperCase()+t.slice(1)}</F><S.Trigger asChild disabled={t!=="off"}><C icon={t==="submitting"?()=><$/>:void 0}>Submit</C></S.Trigger></S>}export{I as FormsDemo};
|
|
31
2
|
//# sourceMappingURL=FormsDemo.mjs.map
|