@tamagui/demos 1.0.21 → 1.0.22

package/dist/cjs/AnimationsEnterDemo.js

@@ -23,13 +23,13 @@ __export(AnimationsEnterDemo_exports, {
 module.exports = __toCommonJS(AnimationsEnterDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_logo = require("@tamagui/logo");
-var import_react2 = require("react");
+var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_useOnIntersecting = require("./useOnIntersecting");
 function AnimationsEnterDemo(props) {
-  const ref = (0, import_react2.useRef)(null);
+  const ref = (0, import_react.useRef)(null);
   const hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, { once: true });
-  const [key, setKey] = (0, import_react2.useState)(0);
+  const [key, setKey] = (0, import_react.useState)(0);
   if (!hasIntersected) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
       ref

package/dist/cjs/AnimationsEnterDemo.js.map

@@ -1,7 +1,7 @@
 {
   "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;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"]
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\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;AAYW;AAZX,kBAAyB;AACzB,mBAAiC;AACjC,qBAAuC;AAEvC,+BAAkC;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,qBAAiB,4CAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,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": []
 }

package/dist/cjs/AnimationsTimingDemo.js

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AnimationsTimingDemo_exports = {};
+__export(AnimationsTimingDemo_exports, {
+  AnimationsTimingDemo: () => AnimationsTimingDemo
+});
+module.exports = __toCommonJS(AnimationsTimingDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_logo = require("@tamagui/logo");
+var import_tamagui = require("tamagui");
+function AnimationsTimingDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+    bc: "$pink10",
+    animation: "100ms",
+    elevation: "$4",
+    size: 110,
+    br: "$9",
+    hoverStyle: {
+      scale: 1.2
+    },
+    pressStyle: {
+      scale: 0.9
+    },
+    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 = {
+  AnimationsTimingDemo
+});
+//# sourceMappingURL=AnimationsTimingDemo.js.map

package/dist/cjs/AnimationsTimingDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsTimingDemo.tsx"],
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"100ms\"\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;AAkBM;AAlBN,kBAAyB;AACzB,qBAAuB;AAEhB,SAAS,uBAAuB;AACrC,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": []
+}

package/dist/cjs/DrawerDemo.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,51 +15,62 @@ 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 DrawerDemo_exports = {};
 __export(DrawerDemo_exports, {
   DrawerDemo: () => DrawerDemo
 });
 module.exports = __toCommonJS(DrawerDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_drawer = require("@tamagui/drawer");
 var import_feather_icons = require("@tamagui/feather-icons");
-var import_react = __toESM(require("react"));
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
 function DrawerDemo() {
   const [show, setShow] = (0, import_react2.useState)(false);
-  return /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     minWidth: 230,
     w: "100%",
     h: "100%",
     ai: "center",
     jc: "center",
-    position: "relative"
-  }, /* @__PURE__ */ import_react.default.createElement(import_drawer.Drawer.Provider, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
-    size: "$6",
-    icon: show ? import_feather_icons.ChevronDown : import_feather_icons.ChevronUp,
-    circular: true,
-    onPress: () => setShow((x) => !x),
-    elevation: "$2"
-  }), /* @__PURE__ */ import_react.default.createElement(import_drawer.Drawer, {
-    open: show,
-    onChangeOpen: setShow
-  }, /* @__PURE__ */ import_react.default.createElement(import_drawer.Drawer.Frame, {
-    h: 200,
-    ai: "center",
-    jc: "center",
-    p: "$6",
-    space: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Paragraph, {
-    selectable: false
-  }, "Hello."), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
-    size: "$6",
-    icon: show ? import_feather_icons.ChevronDown : import_feather_icons.ChevronUp,
-    circular: true,
-    onPress: () => setShow((x) => !x),
-    elevation: "$2"
-  })))));
+    position: "relative",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Provider, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          size: "$6",
+          icon: show ? import_feather_icons.ChevronDown : import_feather_icons.ChevronUp,
+          circular: true,
+          onPress: () => setShow((x) => !x),
+          elevation: "$2"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer, {
+          open: show,
+          onOpenChange: setShow,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Frame, {
+            h: 200,
+            ai: "center",
+            jc: "center",
+            p: "$6",
+            space: true,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                selectable: false,
+                children: "Hello."
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+                size: "$6",
+                icon: show ? import_feather_icons.ChevronDown : import_feather_icons.ChevronUp,
+                circular: true,
+                onPress: () => setShow((x) => !x),
+                elevation: "$2"
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/DrawerDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DrawerDemo.tsx"],
-  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onChangeOpen={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,2BAAuC;AACvC,mBAAkB;AAClB,oBAAyB;AACzB,qBAA0C;AAEnC,sBAAsB;AAC3B,QAAM,CAAC,MAAM,WAAW,4BAAS,KAAK;AACtC,SACE,mDAAC;AAAA,IAAO,UAAU;AAAA,IAAK,GAAE;AAAA,IAAO,GAAE;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,UAAS;AAAA,KACxE,mDAAC,qBAAO,UAAP,MACC,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,MAAM,OAAO,mCAAc;AAAA,IAC3B,UAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChC,WAAU;AAAA,GACZ,GACA,mDAAC;AAAA,IAAO,MAAM;AAAA,IAAM,cAAc;AAAA,KAChC,mDAAC,qBAAO,OAAP;AAAA,IAAa,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,GAAE;AAAA,IAAK,OAAK;AAAA,KACxD,mDAAC;AAAA,IAAU,YAAY;AAAA,KAAO,QAAM,GACpC,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,MAAM,OAAO,mCAAc;AAAA,IAC3B,UAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChC,WAAU;AAAA,GACZ,CACF,CACF,CACF,CACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onOpenChange={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWQ;AAXR,oBAAuB;AACvB,2BAAuC;AAEvC,IAAAA,gBAAyB;AACzB,qBAA0C;AAEnC,SAAS,aAAa;AAC3B,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AACtC,SACE,4CAAC;AAAA,IAAO,UAAU;AAAA,IAAK,GAAE;AAAA,IAAO,GAAE;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,UAAS;AAAA,IACxE,uDAAC,qBAAO,UAAP;AAAA,MACC;AAAA,oDAAC;AAAA,UACC,MAAK;AAAA,UACL,MAAM,OAAO,mCAAc;AAAA,UAC3B,UAAQ;AAAA,UACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAChC,WAAU;AAAA,SACZ;AAAA,QACA,4CAAC;AAAA,UAAO,MAAM;AAAA,UAAM,cAAc;AAAA,UAChC,uDAAC,qBAAO,OAAP;AAAA,YAAa,GAAG;AAAA,YAAK,IAAG;AAAA,YAAS,IAAG;AAAA,YAAS,GAAE;AAAA,YAAK,OAAK;AAAA,YACxD;AAAA,0DAAC;AAAA,gBAAU,YAAY;AAAA,gBAAO;AAAA,eAAM;AAAA,cACpC,4CAAC;AAAA,gBACC,MAAK;AAAA,gBACL,MAAM,OAAO,mCAAc;AAAA,gBAC3B,UAAQ;AAAA,gBACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,gBAChC,WAAU;AAAA,eACZ;AAAA;AAAA,WACF;AAAA,SACF;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": ["import_react"]
 }

package/dist/cjs/MenuDemo.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,32 +15,45 @@ 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 MenuDemo_exports = {};
 __export(MenuDemo_exports, {
   MenuDemo: () => MenuDemo
 });
 module.exports = __toCommonJS(MenuDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_feather_icons = require("@tamagui/feather-icons");
 var import_menu = require("@tamagui/menu");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_tamagui = require("tamagui");
 function MenuDemo() {
   const [show, setShow] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ import_react.default.createElement(import_menu.Menu.Provider, null, /* @__PURE__ */ import_react.default.createElement(import_menu.Menu, {
-    open: show,
-    onChangeOpen: setShow,
-    trigger: /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
-      size: "$6",
-      icon: import_feather_icons.Menu,
-      theme: show ? "active" : null,
-      circular: true,
-      onPress: () => setShow((x) => !x)
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.Menu.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.Menu, {
+      open: show,
+      onOpenChange: setShow,
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$6",
+        icon: import_feather_icons.Menu,
+        theme: show ? "active" : null,
+        circular: true,
+        onPress: () => setShow((x) => !x)
+      }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          p: "$2",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H4, {
+              children: "Menu contents"
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+              children: "Lorem ipsum dolor sit amet."
+            })
+          ]
+        })
+      })
     })
