@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
|
@@ -2,46 +2,51 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { LogoIcon } from "@tamagui/logo";
|
|
4
4
|
import { Button, Square, YStack, isWeb } from "tamagui";
|
|
5
|
-
import { useIsIntersecting } from "./useOnIntersecting
|
|
5
|
+
import { useIsIntersecting } from "./useOnIntersecting";
|
|
6
6
|
function AnimationsEnterDemo(props) {
|
|
7
|
-
var ref = React.useRef(null),
|
|
8
|
-
[key, setKey] = React.useState(0);
|
|
7
|
+
var ref = React.useRef(null), [key, setKey] = React.useState(0);
|
|
9
8
|
if (isWeb) {
|
|
10
9
|
var hasIntersected = useIsIntersecting(ref, {
|
|
11
10
|
once: !0
|
|
12
11
|
});
|
|
13
|
-
if (!hasIntersected)
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
if (!hasIntersected)
|
|
13
|
+
return /* @__PURE__ */ _jsx(YStack, {
|
|
14
|
+
ref
|
|
15
|
+
});
|
|
16
16
|
}
|
|
17
17
|
var _props_children;
|
|
18
|
-
return /* @__PURE__ */_jsxs(_Fragment, {
|
|
19
|
-
children: [
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
18
|
+
return /* @__PURE__ */ _jsxs(_Fragment, {
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ _jsx(Square, {
|
|
21
|
+
enterStyle: {
|
|
22
|
+
scale: 1.5,
|
|
23
|
+
y: -10,
|
|
24
|
+
opacity: 0
|
|
25
|
+
},
|
|
26
|
+
animation: "bouncy",
|
|
27
|
+
elevation: "$4",
|
|
28
|
+
size: 110,
|
|
29
|
+
opacity: 1,
|
|
30
|
+
scale: 1,
|
|
31
|
+
y: 0,
|
|
32
|
+
backgroundColor: "$pink10",
|
|
33
|
+
borderRadius: "$9",
|
|
34
|
+
children: (_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : /* @__PURE__ */ _jsx(LogoIcon, {
|
|
35
|
+
downscale: 0.75
|
|
36
|
+
})
|
|
37
|
+
}, key),
|
|
38
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
39
|
+
size: "$3",
|
|
40
|
+
marginTop: "$4",
|
|
41
|
+
onPress: function() {
|
|
42
|
+
return setKey(Math.random());
|
|
43
|
+
},
|
|
44
|
+
children: "Re-mount"
|
|
35
45
|
})
|
|
36
|
-
|
|
37
|
-
size: "$3",
|
|
38
|
-
marginTop: "$4",
|
|
39
|
-
onPress: function () {
|
|
40
|
-
return setKey(Math.random());
|
|
41
|
-
},
|
|
42
|
-
children: "Re-mount"
|
|
43
|
-
})]
|
|
46
|
+
]
|
|
44
47
|
});
|
|
45
48
|
}
|
|
46
|
-
export {
|
|
47
|
-
|
|
49
|
+
export {
|
|
50
|
+
AnimationsEnterDemo
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=AnimationsEnterDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/AnimationsEnterDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,OAAOA,WAAW;AAClB,SAASC,gBAAgB;AAEzB,SAASC,QAAQC,QAAQC,QAAQC,aAAa;AAE9C,SAASC,yBAAyB;AAE3B,SAASC,oBAAoBC,OAAU;AAC5C,MAAMC,MAAMT,MAAMU,OAAoB,IAAA,GAChC,CAACC,KAAKC,MAAAA,IAAUZ,MAAMa,SAAS,CAAA;AAErC,MAAIR,OAAO;AACT,QAAMS,iBAAiBR,kBAAkBG,KAAK;MAAEM,MAAM;IAAK,CAAA;AAE3D,QAAI,CAACD;AACH,aAAO,qBAACV,QAAAA;QAAOK;;EAEnB;MAoBOD;AAlBP,SACE,sBAAA,WAAA;;MACE,qBAACL,QAAAA;QAECa,YAAY;UACVC,OAAO;UACPC,GAAG;UACHC,SAAS;QACX;QACAC,WAAU;QACVC,WAAU;QACVC,MAAM;QACNH,SAAS;QACTF,OAAO;QACPC,GAAG;QACHK,iBAAgB;QAChBC,cAAa;mBAEZhB,kBAAAA,MAAMiB,cAAQ,QAAdjB,oBAAAA,SAAAA,kBAAkB,qBAACP,UAAAA;UAASyB,WAAW;;SAfnCf,GAAAA;MAkBP,qBAACT,QAAAA;QAAOoB,MAAK;QAAKK,WAAU;QAAKC,SAAS,WAAA;iBAAMhB,OAAOiB,KAAKC,OAAM,CAAA;;kBAAK;;;;AAK7E;",
|
|
5
|
+
"names": ["React", "LogoIcon", "Button", "Square", "YStack", "isWeb", "useIsIntersecting", "AnimationsEnterDemo", "props", "ref", "useRef", "key", "setKey", "useState", "hasIntersected", "once", "enterStyle", "scale", "y", "opacity", "animation", "elevation", "size", "backgroundColor", "borderRadius", "children", "downscale", "marginTop", "onPress", "Math", "random"]
|
|
6
|
+
}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { LogoIcon } from "@tamagui/logo";
|
|
3
3
|
import { Square } from "tamagui";
|
|
4
4
|
function AnimationsHoverDemo() {
|
|
5
|
-
return /* @__PURE__ */_jsx(Square, {
|
|
5
|
+
return /* @__PURE__ */ _jsx(Square, {
|
|
6
6
|
borderColor: "$borderColor",
|
|
7
7
|
animation: "bouncy",
|
|
8
8
|
elevation: "$4",
|
|
@@ -15,10 +15,12 @@ function AnimationsHoverDemo() {
|
|
|
15
15
|
pressStyle: {
|
|
16
16
|
scale: 0.9
|
|
17
17
|
},
|
|
18
|
-
children: /* @__PURE__ */_jsx(LogoIcon, {
|
|
18
|
+
children: /* @__PURE__ */ _jsx(LogoIcon, {
|
|
19
19
|
downscale: 0.75
|
|
20
20
|
})
|
|
21
21
|
});
|
|
22
22
|
}
|
|
23
|
-
export {
|
|
24
|
-
|
|
23
|
+
export {
|
|
24
|
+
AnimationsHoverDemo
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=AnimationsHoverDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/AnimationsHoverDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,gBAAgB;AACzB,SAASC,cAAc;AAEhB,SAASC,sBAAAA;AACd,SACE,qBAACD,QAAAA;IACCE,aAAY;IACZC,WAAU;IACVC,WAAU;IACVC,iBAAgB;IAChBC,MAAM;IACNC,cAAa;IACbC,YAAY;MACVC,OAAO;IACT;IACAC,YAAY;MACVD,OAAO;IACT;cAEA,qBAACV,UAAAA;MAASY,WAAW;;;AAG3B;",
|
|
5
|
+
"names": ["LogoIcon", "Square", "AnimationsHoverDemo", "borderColor", "animation", "elevation", "backgroundColor", "size", "borderRadius", "hoverStyle", "scale", "pressStyle", "downscale"]
|
|
6
|
+
}
|
|
@@ -6,92 +6,105 @@ import { Button, Image, XStack, YStack, styled } from "tamagui";
|
|
|
6
6
|
import photo1 from "../../public/photo1.jpg";
|
|
7
7
|
import photo2 from "../../public/photo2.jpg";
|
|
8
8
|
import photo3 from "../../public/photo3.jpg";
|
|
9
|
-
var images = [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
9
|
+
var images = [
|
|
10
|
+
photo1,
|
|
11
|
+
photo2,
|
|
12
|
+
photo3
|
|
13
|
+
].map(function(x) {
|
|
14
|
+
return x.src || x;
|
|
15
|
+
}), GalleryItem = styled(YStack, {
|
|
16
|
+
zIndex: 1,
|
|
17
|
+
x: 0,
|
|
18
|
+
opacity: 1,
|
|
19
|
+
fullscreen: !0,
|
|
20
|
+
variants: {
|
|
21
|
+
// 1 = right, 0 = nowhere, -1 = left
|
|
22
|
+
going: {
|
|
23
|
+
":number": function(going) {
|
|
24
|
+
return {
|
|
25
|
+
enterStyle: {
|
|
26
|
+
x: going > 0 ? 1e3 : -1e3,
|
|
27
|
+
opacity: 0
|
|
28
|
+
},
|
|
29
|
+
exitStyle: {
|
|
30
|
+
zIndex: 0,
|
|
31
|
+
x: going < 0 ? 1e3 : -1e3,
|
|
32
|
+
opacity: 0
|
|
33
|
+
}
|
|
34
|
+
};
|
|
33
35
|
}
|
|
34
36
|
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
}
|
|
38
|
+
}), wrap = function(min, max, v) {
|
|
39
|
+
var rangeSize = max - min;
|
|
40
|
+
return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
|
|
41
|
+
};
|
|
40
42
|
function AnimationsPresenceDemo() {
|
|
41
|
-
var [[page, going], setPage] = React.useState([
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
var [[page, going], setPage] = React.useState([
|
|
44
|
+
0,
|
|
45
|
+
0
|
|
46
|
+
]), imageIndex = wrap(0, images.length, page), paginate = function(going2) {
|
|
47
|
+
setPage([
|
|
48
|
+
page + going2,
|
|
49
|
+
going2
|
|
50
|
+
]);
|
|
51
|
+
};
|
|
52
|
+
return /* @__PURE__ */ _jsxs(XStack, {
|
|
47
53
|
overflow: "hidden",
|
|
48
54
|
backgroundColor: "#000",
|
|
49
55
|
position: "relative",
|
|
50
56
|
height: 300,
|
|
51
57
|
width: "100%",
|
|
52
58
|
alignItems: "center",
|
|
53
|
-
children: [
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ _jsx(AnimatePresence, {
|
|
61
|
+
initial: !1,
|
|
62
|
+
custom: {
|
|
63
|
+
going
|
|
64
|
+
},
|
|
65
|
+
children: /* @__PURE__ */ _jsx(GalleryItem, {
|
|
66
|
+
animation: "slow",
|
|
67
|
+
going,
|
|
68
|
+
children: /* @__PURE__ */ _jsx(Image, {
|
|
69
|
+
source: {
|
|
70
|
+
uri: images[imageIndex],
|
|
71
|
+
width: 820,
|
|
72
|
+
height: 300
|
|
73
|
+
}
|
|
74
|
+
})
|
|
75
|
+
}, page)
|
|
76
|
+
}),
|
|
77
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
78
|
+
accessibilityLabel: "Carousel left",
|
|
79
|
+
icon: ArrowLeft,
|
|
80
|
+
size: "$5",
|
|
81
|
+
position: "absolute",
|
|
82
|
+
left: "$4",
|
|
83
|
+
circular: !0,
|
|
84
|
+
elevate: !0,
|
|
85
|
+
onPress: function() {
|
|
86
|
+
return paginate(-1);
|
|
87
|
+
},
|
|
88
|
+
zi: 100
|
|
89
|
+
}),
|
|
90
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
91
|
+
accessibilityLabel: "Carousel right",
|
|
92
|
+
icon: ArrowRight,
|
|
93
|
+
size: "$5",
|
|
94
|
+
position: "absolute",
|
|
95
|
+
right: "$4",
|
|
96
|
+
circular: !0,
|
|
97
|
+
elevate: !0,
|
|
98
|
+
onPress: function() {
|
|
99
|
+
return paginate(1);
|
|
100
|
+
},
|
|
101
|
+
zi: 100
|
|
102
|
+
})
|
|
103
|
+
]
|
|
94
104
|
});
|
|
95
105
|
}
|
|
96
|
-
export {
|
|
97
|
-
|
|
106
|
+
export {
|
|
107
|
+
AnimationsPresenceDemo,
|
|
108
|
+
images
|
|
109
|
+
};
|
|
110
|
+
//# sourceMappingURL=AnimationsPresenceDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/AnimationsPresenceDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,OAAOA,WAAW;AAClB,SAASC,uBAAuB;AAChC,SAASC,WAAWC,kBAAkB;AAEtC,SAASC,QAAQC,OAAOC,QAAQC,QAAQC,cAAc;AAGtD,OAAOC,YAAY;AAEnB,OAAOC,YAAY;AAEnB,OAAOC,YAAY;AAEZ,IAAMC,SAAS;EAACH;EAAQC;EAAQC;EAAQE,IAAI,SAACC,GAAAA;SAAMA,EAAEC,OAAOD;IAE7DE,cAAcR,OAAOD,QAAQ;EACjCU,QAAQ;EACRH,GAAG;EACHI,SAAS;EACTC,YAAY;EAEZC,UAAU;;IAERC,OAAO;MACL,WAAW,SAACA,OAAAA;eAAW;UACrBC,YAAY;YACVR,GAAGO,QAAQ,IAAI,MAAO;YACtBH,SAAS;UACX;UACAK,WAAW;YACTN,QAAQ;YACRH,GAAGO,QAAQ,IAAI,MAAO;YACtBH,SAAS;UACX;QACF;;IACF;EACF;AACF,CAAA,GAEMM,OAAO,SAACC,KAAaC,KAAaC,GAAAA;AACtC,MAAMC,YAAYF,MAAMD;AACxB,WAAWE,IAAIF,OAAOG,YAAaA,aAAaA,YAAaH;AAC/D;AAEO,SAASI,yBAAAA;AACd,MAAM,CAAC,CAACC,MAAMT,KAAAA,GAAQU,OAAAA,IAAW/B,MAAMgC,SAAS;IAAC;IAAG;GAAE,GAEhDC,aAAaT,KAAK,GAAGZ,OAAOsB,QAAQJ,IAAAA,GACpCK,WAAW,SAACd,QAAAA;AAChBU,YAAQ;MAACD,OAAOT;MAAOA;KAAM;EAC/B;AAEA,SACE,sBAACf,QAAAA;IACC8B,UAAS;IACTC,iBAAgB;IAChBC,UAAS;IACTC,QAAQ;IACRC,OAAM;IACNC,YAAW;;MAEX,qBAACxC,iBAAAA;QAAgByC,SAAS;QAAOC,QAAQ;UAAEtB;QAAM;kBAC/C,qBAACL,aAAAA;UAAuB4B,WAAU;UAAOvB;oBACvC,qBAAChB,OAAAA;YAAMwC,QAAQ;cAAEC,KAAKlC,OAAOqB,UAAAA;cAAaO,OAAO;cAAKD,QAAQ;YAAI;;WADlDT,IAAAA;;MAKpB,qBAAC1B,QAAAA;QACC2C,oBAAmB;QACnBC,MAAM9C;QACN+C,MAAK;QACLX,UAAS;QACTY,MAAK;QACLC,UAAQ;QACRC,SAAO;QACPC,SAAS,WAAA;iBAAMlB,SAAS,EAAC;;QACzBmB,IAAI;;MAGN,qBAAClD,QAAAA;QACC2C,oBAAmB;QACnBC,MAAM7C;QACN8C,MAAK;QACLX,UAAS;QACTiB,OAAM;QACNJ,UAAQ;QACRC,SAAO;QACPC,SAAS,WAAA;iBAAMlB,SAAS,CAAA;;QACxBmB,IAAI;;;;AAIZ;",
|
|
5
|
+
"names": ["React", "AnimatePresence", "ArrowLeft", "ArrowRight", "Button", "Image", "XStack", "YStack", "styled", "photo1", "photo2", "photo3", "images", "map", "x", "src", "GalleryItem", "zIndex", "opacity", "fullscreen", "variants", "going", "enterStyle", "exitStyle", "wrap", "min", "max", "v", "rangeSize", "AnimationsPresenceDemo", "page", "setPage", "useState", "imageIndex", "length", "paginate", "overflow", "backgroundColor", "position", "height", "width", "alignItems", "initial", "custom", "animation", "source", "uri", "accessibilityLabel", "icon", "size", "left", "circular", "elevate", "onPress", "zi", "right"]
|
|
6
|
+
}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { LogoIcon } from "@tamagui/logo";
|
|
3
3
|
import { Square } from "tamagui";
|
|
4
4
|
function AnimationsTimingDemo() {
|
|
5
|
-
return /* @__PURE__ */_jsx(Square, {
|
|
5
|
+
return /* @__PURE__ */ _jsx(Square, {
|
|
6
6
|
backgroundColor: "$pink10",
|
|
7
7
|
animation: "100ms",
|
|
8
8
|
elevation: "$4",
|
|
@@ -14,10 +14,12 @@ function AnimationsTimingDemo() {
|
|
|
14
14
|
pressStyle: {
|
|
15
15
|
scale: 0.9
|
|
16
16
|
},
|
|
17
|
-
children: /* @__PURE__ */_jsx(LogoIcon, {
|
|
17
|
+
children: /* @__PURE__ */ _jsx(LogoIcon, {
|
|
18
18
|
downscale: 0.75
|
|
19
19
|
})
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
|
-
export {
|
|
23
|
-
|
|
22
|
+
export {
|
|
23
|
+
AnimationsTimingDemo
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=AnimationsTimingDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/AnimationsTimingDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,SAASA,gBAAgB;AACzB,SAASC,cAAc;AAEhB,SAASC,uBAAAA;AACd,SACE,qBAACD,QAAAA;IACCE,iBAAgB;IAChBC,WAAU;IACVC,WAAU;IACVC,MAAM;IACNC,cAAa;IACbC,YAAY;MACVC,OAAO;IACT;IACAC,YAAY;MACVD,OAAO;IACT;cAEA,qBAACT,UAAAA;MAASW,WAAW;;;AAG3B;",
|
|
5
|
+
"names": ["LogoIcon", "Square", "AnimationsTimingDemo", "backgroundColor", "animation", "elevation", "size", "borderRadius", "hoverStyle", "scale", "pressStyle", "downscale"]
|
|
6
|
+
}
|
|
@@ -2,30 +2,41 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import "react";
|
|
3
3
|
import { Avatar, XStack } from "tamagui";
|
|
4
4
|
function AvatarDemo() {
|
|
5
|
-
return /* @__PURE__ */_jsxs(XStack, {
|
|
5
|
+
return /* @__PURE__ */ _jsxs(XStack, {
|
|
6
6
|
alignItems: "center",
|
|
7
7
|
gap: "$6",
|
|
8
|
-
children: [
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
8
|
+
children: [
|
|
9
|
+
/* @__PURE__ */ _jsxs(Avatar, {
|
|
10
|
+
circular: !0,
|
|
11
|
+
size: "$10",
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ _jsx(Avatar.Image, {
|
|
14
|
+
accessibilityLabel: "Cam",
|
|
15
|
+
src: "https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
|
|
16
|
+
}),
|
|
17
|
+
/* @__PURE__ */ _jsx(Avatar.Fallback, {
|
|
18
|
+
backgroundColor: "$blue10"
|
|
19
|
+
})
|
|
20
|
+
]
|
|
21
|
+
}),
|
|
22
|
+
/* @__PURE__ */ _jsxs(Avatar, {
|
|
23
|
+
circular: !0,
|
|
24
|
+
size: "$8",
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ _jsx(Avatar.Image, {
|
|
27
|
+
accessibilityLabel: "Nate Wienert",
|
|
28
|
+
src: "https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
|
|
29
|
+
}),
|
|
30
|
+
/* @__PURE__ */ _jsx(Avatar.Fallback, {
|
|
31
|
+
delayMs: 600,
|
|
32
|
+
backgroundColor: "$blue10"
|
|
33
|
+
})
|
|
34
|
+
]
|
|
35
|
+
})
|
|
36
|
+
]
|
|
28
37
|
});
|
|
29
38
|
}
|
|
30
|
-
export {
|
|
31
|
-
|
|
39
|
+
export {
|
|
40
|
+
AvatarDemo
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=AvatarDemo.js.map
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Users/n8/tamagui/code/demos/src/AvatarDemo.tsx"],
|
|
4
|
+
"mappings": ";AAAA,OAAkB;AAClB,SAASA,QAAQC,cAAc;AAExB,SAASC,aAAAA;AACd,SACE,sBAACD,QAAAA;IAAOE,YAAW;IAASC,KAAI;;MAC9B,sBAACJ,QAAAA;QAAOK,UAAQ;QAACC,MAAK;;UACpB,qBAACN,OAAOO,OAAK;YACXC,oBAAmB;YACnBC,KAAI;;UAEN,qBAACT,OAAOU,UAAQ;YAACC,iBAAgB;;;;MAGnC,sBAACX,QAAAA;QAAOK,UAAQ;QAACC,MAAK;;UACpB,qBAACN,OAAOO,OAAK;YACXC,oBAAmB;YACnBC,KAAI;;UAEN,qBAACT,OAAOU,UAAQ;YAACE,SAAS;YAAKD,iBAAgB;;;;;;AAIvD;",
|
|
5
|
+
"names": ["Avatar", "XStack", "AvatarDemo", "alignItems", "gap", "circular", "size", "Image", "accessibilityLabel", "src", "Fallback", "backgroundColor", "delayMs"]
|
|
6
|
+
}
|
|
@@ -12,91 +12,112 @@ var outlined = {
|
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
function BuildAButtonDemo() {
|
|
15
|
-
return /* @__PURE__ */_jsx(YStack, {
|
|
15
|
+
return /* @__PURE__ */ _jsx(YStack, {
|
|
16
16
|
fullscreen: !0,
|
|
17
17
|
ov: "hidden",
|
|
18
|
-
children: /* @__PURE__ */_jsxs(XStack, {
|
|
18
|
+
children: /* @__PURE__ */ _jsxs(XStack, {
|
|
19
19
|
mah: 200,
|
|
20
20
|
y: -100,
|
|
21
21
|
x: -40,
|
|
22
22
|
rotate: "-10deg",
|
|
23
|
-
children: [
|
|
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
|
-
|
|
57
|
-
|
|
23
|
+
children: [
|
|
24
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
25
|
+
y: 35,
|
|
26
|
+
size: "$2",
|
|
27
|
+
...outlined,
|
|
28
|
+
subTheme: "alt1",
|
|
29
|
+
borderWidth: 1
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
32
|
+
y: 30
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
35
|
+
y: -50,
|
|
36
|
+
...outlined
|
|
37
|
+
}),
|
|
38
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
39
|
+
...outlined,
|
|
40
|
+
icon: /* @__PURE__ */ _jsx(Hand, {})
|
|
41
|
+
}),
|
|
42
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
43
|
+
size: "$6",
|
|
44
|
+
subTheme: "alt2"
|
|
45
|
+
}),
|
|
46
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
47
|
+
size: "$6",
|
|
48
|
+
subTheme: "alt2",
|
|
49
|
+
...outlined
|
|
50
|
+
}),
|
|
51
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
52
|
+
size: "$8",
|
|
53
|
+
subTheme: "alt2",
|
|
54
|
+
iconAfter: /* @__PURE__ */ _jsx(Drumstick, {}),
|
|
55
|
+
...outlined
|
|
56
|
+
}),
|
|
57
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
58
|
+
size: "$10",
|
|
59
|
+
subTheme: "alt1"
|
|
60
|
+
}),
|
|
61
|
+
/* @__PURE__ */ _jsx(ButtonCol, {
|
|
62
|
+
size: "$8",
|
|
63
|
+
subTheme: "alt2",
|
|
64
|
+
...outlined,
|
|
65
|
+
borderRadius: 0
|
|
66
|
+
})
|
|
67
|
+
]
|
|
58
68
|
})
|
|
59
69
|
});
|
|
60
70
|
}
|
|
61
71
|
function ButtonCol(props) {
|
|
62
72
|
var subTheme = props.subTheme ? `_${props.subTheme}` : "";
|
|
63
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
73
|
+
return /* @__PURE__ */ _jsxs(YStack, {
|
|
64
74
|
padding: "$2",
|
|
65
75
|
gap: "$3",
|
|
66
|
-
children: [
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
78
|
+
theme: props.subTheme,
|
|
79
|
+
...props,
|
|
80
|
+
children: "Hello"
|
|
81
|
+
}),
|
|
82
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
83
|
+
theme: "orange" + subTheme,
|
|
84
|
+
...props,
|
|
85
|
+
children: "Hello"
|
|
86
|
+
}),
|
|
87
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
88
|
+
theme: "yellow" + subTheme,
|
|
89
|
+
...props,
|
|
90
|
+
children: "Hello"
|
|
91
|
+
}),
|
|
92
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
93
|
+
theme: "green" + subTheme,
|
|
94
|
+
...props,
|
|
95
|
+
children: "Hello"
|
|
96
|
+
}),
|
|
97
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
98
|
+
theme: "blue" + subTheme,
|
|
99
|
+
...props,
|
|
100
|
+
children: "Hello"
|
|
101
|
+
}),
|
|
102
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
103
|
+
theme: "purple" + subTheme,
|
|
104
|
+
...props,
|
|
105
|
+
children: "Hello"
|
|
106
|
+
}),
|
|
107
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
108
|
+
theme: "pink" + subTheme,
|
|
109
|
+
...props,
|
|
110
|
+
children: "Hello"
|
|
111
|
+
}),
|
|
112
|
+
/* @__PURE__ */ _jsx(Button, {
|
|
113
|
+
theme: "red" + subTheme,
|
|
114
|
+
...props,
|
|
115
|
+
children: "Hello"
|
|
116
|
+
})
|
|
117
|
+
]
|
|
99
118
|
});
|
|
100
119
|
}
|
|
101
|
-
export {
|
|
102
|
-
|
|
120
|
+
export {
|
|
121
|
+
BuildAButtonDemo
|
|
122
|
+
};
|
|
123
|
+
//# sourceMappingURL=BuildAButtonDemo.js.map
|