@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/AnimationsHoverDemo.mjs

@@ -1,24 +1,19 @@
 import { LogoIcon } from "@tamagui/logo";
 import { Square } from "tamagui";
 import { jsx } from "react/jsx-runtime";
+
 function AnimationsHoverDemo() {
-  return /* @__PURE__ */jsx(Square, {
-    borderColor: "$borderColor",
-    transition: "bouncy",
-    elevation: "$4",
-    bg: "$color9",
-    size: 104,
-    rounded: "$9",
-    hoverStyle: {
-      scale: 1.2
-    },
-    pressStyle: {
-      scale: 0.9
-    },
-    children: /* @__PURE__ */jsx(LogoIcon, {
-      downscale: 0.75
-    })
-  });
+	return /* @__PURE__ */ jsx(Square, {
+		borderColor: "border-color",
+		transition: "bouncy",
+		bg: "color9",
+		rounded: "9",
+		scale: "hover:1.2 press:0.9",
+		elevation: "4",
+		size: 104,
+		children: /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	});
 }
+
 export { AnimationsHoverDemo };
 //# sourceMappingURL=AnimationsHoverDemo.mjs.map

package/dist/esm/AnimationsHoverDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["LogoIcon","Square","jsx","AnimationsHoverDemo","borderColor","transition","elevation","bg","size","rounded","hoverStyle","scale","pressStyle","children","downscale"],"sources":["../../src/AnimationsHoverDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,QAAgB;AACzB,SAASC,MAAA,QAAc;AAkBjB,SAAAC,GAAA;AAhBC,SAASC,oBAAA,EAAsB;EACpC,OACE,eAAAD,GAAA,CAACD,MAAA;IACCG,WAAA,EAAY;IACZC,UAAA,EAAW;IACXC,SAAA,EAAU;IACVC,EAAA,EAAG;IACHC,IAAA,EAAM;IACNC,OAAA,EAAQ;IACRC,UAAA,EAAY;MACVC,KAAA,EAAO;IACT;IACAC,UAAA,EAAY;MACVD,KAAA,EAAO;IACT;IAEAE,QAAA,iBAAAX,GAAA,CAACF,QAAA;MAASc,SAAA,EAAW;IAAA,CAAM;EAAA,CAC7B;AAEJ","ignoreList":[]}
+{"version":3,"file":"AnimationsHoverDemo.js","names":[],"sources":["esm/AnimationsHoverDemo.js"],"sourcesContent":["import { LogoIcon } from \"@tamagui/logo\";\nimport { Square } from \"tamagui\";\nimport { jsx } from \"react/jsx-runtime\";\nfunction AnimationsHoverDemo() {\n  return /* @__PURE__ */ jsx(\n    Square,\n    {\n      borderColor: \"border-color\",\n      transition: \"bouncy\",\n      bg: \"color9\",\n      rounded: \"9\",\n      scale: \"hover:1.2 press:0.9\",\n      elevation: \"4\",\n      size: 104,\n      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })\n    }\n  );\n}\nexport {\n  AnimationsHoverDemo\n};\n//# sourceMappingURL=AnimationsHoverDemo.js.map\n"],"mappings":";;;;;AAGA,SAAS,sBAAsB;CAC7B,OAAuB,oBACrB,QACA;EACE,aAAa;EACb,YAAY;EACZ,IAAI;EACJ,SAAS;EACT,OAAO;EACP,WAAW;EACX,MAAM;EACN,UAA0B,oBAAI,UAAU,EAAE,WAAW,IAAK,CAAC;CAC7D,CACF;AACF"}

package/dist/esm/AnimationsHoverDemo.native.js

@@ -1,24 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { LogoIcon } from "@tamagui/logo";
 import { Square } from "tamagui";
+
 function AnimationsHoverDemo() {
-  return /* @__PURE__ */_jsx(Square, {
-    borderColor: "$borderColor",
-    transition: "bouncy",
-    elevation: "$4",
-    bg: "$color9",
-    size: 104,
-    rounded: "$9",
-    hoverStyle: {
-      scale: 1.2
-    },
-    pressStyle: {
-      scale: 0.9
-    },
-    children: /* @__PURE__ */_jsx(LogoIcon, {
-      downscale: 0.75
-    })
-  });
+	return /* @__PURE__ */ jsx(Square, {
+		borderColor: "border-color",
+		transition: "bouncy",
+		bg: "color9",
+		rounded: "9",
+		scale: "hover:1.2 press:0.9",
+		elevation: "4",
+		size: 104,
+		children: /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	});
 }
+
 export { AnimationsHoverDemo };
 //# sourceMappingURL=AnimationsHoverDemo.native.js.map