-  }, /* @__PURE__ */ import_react.default.createElement(import_menu.Menu.Item, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, {
-    p: "$2"
-  }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.H4, null, "Menu contents"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Paragraph, null, "Lorem ipsum dolor sit amet.")))));
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/MenuDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/MenuDemo.tsx"],
-  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onChangeOpen={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAiC;AACjC,kBAAqB;AACrB,mBAAgC;AAChC,qBAA8C;AAEvC,oBAAoB;AACzB,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,SACE,mDAAC,iBAAK,UAAL,MACC,mDAAC;AAAA,IACC,MAAM;AAAA,IACN,cAAc;AAAA,IACd,SACE,mDAAC;AAAA,MACC,MAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,OAAO,WAAW;AAAA,MACzB,UAAQ;AAAA,MACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,KAClC;AAAA,KAGF,mDAAC,iBAAK,MAAL,MACC,mDAAC;AAAA,IAAO,GAAE;AAAA,KACR,mDAAC,yBAAG,eAAa,GACjB,mDAAC,gCAAU,6BAA2B,CACxC,CACF,CACF,CACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onOpenChange={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcU;AAdV,2BAAiC;AACjC,kBAAqB;AACrB,mBAAgC;AAChC,qBAA8C;AAEvC,SAAS,WAAW;AACzB,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,SACE,4CAAC,iBAAK,UAAL;AAAA,IACC,sDAAC;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SACE,4CAAC;AAAA,QACC,MAAK;AAAA,QACL,MAAM,qBAAAA;AAAA,QACN,OAAO,OAAO,WAAW;AAAA,QACzB,UAAQ;AAAA,QACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,OAClC;AAAA,MAGF,sDAAC,iBAAK,MAAL;AAAA,QACC,uDAAC;AAAA,UAAO,GAAE;AAAA,UACR;AAAA,wDAAC;AAAA,cAAG;AAAA,aAAa;AAAA,YACjB,4CAAC;AAAA,cAAU;AAAA,aAA2B;AAAA;AAAA,SACxC;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": ["MenuIcon"]
 }

package/dist/cjs/index.js

@@ -25,6 +25,7 @@ __export(src_exports, {
   AnimationsEnterDemo: () => import_AnimationsEnterDemo.AnimationsEnterDemo,
   AnimationsHoverDemo: () => import_AnimationsHoverDemo.AnimationsHoverDemo,
   AnimationsPresenceDemo: () => import_AnimationsPresenceDemo.AnimationsPresenceDemo,
+  AnimationsTimingDemo: () => import_AnimationsTimingDemo.AnimationsTimingDemo,
   AvatarDemo: () => import_AvatarDemo.AvatarDemo,
   ButtonDemo: () => import_ButtonDemo.ButtonDemo,
   CardDemo: () => import_CardDemo.CardDemo,
@@ -61,6 +62,7 @@ var import_AlertDialogDemo = require("./AlertDialogDemo");
 var import_AnimationsDemo = require("./AnimationsDemo");
 var import_AnimationsEnterDemo = require("./AnimationsEnterDemo");
 var import_AnimationsHoverDemo = require("./AnimationsHoverDemo");
+var import_AnimationsTimingDemo = require("./AnimationsTimingDemo");
 var import_AnimationsPresenceDemo = require("./AnimationsPresenceDemo");
 var import_AvatarDemo = require("./AvatarDemo");
 var import_ButtonDemo = require("./ButtonDemo");
@@ -102,6 +104,7 @@ __reExport(src_exports, require("./useOnIntersecting"), module.exports);
   AnimationsEnterDemo,
   AnimationsHoverDemo,
   AnimationsPresenceDemo,
+  AnimationsTimingDemo,
   AvatarDemo,
   ButtonDemo,
   CardDemo,

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FeatherIconsDemo } from './FeatherIconsDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,4BAA+B;AAC/B,iCAAoC;AACpC,iCAAoC;AACpC,oCAAuC;AACvC,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,wBAA2B;AAC3B,0BAA6B;AAC7B,6BAAgC;AAChC,8BAAiC;AACjC,uBAA0B;AAC1B,uBAA0B;AAC1B,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,gCAAmC;AACnC,0BAA6B;AAC7B,6BAAgC;AAChC,yBAA4B;AAC5B,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,4BAA+B;AAC/B,uBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,wBAAc,gCApCd;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FeatherIconsDemo } from './FeatherIconsDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,4BAA+B;AAC/B,iCAAoC;AACpC,iCAAoC;AACpC,kCAAqC;AACrC,oCAAuC;AACvC,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,wBAA2B;AAC3B,0BAA6B;AAC7B,6BAAgC;AAChC,8BAAiC;AACjC,uBAA0B;AAC1B,uBAA0B;AAC1B,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,gCAAmC;AACnC,0BAA6B;AAC7B,6BAAgC;AAChC,yBAA4B;AAC5B,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,4BAA+B;AAC/B,uBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,wBAAc,gCArCd;",
   "names": []
 }

package/dist/esm/AnimationsEnterDemo.js.map

@@ -1,7 +1,7 @@
 {
   "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": "AAaW,SAIP,UAJO,KAIP,YAJO;AAbX,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,oBAAC;AAAA,MAAO;AAAA,KAAU;AAAA,EAC3B;AAEA,SACE;AAAA,IACE;AAAA,0BAAC;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,oBAAC;AAAA,UAAS,WAAW;AAAA,SAAM;AAAA,SAfzC,GAgBP;AAAA,MAEA,oBAAC;AAAA,QAAO,MAAK;AAAA,QAAK,IAAG;AAAA,QAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC;AAAA,QAAG;AAAA,OAEhE;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\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": "AAYW,SAIP,UAJO,KAIP,YAJO;AAZX,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,oBAAC;AAAA,MAAO;AAAA,KAAU;AAAA,EAC3B;AAEA,SACE;AAAA,IACE;AAAA,0BAAC;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,oBAAC;AAAA,UAAS,WAAW;AAAA,SAAM;AAAA,SAfzC,GAgBP;AAAA,MAEA,oBAAC;AAAA,QAAO,MAAK;AAAA,QAAK,IAAG;AAAA,QAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC;AAAA,QAAG;AAAA,OAEhE;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/AnimationsTimingDemo.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { LogoIcon } from "@tamagui/logo";
+import { Square } from "tamagui";
+function AnimationsTimingDemo() {
+  return /* @__PURE__ */ jsx(Square, {
+    bc: "$pink10",
+    animation: "100ms",
+    elevation: "$4",
+    size: 110,
+    br: "$9",
+    hoverStyle: {
+      scale: 1.2
+    },
+    pressStyle: {
+      scale: 0.9
+    },
+    children: /* @__PURE__ */ jsx(LogoIcon, {
+      downscale: 0.75
+    })
+  });
+}
+export {
+  AnimationsTimingDemo
+};
+//# sourceMappingURL=AnimationsTimingDemo.js.map

package/dist/esm/AnimationsTimingDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsTimingDemo.tsx"],
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"100ms\"\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": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,uBAAuB;AACrC,SACE,oBAAC;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,8BAAC;AAAA,MAAS,WAAW;AAAA,KAAM;AAAA,GAC7B;AAEJ;",
+  "names": []
+}

package/dist/esm/DrawerDemo.js

@@ -1,41 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@tamagui/drawer";
 import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
-import React from "react";
 import { useState } from "react";
 import { Button, Paragraph, YStack } from "tamagui";
 function DrawerDemo() {
   const [show, setShow] = useState(false);
-  return /* @__PURE__ */ React.createElement(YStack, {
+  return /* @__PURE__ */ jsx(YStack, {
     minWidth: 230,
     w: "100%",
     h: "100%",
     ai: "center",
     jc: "center",
-    position: "relative"
-  }, /* @__PURE__ */ React.createElement(Drawer.Provider, null, /* @__PURE__ */ React.createElement(Button, {
-    size: "$6",
-    icon: show ? ChevronDown : ChevronUp,
-    circular: true,
-    onPress: () => setShow((x) => !x),
-    elevation: "$2"
-  }), /* @__PURE__ */ React.createElement(Drawer, {
-    open: show,
-    onChangeOpen: setShow
-  }, /* @__PURE__ */ React.createElement(Drawer.Frame, {
-    h: 200,
-    ai: "center",
-    jc: "center",
-    p: "$6",
-    space: true
-  }, /* @__PURE__ */ React.createElement(Paragraph, {
-    selectable: false
-  }, "Hello."), /* @__PURE__ */ React.createElement(Button, {
-    size: "$6",
-    icon: show ? ChevronDown : ChevronUp,
-    circular: true,
-    onPress: () => setShow((x) => !x),
-    elevation: "$2"
-  })))));
+    position: "relative",
+    children: /* @__PURE__ */ jsxs(Drawer.Provider, {
+      children: [
+        /* @__PURE__ */ jsx(Button, {
+          size: "$6",
+          icon: show ? ChevronDown : ChevronUp,
+          circular: true,
+          onPress: () => setShow((x) => !x),
+          elevation: "$2"
+        }),
+        /* @__PURE__ */ jsx(Drawer, {
+          open: show,
+          onOpenChange: setShow,
+          children: /* @__PURE__ */ jsxs(Drawer.Frame, {
+            h: 200,
+            ai: "center",
+            jc: "center",
+            p: "$6",
+            space: true,
+            children: [
+              /* @__PURE__ */ jsx(Paragraph, {
+                selectable: false,
+                children: "Hello."
+              }),
+              /* @__PURE__ */ jsx(Button, {
+                size: "$6",
+                icon: show ? ChevronDown : ChevronUp,
+                circular: true,
+                onPress: () => setShow((x) => !x),
+                elevation: "$2"
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
 }
 export {
   DrawerDemo

package/dist/esm/DrawerDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DrawerDemo.tsx"],
-  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onChangeOpen={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AAEO,sBAAsB;AAC3B,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AACtC,SACE,oCAAC;AAAA,IAAO,UAAU;AAAA,IAAK,GAAE;AAAA,IAAO,GAAE;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,UAAS;AAAA,KACxE,oCAAC,OAAO,UAAP,MACC,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,MAAM,OAAO,cAAc;AAAA,IAC3B,UAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChC,WAAU;AAAA,GACZ,GACA,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAM,cAAc;AAAA,KAChC,oCAAC,OAAO,OAAP;AAAA,IAAa,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,GAAE;AAAA,IAAK,OAAK;AAAA,KACxD,oCAAC;AAAA,IAAU,YAAY;AAAA,KAAO,QAAM,GACpC,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,MAAM,OAAO,cAAc;AAAA,IAC3B,UAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChC,WAAU;AAAA,GACZ,CACF,CACF,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onOpenChange={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAWQ,cAQE,YARF;AAXR,SAAS,cAAc;AACvB,SAAS,aAAa,iBAAiB;AAEvC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,WAAW,cAAc;AAEnC,SAAS,aAAa;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,SACE,oBAAC;AAAA,IAAO,UAAU;AAAA,IAAK,GAAE;AAAA,IAAO,GAAE;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,UAAS;AAAA,IACxE,+BAAC,OAAO,UAAP;AAAA,MACC;AAAA,4BAAC;AAAA,UACC,MAAK;AAAA,UACL,MAAM,OAAO,cAAc;AAAA,UAC3B,UAAQ;AAAA,UACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAChC,WAAU;AAAA,SACZ;AAAA,QACA,oBAAC;AAAA,UAAO,MAAM;AAAA,UAAM,cAAc;AAAA,UAChC,+BAAC,OAAO,OAAP;AAAA,YAAa,GAAG;AAAA,YAAK,IAAG;AAAA,YAAS,IAAG;AAAA,YAAS,GAAE;AAAA,YAAK,OAAK;AAAA,YACxD;AAAA,kCAAC;AAAA,gBAAU,YAAY;AAAA,gBAAO;AAAA,eAAM;AAAA,cACpC,oBAAC;AAAA,gBACC,MAAK;AAAA,gBACL,MAAM,OAAO,cAAc;AAAA,gBAC3B,UAAQ;AAAA,gBACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,gBAChC,WAAU;AAAA,eACZ;AAAA;AAAA,WACF;AAAA,SACF;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/MenuDemo.js

@@ -1,22 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu as MenuIcon } from "@tamagui/feather-icons";
 import { Menu } from "@tamagui/menu";
-import React, { useState } from "react";
+import { useState } from "react";
 import { Button, H4, Paragraph, YStack } from "tamagui";
 function MenuDemo() {
   const [show, setShow] = useState(false);
-  return /* @__PURE__ */ React.createElement(Menu.Provider, null, /* @__PURE__ */ React.createElement(Menu, {
-    open: show,
-    onChangeOpen: setShow,
-    trigger: /* @__PURE__ */ React.createElement(Button, {
-      size: "$6",
-      icon: MenuIcon,
-      theme: show ? "active" : null,
-      circular: true,
-      onPress: () => setShow((x) => !x)
+  return /* @__PURE__ */ jsx(Menu.Provider, {
+    children: /* @__PURE__ */ jsx(Menu, {
+      open: show,
+      onOpenChange: setShow,
+      trigger: /* @__PURE__ */ jsx(Button, {
+        size: "$6",
+        icon: MenuIcon,
+        theme: show ? "active" : null,
+        circular: true,
+        onPress: () => setShow((x) => !x)
+      }),
+      children: /* @__PURE__ */ jsx(Menu.Item, {
+        children: /* @__PURE__ */ jsxs(YStack, {
+          p: "$2",
+          children: [
+            /* @__PURE__ */ jsx(H4, {
+              children: "Menu contents"
+            }),
+            /* @__PURE__ */ jsx(Paragraph, {
+              children: "Lorem ipsum dolor sit amet."
+            })
+          ]
+        })
+      })
     })
-  }, /* @__PURE__ */ React.createElement(Menu.Item, null, /* @__PURE__ */ React.createElement(YStack, {
-    p: "$2"
-  }, /* @__PURE__ */ React.createElement(H4, null, "Menu contents"), /* @__PURE__ */ React.createElement(Paragraph, null, "Lorem ipsum dolor sit amet.")))));
+  });
 }
 export {
   MenuDemo

package/dist/esm/MenuDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/MenuDemo.tsx"],
-  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onChangeOpen={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AAEO,oBAAoB;AACzB,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,SACE,oCAAC,KAAK,UAAL,MACC,oCAAC;AAAA,IACC,MAAM;AAAA,IACN,cAAc;AAAA,IACd,SACE,oCAAC;AAAA,MACC,MAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,OAAO,WAAW;AAAA,MACzB,UAAQ;AAAA,MACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,KAClC;AAAA,KAGF,oCAAC,KAAK,MAAL,MACC,oCAAC;AAAA,IAAO,GAAE;AAAA,KACR,oCAAC,UAAG,eAAa,GACjB,oCAAC,iBAAU,6BAA2B,CACxC,CACF,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onOpenChange={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
+  "mappings": "AAcU,cAUA,YAVA;AAdV,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY;AACrB,SAAgB,gBAAgB;AAChC,SAAS,QAAQ,IAAI,WAAW,cAAc;AAEvC,SAAS,WAAW;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,SACE,oBAAC,KAAK,UAAL;AAAA,IACC,8BAAC;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SACE,oBAAC;AAAA,QACC,MAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO,OAAO,WAAW;AAAA,QACzB,UAAQ;AAAA,QACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,OAClC;AAAA,MAGF,8BAAC,KAAK,MAAL;AAAA,QACC,+BAAC;AAAA,UAAO,GAAE;AAAA,UACR;AAAA,gCAAC;AAAA,cAAG;AAAA,aAAa;AAAA,YACjB,oBAAC;AAAA,cAAU;AAAA,aAA2B;AAAA;AAAA,SACxC;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/index.js

@@ -2,6 +2,7 @@ import { AlertDialogDemo } from "./AlertDialogDemo";
 import { AnimationsDemo } from "./AnimationsDemo";
 import { AnimationsEnterDemo } from "./AnimationsEnterDemo";
 import { AnimationsHoverDemo } from "./AnimationsHoverDemo";
+import { AnimationsTimingDemo } from "./AnimationsTimingDemo";
 import { AnimationsPresenceDemo } from "./AnimationsPresenceDemo";
 import { AvatarDemo } from "./AvatarDemo";
 import { ButtonDemo } from "./ButtonDemo";
@@ -42,6 +43,7 @@ export {
   AnimationsEnterDemo,
   AnimationsHoverDemo,
   AnimationsPresenceDemo,
+  AnimationsTimingDemo,
   AvatarDemo,
   ButtonDemo,
   CardDemo,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FeatherIconsDemo } from './FeatherIconsDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FeatherIconsDemo } from './FeatherIconsDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
   "names": []
 }

package/dist/jsx/AnimationsEnterDemo.js.map

@@ -1,7 +1,7 @@
 {
   "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,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,CAAC,OAAO,KAAK,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IACE,CAAC,OACC,KAAK,KACL,YAAY;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,SAAS;AAAA,IACX,GACA,UAAU,SACV,UAAU,KACV,MAAM,KACN,SAAS,GACT,OAAO,GACP,GAAG,GACH,GAAG,UACH,GAAG,MAEF,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAjBC;AAAA,IAmBD,CAAC,OAAO,KAAK,KAAK,GAAG,KAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,QAEhE,EAFC;AAAA,EAGH;AAEJ;",
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\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,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,CAAC,OAAO,KAAK,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IACE,CAAC,OACC,KAAK,KACL,YAAY;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,SAAS;AAAA,IACX,GACA,UAAU,SACV,UAAU,KACV,MAAM,KACN,SAAS,GACT,OAAO,GACP,GAAG,GACH,GAAG,UACH,GAAG,MAEF,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAjBC;AAAA,IAmBD,CAAC,OAAO,KAAK,KAAK,GAAG,KAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,QAEhE,EAFC;AAAA,EAGH;AAEJ;",
   "names": []
 }

package/dist/jsx/AnimationsTimingDemo.js

@@ -0,0 +1,13 @@
+import { LogoIcon } from "@tamagui/logo";
+import { Square } from "tamagui";
+function AnimationsTimingDemo() {
+  return <Square bc="$pink10" animation="100ms" elevation="$4" size={110} br="$9" hoverStyle={{
+    scale: 1.2
+  }} pressStyle={{
+    scale: 0.9
+  }}><LogoIcon downscale={0.75} /></Square>;
+}
+export {
+  AnimationsTimingDemo
+};
+//# sourceMappingURL=AnimationsTimingDemo.js.map

package/dist/jsx/AnimationsTimingDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsTimingDemo.tsx"],
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"100ms\"\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,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,uBAAuB;AACrC,SACE,CAAC,OACC,GAAG,UACH,UAAU,QACV,UAAU,KACV,MAAM,KACN,GAAG,KACH,YAAY;AAAA,IACV,OAAO;AAAA,EACT,GACA,YAAY;AAAA,IACV,OAAO;AAAA,EACT,GAEA,CAAC,SAAS,WAAW,MAAM,EAC7B,EAdC;AAgBL;",
+  "names": []
+}

package/dist/jsx/DrawerDemo.js

@@ -6,7 +6,7 @@ function DrawerDemo() {
   const [show, setShow] = useState(false);
   return <YStack minWidth={230} w="100%" h="100%" ai="center" jc="center" position="relative"><Drawer.Provider>
     <Button size="$6" icon={show ? ChevronDown : ChevronUp} circular onPress={() => setShow((x) => !x)} elevation="$2" />
-    <Drawer open={show} onChangeOpen={setShow}><Drawer.Frame h={200} ai="center" jc="center" p="$6" space>
+    <Drawer open={show} onOpenChange={setShow}><Drawer.Frame h={200} ai="center" jc="center" p="$6" space>
       <Paragraph selectable={false}>Hello.</Paragraph>
       <Button size="$6" icon={show ? ChevronDown : ChevronUp} circular onPress={() => setShow((x) => !x)} elevation="$2" />
     </Drawer.Frame></Drawer>

package/dist/jsx/DrawerDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DrawerDemo.tsx"],
-  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onChangeOpen={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA;AACA;AAEA;AACA;AAEO,sBAAsB;AAC3B,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AACtC,SACE,CAAC,OAAO,UAAU,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,SAAS,WACxE,CAAC,OAAO;AAAA,IACN,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACA,CAAC,OAAO,MAAM,MAAM,cAAc,SAChC,CAAC,OAAO,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK;AAAA,MACnD,CAAC,UAAU,YAAY,OAAO,MAAM,EAAnC;AAAA,MACD,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACF,EATC,OAAO,MAUV,EAXC;AAAA,EAYH,EApBC,OAAO,SAqBV,EAtBC;AAwBL;",
+  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onOpenChange={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,aAAa,iBAAiB;AAEvC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,WAAW,cAAc;AAEnC,SAAS,aAAa;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,SACE,CAAC,OAAO,UAAU,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,SAAS,WACxE,CAAC,OAAO;AAAA,IACN,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACA,CAAC,OAAO,MAAM,MAAM,cAAc,SAChC,CAAC,OAAO,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK;AAAA,MACnD,CAAC,UAAU,YAAY,OAAO,MAAM,EAAnC;AAAA,MACD,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACF,EATC,OAAO,MAUV,EAXC;AAAA,EAYH,EApBC,OAAO,SAqBV,EAtBC;AAwBL;",
   "names": []
 }

package/dist/jsx/MenuDemo.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Button, H4, Paragraph, YStack } from "tamagui";
 function MenuDemo() {
   const [show, setShow] = useState(false);
-  return <Menu.Provider><Menu open={show} onChangeOpen={setShow} trigger={<Button size="$6" icon={MenuIcon} theme={show ? "active" : null} circular onPress={() => setShow((x) => !x)} />}><Menu.Item><YStack p="$2">
+  return <Menu.Provider><Menu open={show} onOpenChange={setShow} trigger={<Button size="$6" icon={MenuIcon} theme={show ? "active" : null} circular onPress={() => setShow((x) => !x)} />}><Menu.Item><YStack p="$2">
     <H4>Menu contents</H4>
     <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>
   </YStack></Menu.Item></Menu></Menu.Provider>;

package/dist/jsx/MenuDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/MenuDemo.tsx"],
-  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onChangeOpen={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AAEO,oBAAoB;AACzB,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,SACE,CAAC,KAAK,SACJ,CAAC,KACC,MAAM,MACN,cAAc,SACd,SACE,CAAC,OACC,KAAK,KACL,MAAM,UACN,OAAO,OAAO,WAAW,MACzB,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAClC,IAGF,CAAC,KAAK,KACJ,CAAC,OAAO,EAAE;AAAA,IACR,CAAC,GAAG,aAAa,EAAhB;AAAA,IACD,CAAC,UAAU,2BAA2B,EAArC;AAAA,EACH,EAHC,OAIH,EALC,KAAK,KAMR,EAnBC,KAoBH,EArBC,KAAK;AAuBV;",
+  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onOpenChange={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY;AACrB,SAAgB,gBAAgB;AAChC,SAAS,QAAQ,IAAI,WAAW,cAAc;AAEvC,SAAS,WAAW;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,SACE,CAAC,KAAK,SACJ,CAAC,KACC,MAAM,MACN,cAAc,SACd,SACE,CAAC,OACC,KAAK,KACL,MAAM,UACN,OAAO,OAAO,WAAW,MACzB,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAClC,IAGF,CAAC,KAAK,KACJ,CAAC,OAAO,EAAE;AAAA,IACR,CAAC,GAAG,aAAa,EAAhB;AAAA,IACD,CAAC,UAAU,2BAA2B,EAArC;AAAA,EACH,EAHC,OAIH,EALC,KAAK,KAMR,EAnBC,KAoBH,EArBC,KAAK;AAuBV;",
   "names": []
 }

package/dist/jsx/index.js

@@ -2,6 +2,7 @@ import { AlertDialogDemo } from "./AlertDialogDemo";
 import { AnimationsDemo } from "./AnimationsDemo";
 import { AnimationsEnterDemo } from "./AnimationsEnterDemo";
 import { AnimationsHoverDemo } from "./AnimationsHoverDemo";
+import { AnimationsTimingDemo } from "./AnimationsTimingDemo";
 import { AnimationsPresenceDemo } from "./AnimationsPresenceDemo";
 import { AvatarDemo } from "./AvatarDemo";
 import { ButtonDemo } from "./ButtonDemo";
@@ -42,6 +43,7 @@ export {
   AnimationsEnterDemo,
   AnimationsHoverDemo,
   AnimationsPresenceDemo,
+  AnimationsTimingDemo,
   AvatarDemo,
   ButtonDemo,
   CardDemo,

package/dist/jsx/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FeatherIconsDemo } from './FeatherIconsDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FeatherIconsDemo } from './FeatherIconsDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "sideEffects": [
     "*.css"
   ],
@@ -28,27 +28,27 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "^1.0.21",
-    "@tamagui/button": "^1.0.21",
-    "@tamagui/config-base": "^1.0.21",
-    "@tamagui/core": "^1.0.21",
-    "@tamagui/list-item": "^1.0.21",
-    "@tamagui/logo": "^1.0.21",
-    "@tamagui/menu": "^1.0.21",
-    "@tamagui/popover": "^1.0.21",
-    "@tamagui/progress": "^1.0.21",
-    "@tamagui/select": "^1.0.21",
-    "@tamagui/sheet": "^1.0.21",
-    "@tamagui/slider": "^1.0.21",
-    "@tamagui/stacks": "^1.0.21",
-    "tamagui": "^1.0.21"
+    "@tamagui/avatar": "^1.0.22",
+    "@tamagui/button": "^1.0.22",
+    "@tamagui/config-base": "^1.0.22",
+    "@tamagui/core": "^1.0.22",
+    "@tamagui/list-item": "^1.0.22",
+    "@tamagui/logo": "^1.0.22",
+    "@tamagui/menu": "^1.0.22",
+    "@tamagui/popover": "^1.0.22",
+    "@tamagui/progress": "^1.0.22",
+    "@tamagui/select": "^1.0.22",
+    "@tamagui/sheet": "^1.0.22",
+    "@tamagui/slider": "^1.0.22",
+    "@tamagui/stacks": "^1.0.22",
+    "tamagui": "^1.0.22"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.21",
+    "@tamagui/build": "^1.0.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/AnimationsEnterDemo.tsx

@@ -1,5 +1,4 @@
 import { LogoIcon } from '@tamagui/logo'
-import React from 'react'
 import { useRef, useState } from 'react'
 import { Button, Square, YStack } from 'tamagui'
 

package/src/AnimationsTimingDemo.tsx

@@ -0,0 +1,22 @@
+import { LogoIcon } from '@tamagui/logo'
+import { Square } from 'tamagui'
+
+export function AnimationsTimingDemo() {
+  return (
+    <Square
+      bc="$pink10"
+      animation="100ms"
+      elevation="$4"
+      size={110}
+      br="$9"
+      hoverStyle={{
+        scale: 1.2,
+      }}
+      pressStyle={{
+        scale: 0.9,
+      }}
+    >
+      <LogoIcon downscale={0.75} />
+    </Square>
+  )
+}

package/src/index.tsx

@@ -2,6 +2,7 @@ export { AlertDialogDemo } from './AlertDialogDemo'
 export { AnimationsDemo } from './AnimationsDemo'
 export { AnimationsEnterDemo } from './AnimationsEnterDemo'
 export { AnimationsHoverDemo } from './AnimationsHoverDemo'
+export { AnimationsTimingDemo } from './AnimationsTimingDemo'
 export { AnimationsPresenceDemo } from './AnimationsPresenceDemo'
 export { AvatarDemo } from './AvatarDemo'
 export { ButtonDemo } from './ButtonDemo'

package/types/AnimationsTimingDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function AnimationsTimingDemo(): JSX.Element;
+//# sourceMappingURL=AnimationsTimingDemo.d.ts.map

package/types/index.d.ts

@@ -2,6 +2,7 @@ export { AlertDialogDemo } from './AlertDialogDemo';
 export { AnimationsDemo } from './AnimationsDemo';
 export { AnimationsEnterDemo } from './AnimationsEnterDemo';
 export { AnimationsHoverDemo } from './AnimationsHoverDemo';
+export { AnimationsTimingDemo } from './AnimationsTimingDemo';
 export { AnimationsPresenceDemo } from './AnimationsPresenceDemo';
 export { AvatarDemo } from './AvatarDemo';
 export { ButtonDemo } from './ButtonDemo';