@tamagui/demos 1.113.0 → 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 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/NewInputsDemo.tsx"],
|
|
4
|
+
"mappings": ";AACA,SAASA,QAAQC,OAAOC,UAAUC,QAAQC,cAAc;AAEjD,SAASC,gBAAAA;AACd,SACE,sBAACD,QAAAA;IACCE,OAAO;IACPC,WAAW;IACXC,UAAS;IACTC,OAAM;IACNC,QAAO;IACPC,SAAQ;;MAER,qBAACC,WAAAA;QAAUC,MAAK;;MAChB,qBAACD,WAAAA;QAAUC,MAAK;;MAChB,qBAACD,WAAAA;QAAUC,MAAK;;MAChB,qBAACX,UAAAA;QAASY,aAAY;;;;AAG5B;AAEA,SAASF,UAAUG,OAA2B;AAC5C,SACE,sBAACZ,QAAAA;IAAOa,YAAW;IAASP,OAAM;;MAChC,qBAACR,OAAAA;QAAMgB,MAAM;QAAGJ,MAAME,MAAMF;QAAMC,aAAa,QAAQC,MAAMF,IAAI;;MACjE,qBAACb,QAAAA;QAAOa,MAAME,MAAMF;kBAAM;;;;AAGhC;",
|
|
5
|
+
"names": ["Button", "Input", "TextArea", "XStack", "YStack", "NewInputsDemo", "width", "minHeight", "overflow", "space", "margin", "padding", "InputDemo", "size", "placeholder", "props", "alignItems", "flex"]
|
|
6
|
+
}
|
|
@@ -4,122 +4,153 @@ import { useState } from "react";
|
|
|
4
4
|
import { Adapt, Button, Input, isWeb, Label, Popover, XStack, YStack } from "tamagui";
|
|
5
5
|
function PopoverDemo() {
|
|
6
6
|
var [shouldAdapt, setShouldAdapt] = useState(!0);
|
|
7
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
7
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
8
8
|
gap: "$4",
|
|
9
|
-
children: [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
-
|
|
9
|
+
children: [
|
|
10
|
+
/* @__PURE__ */ _jsxs(XStack, {
|
|
11
|
+
gap: "$2",
|
|
12
|
+
flex: 1,
|
|
13
|
+
justifyContent: "center",
|
|
14
|
+
alignItems: "center",
|
|
15
|
+
children: [
|
|
16
|
+
/* @__PURE__ */ _jsx(Demo, {
|
|
17
|
+
shouldAdapt,
|
|
18
|
+
placement: "left",
|
|
19
|
+
Icon: ChevronLeft,
|
|
20
|
+
Name: "left-popover"
|
|
21
|
+
}),
|
|
22
|
+
/* @__PURE__ */ _jsx(Demo, {
|
|
23
|
+
shouldAdapt,
|
|
24
|
+
placement: "bottom",
|
|
25
|
+
Icon: ChevronDown,
|
|
26
|
+
Name: "bottom-popover"
|
|
27
|
+
}),
|
|
28
|
+
/* @__PURE__ */ _jsx(Demo, {
|
|
29
|
+
shouldAdapt,
|
|
30
|
+
placement: "top",
|
|
31
|
+
Icon: ChevronUp,
|
|
32
|
+
Name: "top-popover"
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ _jsx(Demo, {
|
|
35
|
+
shouldAdapt,
|
|
36
|
+
placement: "right",
|
|
37
|
+
Icon: ChevronRight,
|
|
38
|
+
Name: "right-popover"
|
|
39
|
+
})
|
|
40
|
+
]
|
|
41
|
+
}),
|
|
42
|
+
!isWeb && /* @__PURE__ */ _jsxs(Button, {
|
|
43
|
+
onPress: function() {
|
|
44
|
+
return setShouldAdapt(!shouldAdapt);
|
|
45
|
+
},
|
|
46
|
+
children: [
|
|
47
|
+
"Adapt to Sheet: ",
|
|
48
|
+
`${shouldAdapt}`
|
|
49
|
+
]
|
|
50
|
+
})
|
|
51
|
+
]
|
|
41
52
|
});
|
|
42
53
|
}
|
|
43
54
|
function Demo(param) {
|
|
44
|
-
var {
|
|
45
|
-
|
|
46
|
-
Name,
|
|
47
|
-
shouldAdapt,
|
|
48
|
-
...props
|
|
49
|
-
} = param;
|
|
50
|
-
return /* @__PURE__ */_jsxs(Popover, {
|
|
55
|
+
var { Icon, Name, shouldAdapt, ...props } = param;
|
|
56
|
+
return /* @__PURE__ */ _jsxs(Popover, {
|
|
51
57
|
size: "$5",
|
|
52
58
|
allowFlip: !0,
|
|
53
59
|
...props,
|
|
54
|
-
children: [
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
children:
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
exitStyle: {
|
|
86
|
-
y: -10,
|
|
87
|
-
opacity: 0
|
|
88
|
-
},
|
|
89
|
-
elevate: !0,
|
|
90
|
-
animation: ["quick", {
|
|
91
|
-
opacity: {
|
|
92
|
-
overshootClamping: !0
|
|
93
|
-
}
|
|
94
|
-
}],
|
|
95
|
-
children: [/* @__PURE__ */_jsx(Popover.Arrow, {
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ _jsx(Popover.Trigger, {
|
|
62
|
+
asChild: !0,
|
|
63
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
64
|
+
icon: Icon
|
|
65
|
+
})
|
|
66
|
+
}),
|
|
67
|
+
shouldAdapt && /* @__PURE__ */ _jsx(Adapt, {
|
|
68
|
+
when: "sm",
|
|
69
|
+
platform: "touch",
|
|
70
|
+
children: /* @__PURE__ */ _jsxs(Popover.Sheet, {
|
|
71
|
+
modal: !0,
|
|
72
|
+
dismissOnSnapToBottom: !0,
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ _jsx(Popover.Sheet.Frame, {
|
|
75
|
+
padding: "$4",
|
|
76
|
+
children: /* @__PURE__ */ _jsx(Adapt.Contents, {})
|
|
77
|
+
}),
|
|
78
|
+
/* @__PURE__ */ _jsx(Popover.Sheet.Overlay, {
|
|
79
|
+
animation: "lazy",
|
|
80
|
+
enterStyle: {
|
|
81
|
+
opacity: 0
|
|
82
|
+
},
|
|
83
|
+
exitStyle: {
|
|
84
|
+
opacity: 0
|
|
85
|
+
}
|
|
86
|
+
})
|
|
87
|
+
]
|
|
88
|
+
})
|
|
89
|
+
}),
|
|
90
|
+
/* @__PURE__ */ _jsxs(Popover.Content, {
|
|
96
91
|
borderWidth: 1,
|
|
97
|
-
borderColor: "$borderColor"
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
92
|
+
borderColor: "$borderColor",
|
|
93
|
+
enterStyle: {
|
|
94
|
+
y: -10,
|
|
95
|
+
opacity: 0
|
|
96
|
+
},
|
|
97
|
+
exitStyle: {
|
|
98
|
+
y: -10,
|
|
99
|
+
opacity: 0
|
|
100
|
+
},
|
|
101
|
+
elevate: !0,
|
|
102
|
+
animation: [
|
|
103
|
+
"quick",
|
|
104
|
+
{
|
|
105
|
+
opacity: {
|
|
106
|
+
overshootClamping: !0
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
children: [
|
|
111
|
+
/* @__PURE__ */ _jsx(Popover.Arrow, {
|
|
112
|
+
borderWidth: 1,
|
|
113
|
+
borderColor: "$borderColor"
|
|
114
|
+
}),
|
|
115
|
+
/* @__PURE__ */ _jsxs(YStack, {
|
|
116
|
+
gap: "$3",
|
|
117
|
+
children: [
|
|
118
|
+
/* @__PURE__ */ _jsxs(XStack, {
|
|
119
|
+
gap: "$3",
|
|
120
|
+
children: [
|
|
121
|
+
/* @__PURE__ */ _jsx(Label, {
|
|
122
|
+
size: "$3",
|
|
123
|
+
htmlFor: Name,
|
|
124
|
+
children: "Name"
|
|
125
|
+
}),
|
|
126
|
+
/* @__PURE__ */ _jsx(Input, {
|
|
127
|
+
f: 1,
|
|
128
|
+
size: "$3",
|
|
129
|
+
id: Name
|
|
130
|
+
})
|
|
131
|
+
]
|
|
132
|
+
}),
|
|
133
|
+
/* @__PURE__ */ _jsx(Popover.Close, {
|
|
134
|
+
asChild: !0,
|
|
135
|
+
children: /* @__PURE__ */ _jsx(Button, {
|
|
136
|
+
size: "$3",
|
|
137
|
+
onPress: function() {
|
|
138
|
+
},
|
|
139
|
+
children: (
|
|
140
|
+
/* Custom code goes here, does not interfere with popover closure */
|
|
141
|
+
"Submit"
|
|
142
|
+
)
|
|
143
|
+
})
|
|
144
|
+
})
|
|
145
|
+
]
|
|
118
146
|
})
|
|
119
|
-
|
|
120
|
-
})
|
|
121
|
-
|
|
147
|
+
]
|
|
148
|
+
})
|
|
149
|
+
]
|
|
122
150
|
});
|
|
123
151
|
}
|
|
124
|
-
export {
|
|
125
|
-
|
|
152
|
+
export {
|
|
153
|
+
Demo,
|
|
154
|
+
PopoverDemo
|
|
155
|
+
};
|
|
156
|
+
//# sourceMappingURL=PopoverDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/PopoverDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,aAAaC,aAAaC,cAAcC,iBAAiB;AAClE,SAASC,gBAAgB;AAEzB,SAASC,OAAOC,QAAQC,OAAOC,OAAOC,OAAOC,SAASC,QAAQC,cAAc;AAErE,SAASC,cAAAA;AACd,MAAM,CAACC,aAAaC,cAAAA,IAAkBX,SAAS,EAAA;AAE/C,SACE,sBAACQ,QAAAA;IAAOI,KAAI;;MACV,sBAACL,QAAAA;QAAOK,KAAI;QAAKC,MAAM;QAAGC,gBAAe;QAASC,YAAW;;UAC3D,qBAACC,MAAAA;YACCN;YACAO,WAAU;YACVC,MAAMrB;YACNsB,MAAK;;UAEP,qBAACH,MAAAA;YACCN;YACAO,WAAU;YACVC,MAAMtB;YACNuB,MAAK;;UAEP,qBAACH,MAAAA;YACCN;YACAO,WAAU;YACVC,MAAMnB;YACNoB,MAAK;;UAEP,qBAACH,MAAAA;YACCN;YACAO,WAAU;YACVC,MAAMpB;YACNqB,MAAK;;;;MAIR,CAACf,SACA,sBAACF,QAAAA;QAAOkB,SAAS,WAAA;iBAAMT,eAAe,CAACD,WAAAA;;;UAAc;UAClC,GAAGA,WAAAA;;;;;AAK9B;AAEO,SAASM,KAAK,OAKiD;MALjD,EACnBE,MACAC,MACAT,aACA,GAAGW,MAAAA,IAJgB;AAMnB,SACE,sBAACf,SAAAA;IAAQgB,MAAK;IAAKC,WAAS;IAAE,GAAGF;;MAC/B,qBAACf,QAAQkB,SAAO;QAACC,SAAO;kBACtB,qBAACvB,QAAAA;UAAOwB,MAAMR;;;MAGfR,eACC,qBAACT,OAAAA;QAAM0B,MAAK;QAAKC,UAAS;kBACxB,sBAACtB,QAAQuB,OAAK;UAACC,OAAK;UAACC,uBAAqB;;YACxC,qBAACzB,QAAQuB,MAAMG,OAAK;cAACC,SAAQ;wBAC3B,qBAAChC,MAAMiC,UAAQ,CAAA,CAAA;;YAEjB,qBAAC5B,QAAQuB,MAAMM,SAAO;cACpBC,WAAU;cACVC,YAAY;gBAAEC,SAAS;cAAE;cACzBC,WAAW;gBAAED,SAAS;cAAE;;;;;MAMhC,sBAAChC,QAAQkC,SAAO;QACdC,aAAa;QACbC,aAAY;QACZL,YAAY;UAAEM,GAAG;UAAKL,SAAS;QAAE;QACjCC,WAAW;UAAEI,GAAG;UAAKL,SAAS;QAAE;QAChCM,SAAO;QACPR,WAAW;UACT;UACA;YACEE,SAAS;cACPO,mBAAmB;YACrB;UACF;;;UAGF,qBAACvC,QAAQwC,OAAK;YAACL,aAAa;YAAGC,aAAY;;UAE3C,sBAAClC,QAAAA;YAAOI,KAAI;;cACV,sBAACL,QAAAA;gBAAOK,KAAI;;kBACV,qBAACP,OAAAA;oBAAMiB,MAAK;oBAAKyB,SAAS5B;8BAAM;;kBAGhC,qBAAChB,OAAAA;oBAAM6C,GAAG;oBAAG1B,MAAK;oBAAK2B,IAAI9B;;;;cAG7B,qBAACb,QAAQ4C,OAAK;gBAACzB,SAAO;0BACpB,qBAACvB,QAAAA;kBACCoB,MAAK;kBACLF,SAAS,WAAA;kBAET;;;oBACD;;;;;;;;;;AAQb;",
|
|
5
|
+
"names": ["ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "useState", "Adapt", "Button", "Input", "isWeb", "Label", "Popover", "XStack", "YStack", "PopoverDemo", "shouldAdapt", "setShouldAdapt", "gap", "flex", "justifyContent", "alignItems", "Demo", "placement", "Icon", "Name", "onPress", "props", "size", "allowFlip", "Trigger", "asChild", "icon", "when", "platform", "Sheet", "modal", "dismissOnSnapToBottom", "Frame", "padding", "Contents", "Overlay", "animation", "enterStyle", "opacity", "exitStyle", "Content", "borderWidth", "borderColor", "y", "elevate", "overshootClamping", "Arrow", "htmlFor", "f", "id", "Close"]
|
|
6
|
+
}
|
|
@@ -2,78 +2,95 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
|
|
4
4
|
function ProgressDemo() {
|
|
5
|
-
var [key, setKey] = React.useState(0),
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
sizeProp = `$${size}`;
|
|
9
|
-
return React.useEffect(function () {
|
|
10
|
-
var timer = setTimeout(function () {
|
|
5
|
+
var [key, setKey] = React.useState(0), [size, setSize] = React.useState(4), [progress, setProgress] = React.useState(0), sizeProp = `$${size}`;
|
|
6
|
+
return React.useEffect(function() {
|
|
7
|
+
var timer = setTimeout(function() {
|
|
11
8
|
return setProgress(60);
|
|
12
9
|
}, 1e3);
|
|
13
|
-
return function
|
|
10
|
+
return function() {
|
|
14
11
|
clearTimeout(timer);
|
|
15
12
|
};
|
|
16
|
-
}, []), /* @__PURE__ */_jsxs(_Fragment, {
|
|
17
|
-
children: [
|
|
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
|
-
onValueChange: function (param) {
|
|
49
|
-
var [val] = param;
|
|
50
|
-
setSize(val);
|
|
13
|
+
}, []), /* @__PURE__ */ _jsxs(_Fragment, {
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ _jsxs(YStack, {
|
|
16
|
+
height: 60,
|
|
17
|
+
alignItems: "center",
|
|
18
|
+
gap: "$4",
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ _jsxs(Paragraph, {
|
|
21
|
+
height: 30,
|
|
22
|
+
opacity: 0.5,
|
|
23
|
+
children: [
|
|
24
|
+
"Size: ",
|
|
25
|
+
size
|
|
26
|
+
]
|
|
27
|
+
}),
|
|
28
|
+
/* @__PURE__ */ _jsx(Progress, {
|
|
29
|
+
size: sizeProp,
|
|
30
|
+
value: progress,
|
|
31
|
+
children: /* @__PURE__ */ _jsx(Progress.Indicator, {
|
|
32
|
+
animation: "bouncy"
|
|
33
|
+
})
|
|
34
|
+
}, key)
|
|
35
|
+
]
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ _jsxs(XStack, {
|
|
38
|
+
alignItems: "center",
|
|
39
|
+
gap: "$2",
|
|
40
|
+
position: "absolute",
|
|
41
|
+
bottom: "$3",
|
|
42
|
+
left: "$4",
|
|
43
|
+
$xxs: {
|
|
44
|
+
display: "none"
|
|
51
45
|
},
|
|
52
|
-
children: [
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ _jsxs(Slider, {
|
|
48
|
+
size: "$2",
|
|
49
|
+
width: 130,
|
|
50
|
+
defaultValue: [
|
|
51
|
+
4
|
|
52
|
+
],
|
|
53
|
+
min: 2,
|
|
54
|
+
max: 6,
|
|
55
|
+
step: 1,
|
|
56
|
+
onValueChange: function(param) {
|
|
57
|
+
var [val] = param;
|
|
58
|
+
setSize(val);
|
|
59
|
+
},
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ _jsx(Slider.Track, {
|
|
62
|
+
borderWidth: 1,
|
|
63
|
+
borderColor: "$color5",
|
|
64
|
+
children: /* @__PURE__ */ _jsx(Slider.TrackActive, {})
|
|
65
|
+
}),
|
|
66
|
+
/* @__PURE__ */ _jsx(Slider.Thumb, {
|
|
67
|
+
circular: !0,
|
|
68
|
+
index: 0
|
|
69
|
+
})
|
|
70
|
+
]
|
|
71
|
+
}),
|
|
72
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
73
|
+
size: "$2",
|
|
74
|
+
onPress: function() {
|
|
75
|
+
return setProgress(function(prev) {
|
|
76
|
+
return (prev + 20) % 100;
|
|
77
|
+
});
|
|
78
|
+
},
|
|
79
|
+
children: "Load"
|
|
80
|
+
}),
|
|
81
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
82
|
+
size: "$2",
|
|
83
|
+
onPress: function() {
|
|
84
|
+
setKey(Math.random()), setProgress(0);
|
|
85
|
+
},
|
|
86
|
+
children: "Reset"
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
})
|
|
90
|
+
]
|
|
76
91
|
});
|
|
77
92
|
}
|
|
78
|
-
export {
|
|
79
|
-
|
|
93
|
+
export {
|
|
94
|
+
ProgressDemo
|
|
95
|
+
};
|
|
96
|
+
//# sourceMappingURL=ProgressDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/ProgressDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,OAAOA,WAAW;AAElB,SAASC,QAAQC,WAAWC,UAAUC,QAAQC,QAAQC,cAAc;AAE7D,SAASC,eAAAA;AACd,MAAM,CAACC,KAAKC,MAAAA,IAAUT,MAAMU,SAAS,CAAA,GAC/B,CAACC,MAAMC,OAAAA,IAAWZ,MAAMU,SAAS,CAAA,GACjC,CAACG,UAAUC,WAAAA,IAAed,MAAMU,SAAS,CAAA,GACzCK,WAAW,IAAIJ,IAAAA;AAErBX,eAAMgB,UAAU,WAAA;AACd,QAAMC,QAAQC,WAAW,WAAA;aAAMJ,YAAY,EAAA;OAAK,GAAA;AAChD,WAAO,WAAA;AACLK,mBAAaF,KAAAA;IACf;EACF,GAAG,CAAA,CAAE,GAGH,sBAAA,WAAA;;MACE,sBAACX,QAAAA;QAAOc,QAAQ;QAAIC,YAAW;QAASC,KAAI;;UAC1C,sBAACpB,WAAAA;YAAUkB,QAAQ;YAAIG,SAAS;;cAAK;cAC5BZ;;;UAET,qBAACR,UAAAA;YAAmBQ,MAAMI;YAAUS,OAAOX;sBACzC,qBAACV,SAASsB,WAAS;cAACC,WAAU;;aADjBlB,GAAAA;;;MAKjB,sBAACH,QAAAA;QACCgB,YAAW;QACXC,KAAI;QACJK,UAAS;QACTC,QAAO;QACPC,MAAK;QACLC,MAAM;UAAEC,SAAS;QAAO;;UAExB,sBAAC3B,QAAAA;YACCO,MAAK;YACLqB,OAAO;YACPC,cAAc;cAAC;;YACfC,KAAK;YACLC,KAAK;YACLC,MAAM;YACNC,eAAe,SAAA,OAAA;kBAAC,CAACC,GAAAA,IAAI;AACnB1B,sBAAQ0B,GAAAA;YACV;;cAEA,qBAAClC,OAAOmC,OAAK;gBAACC,aAAa;gBAAGC,aAAY;0BACxC,qBAACrC,OAAOsC,aAAW,CAAA,CAAA;;cAErB,qBAACtC,OAAOuC,OAAK;gBAACC,UAAQ;gBAACC,OAAO;;;;UAGhC,qBAAC5C,QAAAA;YAAOU,MAAK;YAAKmC,SAAS,WAAA;qBAAMhC,YAAY,SAACiC,MAAAA;wBAAUA,OAAO,MAAM;;;sBAAM;;UAG3E,qBAAC9C,QAAAA;YACCU,MAAK;YACLmC,SAAS,WAAA;AACPrC,qBAAOuC,KAAKC,OAAM,CAAA,GAClBnC,YAAY,CAAA;YACd;sBACD;;;;;;AAMT;",
|
|
5
|
+
"names": ["React", "Button", "Paragraph", "Progress", "Slider", "XStack", "YStack", "ProgressDemo", "key", "setKey", "useState", "size", "setSize", "progress", "setProgress", "sizeProp", "useEffect", "timer", "setTimeout", "clearTimeout", "height", "alignItems", "gap", "opacity", "value", "Indicator", "animation", "position", "bottom", "left", "$xxs", "display", "width", "defaultValue", "min", "max", "step", "onValueChange", "val", "Track", "borderWidth", "borderColor", "TrackActive", "Thumb", "circular", "index", "onPress", "prev", "Math", "random"]
|
|
6
|
+
}
|
|
@@ -1,47 +1,57 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Label, RadioGroup, XStack, YStack } from "tamagui";
|
|
3
3
|
function RadioGroupDemo() {
|
|
4
|
-
return /* @__PURE__ */_jsx(RadioGroup, {
|
|
4
|
+
return /* @__PURE__ */ _jsx(RadioGroup, {
|
|
5
5
|
"aria-labelledby": "Select one item",
|
|
6
6
|
defaultValue: "3",
|
|
7
7
|
name: "form",
|
|
8
|
-
children: /* @__PURE__ */_jsxs(YStack, {
|
|
8
|
+
children: /* @__PURE__ */ _jsxs(YStack, {
|
|
9
9
|
width: 300,
|
|
10
10
|
alignItems: "center",
|
|
11
11
|
space: "$2",
|
|
12
|
-
children: [
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ _jsx(RadioGroupItemWithLabel, {
|
|
14
|
+
size: "$3",
|
|
15
|
+
value: "2",
|
|
16
|
+
label: "Second value"
|
|
17
|
+
}),
|
|
18
|
+
/* @__PURE__ */ _jsx(RadioGroupItemWithLabel, {
|
|
19
|
+
size: "$4",
|
|
20
|
+
value: "3",
|
|
21
|
+
label: "Third value"
|
|
22
|
+
}),
|
|
23
|
+
/* @__PURE__ */ _jsx(RadioGroupItemWithLabel, {
|
|
24
|
+
size: "$5",
|
|
25
|
+
value: "4",
|
|
26
|
+
label: "Fourth value"
|
|
27
|
+
})
|
|
28
|
+
]
|
|
25
29
|
})
|
|
26
30
|
});
|
|
27
31
|
}
|
|
28
32
|
function RadioGroupItemWithLabel(props) {
|
|
29
33
|
var id = `radiogroup-${props.value}`;
|
|
30
|
-
return /* @__PURE__ */_jsxs(XStack, {
|
|
34
|
+
return /* @__PURE__ */ _jsxs(XStack, {
|
|
31
35
|
width: 300,
|
|
32
36
|
alignItems: "center",
|
|
33
37
|
space: "$4",
|
|
34
|
-
children: [
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ _jsx(RadioGroup.Item, {
|
|
40
|
+
value: props.value,
|
|
41
|
+
id,
|
|
42
|
+
size: props.size,
|
|
43
|
+
children: /* @__PURE__ */ _jsx(RadioGroup.Indicator, {})
|
|
44
|
+
}),
|
|
45
|
+
/* @__PURE__ */ _jsx(Label, {
|
|
46
|
+
size: props.size,
|
|
47
|
+
htmlFor: id,
|
|
48
|
+
children: props.label
|
|
49
|
+
})
|
|
50
|
+
]
|
|
44
51
|
});
|
|
45
52
|
}
|
|
46
|
-
export {
|
|
47
|
-
|
|
53
|
+
export {
|
|
54
|
+
RadioGroupDemo,
|
|
55
|
+
RadioGroupItemWithLabel
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=RadioGroupDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/RadioGroupDemo.tsx"],
|
|
4
|
+
"mappings": ";AACA,SAASA,OAAOC,YAAYC,QAAQC,cAAc;AAE3C,SAASC,iBAAAA;AACd,SACE,qBAACH,YAAAA;IAAWI,mBAAgB;IAAkBC,cAAa;IAAIC,MAAK;cAClE,sBAACJ,QAAAA;MAAOK,OAAO;MAAKC,YAAW;MAASC,OAAM;;QAC5C,qBAACC,yBAAAA;UAAwBC,MAAK;UAAKC,OAAM;UAAIC,OAAM;;QACnD,qBAACH,yBAAAA;UAAwBC,MAAK;UAAKC,OAAM;UAAIC,OAAM;;QACnD,qBAACH,yBAAAA;UAAwBC,MAAK;UAAKC,OAAM;UAAIC,OAAM;;;;;AAI3D;AAEO,SAASH,wBAAwBI,OAIvC;AACC,MAAMC,KAAK,cAAcD,MAAMF,KAAK;AACpC,SACE,sBAACX,QAAAA;IAAOM,OAAO;IAAKC,YAAW;IAASC,OAAM;;MAC5C,qBAACT,WAAWgB,MAAI;QAACJ,OAAOE,MAAMF;QAAOG;QAAQJ,MAAMG,MAAMH;kBACvD,qBAACX,WAAWiB,WAAS,CAAA,CAAA;;MAGvB,qBAAClB,OAAAA;QAAMY,MAAMG,MAAMH;QAAMO,SAASH;kBAC/BD,MAAMD;;;;AAIf;",
|
|
5
|
+
"names": ["Label", "RadioGroup", "XStack", "YStack", "RadioGroupDemo", "aria-labelledby", "defaultValue", "name", "width", "alignItems", "space", "RadioGroupItemWithLabel", "size", "value", "label", "props", "id", "Item", "Indicator", "htmlFor"]
|
|
6
|
+
}
|