@tamagui/demos 1.0.1-beta.151 → 1.0.1-beta.152

package/dist/cjs/AddThemeDemo.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,44 +15,58 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-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));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AddThemeDemo_exports = {};
 __export(AddThemeDemo_exports, {
   AddThemeDemo: () => AddThemeDemo
 });
 module.exports = __toCommonJS(AddThemeDemo_exports);
-var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_tamagui = require("tamagui");
 function AddThemeDemo() {
   const [theme, setTheme] = (0, import_react.useState)();
   const fu = (0, import_tamagui.useForceUpdate)();
-  return /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ai: "center",
-    space: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.H3, null, "Theme: ", theme ?? "inherit"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Theme, {
-    name: theme ?? "red"
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Square, {
-    debug: "verbose",
-    borderRadius: "$8",
-    size: 100,
-    backgroundColor: "$color"
-  })), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
-    disabled: theme === "superblue",
-    onPress: () => {
-      (0, import_tamagui.addTheme)({
-        name: "superblue",
-        insertCSS: true,
-        theme: {
-          background: "#000",
-          color: "blue"
-        }
-      });
-      setTheme("superblue");
-    }
-  }, "Add superblue theme"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
-    onPress: () => fu()
-  }, "test"));
+    space: true,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.H3, {
+        children: [
+          "Theme: ",
+          theme ?? "inherit"
+        ]
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+        name: theme ?? "red",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+          debug: "verbose",
+          borderRadius: "$8",
+          size: 100,
+          backgroundColor: "$color"
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        disabled: theme === "superblue",
+        onPress: () => {
+          (0, import_tamagui.addTheme)({
+            name: "superblue",
+            insertCSS: true,
+            theme: {
+              background: "#000",
+              color: "blue"
+            }
+          });
+          setTheme("superblue");
+        },
+        children: "Add superblue theme"
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        onPress: () => fu(),
+        children: "test"
+      })
+    ]
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/AddThemeDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AddThemeDemo.tsx"],
   "sourcesContent": ["import React, { useState } from 'react'\nimport { Button, H3, Square, Theme, YStack, addTheme, updateTheme, useForceUpdate } from 'tamagui'\n\nexport function AddThemeDemo() {\n  const [theme, setTheme] = useState<string>()\n  const fu = useForceUpdate()\n\n  return (\n    <YStack ai=\"center\" space>\n      <H3>Theme: {theme ?? 'inherit'}</H3>\n\n      {/* @ts-ignore */}\n      <Theme name={theme ?? 'red'}>\n        <Square debug=\"verbose\" borderRadius=\"$8\" size={100} backgroundColor=\"$color\" />\n      </Theme>\n\n      <Button\n        disabled={theme === 'superblue'}\n        onPress={() => {\n          addTheme({\n            name: 'superblue',\n            insertCSS: true,\n            theme: {\n              background: '#000',\n              color: 'blue',\n            } as any,\n          })\n          setTheme('superblue')\n        }}\n      >\n        Add superblue theme\n      </Button>\n\n      <Button onPress={() => fu()}>test</Button>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,qBAAyF;AAElF,wBAAwB;AAC7B,QAAM,CAAC,OAAO,YAAY,2BAAiB;AAC3C,QAAM,KAAK,mCAAe;AAE1B,SACE,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,OAAK;AAAA,KACvB,mDAAC,yBAAG,WAAQ,SAAS,SAAU,GAG/B,mDAAC;AAAA,IAAM,MAAM,SAAS;AAAA,KACpB,mDAAC;AAAA,IAAO,OAAM;AAAA,IAAU,cAAa;AAAA,IAAK,MAAM;AAAA,IAAK,iBAAgB;AAAA,GAAS,CAChF,GAEA,mDAAC;AAAA,IACC,UAAU,UAAU;AAAA,IACpB,SAAS,MAAM;AACb,mCAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,OAAO;AAAA,QACT;AAAA,MACF,CAAC;AACD,eAAS,WAAW;AAAA,IACtB;AAAA,KACD,qBAED,GAEA,mDAAC;AAAA,IAAO,SAAS,MAAM,GAAG;AAAA,KAAG,MAAI,CACnC;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASM;AATN,mBAAgC;AAChC,qBAAyF;AAElF,SAAS,eAAe;AAC7B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB;AAC3C,QAAM,SAAK,+BAAe;AAE1B,SACE,6CAAC;AAAA,IAAO,IAAG;AAAA,IAAS,OAAK;AAAA,IACvB;AAAA,mDAAC;AAAA,QAAG;AAAA;AAAA,UAAQ,SAAS;AAAA;AAAA,OAAU;AAAA,MAG/B,4CAAC;AAAA,QAAM,MAAM,SAAS;AAAA,QACpB,sDAAC;AAAA,UAAO,OAAM;AAAA,UAAU,cAAa;AAAA,UAAK,MAAM;AAAA,UAAK,iBAAgB;AAAA,SAAS;AAAA,OAChF;AAAA,MAEA,4CAAC;AAAA,QACC,UAAU,UAAU;AAAA,QACpB,SAAS,MAAM;AACb,uCAAS;AAAA,YACP,MAAM;AAAA,YACN,WAAW;AAAA,YACX,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,UACF,CAAC;AACD,mBAAS,WAAW;AAAA,QACtB;AAAA,QACD;AAAA,OAED;AAAA,MAEA,4CAAC;AAAA,QAAO,SAAS,MAAM,GAAG;AAAA,QAAG;AAAA,OAAI;AAAA;AAAA,GACnC;AAEJ;",
   "names": []
 }