package/dist/esm/AnimationsHoverDemo.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","LogoIcon","Square","AnimationsHoverDemo","borderColor","transition","elevation","bg","size","rounded","hoverStyle","scale","pressStyle","children","downscale"],"sources":["../../src/AnimationsHoverDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAgB;AACzB,SAASC,QAAA,QAAc;AAkBjB,SAAAC,MAAA;AAhBC,SAASC,oBAAA,EAAsB;EACpC,OACE,eAAAH,IAAA,CAAAE,MAAA;IAACE,WAAA;IAAAC,UAAA;IAAAC,SACC,MAAY;IAAAC,EACZ;IAAWC,IACX;IAAUC,OACP;IAAAC,UACG;MACNC,KAAA;IAAQ;IACIC,UACV,EAAO;MACTD,KAAA;IAAA;IACYE,QACV,iBAAOb,IAAA,CAAAC,QAAA;MACTa,SAAA;IAAA;EAE2B;AAAA;AAGjC,S","ignoreList":[]}
+{"version":3,"file":"AnimationsHoverDemo.native.js","names":[],"sources":["esm/AnimationsHoverDemo.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { LogoIcon } from \"@tamagui/logo\";\nimport { Square } from \"tamagui\";\nfunction AnimationsHoverDemo() {\n  return /* @__PURE__ */ _jsx(Square, {\n    borderColor: \"border-color\",\n    transition: \"bouncy\",\n    bg: \"color9\",\n    rounded: \"9\",\n    scale: \"hover:1.2 press:0.9\",\n    elevation: \"4\",\n    size: 104,\n    children: /* @__PURE__ */ _jsx(LogoIcon, {\n      downscale: 0.75\n    })\n  });\n}\nexport {\n  AnimationsHoverDemo\n};\n//# sourceMappingURL=AnimationsHoverDemo.js.map\n"],"mappings":";;;;;AAGA,SAAS,sBAAsB;CAC7B,OAAuB,oBAAK,QAAQ;EAClC,aAAa;EACb,YAAY;EACZ,IAAI;EACJ,SAAS;EACT,OAAO;EACP,WAAW;EACX,MAAM;EACN,UAA0B,oBAAK,UAAU,EACvC,WAAW,IACb,CAAC;CACH,CAAC;AACH"}

package/dist/esm/AnimationsPresenceDemo.mjs

@@ -2,87 +2,85 @@ import React from "react";
 import { AnimatePresence } from "@tamagui/animate-presence";
 import { ArrowLeft, ArrowRight } from "@tamagui/lucide-icons-2";
 import { Button, Image, XStack, YStack, styled } from "tamagui";
-import photo1 from "../../public/photo1.jpg";
-import photo2 from "../../public/photo2.jpg";
-import photo3 from "../../public/photo3.jpg";
+import photo1 from "@tamagui/demos/photo/photo1";
+import photo2 from "@tamagui/demos/photo/photo2";
+import photo3 from "@tamagui/demos/photo/photo3";
 import { jsx, jsxs } from "react/jsx-runtime";
-const images = [photo1, photo2, photo3].map(x => x.src || x);
+
+const images = [
+	photo1,
+	photo2,
+	photo3
+].map((x) => x.src || x);
 const GalleryItem = styled(YStack, {
-  z: 1,
-  x: 0,
-  opacity: 1,
-  fullscreen: true,
-  variants: {
-    // 1 = right, 0 = nowhere, -1 = left
-    going: {
-      ":number": going => ({
-        enterStyle: {
-          x: going > 0 ? 1e3 : -1e3,
-          opacity: 0
-        },
-        exitStyle: {
-          zIndex: 0,
-          x: going < 0 ? 1e3 : -1e3,
-          opacity: 0
-        }
-      })
-    }
-  }
+	z: 1,
+	x: 0,
+	opacity: 1,
+	position: "absolute",
+	inset: 0,
+	variants: { going: { number: (going) => ({
+		x: `enter:${going > 0 ? 1e3 : -1e3}px exit:${going < 0 ? 1e3 : -1e3}px`,
+		opacity: "enter:0 exit:0",
+		zIndex: "exit:0"
+	}) } }
 });
 const wrap = (min, max, v) => {
-  const rangeSize = max - min;
-  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+	const rangeSize = max - min;
+	return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
 };
 function AnimationsPresenceDemo() {
-  const [[page, going], setPage] = React.useState([0, 0]);
-  const imageIndex = wrap(0, images.length, page);
-  const paginate = going2 => {
-    setPage([page + going2, going2]);
-  };
-  return /* @__PURE__ */jsxs(XStack, {
-    overflow: "hidden",
-    bg: "#000",
-    position: "relative",
-    height: 300,
-    width: "100%",
-    items: "center",
-    children: [/* @__PURE__ */jsx(AnimatePresence, {
-      initial: false,
-      custom: {
-        going
-      },
-      children: /* @__PURE__ */jsx(GalleryItem, {
-        transition: "slow",
-        going,
-        children: /* @__PURE__ */jsx(Image, {
-          src: images[imageIndex],
-          width: 820,
-          height: 300,
-          objectFit: "cover"
-        })
-      }, page)
-    }), /* @__PURE__ */jsx(Button, {
-      "aria-label": "Carousel left",
-      icon: ArrowLeft,
-      size: "$5",
-      position: "absolute",
-      l: "$4",
-      circular: true,
-      onPress: () => paginate(-1),
-      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
-      z: 100
-    }), /* @__PURE__ */jsx(Button, {
-      "aria-label": "Carousel right",
-      icon: ArrowRight,
-      size: "$5",
-      position: "absolute",
-      r: "$4",
-      circular: true,
-      onPress: () => paginate(1),
-      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
-      z: 100
-    })]
-  });
+	const [[page, going], setPage] = React.useState([0, 0]);
+	const imageIndex = wrap(0, images.length, page);
+	const paginate = (going2) => {
+		setPage([page + going2, going2]);
+	};
+	return /* @__PURE__ */ jsxs(XStack, {
+		overflow: "hidden",
+		bg: "#000",
+		position: "relative",
+		height: 300,
+		width: "100%",
+		items: "center",
+		children: [
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				custom: { going },
+				children: /* @__PURE__ */ jsx(GalleryItem, {
+					transition: "slow",
+					going,
+					children: /* @__PURE__ */ jsx(Image, {
+						src: images[imageIndex],
+						width: 820,
+						height: 300,
+						objectFit: "cover"
+					})
+				}, page)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Carousel left",
+				icon: ArrowLeft,
+				size: "5",
+				position: "absolute",
+				l: "4",
+				boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+				z: 100,
+				circular: true,
+				onPress: () => paginate(-1)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Carousel right",
+				icon: ArrowRight,
+				size: "5",
+				position: "absolute",
+				r: "4",
+				boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+				z: 100,
+				circular: true,
+				onPress: () => paginate(1)
+			})
+		]
+	});
 }
