@tamagui/demos 1.113.1 → 1.113.2
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/esm/AccordionDemo.native.js +79 -66
- package/dist/esm/AccordionDemo.native.js.map +6 -1
- package/dist/esm/AddThemeDemo.native.js +34 -25
- package/dist/esm/AddThemeDemo.native.js.map +6 -1
- package/dist/esm/AlertDialogDemo.native.js +84 -66
- package/dist/esm/AlertDialogDemo.native.js.map +6 -1
- package/dist/esm/AnimationsDemo.native.js +75 -65
- package/dist/esm/AnimationsDemo.native.js.map +6 -1
- package/dist/esm/AnimationsEnterDemo.native.js +38 -33
- package/dist/esm/AnimationsEnterDemo.native.js.map +6 -1
- package/dist/esm/AnimationsHoverDemo.native.js +6 -4
- package/dist/esm/AnimationsHoverDemo.native.js.map +6 -1
- package/dist/esm/AnimationsPresenceDemo.native.js +91 -78
- package/dist/esm/AnimationsPresenceDemo.native.js.map +6 -1
- package/dist/esm/AnimationsTimingDemo.native.js +6 -4
- package/dist/esm/AnimationsTimingDemo.native.js.map +6 -1
- package/dist/esm/AvatarDemo.native.js +34 -23
- package/dist/esm/AvatarDemo.native.js.map +6 -1
- package/dist/esm/BuildAButtonDemo.native.js +94 -73
- package/dist/esm/BuildAButtonDemo.native.js.map +6 -1
- package/dist/esm/ButtonDemo.native.js +68 -51
- package/dist/esm/ButtonDemo.native.js.map +6 -1
- package/dist/esm/CardDemo.native.js +63 -47
- package/dist/esm/CardDemo.native.js.map +6 -1
- package/dist/esm/CheckboxDemo.native.js +36 -31
- package/dist/esm/CheckboxDemo.native.js.map +6 -1
- package/dist/esm/CheckboxHeadlessDemo.native.js +33 -26
- package/dist/esm/CheckboxHeadlessDemo.native.js.map +6 -1
- package/dist/esm/CheckboxUnstyledDemo.native.js +40 -36
- package/dist/esm/CheckboxUnstyledDemo.native.js.map +6 -1
- package/dist/esm/ColorsDemo.native.js +106 -84
- package/dist/esm/ColorsDemo.native.js.map +6 -1
- package/dist/esm/DialogDemo.native.js +156 -122
- package/dist/esm/DialogDemo.native.js.map +6 -1
- package/dist/esm/FormsDemo.native.js +25 -18
- package/dist/esm/FormsDemo.native.js.map +6 -1
- package/dist/esm/Grid.native.js +22 -23
- package/dist/esm/Grid.native.js.map +6 -1
- package/dist/esm/GroupDemo.native.js +72 -55
- package/dist/esm/GroupDemo.native.js.map +6 -1
- package/dist/esm/HeadingsDemo.native.js +25 -16
- package/dist/esm/HeadingsDemo.native.js.map +6 -1
- package/dist/esm/ImageDemo.native.js +5 -3
- package/dist/esm/ImageDemo.native.js.map +6 -1
- package/dist/esm/InputsDemo.native.js +31 -21
- package/dist/esm/InputsDemo.native.js.map +6 -1
- package/dist/esm/LabelDemo.native.js +40 -29
- package/dist/esm/LabelDemo.native.js.map +6 -1
- package/dist/esm/LinearGradientDemo.native.js +43 -20
- package/dist/esm/LinearGradientDemo.native.js.map +6 -1
- package/dist/esm/ListItemDemo.native.js +63 -50
- package/dist/esm/ListItemDemo.native.js.map +6 -1
- package/dist/esm/LucideIconsDemo.native.js +44 -38
- package/dist/esm/LucideIconsDemo.native.js.map +6 -1
- package/dist/esm/NewInputsDemo.native.js +31 -21
- package/dist/esm/NewInputsDemo.native.js.map +6 -1
- package/dist/esm/PopoverDemo.native.js +139 -108
- package/dist/esm/PopoverDemo.native.js.map +6 -1
- package/dist/esm/ProgressDemo.native.js +85 -68
- package/dist/esm/ProgressDemo.native.js.map +6 -1
- package/dist/esm/RadioGroupDemo.native.js +38 -28
- package/dist/esm/RadioGroupDemo.native.js.map +6 -1
- package/dist/esm/RadioGroupHeadlessDemo.native.js +65 -75
- package/dist/esm/RadioGroupHeadlessDemo.native.js.map +6 -1
- package/dist/esm/RadioGroupUnstyledDemo.native.js +96 -94
- package/dist/esm/RadioGroupUnstyledDemo.native.js.map +6 -1
- package/dist/esm/ReplaceThemeDemo.native.js +29 -25
- package/dist/esm/ReplaceThemeDemo.native.js.map +6 -1
- package/dist/esm/ScrollViewDemo.native.js +48 -37
- package/dist/esm/ScrollViewDemo.native.js.map +6 -1
- package/dist/esm/SelectDemo.native.js +267 -187
- package/dist/esm/SelectDemo.native.js.map +6 -1
- package/dist/esm/SeparatorDemo.native.js +42 -29
- package/dist/esm/SeparatorDemo.native.js.map +6 -1
- package/dist/esm/ShapesDemo.native.js +17 -12
- package/dist/esm/ShapesDemo.native.js.map +6 -1
- package/dist/esm/SheetDemo.native.js +183 -133
- package/dist/esm/SheetDemo.native.js.map +6 -1
- package/dist/esm/SliderDemo.native.js +30 -22
- package/dist/esm/SliderDemo.native.js.map +6 -1
- package/dist/esm/SpinnerDemo.native.js +15 -10
- package/dist/esm/SpinnerDemo.native.js.map +6 -1
- package/dist/esm/StacksDemo.native.js +85 -67
- package/dist/esm/StacksDemo.native.js.map +6 -1
- package/dist/esm/SwitchDemo.native.js +76 -57
- package/dist/esm/SwitchDemo.native.js.map +6 -1
- package/dist/esm/SwitchHeadlessDemo.native.js +63 -45
- package/dist/esm/SwitchHeadlessDemo.native.js.map +6 -1
- package/dist/esm/SwitchUnstyledDemo.native.js +50 -46
- package/dist/esm/SwitchUnstyledDemo.native.js.map +6 -1
- package/dist/esm/TabsAdvancedDemo.native.js +297 -297
- package/dist/esm/TabsAdvancedDemo.native.js.map +6 -1
- package/dist/esm/TabsDemo.native.js +149 -126
- package/dist/esm/TabsDemo.native.js.map +6 -1
- package/dist/esm/TextDemo.native.js +30 -21
- package/dist/esm/TextDemo.native.js.map +6 -1
- package/dist/esm/ThemeBuilderDemo.native.js +170 -137
- package/dist/esm/ThemeBuilderDemo.native.js.map +6 -1
- package/dist/esm/ThemeInverseDemo.native.js +43 -30
- package/dist/esm/ThemeInverseDemo.native.js.map +6 -1
- package/dist/esm/ToastDemo.native.js +83 -73
- package/dist/esm/ToastDemo.native.js.map +6 -1
- package/dist/esm/ToastDuplicateDemo.native.js +61 -45
- package/dist/esm/ToastDuplicateDemo.native.js.map +6 -1
- package/dist/esm/ToggleGroupDemo.native.js +76 -58
- package/dist/esm/ToggleGroupDemo.native.js.map +6 -1
- package/dist/esm/TokensDemo.native.js +107 -94
- package/dist/esm/TokensDemo.native.js.map +6 -1
- package/dist/esm/TooltipDemo.native.js +109 -85
- package/dist/esm/TooltipDemo.native.js.map +6 -1
- package/dist/esm/UpdateThemeDemo.native.js +31 -28
- package/dist/esm/UpdateThemeDemo.native.js.map +6 -1
- package/dist/esm/WebNativeImageDemo.native.js +5 -3
- package/dist/esm/WebNativeImageDemo.native.js.map +6 -1
- package/dist/esm/index.native.js +58 -58
- package/dist/esm/index.native.js.map +6 -1
- package/dist/esm/tamagui.config.native.js +5 -2
- package/dist/esm/tamagui.config.native.js.map +6 -1
- package/dist/esm/useOnIntersecting.native.js +39 -42
- package/dist/esm/useOnIntersecting.native.js.map +6 -1
- package/package.json +19 -19
|
@@ -1,132 +1,166 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { X } from "@tamagui/lucide-icons";
|
|
3
3
|
import { Adapt, Button, Dialog, Fieldset, Input, Label, Paragraph, Sheet, TooltipSimple, Unspaced, XStack } from "tamagui";
|
|
4
|
-
import { SelectDemoItem } from "./SelectDemo
|
|
4
|
+
import { SelectDemoItem } from "./SelectDemo";
|
|
5
5
|
function DialogDemo() {
|
|
6
|
-
return /* @__PURE__ */_jsx(DialogInstance, {});
|
|
6
|
+
return /* @__PURE__ */ _jsx(DialogInstance, {});
|
|
7
7
|
}
|
|
8
8
|
function DialogInstance() {
|
|
9
|
-
return /* @__PURE__ */_jsxs(Dialog, {
|
|
9
|
+
return /* @__PURE__ */ _jsxs(Dialog, {
|
|
10
10
|
modal: !0,
|
|
11
|
-
children: [
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
children:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
animation: "slow",
|
|
41
|
-
opacity: 0.5,
|
|
42
|
-
enterStyle: {
|
|
43
|
-
opacity: 0
|
|
44
|
-
},
|
|
45
|
-
exitStyle: {
|
|
46
|
-
opacity: 0
|
|
47
|
-
}
|
|
48
|
-
}, "overlay"), /* @__PURE__ */_jsxs(Dialog.Content, {
|
|
49
|
-
bordered: !0,
|
|
50
|
-
elevate: !0,
|
|
51
|
-
animateOnly: ["transform", "opacity"],
|
|
52
|
-
animation: ["quicker", {
|
|
53
|
-
opacity: {
|
|
54
|
-
overshootClamping: !0
|
|
55
|
-
}
|
|
56
|
-
}],
|
|
57
|
-
enterStyle: {
|
|
58
|
-
x: 0,
|
|
59
|
-
y: -20,
|
|
60
|
-
opacity: 0,
|
|
61
|
-
scale: 0.9
|
|
62
|
-
},
|
|
63
|
-
exitStyle: {
|
|
64
|
-
x: 0,
|
|
65
|
-
y: 10,
|
|
66
|
-
opacity: 0,
|
|
67
|
-
scale: 0.95
|
|
68
|
-
},
|
|
69
|
-
gap: "$4",
|
|
70
|
-
children: [/* @__PURE__ */_jsx(Dialog.Title, {
|
|
71
|
-
children: "Edit profile"
|
|
72
|
-
}), /* @__PURE__ */_jsx(Dialog.Description, {
|
|
73
|
-
children: "Make changes to your profile here. Click save when you're done."
|
|
74
|
-
}), /* @__PURE__ */_jsxs(Fieldset, {
|
|
75
|
-
gap: "$4",
|
|
76
|
-
horizontal: !0,
|
|
77
|
-
children: [/* @__PURE__ */_jsx(Label, {
|
|
78
|
-
width: 160,
|
|
79
|
-
justifyContent: "flex-end",
|
|
80
|
-
htmlFor: "name",
|
|
81
|
-
children: "Name"
|
|
82
|
-
}), /* @__PURE__ */_jsx(Input, {
|
|
83
|
-
flex: 1,
|
|
84
|
-
id: "name",
|
|
85
|
-
defaultValue: "Nate Wienert"
|
|
86
|
-
})]
|
|
87
|
-
}), /* @__PURE__ */_jsxs(Fieldset, {
|
|
88
|
-
gap: "$4",
|
|
89
|
-
horizontal: !0,
|
|
90
|
-
children: [/* @__PURE__ */_jsx(Label, {
|
|
91
|
-
width: 160,
|
|
92
|
-
justifyContent: "flex-end",
|
|
93
|
-
htmlFor: "username",
|
|
94
|
-
children: /* @__PURE__ */_jsx(TooltipSimple, {
|
|
95
|
-
label: "Pick your favorite",
|
|
96
|
-
placement: "bottom-start",
|
|
97
|
-
children: /* @__PURE__ */_jsx(Paragraph, {
|
|
98
|
-
children: "Food"
|
|
99
|
-
})
|
|
100
|
-
})
|
|
101
|
-
}), /* @__PURE__ */_jsx(SelectDemoItem, {})]
|
|
102
|
-
}), /* @__PURE__ */_jsxs(XStack, {
|
|
103
|
-
alignSelf: "flex-end",
|
|
104
|
-
gap: "$4",
|
|
105
|
-
children: [/* @__PURE__ */_jsx(DialogInstance, {}), /* @__PURE__ */_jsx(Dialog.Close, {
|
|
106
|
-
displayWhenAdapted: !0,
|
|
107
|
-
asChild: !0,
|
|
108
|
-
children: /* @__PURE__ */_jsx(Button, {
|
|
109
|
-
theme: "active",
|
|
110
|
-
"aria-label": "Close",
|
|
111
|
-
children: "Save changes"
|
|
11
|
+
children: [
|
|
12
|
+
/* @__PURE__ */ _jsx(Dialog.Trigger, {
|
|
13
|
+
asChild: !0,
|
|
14
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
15
|
+
children: "Show Dialog"
|
|
16
|
+
})
|
|
17
|
+
}),
|
|
18
|
+
/* @__PURE__ */ _jsx(Adapt, {
|
|
19
|
+
when: "sm",
|
|
20
|
+
platform: "touch",
|
|
21
|
+
children: /* @__PURE__ */ _jsxs(Sheet, {
|
|
22
|
+
animation: "medium",
|
|
23
|
+
zIndex: 2e5,
|
|
24
|
+
modal: !0,
|
|
25
|
+
dismissOnSnapToBottom: !0,
|
|
26
|
+
children: [
|
|
27
|
+
/* @__PURE__ */ _jsx(Sheet.Frame, {
|
|
28
|
+
padding: "$4",
|
|
29
|
+
gap: "$4",
|
|
30
|
+
children: /* @__PURE__ */ _jsx(Adapt.Contents, {})
|
|
31
|
+
}),
|
|
32
|
+
/* @__PURE__ */ _jsx(Sheet.Overlay, {
|
|
33
|
+
animation: "lazy",
|
|
34
|
+
enterStyle: {
|
|
35
|
+
opacity: 0
|
|
36
|
+
},
|
|
37
|
+
exitStyle: {
|
|
38
|
+
opacity: 0
|
|
39
|
+
}
|
|
112
40
|
})
|
|
113
|
-
|
|
114
|
-
})
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
41
|
+
]
|
|
42
|
+
})
|
|
43
|
+
}),
|
|
44
|
+
/* @__PURE__ */ _jsxs(Dialog.Portal, {
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ _jsx(Dialog.Overlay, {
|
|
47
|
+
animation: "slow",
|
|
48
|
+
opacity: 0.5,
|
|
49
|
+
enterStyle: {
|
|
50
|
+
opacity: 0
|
|
51
|
+
},
|
|
52
|
+
exitStyle: {
|
|
53
|
+
opacity: 0
|
|
54
|
+
}
|
|
55
|
+
}, "overlay"),
|
|
56
|
+
/* @__PURE__ */ _jsxs(Dialog.Content, {
|
|
57
|
+
bordered: !0,
|
|
58
|
+
elevate: !0,
|
|
59
|
+
animateOnly: [
|
|
60
|
+
"transform",
|
|
61
|
+
"opacity"
|
|
62
|
+
],
|
|
63
|
+
animation: [
|
|
64
|
+
"quicker",
|
|
65
|
+
{
|
|
66
|
+
opacity: {
|
|
67
|
+
overshootClamping: !0
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
enterStyle: {
|
|
72
|
+
x: 0,
|
|
73
|
+
y: -20,
|
|
74
|
+
opacity: 0,
|
|
75
|
+
scale: 0.9
|
|
76
|
+
},
|
|
77
|
+
exitStyle: {
|
|
78
|
+
x: 0,
|
|
79
|
+
y: 10,
|
|
80
|
+
opacity: 0,
|
|
81
|
+
scale: 0.95
|
|
82
|
+
},
|
|
83
|
+
gap: "$4",
|
|
84
|
+
children: [
|
|
85
|
+
/* @__PURE__ */ _jsx(Dialog.Title, {
|
|
86
|
+
children: "Edit profile"
|
|
87
|
+
}),
|
|
88
|
+
/* @__PURE__ */ _jsx(Dialog.Description, {
|
|
89
|
+
children: "Make changes to your profile here. Click save when you're done."
|
|
90
|
+
}),
|
|
91
|
+
/* @__PURE__ */ _jsxs(Fieldset, {
|
|
92
|
+
gap: "$4",
|
|
93
|
+
horizontal: !0,
|
|
94
|
+
children: [
|
|
95
|
+
/* @__PURE__ */ _jsx(Label, {
|
|
96
|
+
width: 160,
|
|
97
|
+
justifyContent: "flex-end",
|
|
98
|
+
htmlFor: "name",
|
|
99
|
+
children: "Name"
|
|
100
|
+
}),
|
|
101
|
+
/* @__PURE__ */ _jsx(Input, {
|
|
102
|
+
flex: 1,
|
|
103
|
+
id: "name",
|
|
104
|
+
defaultValue: "Nate Wienert"
|
|
105
|
+
})
|
|
106
|
+
]
|
|
107
|
+
}),
|
|
108
|
+
/* @__PURE__ */ _jsxs(Fieldset, {
|
|
109
|
+
gap: "$4",
|
|
110
|
+
horizontal: !0,
|
|
111
|
+
children: [
|
|
112
|
+
/* @__PURE__ */ _jsx(Label, {
|
|
113
|
+
width: 160,
|
|
114
|
+
justifyContent: "flex-end",
|
|
115
|
+
htmlFor: "username",
|
|
116
|
+
children: /* @__PURE__ */ _jsx(TooltipSimple, {
|
|
117
|
+
label: "Pick your favorite",
|
|
118
|
+
placement: "bottom-start",
|
|
119
|
+
children: /* @__PURE__ */ _jsx(Paragraph, {
|
|
120
|
+
children: "Food"
|
|
121
|
+
})
|
|
122
|
+
})
|
|
123
|
+
}),
|
|
124
|
+
/* @__PURE__ */ _jsx(SelectDemoItem, {})
|
|
125
|
+
]
|
|
126
|
+
}),
|
|
127
|
+
/* @__PURE__ */ _jsxs(XStack, {
|
|
128
|
+
alignSelf: "flex-end",
|
|
129
|
+
gap: "$4",
|
|
130
|
+
children: [
|
|
131
|
+
/* @__PURE__ */ _jsx(DialogInstance, {}),
|
|
132
|
+
/* @__PURE__ */ _jsx(Dialog.Close, {
|
|
133
|
+
displayWhenAdapted: !0,
|
|
134
|
+
asChild: !0,
|
|
135
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
136
|
+
theme: "active",
|
|
137
|
+
"aria-label": "Close",
|
|
138
|
+
children: "Save changes"
|
|
139
|
+
})
|
|
140
|
+
})
|
|
141
|
+
]
|
|
142
|
+
}),
|
|
143
|
+
/* @__PURE__ */ _jsx(Unspaced, {
|
|
144
|
+
children: /* @__PURE__ */ _jsx(Dialog.Close, {
|
|
145
|
+
asChild: !0,
|
|
146
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
147
|
+
position: "absolute",
|
|
148
|
+
top: "$3",
|
|
149
|
+
right: "$3",
|
|
150
|
+
size: "$2",
|
|
151
|
+
circular: !0,
|
|
152
|
+
icon: X
|
|
153
|
+
})
|
|
154
|
+
})
|
|
155
|
+
})
|
|
156
|
+
]
|
|
157
|
+
}, "content")
|
|
158
|
+
]
|
|
159
|
+
})
|
|
160
|
+
]
|
|
129
161
|
});
|
|
130
162
|
}
|
|
131
|
-
export {
|
|
132
|
-
|
|
163
|
+
export {
|
|
164
|
+
DialogDemo
|
|
165
|
+
};
|
|
166
|
+
//# sourceMappingURL=DialogDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/DialogDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,SAAS;AAClB,SACEC,OACAC,QACAC,QACAC,UACAC,OACAC,OACAC,WACAC,OACAC,eACAC,UACAC,cACK;AAEP,SAASC,sBAAsB;AAExB,SAASC,aAAAA;AACd,SAAO,qBAACC,gBAAAA,CAAAA,CAAAA;AACV;AAEA,SAASA,iBAAAA;AACP,SACE,sBAACX,QAAAA;IAAOY,OAAK;;MACX,qBAACZ,OAAOa,SAAO;QAACC,SAAO;kBACrB,qBAACf,QAAAA;oBAAO;;;MAGV,qBAACD,OAAAA;QAAMiB,MAAK;QAAKC,UAAS;kBACxB,sBAACX,OAAAA;UAAMY,WAAU;UAASC,QAAQ;UAAQN,OAAK;UAACO,uBAAqB;;YACnE,qBAACd,MAAMe,OAAK;cAACC,SAAQ;cAAKC,KAAI;wBAC5B,qBAACxB,MAAMyB,UAAQ,CAAA,CAAA;;YAEjB,qBAAClB,MAAMmB,SAAO;cACZP,WAAU;cACVQ,YAAY;gBAAEC,SAAS;cAAE;cACzBC,WAAW;gBAAED,SAAS;cAAE;;;;;MAK9B,sBAAC1B,OAAO4B,QAAM;;UACZ,qBAAC5B,OAAOwB,SAAO;YAEbP,WAAU;YACVS,SAAS;YACTD,YAAY;cAAEC,SAAS;YAAE;YACzBC,WAAW;cAAED,SAAS;YAAE;aAJpB,SAAA;UAON,sBAAC1B,OAAO6B,SAAO;YACbC,UAAQ;YACRC,SAAO;YAEPC,aAAa;cAAC;cAAa;;YAC3Bf,WAAW;cACT;cACA;gBACES,SAAS;kBACPO,mBAAmB;gBACrB;cACF;;YAEFR,YAAY;cAAES,GAAG;cAAGC,GAAG;cAAKT,SAAS;cAAGU,OAAO;YAAI;YACnDT,WAAW;cAAEO,GAAG;cAAGC,GAAG;cAAIT,SAAS;cAAGU,OAAO;YAAK;YAClDd,KAAI;;cAEJ,qBAACtB,OAAOqC,OAAK;0BAAC;;cACd,qBAACrC,OAAOsC,aAAW;0BAAC;;cAGpB,sBAACrC,UAAAA;gBAASqB,KAAI;gBAAKiB,YAAU;;kBAC3B,qBAACpC,OAAAA;oBAAMqC,OAAO;oBAAKC,gBAAe;oBAAWC,SAAQ;8BAAO;;kBAG5D,qBAACxC,OAAAA;oBAAMyC,MAAM;oBAAGC,IAAG;oBAAOC,cAAa;;;;cAEzC,sBAAC5C,UAAAA;gBAASqB,KAAI;gBAAKiB,YAAU;;kBAC3B,qBAACpC,OAAAA;oBAAMqC,OAAO;oBAAKC,gBAAe;oBAAWC,SAAQ;8BACnD,qBAACpC,eAAAA;sBAAcwC,OAAM;sBAAqBC,WAAU;gCAClD,qBAAC3C,WAAAA;kCAAU;;;;kBAGf,qBAACK,gBAAAA,CAAAA,CAAAA;;;cAGH,sBAACD,QAAAA;gBAAOwC,WAAU;gBAAW1B,KAAI;;kBAC/B,qBAACX,gBAAAA,CAAAA,CAAAA;kBAED,qBAACX,OAAOiD,OAAK;oBAACC,oBAAkB;oBAACpC,SAAO;8BACtC,qBAACf,QAAAA;sBAAOoD,OAAM;sBAASC,cAAW;gCAAQ;;;;;cAM9C,qBAAC7C,UAAAA;0BACC,qBAACP,OAAOiD,OAAK;kBAACnC,SAAO;4BACnB,qBAACf,QAAAA;oBACCsD,UAAS;oBACTC,KAAI;oBACJC,OAAM;oBACNC,MAAK;oBACLC,UAAQ;oBACRC,MAAM7D;;;;;aAnDR,SAAA;;;;;AA2Dd;",
|
|
5
|
+
"names": ["X", "Adapt", "Button", "Dialog", "Fieldset", "Input", "Label", "Paragraph", "Sheet", "TooltipSimple", "Unspaced", "XStack", "SelectDemoItem", "DialogDemo", "DialogInstance", "modal", "Trigger", "asChild", "when", "platform", "animation", "zIndex", "dismissOnSnapToBottom", "Frame", "padding", "gap", "Contents", "Overlay", "enterStyle", "opacity", "exitStyle", "Portal", "Content", "bordered", "elevate", "animateOnly", "overshootClamping", "x", "y", "scale", "Title", "Description", "horizontal", "width", "justifyContent", "htmlFor", "flex", "id", "defaultValue", "label", "placement", "alignSelf", "Close", "displayWhenAdapted", "theme", "aria-label", "position", "top", "right", "size", "circular", "icon"]
|
|
6
|
+
}
|
|
@@ -3,20 +3,22 @@ import React from "react";
|
|
|
3
3
|
import { Button, Form, H4, Spinner } from "tamagui";
|
|
4
4
|
function FormsDemo(props) {
|
|
5
5
|
var [status, setStatus] = React.useState("off");
|
|
6
|
-
return React.useEffect(function
|
|
6
|
+
return React.useEffect(function() {
|
|
7
7
|
if (status === "submitting") {
|
|
8
|
-
var timer = setTimeout(function
|
|
8
|
+
var timer = setTimeout(function() {
|
|
9
9
|
return setStatus("off");
|
|
10
10
|
}, 2e3);
|
|
11
|
-
return function
|
|
11
|
+
return function() {
|
|
12
12
|
clearTimeout(timer);
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
|
-
}, [
|
|
15
|
+
}, [
|
|
16
|
+
status
|
|
17
|
+
]), /* @__PURE__ */ _jsxs(Form, {
|
|
16
18
|
alignItems: "center",
|
|
17
19
|
minWidth: 300,
|
|
18
20
|
gap: "$2",
|
|
19
|
-
onSubmit: function
|
|
21
|
+
onSubmit: function() {
|
|
20
22
|
return setStatus("submitting");
|
|
21
23
|
},
|
|
22
24
|
borderWidth: 1,
|
|
@@ -24,19 +26,24 @@ function FormsDemo(props) {
|
|
|
24
26
|
backgroundColor: "$background",
|
|
25
27
|
borderColor: "$borderColor",
|
|
26
28
|
padding: "$8",
|
|
27
|
-
children: [
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ _jsx(H4, {
|
|
31
|
+
children: status[0].toUpperCase() + status.slice(1)
|
|
32
|
+
}),
|
|
33
|
+
/* @__PURE__ */ _jsx(Form.Trigger, {
|
|
34
|
+
asChild: !0,
|
|
35
|
+
disabled: status !== "off",
|
|
36
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
37
|
+
icon: status === "submitting" ? function() {
|
|
38
|
+
return /* @__PURE__ */ _jsx(Spinner, {});
|
|
39
|
+
} : void 0,
|
|
40
|
+
children: "Submit"
|
|
41
|
+
})
|
|
37
42
|
})
|
|
38
|
-
|
|
43
|
+
]
|
|
39
44
|
});
|
|
40
45
|
}
|
|
41
|
-
export {
|
|
42
|
-
|
|
46
|
+
export {
|
|
47
|
+
FormsDemo
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=FormsDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/FormsDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,OAAOA,WAAW;AAElB,SAASC,QAAQC,MAAMC,IAAIC,eAAe;AAEnC,SAASC,UAAUC,OAA2B;AACnD,MAAM,CAACC,QAAQC,SAAAA,IAAaR,MAAMS,SAA6C,KAAA;AAE/ET,eAAMU,UAAU,WAAA;AACd,QAAIH,WAAW,cAAc;AAC3B,UAAMI,QAAQC,WAAW,WAAA;eAAMJ,UAAU,KAAA;SAAQ,GAAA;AACjD,aAAO,WAAA;AACLK,qBAAaF,KAAAA;MACf;IACF;EACF,GAAG;IAACJ;GAAO,GAGT,sBAACL,MAAAA;IACCY,YAAW;IACXC,UAAU;IACVC,KAAI;IACJC,UAAU,WAAA;aAAMT,UAAU,YAAA;;IAC1BU,aAAa;IACbC,cAAa;IACbC,iBAAgB;IAChBC,aAAY;IACZC,SAAQ;;MAER,qBAACnB,IAAAA;kBAAII,OAAO,CAAA,EAAGgB,YAAW,IAAKhB,OAAOiB,MAAM,CAAA;;MAE5C,qBAACtB,KAAKuB,SAAO;QAACC,SAAO;QAACC,UAAUpB,WAAW;kBACzC,qBAACN,QAAAA;UAAO2B,MAAMrB,WAAW,eAAe,WAAA;mBAAM,qBAACH,SAAAA,CAAAA,CAAAA;cAAayB;oBAAW;;;;;AAM/E;",
|
|
5
|
+
"names": ["React", "Button", "Form", "H4", "Spinner", "FormsDemo", "props", "status", "setStatus", "useState", "useEffect", "timer", "setTimeout", "clearTimeout", "alignItems", "minWidth", "gap", "onSubmit", "borderWidth", "borderRadius", "backgroundColor", "borderColor", "padding", "toUpperCase", "slice", "Trigger", "asChild", "disabled", "icon", "undefined"]
|
|
6
|
+
}
|
package/dist/esm/Grid.native.js
CHANGED
|
@@ -3,31 +3,28 @@ import { isWeb } from "@tamagui/core";
|
|
|
3
3
|
import { XStack } from "@tamagui/stacks";
|
|
4
4
|
import React from "react";
|
|
5
5
|
function Grid(param) {
|
|
6
|
-
var {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
// gridTemplateColumns: '1fr 1fr',
|
|
22
|
-
children
|
|
23
|
-
});
|
|
6
|
+
var { children, columns, itemMinWidth = 200, gap } = param;
|
|
7
|
+
if (isWeb)
|
|
8
|
+
return /* @__PURE__ */ _jsx("div", {
|
|
9
|
+
style: {
|
|
10
|
+
gap,
|
|
11
|
+
display: "grid",
|
|
12
|
+
justifyContent: "stretch",
|
|
13
|
+
// gridTemplateRows: 'repeat(4, 1fr)',
|
|
14
|
+
gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
|
|
15
|
+
},
|
|
16
|
+
children: (
|
|
17
|
+
// gridTemplateColumns: '1fr 1fr',
|
|
18
|
+
children
|
|
19
|
+
)
|
|
20
|
+
});
|
|
24
21
|
var childrenList = React.Children.toArray(children);
|
|
25
|
-
return /* @__PURE__ */_jsx(XStack, {
|
|
22
|
+
return /* @__PURE__ */ _jsx(XStack, {
|
|
26
23
|
alignItems: "center",
|
|
27
24
|
justifyContent: "center",
|
|
28
25
|
flexWrap: "wrap",
|
|
29
|
-
children: childrenList.map(function
|
|
30
|
-
return child ? /* @__PURE__ */_jsx(XStack, {
|
|
26
|
+
children: childrenList.map(function(child, i) {
|
|
27
|
+
return child ? /* @__PURE__ */ _jsx(XStack, {
|
|
31
28
|
flex: 1,
|
|
32
29
|
minWidth: itemMinWidth,
|
|
33
30
|
marginRight: gap,
|
|
@@ -37,5 +34,7 @@ function Grid(param) {
|
|
|
37
34
|
})
|
|
38
35
|
});
|
|
39
36
|
}
|
|
40
|
-
export {
|
|
41
|
-
|
|
37
|
+
export {
|
|
38
|
+
Grid
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=Grid.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/Grid.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,aAAa;AACtB,SAASC,cAAc;AACvB,OAAOC,WAAW;AASX,SAASC,KAAK,OAAyD;MAAzD,EAAEC,UAAUC,SAASC,eAAe,KAAKC,IAAG,IAA5C;AACnB,MAAIP;AACF,WACE,qBAACQ,OAAAA;MACCC,OAAO;QACLF;QACAG,SAAS;QACTC,gBAAgB;;QAEhBC,qBAAqB,4BAA4BN,YAAAA;MAEnD;;;QAECF;;;AAKP,MAAMS,eAAeX,MAAMY,SAASC,QAAQX,QAAAA;AAE5C,SACE,qBAACH,QAAAA;IAAOe,YAAW;IAASL,gBAAe;IAASM,UAAS;cAC1DJ,aAAaK,IAAI,SAACC,OAAOC,GAAAA;AACxB,aAAKD,QAMH,qBAAClB,QAAAA;QAECoB,MAAM;QACNC,UAAUhB;QACViB,aAAahB;QACbiB,cAAcjB;kBAEbY;SANIC,CAAAA,IANA;IAeX,CAAA;;AAGN;",
|
|
5
|
+
"names": ["isWeb", "XStack", "React", "Grid", "children", "columns", "itemMinWidth", "gap", "div", "style", "display", "justifyContent", "gridTemplateColumns", "childrenList", "Children", "toArray", "alignItems", "flexWrap", "map", "child", "i", "flex", "minWidth", "marginRight", "marginBottom"]
|
|
6
|
+
}
|
|
@@ -2,63 +2,80 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Activity, Airplay } from "@tamagui/lucide-icons";
|
|
3
3
|
import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
|
|
4
4
|
function GroupDemo() {
|
|
5
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
5
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
6
6
|
padding: "$3",
|
|
7
7
|
space: "$2",
|
|
8
8
|
alignItems: "center",
|
|
9
|
-
children: [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
children:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
children:
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
9
|
+
children: [
|
|
10
|
+
/* @__PURE__ */ _jsxs(Group, {
|
|
11
|
+
orientation: "horizontal",
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ _jsx(Group.Item, {
|
|
14
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
15
|
+
children: "First"
|
|
16
|
+
})
|
|
17
|
+
}),
|
|
18
|
+
/* @__PURE__ */ _jsx(Group.Item, {
|
|
19
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
20
|
+
children: "Second"
|
|
21
|
+
})
|
|
22
|
+
}),
|
|
23
|
+
/* @__PURE__ */ _jsx(Group.Item, {
|
|
24
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
25
|
+
children: "Third"
|
|
26
|
+
})
|
|
27
|
+
})
|
|
28
|
+
]
|
|
29
|
+
}),
|
|
30
|
+
/* responsive + size */
|
|
31
|
+
/* @__PURE__ */ _jsxs(XGroup, {
|
|
32
|
+
size: "$3",
|
|
33
|
+
$gtSm: {
|
|
34
|
+
size: "$5"
|
|
35
|
+
},
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ _jsx(XGroup.Item, {
|
|
38
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
39
|
+
size: "$3",
|
|
40
|
+
icon: Activity,
|
|
41
|
+
children: "First"
|
|
42
|
+
})
|
|
43
|
+
}),
|
|
44
|
+
/* @__PURE__ */ _jsx(XGroup.Item, {
|
|
45
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
46
|
+
size: "$3",
|
|
47
|
+
icon: Airplay,
|
|
48
|
+
children: "Second"
|
|
49
|
+
})
|
|
50
|
+
})
|
|
51
|
+
]
|
|
52
|
+
}),
|
|
53
|
+
/* Separator */
|
|
54
|
+
/* @__PURE__ */ _jsxs(YGroup, {
|
|
55
|
+
separator: /* @__PURE__ */ _jsx(Separator, {}),
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
58
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
59
|
+
title: "First"
|
|
60
|
+
})
|
|
61
|
+
}),
|
|
62
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
63
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
64
|
+
title: "Second",
|
|
65
|
+
subTitle: "Second subtitle"
|
|
66
|
+
})
|
|
67
|
+
}),
|
|
68
|
+
/* @__PURE__ */ _jsx(YGroup.Item, {
|
|
69
|
+
children: /* @__PURE__ */ _jsx(ListItem, {
|
|
70
|
+
children: "Third"
|
|
71
|
+
})
|
|
72
|
+
})
|
|
73
|
+
]
|
|
74
|
+
})
|
|
75
|
+
]
|
|
61
76
|
});
|
|
62
77
|
}
|
|
63
|
-
export {
|
|
64
|
-
|
|
78
|
+
export {
|
|
79
|
+
GroupDemo
|
|
80
|
+
};
|
|
81
|
+
//# sourceMappingURL=GroupDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/GroupDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,UAAUC,eAAe;AAClC,SAASC,QAAQC,OAAOC,UAAUC,WAAWC,QAAQC,QAAQC,cAAc;AAEpE,SAASC,YAAAA;AACd,SACE,sBAACD,QAAAA;IAAOE,SAAQ;IAAKC,OAAM;IAAKC,YAAW;;MACzC,sBAACT,OAAAA;QAAMU,aAAY;;UACjB,qBAACV,MAAMW,MAAI;sBACT,qBAACZ,QAAAA;wBAAO;;;UAEV,qBAACC,MAAMW,MAAI;sBACT,qBAACZ,QAAAA;wBAAO;;;UAEV,qBAACC,MAAMW,MAAI;sBACT,qBAACZ,QAAAA;wBAAO;;;;;;MAKZ,sBAACI,QAAAA;QAAOS,MAAK;QAAKC,OAAO;UAAED,MAAM;QAAK;;UACpC,qBAACT,OAAOQ,MAAI;sBACV,qBAACZ,QAAAA;cAAOa,MAAK;cAAKE,MAAMjB;wBAAU;;;UAIpC,qBAACM,OAAOQ,MAAI;sBACV,qBAACZ,QAAAA;cAAOa,MAAK;cAAKE,MAAMhB;wBAAS;;;;;;MAOrC,sBAACM,QAAAA;QAAOW,WAAW,qBAACb,WAAAA,CAAAA,CAAAA;;UAClB,qBAACE,OAAOO,MAAI;sBACV,qBAACV,UAAAA;cAASe,OAAM;;;UAElB,qBAACZ,OAAOO,MAAI;sBACV,qBAACV,UAAAA;cAASe,OAAM;cAASC,UAAS;;;UAEpC,qBAACb,OAAOO,MAAI;sBACV,qBAACV,UAAAA;wBAAS;;;;;;;AAKpB;",
|
|
5
|
+
"names": ["Activity", "Airplay", "Button", "Group", "ListItem", "Separator", "XGroup", "YGroup", "YStack", "GroupDemo", "padding", "space", "alignItems", "orientation", "Item", "size", "$gtSm", "icon", "separator", "title", "subTitle"]
|
|
6
|
+
}
|
|
@@ -2,22 +2,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import "react";
|
|
3
3
|
import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
|
|
4
4
|
function HeadingsDemo() {
|
|
5
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
5
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
6
6
|
alignSelf: "center",
|
|
7
|
-
children: [
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
children: [
|
|
8
|
+
/* @__PURE__ */ _jsx(H1, {
|
|
9
|
+
children: "Heading 1"
|
|
10
|
+
}),
|
|
11
|
+
/* @__PURE__ */ _jsx(H2, {
|
|
12
|
+
children: "Heading 2"
|
|
13
|
+
}),
|
|
14
|
+
/* @__PURE__ */ _jsx(H3, {
|
|
15
|
+
children: "Heading 3"
|
|
16
|
+
}),
|
|
17
|
+
/* @__PURE__ */ _jsx(H4, {
|
|
18
|
+
children: "Heading 4"
|
|
19
|
+
}),
|
|
20
|
+
/* @__PURE__ */ _jsx(H5, {
|
|
21
|
+
children: "Heading 5"
|
|
22
|
+
}),
|
|
23
|
+
/* @__PURE__ */ _jsx(H6, {
|
|
24
|
+
children: "Heading 6"
|
|
25
|
+
})
|
|
26
|
+
]
|
|
20
27
|
});
|
|
21
28
|
}
|
|
22
|
-
export {
|
|
23
|
-
|
|
29
|
+
export {
|
|
30
|
+
HeadingsDemo
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=HeadingsDemo.js.map
|