package/dist/cjs/AlertDialogDemo.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,56 +15,84 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-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));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AlertDialogDemo_exports = {};
 __export(AlertDialogDemo_exports, {
   AlertDialogDemo: () => AlertDialogDemo
 });
 module.exports = __toCommonJS(AlertDialogDemo_exports);
-var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function AlertDialogDemo() {
-  return /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog, {
-    native: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, null, "Show Alert")), /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog.Portal, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog.Overlay, {
-    key: "overlay",
-    animation: "quick",
-    o: 0.5,
-    enterStyle: { o: 0 },
-    exitStyle: { o: 0 }
-  }), /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog.Content, {
-    bordered: true,
-    elevate: true,
-    key: "content",
-    animation: [
-      "quick",
-      {
-        opacity: {
-          overshootClamping: true
-        }
-      }
-    ],
-    enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
-    exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
-    x: 0,
-    scale: 1,
-    opacity: 1,
-    y: 0
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, {
-    space: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog.Title, null, "Accept"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog.Description, null, "By pressing yes, you accept our terms and conditions."), /* @__PURE__ */ import_react.default.createElement(import_tamagui.XStack, {
-    space: "$3",
-    jc: "flex-end"
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog.Cancel, {
-    asChild: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, null, "Cancel")), /* @__PURE__ */ import_react.default.createElement(import_tamagui.AlertDialog.Action, {
-    asChild: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
-    theme: "active"
-  }, "Accept")))))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.AlertDialog, {
+    native: true,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          children: "Show Alert"
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.AlertDialog.Portal, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Overlay, {
+            animation: "quick",
+            o: 0.5,
+            enterStyle: { o: 0 },
+            exitStyle: { o: 0 }
+          }, "overlay"),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Content, {
+            bordered: true,
+            elevate: true,
+            animation: [
+              "quick",
+              {
+                opacity: {
+                  overshootClamping: true
+                }
+              }
+            ],
+            enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
+            exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
+            x: 0,
+            scale: 1,
+            opacity: 1,
+            y: 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+              space: true,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Title, {
+                  children: "Accept"
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Description, {
+                  children: "By pressing yes, you accept our terms and conditions."
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  space: "$3",
+                  jc: "flex-end",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Cancel, {
+                      asChild: true,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+                        children: "Cancel"
+                      })
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Action, {
+                      asChild: true,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+                        theme: "active",
+                        children: "Accept"
+                      })
+                    })
+                  ]
+                })
+              ]
+            })
+          }, "content")
+        ]
+      })
+    ]
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/AlertDialogDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AlertDialogDemo.tsx"],
   "sourcesContent": ["import React from 'react'\nimport { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog native>\n      <AlertDialog.Trigger asChild>\n        <Button>Show Alert</Button>\n      </AlertDialog.Trigger>\n\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          o={0.5}\n          enterStyle={{ o: 0 }}\n          exitStyle={{ o: 0 }}\n        />\n        <AlertDialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <YStack space>\n            <AlertDialog.Title>Accept</AlertDialog.Title>\n            <AlertDialog.Description>\n              By pressing yes, you accept our terms and conditions.\n            </AlertDialog.Description>\n\n            <XStack space=\"$3\" jc=\"flex-end\">\n              <AlertDialog.Cancel asChild>\n                <Button>Cancel</Button>\n              </AlertDialog.Cancel>\n              <AlertDialog.Action asChild>\n                <Button theme=\"active\">Accept</Button>\n              </AlertDialog.Action>\n            </XStack>\n          </YStack>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAoD;AAE7C,2BAA2B;AAChC,SACE,mDAAC;AAAA,IAAY,QAAM;AAAA,KACjB,mDAAC,2BAAY,SAAZ;AAAA,IAAoB,SAAO;AAAA,KAC1B,mDAAC,6BAAO,YAAU,CACpB,GAEA,mDAAC,2BAAY,QAAZ,MACC,mDAAC,2BAAY,SAAZ;AAAA,IACC,KAAI;AAAA,IACJ,WAAU;AAAA,IACV,GAAG;AAAA,IACH,YAAY,EAAE,GAAG,EAAE;AAAA,IACnB,WAAW,EAAE,GAAG,EAAE;AAAA,GACpB,GACA,mDAAC,2BAAY,SAAZ;AAAA,IACC,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,KAAI;AAAA,IACJ,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAAS;AAAA,UACP,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,IACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,IAClD,GAAG;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,KAEH,mDAAC;AAAA,IAAO,OAAK;AAAA,KACX,mDAAC,2BAAY,OAAZ,MAAkB,QAAM,GACzB,mDAAC,2BAAY,aAAZ,MAAwB,uDAEzB,GAEA,mDAAC;AAAA,IAAO,OAAM;AAAA,IAAK,IAAG;AAAA,KACpB,mDAAC,2BAAY,QAAZ;AAAA,IAAmB,SAAO;AAAA,KACzB,mDAAC,6BAAO,QAAM,CAChB,GACA,mDAAC,2BAAY,QAAZ;AAAA,IAAmB,SAAO;AAAA,KACzB,mDAAC;AAAA,IAAO,OAAM;AAAA,KAAS,QAAM,CAC/B,CACF,CACF,CACF,CACF,CACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOQ;AANR,qBAAoD;AAE7C,SAAS,kBAAkB;AAChC,SACE,6CAAC;AAAA,IAAY,QAAM;AAAA,IACjB;AAAA,kDAAC,2BAAY,SAAZ;AAAA,QAAoB,SAAO;AAAA,QAC1B,sDAAC;AAAA,UAAO;AAAA,SAAU;AAAA,OACpB;AAAA,MAEA,6CAAC,2BAAY,QAAZ;AAAA,QACC;AAAA,sDAAC,2BAAY,SAAZ;AAAA,YAEC,WAAU;AAAA,YACV,GAAG;AAAA,YACH,YAAY,EAAE,GAAG,EAAE;AAAA,YACnB,WAAW,EAAE,GAAG,EAAE;AAAA,aAJd,SAKN;AAAA,UACA,4CAAC,2BAAY,SAAZ;AAAA,YACC,UAAQ;AAAA,YACR,SAAO;AAAA,YAEP,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,SAAS;AAAA,kBACP,mBAAmB;AAAA,gBACrB;AAAA,cACF;AAAA,YACF;AAAA,YACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,YACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,YAClD,GAAG;AAAA,YACH,OAAO;AAAA,YACP,SAAS;AAAA,YACT,GAAG;AAAA,YAEH,uDAAC;AAAA,cAAO,OAAK;AAAA,cACX;AAAA,4DAAC,2BAAY,OAAZ;AAAA,kBAAkB;AAAA,iBAAM;AAAA,gBACzB,4CAAC,2BAAY,aAAZ;AAAA,kBAAwB;AAAA,iBAEzB;AAAA,gBAEA,6CAAC;AAAA,kBAAO,OAAM;AAAA,kBAAK,IAAG;AAAA,kBACpB;AAAA,gEAAC,2BAAY,QAAZ;AAAA,sBAAmB,SAAO;AAAA,sBACzB,sDAAC;AAAA,wBAAO;AAAA,uBAAM;AAAA,qBAChB;AAAA,oBACA,4CAAC,2BAAY,QAAZ;AAAA,sBAAmB,SAAO;AAAA,sBACzB,sDAAC;AAAA,wBAAO,OAAM;AAAA,wBAAS;AAAA,uBAAM;AAAA,qBAC/B;AAAA;AAAA,iBACF;AAAA;AAAA,aACF;AAAA,aA9BI,SA+BN;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/AnimationsDemo.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,7 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-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));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AnimationsDemo_exports = {};
 __export(AnimationsDemo_exports, {
@@ -25,9 +22,9 @@ __export(AnimationsDemo_exports, {
   positions: () => positions
 });
 module.exports = __toCommonJS(AnimationsDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_feather_icons = require("@tamagui/feather-icons");
 var import_logo = require("@tamagui/logo");
-var import_react = __toESM(require("react"), 1);
 var import_tamagui = require("tamagui");
 function AnimationsDemo(props) {
   const [positionI, setPositionI] = (0, import_tamagui.useControllableState)({
@@ -41,33 +38,39 @@ function AnimationsDemo(props) {
       return (x + to) % positions.length;
     });
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Square, {
-    focusable: false,
-    animation: props.animation || "bouncy",
-    onPress: () => next(),
-    size: 110,
-    boc: "$color",
-    bw: 1,
-    br: "$9",
-    hoverStyle: {
-      scale: 1.1
-    },
-    pressStyle: {
-      scale: 0.9
-    },
-    ...position
-  }, props.children || /* @__PURE__ */ import_react.default.createElement(import_logo.LogoIcon, {
-    downscale: 0.75
-  })), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
-    pos: "absolute",
-    b: 20,
-    l: 20,
-    icon: import_feather_icons.Play,
-    theme: props.tint,
-    size: "$5",
-    circular: true,
-    onPress: () => next()
-  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+        focusable: false,
+        animation: props.animation || "bouncy",
+        onPress: () => next(),
+        size: 110,
+        boc: "$color",
+        bw: 1,
+        br: "$9",
+        hoverStyle: {
+          scale: 1.1
+        },
+        pressStyle: {
+          scale: 0.9
+        },
+        ...position,
+        children: props.children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+          downscale: 0.75
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        pos: "absolute",
+        b: 20,
+        l: 20,
+        icon: import_feather_icons.Play,
+        theme: props.tint,
+        size: "$5",
+        circular: true,
+        onPress: () => next()
+      })
+    ]
+  });
 }
 const positions = [
   {

package/dist/cjs/AnimationsDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
   "sourcesContent": ["import { Play } from '@tamagui/feather-icons'\nimport { LogoIcon } from '@tamagui/logo'\nimport React from 'react'\nimport { Button, Square, useControllableState } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const next = (to = 1) => {\n    setPositionI((x) => {\n      return (x + to) % positions.length\n    })\n  }\n\n  return (\n    <>\n      <Square\n        focusable={false}\n        animation={props.animation || 'bouncy'}\n        onPress={() => next()}\n        size={110}\n        boc=\"$color\"\n        bw={1}\n        br=\"$9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={() => next()}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqB;AACrB,kBAAyB;AACzB,mBAAkB;AAClB,qBAAqD;AAE9C,wBAAwB,OAAO;AACpC,QAAM,CAAC,WAAW,gBAAgB,yCAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,CAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH;AAEA,SACE,wFACE,mDAAC;AAAA,IACC,WAAW;AAAA,IACX,WAAW,MAAM,aAAa;AAAA,IAC9B,SAAS,MAAM,KAAK;AAAA,IACpB,MAAM;AAAA,IACN,KAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACC,GAAG;AAAA,KAEH,MAAM,YAAY,mDAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAChD,GAEA,mDAAC;AAAA,IACC,KAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,IACN,OAAO,MAAM;AAAA,IACb,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,SAAS,MAAM,KAAK;AAAA,GACtB,CACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAnBJ,2BAAqB;AACrB,kBAAyB;AAEzB,qBAAqD;AAE9C,SAAS,eAAe,OAAO;AACpC,QAAM,CAAC,WAAW,YAAY,QAAI,qCAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,CAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IACE;AAAA,kDAAC;AAAA,QACC,WAAW;AAAA,QACX,WAAW,MAAM,aAAa;AAAA,QAC9B,SAAS,MAAM,KAAK;AAAA,QACpB,MAAM;AAAA,QACN,KAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAG;AAAA,QACH,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEH,gBAAM,YAAY,4CAAC;AAAA,UAAS,WAAW;AAAA,SAAM;AAAA,OAChD;AAAA,MAEA,4CAAC;AAAA,QACC,KAAI;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,QACN,OAAO,MAAM;AAAA,QACb,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,SAAS,MAAM,KAAK;AAAA,OACtB;AAAA;AAAA,GACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/AnimationsEnterDemo.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,15 +15,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-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));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AnimationsEnterDemo_exports = {};
 __export(AnimationsEnterDemo_exports, {
   AnimationsEnterDemo: () => AnimationsEnterDemo
 });
 module.exports = __toCommonJS(AnimationsEnterDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_logo = require("@tamagui/logo");
-var import_react = __toESM(require("react"), 1);
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
 var import_useOnIntersecting = require("./useOnIntersecting");
@@ -34,32 +31,38 @@ function AnimationsEnterDemo(props) {
   const hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, { once: true });
   const [key, setKey] = (0, import_react2.useState)(0);
   if (!hasIntersected) {
-    return /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
       ref
     });
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Square, {
-    key,
-    enterStyle: {
-      scale: 1.5,
-      y: -10,
-      opacity: 0
-    },
-    animation: "bouncy",
-    elevation: "$4",
-    size: 110,
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    bc: "$pink10",
-    br: "$9"
-  }, props.children ?? /* @__PURE__ */ import_react.default.createElement(import_logo.LogoIcon, {
-    downscale: 0.75
-  })), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
-    size: "$3",
-    mt: "$4",
-    onPress: () => setKey(Math.random())
-  }, "Re-mount"));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+        enterStyle: {
+          scale: 1.5,
+          y: -10,
+          opacity: 0
+        },
+        animation: "bouncy",
+        elevation: "$4",
+        size: 110,
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        bc: "$pink10",
+        br: "$9",
+        children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+          downscale: 0.75
+        })
+      }, key),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$3",
+        mt: "$4",
+        onPress: () => setKey(Math.random()),
+        children: "Re-mount"
+      })
+    ]
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/AnimationsEnterDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsEnterDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport React from 'react'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        bc=\"$pink10\"\n        br=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" mt=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAyB;AACzB,mBAAkB;AAClB,oBAAiC;AACjC,qBAAuC;AAEvC,+BAAkC;AAE3B,6BAA6B,OAAY;AAC9C,QAAM,MAAM,0BAAoB,IAAI;AACpC,QAAM,iBAAiB,gDAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,UAAU,4BAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,mDAAC;AAAA,MAAO;AAAA,KAAU;AAAA,EAC3B;AAEA,SACE,wFACE,mDAAC;AAAA,IACC;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,SAAS;AAAA,IACX;AAAA,IACA,WAAU;AAAA,IACV,WAAU;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,KAEF,MAAM,YAAY,mDAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAChD,GAEA,mDAAC;AAAA,IAAO,MAAK;AAAA,IAAK,IAAG;AAAA,IAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC;AAAA,KAAG,UAEhE,CACF;AAEJ;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaW;AAbX,kBAAyB;AAEzB,IAAAA,gBAAiC;AACjC,qBAAuC;AAEvC,+BAAkC;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,UAAM,sBAAoB,IAAI;AACpC,QAAM,qBAAiB,4CAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,QAAI,wBAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,4CAAC;AAAA,MAAO;AAAA,KAAU;AAAA,EAC3B;AAEA,SACE;AAAA,IACE;AAAA,kDAAC;AAAA,QAEC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,GAAG;AAAA,UACH,SAAS;AAAA,QACX;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,GAAG;AAAA,QACH,IAAG;AAAA,QACH,IAAG;AAAA,QAEF,gBAAM,YAAY,4CAAC;AAAA,UAAS,WAAW;AAAA,SAAM;AAAA,SAfzC,GAgBP;AAAA,MAEA,4CAAC;AAAA,QAAO,MAAK;AAAA,QAAK,IAAG;AAAA,QAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC;AAAA,QAAG;AAAA,OAEhE;AAAA;AAAA,GACF;AAEJ;",
+  "names": ["import_react"]
 }

