@tamagui/demos 1.0.1-beta.92 → 1.0.1-beta.95
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/AnimationsPresenceDemo.js +1 -1
- package/dist/cjs/AnimationsPresenceDemo.js.map +1 -1
- package/dist/cjs/PopoverDemo.js +16 -17
- package/dist/cjs/PopoverDemo.js.map +2 -2
- package/dist/cjs/StacksDemo.js +2 -0
- package/dist/cjs/StacksDemo.js.map +2 -2
- package/dist/cjs/SwitchDemo.js +0 -1
- package/dist/cjs/SwitchDemo.js.map +2 -2
- package/dist/esm/AnimationsPresenceDemo.js +1 -1
- package/dist/esm/AnimationsPresenceDemo.js.map +1 -1
- package/dist/esm/PopoverDemo.js +5 -9
- package/dist/esm/PopoverDemo.js.map +2 -2
- package/dist/esm/StacksDemo.js +2 -0
- package/dist/esm/StacksDemo.js.map +2 -2
- package/dist/esm/SwitchDemo.js +0 -1
- package/dist/esm/SwitchDemo.js.map +2 -2
- package/dist/jsx/AnimationsPresenceDemo.js +1 -1
- package/dist/jsx/AnimationsPresenceDemo.js.map +1 -1
- package/dist/jsx/PopoverDemo.js +5 -5
- package/dist/jsx/PopoverDemo.js.map +2 -2
- package/dist/jsx/StacksDemo.js +1 -1
- package/dist/jsx/StacksDemo.js.map +2 -2
- package/dist/jsx/SwitchDemo.js +1 -1
- package/dist/jsx/SwitchDemo.js.map +2 -2
- package/package.json +5 -5
- package/src/AnimationsPresenceDemo.tsx +1 -1
- package/src/PopoverDemo.tsx +8 -12
- package/src/StacksDemo.tsx +1 -1
- package/src/SwitchDemo.tsx +1 -1
- package/types/PopoverDemo.d.ts.map +1 -1
|
@@ -65,7 +65,7 @@ function AnimationsPresenceDemo() {
|
|
|
65
65
|
o: 1
|
|
66
66
|
}, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Image, {
|
|
67
67
|
src: images[imageIndex],
|
|
68
|
-
width:
|
|
68
|
+
width: 780,
|
|
69
69
|
height: 300
|
|
70
70
|
}))), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
|
|
71
71
|
accessibilityLabel: "Carousel left",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsPresenceDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n variants: {\n isLeft: { true: { x: -300, opacity: 0 } },\n isRight: { true: { x: 300, opacity: 0 } },\n },\n})\n\nexport function AnimationsPresenceDemo() {\n const [[page, direction], setPage] = useState([0, 0])\n\n const imageIndex = wrap(0, images.length, page)\n\n const paginate = (newDirection: number) => {\n setPage([page + newDirection, newDirection])\n }\n\n const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n return (\n <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n <Image src={images[imageIndex]} width={
|
|
4
|
+
"sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n variants: {\n isLeft: { true: { x: -300, opacity: 0 } },\n isRight: { true: { x: 300, opacity: 0 } },\n },\n})\n\nexport function AnimationsPresenceDemo() {\n const [[page, direction], setPage] = useState([0, 0])\n\n const imageIndex = wrap(0, images.length, page)\n\n const paginate = (newDirection: number) => {\n setPage([page + newDirection, newDirection])\n }\n\n const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n return (\n <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n <Image src={images[imageIndex]} width={780} height={300} />\n </YStackEnterable>\n </AnimatePresence>\n\n <Button\n accessibilityLabel=\"Carousel left\"\n icon={ArrowLeft}\n size=\"$5\"\n pos=\"absolute\"\n l=\"$4\"\n circular\n elevate\n onPress={() => paginate(-1)}\n />\n <Button\n accessibilityLabel=\"Carousel right\"\n icon={ArrowRight}\n size=\"$5\"\n pos=\"absolute\"\n r=\"$4\"\n circular\n elevate\n onPress={() => paginate(1)}\n />\n </XStack>\n )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n const rangeSize = max - min\n return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,8BAAgC;AAChC,2BAAsC;AACtC,mBAAkB;AAClB,oBAAyB;AACzB,qBAAsD;AAGtD,oBAAmB;AAEnB,oBAAmB;AAEnB,oBAAmB;AAEZ,MAAM,SAAS,CAAC,sBAAO,KAAK,sBAAO,KAAK,sBAAO,GAAG;AAEzD,MAAM,kBAAkB,2BAAO,uBAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,kCAAkC;AACvC,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,4BAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAO,KAAI;AAAA,IAAW,GAAG;AAAA,IAAK,GAAE;AAAA,IAAO,IAAG;AAAA,KAC/D,mDAAC;AAAA,IAAgB;AAAA,IAA4B;AAAA,KAC3C,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAM,WAAU;AAAA,IAAS,YAAU;AAAA,IAAC,GAAG;AAAA,IAAG,GAAG;AAAA,KACjE,mDAAC;AAAA,IAAM,KAAK,OAAO;AAAA,IAAa,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK,CAC3D,CACF,GAEA,mDAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,SAAS,MAAM,SAAS,EAAE;AAAA,GAC5B,GACA,mDAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,SAAS,MAAM,SAAS,CAAC;AAAA,GAC3B,CACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/PopoverDemo.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
5
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
9
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -40,6 +42,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
40
42
|
}
|
|
41
43
|
return to;
|
|
42
44
|
};
|
|
45
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
43
46
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
44
47
|
var PopoverDemo_exports = {};
|
|
45
48
|
__export(PopoverDemo_exports, {
|
|
@@ -48,49 +51,45 @@ __export(PopoverDemo_exports, {
|
|
|
48
51
|
});
|
|
49
52
|
module.exports = __toCommonJS(PopoverDemo_exports);
|
|
50
53
|
var import_feather_icons = require("@tamagui/feather-icons");
|
|
54
|
+
var import_react = __toESM(require("react"));
|
|
51
55
|
var import_tamagui = require("tamagui");
|
|
52
56
|
function PopoverDemo() {
|
|
53
|
-
return /* @__PURE__ */
|
|
57
|
+
return /* @__PURE__ */ import_react.default.createElement(import_tamagui.XStack, {
|
|
54
58
|
space: "$2"
|
|
55
|
-
}, /* @__PURE__ */
|
|
59
|
+
}, /* @__PURE__ */ import_react.default.createElement(Demo, {
|
|
56
60
|
placement: "left",
|
|
57
61
|
Icon: import_feather_icons.ChevronLeft
|
|
58
|
-
}), /* @__PURE__ */
|
|
62
|
+
}), /* @__PURE__ */ import_react.default.createElement(Demo, {
|
|
59
63
|
placement: "bottom",
|
|
60
64
|
Icon: import_feather_icons.ChevronDown
|
|
61
|
-
}), /* @__PURE__ */
|
|
65
|
+
}), /* @__PURE__ */ import_react.default.createElement(Demo, {
|
|
62
66
|
placement: "right",
|
|
63
67
|
Icon: import_feather_icons.ChevronRight
|
|
64
68
|
}));
|
|
65
69
|
}
|
|
66
70
|
function Demo(_a) {
|
|
67
71
|
var _b = _a, { Icon } = _b, props = __objRest(_b, ["Icon"]);
|
|
68
|
-
return /* @__PURE__ */
|
|
69
|
-
|
|
70
|
-
}, props), /* @__PURE__ */
|
|
72
|
+
return /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover, __spreadValues({
|
|
73
|
+
size: "$5"
|
|
74
|
+
}, props), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover.Trigger, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
|
|
71
75
|
icon: Icon
|
|
72
|
-
})), /* @__PURE__ */
|
|
73
|
-
elevation: "$4",
|
|
76
|
+
})), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover.Content, {
|
|
74
77
|
enterStyle: { x: 0, y: -10, o: 0 },
|
|
75
78
|
exitStyle: { x: 0, y: -10, o: 0 },
|
|
76
|
-
p: "$2",
|
|
77
|
-
br: "$4",
|
|
78
79
|
x: 0,
|
|
79
80
|
y: 0,
|
|
80
81
|
o: 1,
|
|
81
82
|
animation: "bouncy",
|
|
82
83
|
elevate: true
|
|
83
|
-
}, /* @__PURE__ */
|
|
84
|
-
p: "$3"
|
|
85
|
-
}, /* @__PURE__ */ React.createElement(import_tamagui.XStack, {
|
|
84
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Popover.Arrow, null), /* @__PURE__ */ import_react.default.createElement(import_tamagui.XStack, {
|
|
86
85
|
space: "$3"
|
|
87
|
-
}, /* @__PURE__ */
|
|
86
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Label, {
|
|
88
87
|
size: "$3",
|
|
89
88
|
htmlFor: "name"
|
|
90
|
-
}, "Name"), /* @__PURE__ */
|
|
89
|
+
}, "Name"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Input, {
|
|
91
90
|
size: "$3",
|
|
92
91
|
id: "name"
|
|
93
|
-
}))))
|
|
92
|
+
}))));
|
|
94
93
|
}
|
|
95
94
|
// Annotate the CommonJS export names for ESM import in node:
|
|
96
95
|
0 && (module.exports = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/PopoverDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger>\n <Button icon={Icon} />\n </Popover.Trigger>\n <Popover.Content\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation=\"bouncy\"\n elevate\n >\n <Popover.Arrow />\n\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor=\"name\">\n Name\n </Label>\n <Input size=\"$3\" id=\"name\" />\n </XStack>\n </Popover.Content>\n </Popover>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuD;AACvD,mBAAkB;AAClB,qBAA4E;AAErE,uBAAuB;AAC5B,SACE,mDAAC;AAAA,IAAO,OAAM;AAAA,KACZ,mDAAC;AAAA,IAAK,WAAU;AAAA,IAAO,MAAM;AAAA,GAAa,GAC1C,mDAAC;AAAA,IAAK,WAAU;AAAA,IAAS,MAAM;AAAA,GAAa,GAC5C,mDAAC;AAAA,IAAK,WAAU;AAAA,IAAQ,MAAM;AAAA,GAAc,CAC9C;AAEJ;AAEO,cAAc,IAAmD;AAAnD,eAAE,WAAF,IAAW,kBAAX,IAAW,CAAT;AACrB,SACE,mDAAC;AAAA,IAAQ,MAAK;AAAA,KAAS,QACrB,mDAAC,uBAAQ,SAAR,MACC,mDAAC;AAAA,IAAO,MAAM;AAAA,GAAM,CACtB,GACA,mDAAC,uBAAQ,SAAR;AAAA,IACC,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,IACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,IAChC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,WAAU;AAAA,IACV,SAAO;AAAA,KAEP,mDAAC,uBAAQ,OAAR,IAAc,GAEf,mDAAC;AAAA,IAAO,OAAM;AAAA,KACZ,mDAAC;AAAA,IAAM,MAAK;AAAA,IAAK,SAAQ;AAAA,KAAO,MAEhC,GACA,mDAAC;AAAA,IAAM,MAAK;AAAA,IAAK,IAAG;AAAA,GAAO,CAC7B,CACF,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/StacksDemo.js
CHANGED
|
@@ -27,6 +27,8 @@ var import_react = __toESM(require("react"));
|
|
|
27
27
|
var import_tamagui = require("tamagui");
|
|
28
28
|
function StacksDemo() {
|
|
29
29
|
return /* @__PURE__ */ import_react.default.createElement(import_tamagui.XStack, {
|
|
30
|
+
maw: 250,
|
|
31
|
+
p: "$2",
|
|
30
32
|
als: "center",
|
|
31
33
|
space: true
|
|
32
34
|
}, /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/StacksDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n return (\n <XStack als=\"center\" space>\n <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </YStack>\n\n <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </XStack>\n\n <ZStack maw={50} mah={85} w={100} flex={1}>\n <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n </ZStack>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAuC;AAEhC,sBAAsB;AAC3B,SACE,mDAAC;AAAA,IAAO,KAAI;AAAA,IAAS,OAAK;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n return (\n <XStack maw={250} p=\"$2\" als=\"center\" space>\n <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </YStack>\n\n <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </XStack>\n\n <ZStack maw={50} mah={85} w={100} flex={1}>\n <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n </ZStack>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAuC;AAEhC,sBAAsB;AAC3B,SACE,mDAAC;AAAA,IAAO,KAAK;AAAA,IAAK,GAAE;AAAA,IAAK,KAAI;AAAA,IAAS,OAAK;AAAA,KACzC,mDAAC;AAAA,IAAO,MAAM;AAAA,IAAG,OAAM;AAAA,IAAK,IAAI;AAAA,IAAG,KAAI;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,KACxD,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrC,GAEA,mDAAC;AAAA,IAAO,MAAM;AAAA,IAAG,OAAM;AAAA,IAAK,IAAI;AAAA,IAAG,KAAI;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,KACxD,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrC,GAEA,mDAAC;AAAA,IAAO,KAAK;AAAA,IAAI,KAAK;AAAA,IAAI,GAAG;AAAA,IAAK,MAAM;AAAA,KACtC,mDAAC;AAAA,IAAO,YAAU;AAAA,IAAC,IAAI;AAAA,IAAG,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACzC,mDAAC;AAAA,IAAO,YAAU;AAAA,IAAC,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,IAAI;AAAA,IAAG,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACvD,mDAAC;AAAA,IAAO,YAAU;AAAA,IAAC,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,IAAI;AAAA,IAAG,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrE,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/SwitchDemo.js
CHANGED
|
@@ -43,7 +43,6 @@ function SwitchDemo() {
|
|
|
43
43
|
function SwitchWithLabel(props) {
|
|
44
44
|
return /* @__PURE__ */ import_react.default.createElement(import_tamagui.XStack, {
|
|
45
45
|
w: 300,
|
|
46
|
-
x: -60,
|
|
47
46
|
ai: "center",
|
|
48
47
|
space: "$4"
|
|
49
48
|
}, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Label, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SwitchDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Label, Separator, SizeTokens, Switch, XStack, YStack } from 'tamagui'\n\nexport function SwitchDemo() {\n return (\n <YStack w={300} ai=\"center\" space=\"$3\">\n <SwitchWithLabel size=\"$2\" />\n <SwitchWithLabel size=\"$3\" />\n <SwitchWithLabel size=\"$4\" />\n <SwitchWithLabel size=\"$5\" />\n </YStack>\n )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n return (\n <XStack w={300}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAqE;AAE9D,sBAAsB;AAC3B,SACE,mDAAC;AAAA,IAAO,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KAChC,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,CAC7B;AAEJ;AAEA,yBAAyB,OAA6B;AACpD,SACE,mDAAC;AAAA,IAAO,GAAG;AAAA,IAAK,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Label, Separator, SizeTokens, Switch, XStack, YStack } from 'tamagui'\n\nexport function SwitchDemo() {\n return (\n <YStack w={300} ai=\"center\" space=\"$3\">\n <SwitchWithLabel size=\"$2\" />\n <SwitchWithLabel size=\"$3\" />\n <SwitchWithLabel size=\"$4\" />\n <SwitchWithLabel size=\"$5\" />\n </YStack>\n )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n return (\n <XStack w={300} ai=\"center\" space=\"$4\">\n <Label pr=\"$0\" miw={200} jc=\"flex-end\" size={props.size} htmlFor=\"switch-1\">\n Dark mode\n </Label>\n <Separator mih={20} vertical />\n <Switch id=\"switch-1\" size={props.size}>\n <Switch.Thumb animation=\"bouncy\" />\n </Switch>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAqE;AAE9D,sBAAsB;AAC3B,SACE,mDAAC;AAAA,IAAO,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KAChC,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,CAC7B;AAEJ;AAEA,yBAAyB,OAA6B;AACpD,SACE,mDAAC;AAAA,IAAO,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KAChC,mDAAC;AAAA,IAAM,IAAG;AAAA,IAAK,KAAK;AAAA,IAAK,IAAG;AAAA,IAAW,MAAM,MAAM;AAAA,IAAM,SAAQ;AAAA,KAAW,WAE5E,GACA,mDAAC;AAAA,IAAU,KAAK;AAAA,IAAI,UAAQ;AAAA,GAAC,GAC7B,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAW,MAAM,MAAM;AAAA,KAChC,mDAAC,sBAAO,OAAP;AAAA,IAAa,WAAU;AAAA,GAAS,CACnC,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,7 +39,7 @@ function AnimationsPresenceDemo() {
|
|
|
39
39
|
o: 1
|
|
40
40
|
}, /* @__PURE__ */ React.createElement(Image, {
|
|
41
41
|
src: images[imageIndex],
|
|
42
|
-
width:
|
|
42
|
+
width: 780,
|
|
43
43
|
height: 300
|
|
44
44
|
}))), /* @__PURE__ */ React.createElement(Button, {
|
|
45
45
|
accessibilityLabel: "Carousel left",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsPresenceDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n variants: {\n isLeft: { true: { x: -300, opacity: 0 } },\n isRight: { true: { x: 300, opacity: 0 } },\n },\n})\n\nexport function AnimationsPresenceDemo() {\n const [[page, direction], setPage] = useState([0, 0])\n\n const imageIndex = wrap(0, images.length, page)\n\n const paginate = (newDirection: number) => {\n setPage([page + newDirection, newDirection])\n }\n\n const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n return (\n <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n <Image src={images[imageIndex]} width={
|
|
4
|
+
"sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n variants: {\n isLeft: { true: { x: -300, opacity: 0 } },\n isRight: { true: { x: 300, opacity: 0 } },\n },\n})\n\nexport function AnimationsPresenceDemo() {\n const [[page, direction], setPage] = useState([0, 0])\n\n const imageIndex = wrap(0, images.length, page)\n\n const paginate = (newDirection: number) => {\n setPage([page + newDirection, newDirection])\n }\n\n const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n return (\n <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n <Image src={images[imageIndex]} width={780} height={300} />\n </YStackEnterable>\n </AnimatePresence>\n\n <Button\n accessibilityLabel=\"Carousel left\"\n icon={ArrowLeft}\n size=\"$5\"\n pos=\"absolute\"\n l=\"$4\"\n circular\n elevate\n onPress={() => paginate(-1)}\n />\n <Button\n accessibilityLabel=\"Carousel right\"\n icon={ArrowRight}\n size=\"$5\"\n pos=\"absolute\"\n r=\"$4\"\n circular\n elevate\n onPress={() => paginate(1)}\n />\n </XStack>\n )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n const rangeSize = max - min\n return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
|
|
5
5
|
"mappings": "AAGA;AACA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAEO,MAAM,SAAS,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,GAAG;AAEzD,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,kCAAkC;AACvC,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAO,KAAI;AAAA,IAAW,GAAG;AAAA,IAAK,GAAE;AAAA,IAAO,IAAG;AAAA,KAC/D,oCAAC;AAAA,IAAgB;AAAA,IAA4B;AAAA,KAC3C,oCAAC;AAAA,IAAgB,KAAK;AAAA,IAAM,WAAU;AAAA,IAAS,YAAU;AAAA,IAAC,GAAG;AAAA,IAAG,GAAG;AAAA,KACjE,oCAAC;AAAA,IAAM,KAAK,OAAO;AAAA,IAAa,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK,CAC3D,CACF,GAEA,oCAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,SAAS,MAAM,SAAS,EAAE;AAAA,GAC5B,GACA,oCAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,SAAS,MAAM,SAAS,CAAC;AAAA,GAC3B,CACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/PopoverDemo.js
CHANGED
|
@@ -27,7 +27,8 @@ var __objRest = (source, exclude) => {
|
|
|
27
27
|
return target;
|
|
28
28
|
};
|
|
29
29
|
import { ChevronDown, ChevronLeft, ChevronRight } from "@tamagui/feather-icons";
|
|
30
|
-
import
|
|
30
|
+
import React from "react";
|
|
31
|
+
import { Button, Input, Label, Popover, XStack } from "tamagui";
|
|
31
32
|
function PopoverDemo() {
|
|
32
33
|
return /* @__PURE__ */ React.createElement(XStack, {
|
|
33
34
|
space: "$2"
|
|
@@ -45,23 +46,18 @@ function PopoverDemo() {
|
|
|
45
46
|
function Demo(_a) {
|
|
46
47
|
var _b = _a, { Icon } = _b, props = __objRest(_b, ["Icon"]);
|
|
47
48
|
return /* @__PURE__ */ React.createElement(Popover, __spreadValues({
|
|
48
|
-
|
|
49
|
+
size: "$5"
|
|
49
50
|
}, props), /* @__PURE__ */ React.createElement(Popover.Trigger, null, /* @__PURE__ */ React.createElement(Button, {
|
|
50
51
|
icon: Icon
|
|
51
52
|
})), /* @__PURE__ */ React.createElement(Popover.Content, {
|
|
52
|
-
elevation: "$4",
|
|
53
53
|
enterStyle: { x: 0, y: -10, o: 0 },
|
|
54
54
|
exitStyle: { x: 0, y: -10, o: 0 },
|
|
55
|
-
p: "$2",
|
|
56
|
-
br: "$4",
|
|
57
55
|
x: 0,
|
|
58
56
|
y: 0,
|
|
59
57
|
o: 1,
|
|
60
58
|
animation: "bouncy",
|
|
61
59
|
elevate: true
|
|
62
|
-
}, /* @__PURE__ */ React.createElement(Popover.Arrow, null), /* @__PURE__ */ React.createElement(
|
|
63
|
-
p: "$3"
|
|
64
|
-
}, /* @__PURE__ */ React.createElement(XStack, {
|
|
60
|
+
}, /* @__PURE__ */ React.createElement(Popover.Arrow, null), /* @__PURE__ */ React.createElement(XStack, {
|
|
65
61
|
space: "$3"
|
|
66
62
|
}, /* @__PURE__ */ React.createElement(Label, {
|
|
67
63
|
size: "$3",
|
|
@@ -69,7 +65,7 @@ function Demo(_a) {
|
|
|
69
65
|
}, "Name"), /* @__PURE__ */ React.createElement(Input, {
|
|
70
66
|
size: "$3",
|
|
71
67
|
id: "name"
|
|
72
|
-
}))))
|
|
68
|
+
}))));
|
|
73
69
|
}
|
|
74
70
|
export {
|
|
75
71
|
Demo,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/PopoverDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAEO,uBAAuB;AAC5B,SACE,oCAAC;AAAA,IAAO,OAAM;AAAA,KACZ,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAO,MAAM;AAAA,GAAa,GAC1C,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAS,MAAM;AAAA,GAAa,GAC5C,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAQ,MAAM;AAAA,GAAc,CAC9C;AAEJ;AAEO,cAAc,IAAmD;AAAnD,eAAE,WAAF,IAAW,kBAAX,IAAW,CAAT;AACrB,SACE,oCAAC;AAAA,IAAQ,
|
|
4
|
+
"sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger>\n <Button icon={Icon} />\n </Popover.Trigger>\n <Popover.Content\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation=\"bouncy\"\n elevate\n >\n <Popover.Arrow />\n\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor=\"name\">\n Name\n </Label>\n <Input size=\"$3\" id=\"name\" />\n </XStack>\n </Popover.Content>\n </Popover>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEO,uBAAuB;AAC5B,SACE,oCAAC;AAAA,IAAO,OAAM;AAAA,KACZ,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAO,MAAM;AAAA,GAAa,GAC1C,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAS,MAAM;AAAA,GAAa,GAC5C,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAQ,MAAM;AAAA,GAAc,CAC9C;AAEJ;AAEO,cAAc,IAAmD;AAAnD,eAAE,WAAF,IAAW,kBAAX,IAAW,CAAT;AACrB,SACE,oCAAC;AAAA,IAAQ,MAAK;AAAA,KAAS,QACrB,oCAAC,QAAQ,SAAR,MACC,oCAAC;AAAA,IAAO,MAAM;AAAA,GAAM,CACtB,GACA,oCAAC,QAAQ,SAAR;AAAA,IACC,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,IACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,IAChC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,WAAU;AAAA,IACV,SAAO;AAAA,KAEP,oCAAC,QAAQ,OAAR,IAAc,GAEf,oCAAC;AAAA,IAAO,OAAM;AAAA,KACZ,oCAAC;AAAA,IAAM,MAAK;AAAA,IAAK,SAAQ;AAAA,KAAO,MAEhC,GACA,oCAAC;AAAA,IAAM,MAAK;AAAA,IAAK,IAAG;AAAA,GAAO,CAC7B,CACF,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/StacksDemo.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/StacksDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n return (\n <XStack als=\"center\" space>\n <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </YStack>\n\n <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </XStack>\n\n <ZStack maw={50} mah={85} w={100} flex={1}>\n <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n </ZStack>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AACA;AAEO,sBAAsB;AAC3B,SACE,oCAAC;AAAA,IAAO,KAAI;AAAA,IAAS,OAAK;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n return (\n <XStack maw={250} p=\"$2\" als=\"center\" space>\n <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </YStack>\n\n <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </XStack>\n\n <ZStack maw={50} mah={85} w={100} flex={1}>\n <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n </ZStack>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AACA;AAEO,sBAAsB;AAC3B,SACE,oCAAC;AAAA,IAAO,KAAK;AAAA,IAAK,GAAE;AAAA,IAAK,KAAI;AAAA,IAAS,OAAK;AAAA,KACzC,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAG,OAAM;AAAA,IAAK,IAAI;AAAA,IAAG,KAAI;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,KACxD,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrC,GAEA,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAG,OAAM;AAAA,IAAK,IAAI;AAAA,IAAG,KAAI;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,KACxD,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrC,GAEA,oCAAC;AAAA,IAAO,KAAK;AAAA,IAAI,KAAK;AAAA,IAAI,GAAG;AAAA,IAAK,MAAM;AAAA,KACtC,oCAAC;AAAA,IAAO,YAAU;AAAA,IAAC,IAAI;AAAA,IAAG,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACzC,oCAAC;AAAA,IAAO,YAAU;AAAA,IAAC,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,IAAI;AAAA,IAAG,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACvD,oCAAC;AAAA,IAAO,YAAU;AAAA,IAAC,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,IAAI;AAAA,IAAG,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrE,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SwitchDemo.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SwitchDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Label, Separator, SizeTokens, Switch, XStack, YStack } from 'tamagui'\n\nexport function SwitchDemo() {\n return (\n <YStack w={300} ai=\"center\" space=\"$3\">\n <SwitchWithLabel size=\"$2\" />\n <SwitchWithLabel size=\"$3\" />\n <SwitchWithLabel size=\"$4\" />\n <SwitchWithLabel size=\"$5\" />\n </YStack>\n )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n return (\n <XStack w={300}
|
|
5
|
-
"mappings": "AAAA;AACA;AAEO,sBAAsB;AAC3B,SACE,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KAChC,oCAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,oCAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,oCAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,oCAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,CAC7B;AAEJ;AAEA,yBAAyB,OAA6B;AACpD,SACE,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAK,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Label, Separator, SizeTokens, Switch, XStack, YStack } from 'tamagui'\n\nexport function SwitchDemo() {\n return (\n <YStack w={300} ai=\"center\" space=\"$3\">\n <SwitchWithLabel size=\"$2\" />\n <SwitchWithLabel size=\"$3\" />\n <SwitchWithLabel size=\"$4\" />\n <SwitchWithLabel size=\"$5\" />\n </YStack>\n )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n return (\n <XStack w={300} ai=\"center\" space=\"$4\">\n <Label pr=\"$0\" miw={200} jc=\"flex-end\" size={props.size} htmlFor=\"switch-1\">\n Dark mode\n </Label>\n <Separator mih={20} vertical />\n <Switch id=\"switch-1\" size={props.size}>\n <Switch.Thumb animation=\"bouncy\" />\n </Switch>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AACA;AAEO,sBAAsB;AAC3B,SACE,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KAChC,oCAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,oCAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,oCAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,GAC3B,oCAAC;AAAA,IAAgB,MAAK;AAAA,GAAK,CAC7B;AAEJ;AAEA,yBAAyB,OAA6B;AACpD,SACE,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KAChC,oCAAC;AAAA,IAAM,IAAG;AAAA,IAAK,KAAK;AAAA,IAAK,IAAG;AAAA,IAAW,MAAM,MAAM;AAAA,IAAM,SAAQ;AAAA,KAAW,WAE5E,GACA,oCAAC;AAAA,IAAU,KAAK;AAAA,IAAI,UAAQ;AAAA,GAAC,GAC7B,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAW,MAAM,MAAM;AAAA,KAChC,oCAAC,OAAO,OAAP;AAAA,IAAa,WAAU;AAAA,GAAS,CACnC,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,7 +21,7 @@ function AnimationsPresenceDemo() {
|
|
|
21
21
|
const enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft";
|
|
22
22
|
const exitVariant = direction === 1 ? "isLeft" : "isRight";
|
|
23
23
|
return <XStack ov="hidden" bc="#000" pos="relative" h={300} w="100%" ai="center">
|
|
24
|
-
<AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}><YStackEnterable key={page} animation="bouncy" fullscreen x={0} o={1}><Image src={images[imageIndex]} width={
|
|
24
|
+
<AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}><YStackEnterable key={page} animation="bouncy" fullscreen x={0} o={1}><Image src={images[imageIndex]} width={780} height={300} /></YStackEnterable></AnimatePresence>
|
|
25
25
|
<Button accessibilityLabel="Carousel left" icon={ArrowLeft} size="$5" pos="absolute" l="$4" circular elevate onPress={() => paginate(-1)} />
|
|
26
26
|
<Button accessibilityLabel="Carousel right" icon={ArrowRight} size="$5" pos="absolute" r="$4" circular elevate onPress={() => paginate(1)} />
|
|
27
27
|
</XStack>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AnimationsPresenceDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n variants: {\n isLeft: { true: { x: -300, opacity: 0 } },\n isRight: { true: { x: 300, opacity: 0 } },\n },\n})\n\nexport function AnimationsPresenceDemo() {\n const [[page, direction], setPage] = useState([0, 0])\n\n const imageIndex = wrap(0, images.length, page)\n\n const paginate = (newDirection: number) => {\n setPage([page + newDirection, newDirection])\n }\n\n const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n return (\n <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n <Image src={images[imageIndex]} width={
|
|
4
|
+
"sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n variants: {\n isLeft: { true: { x: -300, opacity: 0 } },\n isRight: { true: { x: 300, opacity: 0 } },\n },\n})\n\nexport function AnimationsPresenceDemo() {\n const [[page, direction], setPage] = useState([0, 0])\n\n const imageIndex = wrap(0, images.length, page)\n\n const paginate = (newDirection: number) => {\n setPage([page + newDirection, newDirection])\n }\n\n const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n return (\n <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n <Image src={images[imageIndex]} width={780} height={300} />\n </YStackEnterable>\n </AnimatePresence>\n\n <Button\n accessibilityLabel=\"Carousel left\"\n icon={ArrowLeft}\n size=\"$5\"\n pos=\"absolute\"\n l=\"$4\"\n circular\n elevate\n onPress={() => paginate(-1)}\n />\n <Button\n accessibilityLabel=\"Carousel right\"\n icon={ArrowRight}\n size=\"$5\"\n pos=\"absolute\"\n r=\"$4\"\n circular\n elevate\n onPress={() => paginate(1)}\n />\n </XStack>\n )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n const rangeSize = max - min\n return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
|
|
5
5
|
"mappings": "AAGA;AACA;AAEA;AACA;AAGA;AAEA;AAEA;AAEO,MAAM,SAAS,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,GAAG;AAEzD,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,kCAAkC;AACvC,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,IAAI,WAAW,GAAG,KAAK,EAAE,OAAO,GAAG;AAAA,IAC/D,CAAC,gBAAgB,cAAc,cAAc,aAAa,aACxD,CAAC,gBAAgB,KAAK,MAAM,UAAU,SAAS,WAAW,GAAG,GAAG,GAAG,GACjE,CAAC,MAAM,KAAK,OAAO,aAAa,OAAO,KAAK,QAAQ,KAAK,EAC3D,EAFC,gBAGH,EAJC;AAAA,IAMD,CAAC,OACC,mBAAmB,gBACnB,MAAM,WACN,KAAK,KACL,IAAI,WACJ,EAAE,KACF,SACA,QACA,SAAS,MAAM,SAAS,EAAE,GAC5B;AAAA,IACA,CAAC,OACC,mBAAmB,iBACnB,MAAM,YACN,KAAK,KACL,IAAI,WACJ,EAAE,KACF,SACA,QACA,SAAS,MAAM,SAAS,CAAC,GAC3B;AAAA,EACF,EA3BC;AA6BL;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/PopoverDemo.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChevronDown, ChevronLeft, ChevronRight } from "@tamagui/feather-icons";
|
|
2
|
-
import { Button, Input, Label, Popover, XStack
|
|
2
|
+
import { Button, Input, Label, Popover, XStack } from "tamagui";
|
|
3
3
|
function PopoverDemo() {
|
|
4
4
|
return <XStack space="$2">
|
|
5
5
|
<Demo placement="left" Icon={ChevronLeft} />
|
|
@@ -8,14 +8,14 @@ function PopoverDemo() {
|
|
|
8
8
|
</XStack>;
|
|
9
9
|
}
|
|
10
10
|
function Demo({ Icon, ...props }) {
|
|
11
|
-
return <Popover
|
|
11
|
+
return <Popover size="$5" {...props}>
|
|
12
12
|
<Popover.Trigger><Button icon={Icon} /></Popover.Trigger>
|
|
13
|
-
<Popover.Content
|
|
13
|
+
<Popover.Content enterStyle={{ x: 0, y: -10, o: 0 }} exitStyle={{ x: 0, y: -10, o: 0 }} x={0} y={0} o={1} animation="bouncy" elevate>
|
|
14
14
|
<Popover.Arrow />
|
|
15
|
-
<
|
|
15
|
+
<XStack space="$3">
|
|
16
16
|
<Label size="$3" htmlFor="name">Name</Label>
|
|
17
17
|
<Input size="$3" id="name" />
|
|
18
|
-
</XStack
|
|
18
|
+
</XStack>
|
|
19
19
|
</Popover.Content>
|
|
20
20
|
</Popover>;
|
|
21
21
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/PopoverDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport function PopoverDemo() {\n return (\n <XStack space=\"$2\">\n <Demo placement=\"left\" Icon={ChevronLeft} />\n <Demo placement=\"bottom\" Icon={ChevronDown} />\n <Demo placement=\"right\" Icon={ChevronRight} />\n </XStack>\n )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n return (\n <Popover size=\"$5\" {...props}>\n <Popover.Trigger>\n <Button icon={Icon} />\n </Popover.Trigger>\n <Popover.Content\n enterStyle={{ x: 0, y: -10, o: 0 }}\n exitStyle={{ x: 0, y: -10, o: 0 }}\n x={0}\n y={0}\n o={1}\n animation=\"bouncy\"\n elevate\n >\n <Popover.Arrow />\n\n <XStack space=\"$3\">\n <Label size=\"$3\" htmlFor=\"name\">\n Name\n </Label>\n <Input size=\"$3\" id=\"name\" />\n </XStack>\n </Popover.Content>\n </Popover>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AAEA;AAEO,uBAAuB;AAC5B,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa;AAAA,IAC1C,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa;AAAA,IAC5C,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc;AAAA,EAC9C,EAJC;AAML;AAEO,cAAc,EAAE,SAAS,SAAwC;AACtE,SACE,CAAC,QAAQ,KAAK,SAAS;AAAA,IACrB,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAGT,CAAC,QAAQ,QACP,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GAChC,GAAG,GACH,GAAG,GACH,GAAG,GACH,UAAU,SACV;AAAA,MAEA,CAAC,QAAQ,MAAM;AAAA,MAEf,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,MAAM,KAAK,KAAK,QAAQ,OAAO,IAEhC,EAFC;AAAA,QAGD,CAAC,MAAM,KAAK,KAAK,GAAG,OAAO;AAAA,MAC7B,EALC;AAAA,IAMH,EAjBC,QAAQ;AAAA,EAkBX,EAtBC;AAwBL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/StacksDemo.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { XStack, YStack, ZStack } from "tamagui";
|
|
2
2
|
function StacksDemo() {
|
|
3
|
-
return <XStack als="center" space>
|
|
3
|
+
return <XStack maw={250} p="$2" als="center" space>
|
|
4
4
|
<YStack flex={1} space="$2" bw={2} boc="$color" br="$4" p="$2">
|
|
5
5
|
<YStack bc="$color" br="$3" p="$2" />
|
|
6
6
|
<YStack bc="$color" br="$3" p="$2" />
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/StacksDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n return (\n <XStack als=\"center\" space>\n <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </YStack>\n\n <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </XStack>\n\n <ZStack maw={50} mah={85} w={100} flex={1}>\n <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n </ZStack>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,IAAI,SAAS;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n return (\n <XStack maw={250} p=\"$2\" als=\"center\" space>\n <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </YStack>\n\n <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n </XStack>\n\n <ZStack maw={50} mah={85} w={100} flex={1}>\n <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n </ZStack>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,KAAK,KAAK,EAAE,KAAK,IAAI,SAAS;AAAA,IACpC,CAAC,OAAO,MAAM,GAAG,MAAM,KAAK,IAAI,GAAG,IAAI,SAAS,GAAG,KAAK,EAAE;AAAA,MACxD,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrC,EAJC;AAAA,IAMD,CAAC,OAAO,MAAM,GAAG,MAAM,KAAK,IAAI,GAAG,IAAI,SAAS,GAAG,KAAK,EAAE;AAAA,MACxD,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrC,EAJC;AAAA,IAMD,CAAC,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM;AAAA,MACtC,CAAC,OAAO,WAAW,IAAI,GAAG,GAAG,KAAK,EAAE,KAAK;AAAA,MACzC,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,GAAG,KAAK,EAAE,KAAK;AAAA,MACvD,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrE,EAJC;AAAA,EAKH,EAlBC;AAoBL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/SwitchDemo.js
CHANGED
|
@@ -8,7 +8,7 @@ function SwitchDemo() {
|
|
|
8
8
|
</YStack>;
|
|
9
9
|
}
|
|
10
10
|
function SwitchWithLabel(props) {
|
|
11
|
-
return <XStack w={300}
|
|
11
|
+
return <XStack w={300} ai="center" space="$4">
|
|
12
12
|
<Label pr="$0" miw={200} jc="flex-end" size={props.size} htmlFor="switch-1">Dark mode</Label>
|
|
13
13
|
<Separator mih={20} vertical />
|
|
14
14
|
<Switch id="switch-1" size={props.size}><Switch.Thumb animation="bouncy" /></Switch>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SwitchDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Label, Separator, SizeTokens, Switch, XStack, YStack } from 'tamagui'\n\nexport function SwitchDemo() {\n return (\n <YStack w={300} ai=\"center\" space=\"$3\">\n <SwitchWithLabel size=\"$2\" />\n <SwitchWithLabel size=\"$3\" />\n <SwitchWithLabel size=\"$4\" />\n <SwitchWithLabel size=\"$5\" />\n </YStack>\n )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n return (\n <XStack w={300}
|
|
5
|
-
"mappings": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,EAC7B,EALC;AAOL;AAEA,yBAAyB,OAA6B;AACpD,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Label, Separator, SizeTokens, Switch, XStack, YStack } from 'tamagui'\n\nexport function SwitchDemo() {\n return (\n <YStack w={300} ai=\"center\" space=\"$3\">\n <SwitchWithLabel size=\"$2\" />\n <SwitchWithLabel size=\"$3\" />\n <SwitchWithLabel size=\"$4\" />\n <SwitchWithLabel size=\"$5\" />\n </YStack>\n )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n return (\n <XStack w={300} ai=\"center\" space=\"$4\">\n <Label pr=\"$0\" miw={200} jc=\"flex-end\" size={props.size} htmlFor=\"switch-1\">\n Dark mode\n </Label>\n <Separator mih={20} vertical />\n <Switch id=\"switch-1\" size={props.size}>\n <Switch.Thumb animation=\"bouncy\" />\n </Switch>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,EAC7B,EALC;AAOL;AAEA,yBAAyB,OAA6B;AACpD,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,MAAM,GAAG,KAAK,KAAK,KAAK,GAAG,WAAW,MAAM,MAAM,MAAM,QAAQ,WAAW,SAE5E,EAFC;AAAA,IAGD,CAAC,UAAU,KAAK,IAAI,SAAS;AAAA,IAC7B,CAAC,OAAO,GAAG,WAAW,MAAM,MAAM,MAChC,CAAC,OAAO,MAAM,UAAU,SAAS,EACnC,EAFC;AAAA,EAGH,EARC;AAUL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/demos",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.95",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -17,16 +17,16 @@
|
|
|
17
17
|
"watch": "tamagui-build --watch"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@tamagui/config-base": "^1.0.1-beta.
|
|
21
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
22
|
-
"tamagui": "^1.0.1-beta.
|
|
20
|
+
"@tamagui/config-base": "^1.0.1-beta.95",
|
|
21
|
+
"@tamagui/core": "^1.0.1-beta.95",
|
|
22
|
+
"tamagui": "^1.0.1-beta.95"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": "*",
|
|
26
26
|
"react-dom": "*"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
29
|
+
"@tamagui/build": "^1.0.1-beta.95",
|
|
30
30
|
"react": "*",
|
|
31
31
|
"react-dom": "*"
|
|
32
32
|
},
|
|
@@ -39,7 +39,7 @@ export function AnimationsPresenceDemo() {
|
|
|
39
39
|
<XStack ov="hidden" bc="#000" pos="relative" h={300} w="100%" ai="center">
|
|
40
40
|
<AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>
|
|
41
41
|
<YStackEnterable key={page} animation="bouncy" fullscreen x={0} o={1}>
|
|
42
|
-
<Image src={images[imageIndex]} width={
|
|
42
|
+
<Image src={images[imageIndex]} width={780} height={300} />
|
|
43
43
|
</YStackEnterable>
|
|
44
44
|
</AnimatePresence>
|
|
45
45
|
|
package/src/PopoverDemo.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'
|
|
2
|
+
import React from 'react'
|
|
2
3
|
import { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'
|
|
3
4
|
|
|
4
5
|
export function PopoverDemo() {
|
|
@@ -13,16 +14,13 @@ export function PopoverDemo() {
|
|
|
13
14
|
|
|
14
15
|
export function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {
|
|
15
16
|
return (
|
|
16
|
-
<Popover
|
|
17
|
+
<Popover size="$5" {...props}>
|
|
17
18
|
<Popover.Trigger>
|
|
18
19
|
<Button icon={Icon} />
|
|
19
20
|
</Popover.Trigger>
|
|
20
21
|
<Popover.Content
|
|
21
|
-
elevation="$4"
|
|
22
22
|
enterStyle={{ x: 0, y: -10, o: 0 }}
|
|
23
23
|
exitStyle={{ x: 0, y: -10, o: 0 }}
|
|
24
|
-
p="$2"
|
|
25
|
-
br="$4"
|
|
26
24
|
x={0}
|
|
27
25
|
y={0}
|
|
28
26
|
o={1}
|
|
@@ -31,14 +29,12 @@ export function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {
|
|
|
31
29
|
>
|
|
32
30
|
<Popover.Arrow />
|
|
33
31
|
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
</XStack>
|
|
41
|
-
</YStack>
|
|
32
|
+
<XStack space="$3">
|
|
33
|
+
<Label size="$3" htmlFor="name">
|
|
34
|
+
Name
|
|
35
|
+
</Label>
|
|
36
|
+
<Input size="$3" id="name" />
|
|
37
|
+
</XStack>
|
|
42
38
|
</Popover.Content>
|
|
43
39
|
</Popover>
|
|
44
40
|
)
|
package/src/StacksDemo.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import { XStack, YStack, ZStack } from 'tamagui'
|
|
|
3
3
|
|
|
4
4
|
export function StacksDemo() {
|
|
5
5
|
return (
|
|
6
|
-
<XStack als="center" space>
|
|
6
|
+
<XStack maw={250} p="$2" als="center" space>
|
|
7
7
|
<YStack flex={1} space="$2" bw={2} boc="$color" br="$4" p="$2">
|
|
8
8
|
<YStack bc="$color" br="$3" p="$2" />
|
|
9
9
|
<YStack bc="$color" br="$3" p="$2" />
|
package/src/SwitchDemo.tsx
CHANGED
|
@@ -14,7 +14,7 @@ export function SwitchDemo() {
|
|
|
14
14
|
|
|
15
15
|
function SwitchWithLabel(props: { size: SizeTokens }) {
|
|
16
16
|
return (
|
|
17
|
-
<XStack w={300}
|
|
17
|
+
<XStack w={300} ai="center" space="$4">
|
|
18
18
|
<Label pr="$0" miw={200} jc="flex-end" size={props.size} htmlFor="switch-1">
|
|
19
19
|
Dark mode
|
|
20
20
|
</Label>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverDemo.d.ts","sourceRoot":"","sources":["../src/PopoverDemo.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"PopoverDemo.d.ts","sourceRoot":"","sources":["../src/PopoverDemo.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAiC,YAAY,EAAkB,MAAM,SAAS,CAAA;AAErF,wBAAgB,WAAW,gBAQ1B;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,eA0BrE"}
|