+
 export { AnimationsPresenceDemo, images };
 //# sourceMappingURL=AnimationsPresenceDemo.mjs.map

package/dist/esm/AnimationsPresenceDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["React","AnimatePresence","ArrowLeft","ArrowRight","Button","Image","XStack","YStack","styled","photo1","photo2","photo3","jsx","jsxs","images","map","x","src","GalleryItem","z","opacity","fullscreen","variants","going","enterStyle","exitStyle","zIndex","wrap","min","max","v","rangeSize","AnimationsPresenceDemo","page","setPage","useState","imageIndex","length","paginate","going2","overflow","bg","position","height","width","items","children","initial","custom","transition","objectFit","icon","size","l","circular","onPress","boxShadow","r"],"sources":["../../src/AnimationsPresenceDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AnimationsPresenceDemo.js","names":[],"sources":["esm/AnimationsPresenceDemo.js"],"sourcesContent":["import React from \"react\";\nimport { AnimatePresence } from \"@tamagui/animate-presence\";\nimport { ArrowLeft, ArrowRight } from \"@tamagui/lucide-icons-2\";\nimport { Button, Image, XStack, YStack, styled } from \"tamagui\";\nimport photo1 from \"@tamagui/demos/photo/photo1\";\nimport photo2 from \"@tamagui/demos/photo/photo2\";\nimport photo3 from \"@tamagui/demos/photo/photo3\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst images = [photo1, photo2, photo3].map((x) => x.src || x);\nconst GalleryItem = styled(YStack, {\n  z: 1,\n  x: 0,\n  opacity: 1,\n  position: \"absolute\",\n  inset: 0,\n  variants: {\n    // 1 = right, 0 = nowhere, -1 = left\n    going: {\n      number: (going) => ({\n        x: `enter:${going > 0 ? 1e3 : -1e3}px exit:${going < 0 ? 1e3 : -1e3}px`,\n        opacity: \"enter:0 exit:0\",\n        zIndex: \"exit:0\"\n      })\n    }\n  }\n});\nconst wrap = (min, max, v) => {\n  const rangeSize = max - min;\n  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;\n};\nfunction AnimationsPresenceDemo() {\n  const [[page, going], setPage] = React.useState([0, 0]);\n  const imageIndex = wrap(0, images.length, page);\n  const paginate = (going2) => {\n    setPage([page + going2, going2]);\n  };\n  return /* @__PURE__ */ jsxs(\n    XStack,\n    {\n      overflow: \"hidden\",\n      bg: \"#000\",\n      position: \"relative\",\n      height: 300,\n      width: \"100%\",\n      items: \"center\",\n      children: [\n        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: { going }, children: /* @__PURE__ */ jsx(GalleryItem, { transition: \"slow\", going, children: /* @__PURE__ */ jsx(Image, { src: images[imageIndex], width: 820, height: 300, objectFit: \"cover\" }) }, page) }),\n        /* @__PURE__ */ jsx(\n          Button,\n          {\n            \"aria-label\": \"Carousel left\",\n            icon: ArrowLeft,\n            size: \"5\",\n            position: \"absolute\",\n            l: \"4\",\n            boxShadow: \"0 0 10px rgba(0,0,0,0.5)\",\n            z: 100,\n            circular: true,\n            onPress: () => paginate(-1)\n          }\n        ),\n        /* @__PURE__ */ jsx(\n          Button,\n          {\n            \"aria-label\": \"Carousel right\",\n            icon: ArrowRight,\n            size: \"5\",\n            position: \"absolute\",\n            r: \"4\",\n            boxShadow: \"0 0 10px rgba(0,0,0,0.5)\",\n            z: 100,\n            circular: true,\n            onPress: () => paginate(1)\n          }\n        )\n      ]\n    }\n  );\n}\nexport {\n  AnimationsPresenceDemo,\n  images\n};\n//# sourceMappingURL=AnimationsPresenceDemo.js.map\n"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAS;CAAC;CAAQ;CAAQ;AAAM,EAAE,KAAK,MAAM,EAAE,OAAO,CAAC;AAC7D,MAAM,cAAc,OAAO,QAAQ;CACjC,GAAG;CACH,GAAG;CACH,SAAS;CACT,UAAU;CACV,OAAO;CACP,UAAU,EAER,OAAO,EACL,SAAS,WAAW;EAClB,GAAG,SAAS,QAAQ,IAAI,MAAM,CAAC,IAAI,UAAU,QAAQ,IAAI,MAAM,CAAC,IAAI;EACpE,SAAS;EACT,QAAQ;CACV,GACF,EACF;AACF,CAAC;AACD,MAAM,QAAQ,KAAK,KAAK,MAAM;CAC5B,MAAM,YAAY,MAAM;CACxB,SAAS,IAAI,OAAO,YAAY,aAAa,YAAY;AAC3D;AACA,SAAS,yBAAyB;CAChC,MAAM,CAAC,CAAC,MAAM,QAAQ,WAAW,MAAM,SAAS,CAAC,GAAG,CAAC,CAAC;CACtD,MAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;CAC9C,MAAM,YAAY,WAAW;EAC3B,QAAQ,CAAC,OAAO,QAAQ,MAAM,CAAC;CACjC;CACA,OAAuB,qBACrB,QACA;EACE,UAAU;EACV,IAAI;EACJ,UAAU;EACV,QAAQ;EACR,OAAO;EACP,OAAO;EACP,UAAU;GACQ,oBAAI,iBAAiB;IAAE,SAAS;IAAO,QAAQ,EAAE,MAAM;IAAG,UAA0B,oBAAI,aAAa;KAAE,YAAY;KAAQ;KAAO,UAA0B,oBAAI,OAAO;MAAE,KAAK,OAAO;MAAa,OAAO;MAAK,QAAQ;MAAK,WAAW;KAAQ,CAAC;IAAE,GAAG,IAAI;GAAE,CAAC;GAC3P,oBACd,QACA;IACE,cAAc;IACd,MAAM;IACN,MAAM;IACN,UAAU;IACV,GAAG;IACH,WAAW;IACX,GAAG;IACH,UAAU;IACV,eAAe,SAAS,CAAC,CAAC;GAC5B,CACF;GACgB,oBACd,QACA;IACE,cAAc;IACd,MAAM;IACN,MAAM;IACN,UAAU;IACV,GAAG;IACH,WAAW;IACX,GAAG;IACH,UAAU;IACV,eAAe,SAAS,CAAC;GAC3B,CACF;EACF;CACF,CACF;AACF"}

package/dist/esm/AnimationsPresenceDemo.native.js

@@ -1,96 +1,94 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { AnimatePresence } from "@tamagui/animate-presence";
 import { ArrowLeft, ArrowRight } from "@tamagui/lucide-icons-2";
 import { Button, Image, XStack, YStack, styled } from "tamagui";
-import photo1 from "../../public/photo1.jpg";
-import photo2 from "../../public/photo2.jpg";
-import photo3 from "../../public/photo3.jpg";
-var images = [photo1, photo2, photo3].map(function (x) {
-  return x.src || x;
+import photo1 from "@tamagui/demos/photo/photo1";
+import photo2 from "@tamagui/demos/photo/photo2";
+import photo3 from "@tamagui/demos/photo/photo3";
+
+var images = [
+	photo1,
+	photo2,
+	photo3
+].map(function(x) {
+	return x.src || x;
 });
 var GalleryItem = styled(YStack, {
-  z: 1,
-  x: 0,
-  opacity: 1,
-  fullscreen: true,
-  variants: {
-    // 1 = right, 0 = nowhere, -1 = left
-    going: {
-      ":number": function (going) {
-        return {
-          enterStyle: {
-            x: going > 0 ? 1e3 : -1e3,
-            opacity: 0
-          },
-          exitStyle: {
-            zIndex: 0,
-            x: going < 0 ? 1e3 : -1e3,
-            opacity: 0
-          }
-        };
-      }
-    }
-  }
+	z: 1,
+	x: 0,
+	opacity: 1,
+	position: "absolute",
+	inset: 0,
+	variants: { going: { number: function(going) {
+		return {
+			x: `enter:${going > 0 ? 1e3 : -1e3}px exit:${going < 0 ? 1e3 : -1e3}px`,
+			opacity: "enter:0 exit:0",
+			zIndex: "exit:0"
+		};
+	} } }
 });
-var wrap = function (min, max, v) {
-  var rangeSize = max - min;
-  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+var wrap = function(min, max, v) {
+	var rangeSize = max - min;
+	return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
 };
 function AnimationsPresenceDemo() {
-  var [[page, going], setPage] = React.useState([0, 0]);
-  var imageIndex = wrap(0, images.length, page);
-  var paginate = function (going2) {
-    setPage([page + going2, going2]);
-  };
-  return /* @__PURE__ */_jsxs(XStack, {
-    overflow: "hidden",
-    bg: "#000",
-    position: "relative",
-    height: 300,
-    width: "100%",
-    items: "center",
-    children: [/* @__PURE__ */_jsx(AnimatePresence, {
-      initial: false,
-      custom: {
-        going
-      },
-      children: /* @__PURE__ */_jsx(GalleryItem, {
-        transition: "slow",
-        going,
-        children: /* @__PURE__ */_jsx(Image, {
-          src: images[imageIndex],
-          width: 820,
-          height: 300,
-          objectFit: "cover"
-        })
-      }, page)
-    }), /* @__PURE__ */_jsx(Button, {
-      "aria-label": "Carousel left",
-      icon: ArrowLeft,
-      size: "$5",
-      position: "absolute",
-      l: "$4",
-      circular: true,
-      onPress: function () {
-        return paginate(-1);
-      },
-      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
-      z: 100
-    }), /* @__PURE__ */_jsx(Button, {
-      "aria-label": "Carousel right",
-      icon: ArrowRight,
-      size: "$5",
-      position: "absolute",
-      r: "$4",
-      circular: true,
-      onPress: function () {
-        return paginate(1);
-      },
-      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
-      z: 100
-    })]
-  });
+	var [[page, going], setPage] = React.useState([0, 0]);
+	var imageIndex = wrap(0, images.length, page);
+	var paginate = function(going2) {
+		setPage([page + going2, going2]);
+	};
+	return /* @__PURE__ */ jsxs(XStack, {
+		overflow: "hidden",
+		bg: "#000",
+		position: "relative",
+		height: 300,
+		width: "100%",
+		items: "center",
+		children: [
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				custom: { going },
+				children: /* @__PURE__ */ jsx(GalleryItem, {
+					transition: "slow",
+					going,
+					children: /* @__PURE__ */ jsx(Image, {
+						src: images[imageIndex],
+						width: 820,
+						height: 300,
+						objectFit: "cover"
+					})
+				}, page)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Carousel left",
+				icon: ArrowLeft,
+				size: "5",
+				position: "absolute",
+				l: "4",
+				boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+				z: 100,
+				circular: true,
+				onPress: function() {
+					return paginate(-1);
+				}
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Carousel right",
+				icon: ArrowRight,
+				size: "5",
+				position: "absolute",
+				r: "4",
+				boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+				z: 100,
+				circular: true,
+				onPress: function() {
+					return paginate(1);
+				}
+			})
+		]
+	});
 }
+
 export { AnimationsPresenceDemo, images };
 //# sourceMappingURL=AnimationsPresenceDemo.native.js.map

package/dist/esm/AnimationsPresenceDemo.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","AnimatePresence","ArrowLeft","ArrowRight","Button","Image","XStack","YStack","styled","photo1","photo2","photo3","images","map","x","src","GalleryItem","z","opacity","fullscreen","variants","going",":number","enterStyle","exitStyle","zIndex","wrap","max","v","rangeSize","min","AnimationsPresenceDemo","page","setPage","useState","imageIndex","length","paginate","going2","overflow","bg","position","height","width","items","children","initial","custom","transition","objectFit","icon","size"],"sources":["../../src/AnimationsPresenceDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA;AAClB,OAAAC,KAAS;AACT,SAASC,eAAW,mCAAkB;AAEtC,SAASC,SAAQ,EAAAC,UAAO,QAAQ,yBAAsB;AAGtD,SAAOC,MAAA,EAAAC,KAAY,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAEnB,OAAOC,MAAA,MAAY;AAEnB,OAAOC,MAAA,MAAY;AA0Cf,OAAAC,MAUM,MAVN;AAxCG,IAAAC,MAAM,IAEbH,MAAM,EACJC,MAAG,EACHC,MAAG,EACHE,GAAA,WAASC,CAAA;EACT,OAAAA,CAAA,CAAAC,GAAY,IAAAD,CAAA;AAAA,EAEZ;AAAU,IAAAE,WAAA,GAAAR,MAAA,CAAAD,MAAA;EAAAU,CAAA,EAER;EAAOH,CAAA,GACL;EAAuBI,OACrB;EAAYC,UACV,EAAG;EAAmBC,QACtB;IAAS;IACXC,KACA;MAAW,SACT,WAAAC,CAAQD,KAAA;QAAA,OACL;UACHE,UAAS;YACXT,CAAA,EAAAO,KAAA;YACFH,OAAA;UACF;UACFM,SAAA;YACDC,MAAA;YAEKX,CAAO,EAACO,KAAa,IAAa,MAAc;YAC9CH,OAAA,EAAY;UAClB;QACF;MAEO;IACL;EAEA;AACA;AACE,IAAAQ,IAAA,YAAAA,CAAgBL,GAAA,EAAAM,GAAO,EAAAC,CAAA;EACzB,IAAAC,SAAA,GAAAF,GAAA,GAAAG,GAAA;EAEA,OACE,EAAAF,CAAA,GAAAE,GAAA,IAAAD,SAAA,GAAAA,SAAA,IAAAA,SAAA,GAAAC,GAAA;AAAA;AAAC,SAAAC,uBAAA;EAAA,IACC,EAAAC,IAAA,EAAAX,KAAS,GAAAY,OAAA,IAAAjC,KAAA,CAAAkC,QAAA,KACN,EACM;EACD,IACRC,UAAM,GAAAT,IAAA,IAAAd,MAAA,CAAAwB,MAAA,EAAAJ,IAAA;EAAA,IACNK,QAAM,YAAAA,CAAAC,MAAA;IAAAL,OAEN,EAAAD,IAAA,GAAAM,MAAA,EAIAA,MAEA;EAAC;EAAA,sBACCvC,KAAW,CAAAO,MAAA;IAAAiC,QACX,UAAM;IAAAC,EAAA,QACN;IAAKC,QACL,YAAS;IAAAC,MAAA,EACT,GAAE;IAAAC,KAAA,QACF;IAAQC,KAAA,UACR;IAA0BC,QAC1B,GAAU,eACPhD,IAAA,CAAAI,eAAA;MAAA6C,OAAA;MACLC,MAAA;QAEA1B;MAAA;MAACwB,QAAA,iBAAAhD,IAAA,CAAAmB,WAAA;QAAAgC,UACC,QAAW;QAAA3B,KACX;QAAMwB,QACD,iBAAAhD,IAAA,CAAAQ,KAAA;UACLU,GAAA,EAAAH,MAAS,CAAAuB,UAAA;UACTQ,KAAE;UACFD,MAAA,KAAQ;UACRO,SAAS;QAAgB;MACf,GAAAjB,IACP;IAAA,mBACLnC,IAAA,CAAAO,MAAA;MAAA;MAAA8C,IAAA,EAAAhD,SAAA;MACFiD,IAAA;MAEJV,QAAA","ignoreList":[]}
+{"version":3,"file":"AnimationsPresenceDemo.native.js","names":[],"sources":["esm/AnimationsPresenceDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { AnimatePresence } from \"@tamagui/animate-presence\";\nimport { ArrowLeft, ArrowRight } from \"@tamagui/lucide-icons-2\";\nimport { Button, Image, XStack, YStack, styled } from \"tamagui\";\nimport photo1 from \"@tamagui/demos/photo/photo1\";\nimport photo2 from \"@tamagui/demos/photo/photo2\";\nimport photo3 from \"@tamagui/demos/photo/photo3\";\nvar images = [\n  photo1,\n  photo2,\n  photo3\n].map(function(x) {\n  return x.src || x;\n});\nvar GalleryItem = styled(YStack, {\n  z: 1,\n  x: 0,\n  opacity: 1,\n  position: \"absolute\",\n  inset: 0,\n  variants: {\n    // 1 = right, 0 = nowhere, -1 = left\n    going: {\n      number: function(going) {\n        return {\n          x: `enter:${going > 0 ? 1e3 : -1e3}px exit:${going < 0 ? 1e3 : -1e3}px`,\n          opacity: \"enter:0 exit:0\",\n          zIndex: \"exit:0\"\n        };\n      }\n    }\n  }\n});\nvar wrap = function(min, max, v) {\n  var rangeSize = max - min;\n  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;\n};\nfunction AnimationsPresenceDemo() {\n  var [[page, going], setPage] = React.useState([\n    0,\n    0\n  ]);\n  var imageIndex = wrap(0, images.length, page);\n  var paginate = function(going2) {\n    setPage([\n      page + going2,\n      going2\n    ]);\n  };\n  return /* @__PURE__ */ _jsxs(XStack, {\n    overflow: \"hidden\",\n    bg: \"#000\",\n    position: \"relative\",\n    height: 300,\n    width: \"100%\",\n    items: \"center\",\n    children: [\n      /* @__PURE__ */ _jsx(AnimatePresence, {\n        initial: false,\n        custom: {\n          going\n        },\n        children: /* @__PURE__ */ _jsx(GalleryItem, {\n          transition: \"slow\",\n          going,\n          children: /* @__PURE__ */ _jsx(Image, {\n            src: images[imageIndex],\n            width: 820,\n            height: 300,\n            objectFit: \"cover\"\n          })\n        }, page)\n      }),\n      /* @__PURE__ */ _jsx(Button, {\n        \"aria-label\": \"Carousel left\",\n        icon: ArrowLeft,\n        size: \"5\",\n        position: \"absolute\",\n        l: \"4\",\n        boxShadow: \"0 0 10px rgba(0,0,0,0.5)\",\n        z: 100,\n        circular: true,\n        onPress: function() {\n          return paginate(-1);\n        }\n      }),\n      /* @__PURE__ */ _jsx(Button, {\n        \"aria-label\": \"Carousel right\",\n        icon: ArrowRight,\n        size: \"5\",\n        position: \"absolute\",\n        r: \"4\",\n        boxShadow: \"0 0 10px rgba(0,0,0,0.5)\",\n        z: 100,\n        circular: true,\n        onPress: function() {\n          return paginate(1);\n        }\n      })\n    ]\n  });\n}\nexport {\n  AnimationsPresenceDemo,\n  images\n};\n//# sourceMappingURL=AnimationsPresenceDemo.js.map\n"],"mappings":";;;;;;;;;;AAQA,IAAI,SAAS;CACX;CACA;CACA;AACF,EAAE,IAAI,SAAS,GAAG;CAChB,OAAO,EAAE,OAAO;AAClB,CAAC;AACD,IAAI,cAAc,OAAO,QAAQ;CAC/B,GAAG;CACH,GAAG;CACH,SAAS;CACT,UAAU;CACV,OAAO;CACP,UAAU,EAER,OAAO,EACL,QAAQ,SAAS,OAAO;EACtB,OAAO;GACL,GAAG,SAAS,QAAQ,IAAI,MAAM,CAAC,IAAI,UAAU,QAAQ,IAAI,MAAM,CAAC,IAAI;GACpE,SAAS;GACT,QAAQ;EACV;CACF,EACF,EACF;AACF,CAAC;AACD,IAAI,OAAO,SAAS,KAAK,KAAK,GAAG;CAC/B,IAAI,YAAY,MAAM;CACtB,SAAS,IAAI,OAAO,YAAY,aAAa,YAAY;AAC3D;AACA,SAAS,yBAAyB;CAChC,IAAI,CAAC,CAAC,MAAM,QAAQ,WAAW,MAAM,SAAS,CAC5C,GACA,CACF,CAAC;CACD,IAAI,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;CAC5C,IAAI,WAAW,SAAS,QAAQ;EAC9B,QAAQ,CACN,OAAO,QACP,MACF,CAAC;CACH;CACA,OAAuB,qBAAM,QAAQ;EACnC,UAAU;EACV,IAAI;EACJ,UAAU;EACV,QAAQ;EACR,OAAO;EACP,OAAO;EACP,UAAU;GACQ,oBAAK,iBAAiB;IACpC,SAAS;IACT,QAAQ,EACN,MACF;IACA,UAA0B,oBAAK,aAAa;KAC1C,YAAY;KACZ;KACA,UAA0B,oBAAK,OAAO;MACpC,KAAK,OAAO;MACZ,OAAO;MACP,QAAQ;MACR,WAAW;KACb,CAAC;IACH,GAAG,IAAI;GACT,CAAC;GACe,oBAAK,QAAQ;IAC3B,cAAc;IACd,MAAM;IACN,MAAM;IACN,UAAU;IACV,GAAG;IACH,WAAW;IACX,GAAG;IACH,UAAU;IACV,SAAS,WAAW;KAClB,OAAO,SAAS,CAAC,CAAC;IACpB;GACF,CAAC;GACe,oBAAK,QAAQ;IAC3B,cAAc;IACd,MAAM;IACN,MAAM;IACN,UAAU;IACV,GAAG;IACH,WAAW;IACX,GAAG;IACH,UAAU;IACV,SAAS,WAAW;KAClB,OAAO,SAAS,CAAC;IACnB;GACF,CAAC;EACH;CACF,CAAC;AACH"}

package/dist/esm/AnimationsTimingDemo.mjs

@@ -1,23 +1,18 @@
 import { LogoIcon } from "@tamagui/logo";
 import { Square } from "tamagui";
 import { jsx } from "react/jsx-runtime";
+
 function AnimationsTimingDemo() {
-  return /* @__PURE__ */jsx(Square, {
-    bg: "$color9",
-    transition: "100ms",
-    elevation: "$4",
-    size: 110,
-    rounded: "$9",
-    hoverStyle: {
-      scale: 1.2
-    },
-    pressStyle: {
-      scale: 0.9
-    },
-    children: /* @__PURE__ */jsx(LogoIcon, {
-      downscale: 0.75
-    })
-  });
+	return /* @__PURE__ */ jsx(Square, {
+		bg: "color9",
+		transition: "100ms",
+		rounded: "9",
+		scale: "hover:1.2 press:0.9",
+		elevation: "4",
+		size: 110,
+		children: /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	});
 }
+
 export { AnimationsTimingDemo };
 //# sourceMappingURL=AnimationsTimingDemo.mjs.map

package/dist/esm/AnimationsTimingDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["LogoIcon","Square","jsx","AnimationsTimingDemo","bg","transition","elevation","size","rounded","hoverStyle","scale","pressStyle","children","downscale"],"sources":["../../src/AnimationsTimingDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,QAAgB;AACzB,SAASC,MAAA,QAAc;AAiBjB,SAAAC,GAAA;AAfC,SAASC,qBAAA,EAAuB;EACrC,OACE,eAAAD,GAAA,CAACD,MAAA;IACCG,EAAA,EAAG;IACHC,UAAA,EAAW;IACXC,SAAA,EAAU;IACVC,IAAA,EAAM;IACNC,OAAA,EAAQ;IACRC,UAAA,EAAY;MACVC,KAAA,EAAO;IACT;IACAC,UAAA,EAAY;MACVD,KAAA,EAAO;IACT;IAEAE,QAAA,iBAAAV,GAAA,CAACF,QAAA;MAASa,SAAA,EAAW;IAAA,CAAM;EAAA,CAC7B;AAEJ","ignoreList":[]}
+{"version":3,"file":"AnimationsTimingDemo.js","names":[],"sources":["esm/AnimationsTimingDemo.js"],"sourcesContent":["import { LogoIcon } from \"@tamagui/logo\";\nimport { Square } from \"tamagui\";\nimport { jsx } from \"react/jsx-runtime\";\nfunction AnimationsTimingDemo() {\n  return /* @__PURE__ */ jsx(\n    Square,\n    {\n      bg: \"color9\",\n      transition: \"100ms\",\n      rounded: \"9\",\n      scale: \"hover:1.2 press:0.9\",\n      elevation: \"4\",\n      size: 110,\n      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })\n    }\n  );\n}\nexport {\n  AnimationsTimingDemo\n};\n//# sourceMappingURL=AnimationsTimingDemo.js.map\n"],"mappings":";;;;;AAGA,SAAS,uBAAuB;CAC9B,OAAuB,oBACrB,QACA;EACE,IAAI;EACJ,YAAY;EACZ,SAAS;EACT,OAAO;EACP,WAAW;EACX,MAAM;EACN,UAA0B,oBAAI,UAAU,EAAE,WAAW,IAAK,CAAC;CAC7D,CACF;AACF"}

package/dist/esm/AnimationsTimingDemo.native.js

@@ -1,23 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { LogoIcon } from "@tamagui/logo";
 import { Square } from "tamagui";
+
 function AnimationsTimingDemo() {
-  return /* @__PURE__ */_jsx(Square, {
-    bg: "$color9",
-    transition: "100ms",
-    elevation: "$4",
-    size: 110,
-    rounded: "$9",
-    hoverStyle: {
-      scale: 1.2
-    },
-    pressStyle: {
-      scale: 0.9
-    },
-    children: /* @__PURE__ */_jsx(LogoIcon, {
-      downscale: 0.75
-    })
-  });
+	return /* @__PURE__ */ jsx(Square, {
+		bg: "color9",
+		transition: "100ms",
+		rounded: "9",
+		scale: "hover:1.2 press:0.9",
+		elevation: "4",
+		size: 110,
+		children: /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	});
 }
+
 export { AnimationsTimingDemo };
 //# sourceMappingURL=AnimationsTimingDemo.native.js.map

package/dist/esm/AnimationsTimingDemo.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","LogoIcon","Square","AnimationsTimingDemo","bg","transition","elevation","size","rounded","hoverStyle","scale","pressStyle","children","downscale"],"sources":["../../src/AnimationsTimingDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAgB;AACzB,SAASC,QAAA,QAAc;AAiBjB,SAAAC,MAAA;AAfC,SAASC,qBAAA,EAAuB;EACrC,OACE,eAAAH,IAAA,CAAAE,MAAA;IAACE,EAAA;IAAAC,UAAA;IAAAC,SACI;IAAAC,IACH;IAAWC,OACX,MAAU;IAAAC,UACJ;MACNC,KAAA;IAAQ;IACIC,UACV,EAAO;MACTD,KAAA;IAAA;IACYE,QACV,iBAAOZ,IAAA,CAAAC,QAAA;MACTY,SAAA;IAAA;EAE2B;AAAA;AAGjC,S","ignoreList":[]}
+{"version":3,"file":"AnimationsTimingDemo.native.js","names":[],"sources":["esm/AnimationsTimingDemo.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { LogoIcon } from \"@tamagui/logo\";\nimport { Square } from \"tamagui\";\nfunction AnimationsTimingDemo() {\n  return /* @__PURE__ */ _jsx(Square, {\n    bg: \"color9\",\n    transition: \"100ms\",\n    rounded: \"9\",\n    scale: \"hover:1.2 press:0.9\",\n    elevation: \"4\",\n    size: 110,\n    children: /* @__PURE__ */ _jsx(LogoIcon, {\n      downscale: 0.75\n    })\n  });\n}\nexport {\n  AnimationsTimingDemo\n};\n//# sourceMappingURL=AnimationsTimingDemo.js.map\n"],"mappings":";;;;;AAGA,SAAS,uBAAuB;CAC9B,OAAuB,oBAAK,QAAQ;EAClC,IAAI;EACJ,YAAY;EACZ,SAAS;EACT,OAAO;EACP,WAAW;EACX,MAAM;EACN,UAA0B,oBAAK,UAAU,EACvC,WAAW,IACb,CAAC;CACH,CAAC;AACH"}