package/dist/cjs/AnimationsHoverDemo.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,18 +15,17 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-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));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AnimationsHoverDemo_exports = {};
 __export(AnimationsHoverDemo_exports, {
   AnimationsHoverDemo: () => AnimationsHoverDemo
 });
 module.exports = __toCommonJS(AnimationsHoverDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_logo = require("@tamagui/logo");
-var import_react = __toESM(require("react"), 1);
 var import_tamagui = require("tamagui");
 function AnimationsHoverDemo() {
-  return /* @__PURE__ */ import_react.default.createElement(import_tamagui.Square, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
     bc: "$pink10",
     animation: "bouncy",
     elevation: "$4",
@@ -39,10 +36,11 @@ function AnimationsHoverDemo() {
     },
     pressStyle: {
       scale: 0.9
-    }
-  }, /* @__PURE__ */ import_react.default.createElement(import_logo.LogoIcon, {
-    downscale: 0.75
-  }));
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+      downscale: 0.75
+    })
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/AnimationsHoverDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsHoverDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport React from 'react'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      br=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAyB;AACzB,mBAAkB;AAClB,qBAAuB;AAEhB,+BAA+B;AACpC,SACE,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,WAAU;AAAA,IACV,WAAU;AAAA,IACV,MAAM;AAAA,IACN,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,KAEA,mDAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAC7B;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBM;AAnBN,kBAAyB;AAEzB,qBAAuB;AAEhB,SAAS,sBAAsB;AACpC,SACE,4CAAC;AAAA,IACC,IAAG;AAAA,IACH,WAAU;AAAA,IACV,WAAU;AAAA,IACV,MAAM;AAAA,IACN,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IAEA,sDAAC;AAAA,MAAS,WAAW;AAAA,KAAM;AAAA,GAC7B;AAEJ;",
   "names": []
 }