@tamagui/demos 1.14.0 → 1.14.2

package/dist/cjs/AddThemeDemo.js

@@ -1,2 +1,60 @@
-"use strict";var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var h=(e,r)=>{for(var u in r)n(e,u,{get:r[u],enumerable:!0})},p=(e,r,u,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let m of b(r))!c.call(e,m)&&m!==u&&n(e,m,{get:()=>r[m],enumerable:!(s=l(r,m))||s.enumerable});return e};var i=e=>p(n({},"__esModule",{value:!0}),e);var T={};h(T,{AddThemeDemo:()=>S});module.exports=i(T);var t=require("react/jsx-runtime"),a=require("@tamagui/theme"),d=require("react"),o=require("tamagui");function S(){const[e,r]=(0,d.useState)();return(0,t.jsxs)(o.YStack,{alignItems:"center",space:!0,children:[(0,t.jsxs)(o.H3,{children:["Theme: ",e??"none"]}),(0,t.jsx)(o.Theme,{name:e??"red",children:(0,t.jsx)(o.Square,{borderRadius:"$8",size:100,backgroundColor:"$color"})}),(0,t.jsx)(o.Button,{disabled:e==="superblue",onPress:()=>{(0,a.addTheme)({name:"superblue",insertCSS:!0,theme:{background:"#000",color:"blue"}}),r("superblue")},children:"Add superblue theme"})]})}0&&(module.exports={AddThemeDemo});
+"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 AddThemeDemo_exports = {};
+__export(AddThemeDemo_exports, {
+  AddThemeDemo: () => AddThemeDemo
+});
+module.exports = __toCommonJS(AddThemeDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@tamagui/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+function AddThemeDemo() {
+  const [theme, setTheme] = (0, import_react.useState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", space: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.H3, { children: [
+      "Theme: ",
+      theme ?? "none"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { name: theme ?? "red", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        disabled: theme === "superblue",
+        onPress: () => {
+          (0, import_theme.addTheme)({
+            name: "superblue",
+            insertCSS: true,
+            theme: {
+              background: "#000",
+              color: "blue"
+            }
+          });
+          setTheme("superblue");
+        },
+        children: "Add superblue theme"
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddThemeDemo
+});
 //# sourceMappingURL=AddThemeDemo.js.map

package/dist/cjs/AddThemeDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AddThemeDemo.tsx"],
   "sourcesContent": ["import { addTheme } from '@tamagui/theme'\nimport { useState } from 'react'\nimport { Button, H3, Square, Theme, YStack } from 'tamagui'\n\nexport function AddThemeDemo() {\n  const [theme, setTheme] = useState<any>()\n\n  return (\n    <YStack alignItems=\"center\" space>\n      <H3>Theme: {theme ?? 'none'}</H3>\n\n      <Theme name={theme ?? 'red'}>\n        <Square 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            },\n          })\n          setTheme('superblue')\n        }}\n      >\n        Add superblue theme\n      </Button>\n    </YStack>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GASM,IAAAI,EAAA,6BATNC,EAAyB,0BACzBC,EAAyB,iBACzBC,EAAkD,mBAE3C,SAASL,GAAe,CAC7B,KAAM,CAACM,EAAOC,CAAQ,KAAI,YAAc,EAExC,SACE,QAAC,UAAO,WAAW,SAAS,MAAK,GAC/B,qBAAC,MAAG,oBAAQD,GAAS,QAAO,KAE5B,OAAC,SAAM,KAAMA,GAAS,MACpB,mBAAC,UAAO,aAAa,KAAK,KAAM,IAAK,gBAAgB,SAAS,EAChE,KAEA,OAAC,UACC,SAAUA,IAAU,YACpB,QAAS,IAAM,IACb,YAAS,CACP,KAAM,YACN,UAAW,GACX,MAAO,CACL,WAAY,OACZ,MAAO,MACT,CACF,CAAC,EACDC,EAAS,WAAW,CACtB,EACD,+BAED,GACF,CAEJ",
-  "names": ["AddThemeDemo_exports", "__export", "AddThemeDemo", "__toCommonJS", "import_jsx_runtime", "import_theme", "import_react", "import_tamagui", "theme", "setTheme"]
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASM;AATN,mBAAyB;AACzB,mBAAyB;AACzB,qBAAkD;AAE3C,SAAS,eAAe;AAC7B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAc;AAExC,SACE,6CAAC,yBAAO,YAAW,UAAS,OAAK,MAC/B;AAAA,iDAAC,qBAAG;AAAA;AAAA,MAAQ,SAAS;AAAA,OAAO;AAAA,IAE5B,4CAAC,wBAAM,MAAM,SAAS,OACpB,sDAAC,yBAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,UAAU;AAAA,QACpB,SAAS,MAAM;AACb,qCAAS;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;AAAA,IAED;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/cjs/AlertDialogDemo.js

@@ -1,2 +1,77 @@
-"use strict";var c=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(i,o)=>{for(var l in o)c(i,l,{get:o[l],enumerable:!0})},s=(i,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of y(o))!p.call(i,a)&&a!==l&&c(i,a,{get:()=>o[a],enumerable:!(n=r(o,a))||n.enumerable});return i};var A=i=>s(c({},"__esModule",{value:!0}),i);var u={};g(u,{AlertDialogDemo:()=>D});module.exports=A(u);var e=require("react/jsx-runtime"),t=require("tamagui");function D(){return(0,e.jsxs)(t.AlertDialog,{native:!0,children:[(0,e.jsx)(t.AlertDialog.Trigger,{asChild:!0,children:(0,e.jsx)(t.Button,{children:"Show Alert"})}),(0,e.jsxs)(t.AlertDialog.Portal,{children:[(0,e.jsx)(t.AlertDialog.Overlay,{animation:"quick",opacity:.5,enterStyle:{opacity:0},exitStyle:{opacity:0}},"overlay"),(0,e.jsx)(t.AlertDialog.Content,{bordered:!0,elevate:!0,animation:["quick",{opacity:{overshootClamping:!0}}],enterStyle:{x:0,y:-20,opacity:0,scale:.9},exitStyle:{x:0,y:10,opacity:0,scale:.95},x:0,scale:1,opacity:1,y:0,children:(0,e.jsxs)(t.YStack,{space:!0,children:[(0,e.jsx)(t.AlertDialog.Title,{children:"Accept"}),(0,e.jsx)(t.AlertDialog.Description,{children:"By pressing yes, you accept our terms and conditions."}),(0,e.jsxs)(t.XStack,{space:"$3",justifyContent:"flex-end",children:[(0,e.jsx)(t.AlertDialog.Cancel,{asChild:!0,children:(0,e.jsx)(t.Button,{children:"Cancel"})}),(0,e.jsx)(t.AlertDialog.Action,{asChild:!0,children:(0,e.jsx)(t.Button,{theme:"active",children:"Accept"})})]})]})},"content")]})]})}0&&(module.exports={AlertDialogDemo});
+"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 AlertDialogDemo_exports = {};
+__export(AlertDialogDemo_exports, {
+  AlertDialogDemo: () => AlertDialogDemo
+});
+module.exports = __toCommonJS(AlertDialogDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tamagui = require("tamagui");
+function AlertDialogDemo() {
+  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",
+          opacity: 0.5,
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 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", justifyContent: "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 = {
+  AlertDialogDemo
+});
 //# sourceMappingURL=AlertDialogDemo.js.map

package/dist/cjs/AlertDialogDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AlertDialogDemo.tsx"],
   "sourcesContent": ["import { 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          opacity={0.5}\n          enterStyle={{opacity:0 }}\n          exitStyle={{opacity: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\" justifyContent=\"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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,IAAA,eAAAC,EAAAH,GAMQ,IAAAI,EAAA,6BANRC,EAAoD,mBAE7C,SAASH,GAAkB,CAChC,SACE,QAAC,eAAY,OAAM,GACjB,oBAAC,cAAY,QAAZ,CAAoB,QAAO,GAC1B,mBAAC,UAAO,sBAAU,EACpB,KAEA,QAAC,cAAY,OAAZ,CACC,oBAAC,cAAY,QAAZ,CAEC,UAAU,QACV,QAAS,GACT,WAAY,CAAC,QAAQ,CAAE,EACvB,UAAW,CAAC,QAAQ,CAAE,GAJlB,SAKN,KACA,OAAC,cAAY,QAAZ,CACC,SAAQ,GACR,QAAO,GAEP,UAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,WAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,UAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,EAAG,EACH,MAAO,EACP,QAAS,EACT,EAAG,EAEH,oBAAC,UAAO,MAAK,GACX,oBAAC,cAAY,MAAZ,CAAkB,kBAAM,KACzB,OAAC,cAAY,YAAZ,CAAwB,iEAEzB,KAEA,QAAC,UAAO,MAAM,KAAK,eAAe,WAChC,oBAAC,cAAY,OAAZ,CAAmB,QAAO,GACzB,mBAAC,UAAO,kBAAM,EAChB,KACA,OAAC,cAAY,OAAZ,CAAmB,QAAO,GACzB,mBAAC,UAAO,MAAM,SAAS,kBAAM,EAC/B,GACF,GACF,GA9BI,SA+BN,GACF,GACF,CAEJ",
-  "names": ["AlertDialogDemo_exports", "__export", "AlertDialogDemo", "__toCommonJS", "import_jsx_runtime", "import_tamagui"]
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMQ;AANR,qBAAoD;AAE7C,SAAS,kBAAkB;AAChC,SACE,6CAAC,8BAAY,QAAM,MACjB;AAAA,gDAAC,2BAAY,SAAZ,EAAoB,SAAO,MAC1B,sDAAC,yBAAO,wBAAU,GACpB;AAAA,IAEA,6CAAC,2BAAY,QAAZ,EACC;AAAA;AAAA,QAAC,2BAAY;AAAA,QAAZ;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY,EAAC,SAAQ,EAAE;AAAA,UACvB,WAAW,EAAC,SAAQ,EAAE;AAAA;AAAA,QAJlB;AAAA,MAKN;AAAA,MACA;AAAA,QAAC,2BAAY;AAAA,QAAZ;AAAA,UACC,UAAQ;AAAA,UACR,SAAO;AAAA,UAEP,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,SAAS;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,UACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,UAClD,GAAG;AAAA,UACH,OAAO;AAAA,UACP,SAAS;AAAA,UACT,GAAG;AAAA,UAEH,uDAAC,yBAAO,OAAK,MACX;AAAA,wDAAC,2BAAY,OAAZ,EAAkB,oBAAM;AAAA,YACzB,4CAAC,2BAAY,aAAZ,EAAwB,mEAEzB;AAAA,YAEA,6CAAC,yBAAO,OAAM,MAAK,gBAAe,YAChC;AAAA,0DAAC,2BAAY,QAAZ,EAAmB,SAAO,MACzB,sDAAC,yBAAO,oBAAM,GAChB;AAAA,cACA,4CAAC,2BAAY,QAAZ,EAAmB,SAAO,MACzB,sDAAC,yBAAO,OAAM,UAAS,oBAAM,GAC/B;AAAA,eACF;AAAA,aACF;AAAA;AAAA,QA9BI;AAAA,MA+BN;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/cjs/AnimationsDemo.js

@@ -1,2 +1,114 @@
-"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var n in e)l(o,n,{get:e[n],enumerable:!0})},S=(o,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of y(e))!p.call(o,t)&&t!==n&&l(o,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return o};var g=o=>S(l({},"__esModule",{value:!0}),o);var f={};b(f,{AnimationsDemo:()=>h,positions:()=>a});module.exports=g(f);var r=require("react/jsx-runtime"),c=require("@tamagui/logo"),d=require("@tamagui/lucide-icons"),s=require("tamagui");function h(o){const[e,n]=(0,s.useControllableState)({strategy:"most-recent-wins",prop:o.position,defaultProp:0}),i=a[e],t=(0,s.useEvent)(()=>{n(u=>(u+1)%a.length)});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.Square,{animation:o.animation||"bouncy",onPress:t,size:104,borderColor:"$borderColor",borderWidth:1,borderRadius:"$9",backgroundColor:"$color9",hoverStyle:{scale:1.1},pressStyle:{scale:.9},...i,children:o.children||(0,r.jsx)(c.LogoIcon,{downscale:.75})}),(0,r.jsx)(s.Button,{position:"absolute",bottom:20,left:20,icon:d.Play,theme:o.tint,size:"$5",circular:!0,onPress:t})]})}const a=[{x:0,y:0,scale:1,rotate:"0deg"},{x:-50,y:-50,scale:.5,rotate:"-45deg",hoverStyle:{scale:.6},pressStyle:{scale:.4}},{x:50,y:50,scale:1,rotate:"180deg",hoverStyle:{scale:1.1},pressStyle:{scale:.9}}];0&&(module.exports={AnimationsDemo,positions});
+"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 AnimationsDemo_exports = {};
+__export(AnimationsDemo_exports, {
+  AnimationsDemo: () => AnimationsDemo,
+  positions: () => positions
+});
+module.exports = __toCommonJS(AnimationsDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_logo = require("@tamagui/logo");
+var import_lucide_icons = require("@tamagui/lucide-icons");
+var import_tamagui = require("tamagui");
+function AnimationsDemo(props) {
+  const [positionI, setPositionI] = (0, import_tamagui.useControllableState)({
+    strategy: "most-recent-wins",
+    prop: props.position,
+    defaultProp: 0
+  });
+  const position = positions[positionI];
+  const onPress = (0, import_tamagui.useEvent)(() => {
+    setPositionI((x) => {
+      return (x + 1) % positions.length;
+    });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        animation: props.animation || "bouncy",
+        onPress,
+        size: 104,
+        borderColor: "$borderColor",
+        borderWidth: 1,
+        borderRadius: "$9",
+        backgroundColor: "$color9",
+        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,
+      {
+        position: "absolute",
+        bottom: 20,
+        left: 20,
+        icon: import_lucide_icons.Play,
+        theme: props.tint,
+        size: "$5",
+        circular: true,
+        onPress
+      }
+    )
+  ] });
+}
+const positions = [
+  {
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotate: "0deg"
+  },
+  {
+    x: -50,
+    y: -50,
+    scale: 0.5,
+    rotate: "-45deg",
+    hoverStyle: {
+      scale: 0.6
+    },
+    pressStyle: {
+      scale: 0.4
+    }
+  },
+  {
+    x: 50,
+    y: 50,
+    scale: 1,
+    rotate: "180deg",
+    hoverStyle: {
+      scale: 1.1
+    },
+    pressStyle: {
+      scale: 0.9
+    }
+  }
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimationsDemo,
+  positions
+});
 //# sourceMappingURL=AnimationsDemo.js.map

package/dist/cjs/AnimationsDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } 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 onPress = useEvent(() => {\n    setPositionI((x) => {\n      return (x + 1) % positions.length\n    })\n  })\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={onPress}\n        size={104}\n        borderColor=\"$borderColor\"\n        borderWidth={1}\n        borderRadius=\"$9\"\n        backgroundColor=\"$color9\"\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        position=\"absolute\"\n        bottom={20}\n        left={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={onPress}\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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,cAAAC,IAAA,eAAAC,EAAAJ,GAkBI,IAAAK,EAAA,6BAlBJC,EAAyB,yBACzBC,EAAqB,iCACrBC,EAA+D,mBAExD,SAASN,EAAeO,EAAO,CACpC,KAAM,CAACC,EAAWC,CAAY,KAAI,wBAAqB,CACrD,SAAU,mBACV,KAAMF,EAAM,SACZ,YAAa,CACf,CAAC,EACKG,EAAWT,EAAUO,CAAS,EAC9BG,KAAU,YAAS,IAAM,CAC7BF,EAAcG,IACJA,EAAI,GAAKX,EAAU,MAC5B,CACH,CAAC,EAED,SACE,oBACE,oBAAC,UACC,UAAWM,EAAM,WAAa,SAC9B,QAASI,EACT,KAAM,IACN,YAAY,eACZ,YAAa,EACb,aAAa,KACb,gBAAgB,UAChB,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,EACC,GAAGD,EAEH,SAAAH,EAAM,aAAY,OAAC,YAAS,UAAW,IAAM,EAChD,KAEA,OAAC,UACC,SAAS,WACT,OAAQ,GACR,KAAM,GACN,KAAM,OACN,MAAOA,EAAM,KACb,KAAK,KACL,SAAQ,GACR,QAASI,EACX,GACF,CAEJ,CAEO,MAAMV,EAAY,CACvB,CACE,EAAG,EACH,EAAG,EACH,MAAO,EACP,OAAQ,MACV,EACA,CACE,EAAG,IACH,EAAG,IACH,MAAO,GACP,OAAQ,SACR,WAAY,CACV,MAAO,EACT,EACA,WAAY,CACV,MAAO,EACT,CACF,EACA,CACE,EAAG,GACH,EAAG,GACH,MAAO,EACP,OAAQ,SACR,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,CACF,CACF",
-  "names": ["AnimationsDemo_exports", "__export", "AnimationsDemo", "positions", "__toCommonJS", "import_jsx_runtime", "import_logo", "import_lucide_icons", "import_tamagui", "props", "positionI", "setPositionI", "position", "onPress", "x"]
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAlBJ,kBAAyB;AACzB,0BAAqB;AACrB,qBAA+D;AAExD,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,SAAS;AACpC,QAAM,cAAU,yBAAS,MAAM;AAC7B,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,KAAK,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAED,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM,aAAa;AAAA,QAC9B;AAAA,QACA,MAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAa;AAAA,QACb,cAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEH,gBAAM,YAAY,4CAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,IAChD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO,MAAM;AAAA,QACb,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;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,2 +1,64 @@
-"use strict";var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var p=(o,e)=>{for(var r in e)c(o,r,{get:e[r],enumerable:!0})},d=(o,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of y(e))!f.call(o,n)&&n!==r&&c(o,n,{get:()=>e[n],enumerable:!(i=l(e,n))||i.enumerable});return o};var k=o=>d(c({},"__esModule",{value:!0}),o);var $={};p($,{AnimationsEnterDemo:()=>S});module.exports=k($);var t=require("react/jsx-runtime"),u=require("@tamagui/logo"),s=require("react"),a=require("tamagui"),m=require("./useOnIntersecting");function S(o){const e=(0,s.useRef)(null),r=(0,m.useIsIntersecting)(e,{once:!0}),[i,n]=(0,s.useState)(0);return r?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.Square,{enterStyle:{scale:1.5,y:-10,opacity:0},animation:"bouncy",elevation:"$4",size:110,opacity:1,scale:1,y:0,backgroundColor:"$pink10",borderRadius:"$9",children:o.children??(0,t.jsx)(u.LogoIcon,{downscale:.75})},i),(0,t.jsx)(a.Button,{size:"$3",marginTop:"$4",onPress:()=>n(Math.random()),children:"Re-mount"})]}):(0,t.jsx)(a.YStack,{ref:e})}0&&(module.exports={AnimationsEnterDemo});
+"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 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 = require("react");
+var import_tamagui = require("tamagui");
+var import_useOnIntersecting = require("./useOnIntersecting");
+function AnimationsEnterDemo(props) {
+  const ref = (0, import_react.useRef)(null);
+  const hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, { once: true });
+  const [key, setKey] = (0, import_react.useState)(0);
+  if (!hasIntersected) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { ref });
+  }
+  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,
+        backgroundColor: "$pink10",
+        borderRadius: "$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", marginTop: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimationsEnterDemo
+});
 //# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/cjs/AnimationsEnterDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsEnterDemo.tsx"],
   "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        backgroundColor=\"$pink10\"\n        borderRadius=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" marginTop=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAYW,IAAAI,EAAA,6BAZXC,EAAyB,yBACzBC,EAAiC,iBACjCC,EAAuC,mBAEvCC,EAAkC,+BAE3B,SAASN,EAAoBO,EAAY,CAC9C,MAAMC,KAAM,UAAoB,IAAI,EAC9BC,KAAiB,qBAAkBD,EAAK,CAAE,KAAM,EAAK,CAAC,EACtD,CAACE,EAAKC,CAAM,KAAI,YAAS,CAAC,EAEhC,OAAKF,KAKH,oBACE,oBAAC,UAEC,WAAY,CACV,MAAO,IACP,EAAG,IACH,QAAS,CACX,EACA,UAAU,SACV,UAAU,KACV,KAAM,IACN,QAAS,EACT,MAAO,EACP,EAAG,EACH,gBAAgB,UAChB,aAAa,KAEZ,SAAAF,EAAM,aAAY,OAAC,YAAS,UAAW,IAAM,GAfzCG,CAgBP,KAEA,OAAC,UAAO,KAAK,KAAK,UAAU,KAAK,QAAS,IAAMC,EAAO,KAAK,OAAO,CAAC,EAAG,oBAEvE,GACF,KA3BO,OAAC,UAAO,IAAKH,EAAK,CA6B7B",
-  "names": ["AnimationsEnterDemo_exports", "__export", "AnimationsEnterDemo", "__toCommonJS", "import_jsx_runtime", "import_logo", "import_react", "import_tamagui", "import_useOnIntersecting", "props", "ref", "hasIntersected", "key", "setKey"]
+  "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,yBAAO,KAAU;AAAA,EAC3B;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;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,iBAAgB;AAAA,QAChB,cAAa;AAAA,QAEZ,gBAAM,YAAY,4CAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,MAfzC;AAAA,IAgBP;AAAA,IAEA,4CAAC,yBAAO,MAAK,MAAK,WAAU,MAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,sBAEvE;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/cjs/AnimationsHoverDemo.js

@@ -1,2 +1,50 @@
-"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var u=(e,o)=>{for(var n in o)i(e,n,{get:o[n],enumerable:!0})},d=(e,o,n,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of c(o))!p.call(e,r)&&r!==n&&i(e,r,{get:()=>o[r],enumerable:!(t=m(o,r))||t.enumerable});return e};var S=e=>d(i({},"__esModule",{value:!0}),e);var f={};u(f,{AnimationsHoverDemo:()=>b});module.exports=S(f);var a=require("react/jsx-runtime"),l=require("@tamagui/logo"),s=require("tamagui");function b(){return(0,a.jsx)(s.Square,{borderColor:"$pink10",animation:"bouncy",elevation:"$4",size:110,borderRadius:"$9",hoverStyle:{scale:1.2},pressStyle:{scale:.9},children:(0,a.jsx)(l.LogoIcon,{downscale:.75})})}0&&(module.exports={AnimationsHoverDemo});
+"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 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_tamagui = require("tamagui");
+function AnimationsHoverDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tamagui.Square,
+    {
+      borderColor: "$pink10",
+      animation: "bouncy",
+      elevation: "$4",
+      size: 110,
+      borderRadius: "$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 = {
+  AnimationsHoverDemo
+});
 //# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/cjs/AnimationsHoverDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsHoverDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      borderColor=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAkBM,IAAAI,EAAA,6BAlBNC,EAAyB,yBACzBC,EAAuB,mBAEhB,SAASJ,GAAsB,CACpC,SACE,OAAC,UACC,YAAY,UACZ,UAAU,SACV,UAAU,KACV,KAAM,IACN,aAAa,KACb,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,EAEA,mBAAC,YAAS,UAAW,IAAM,EAC7B,CAEJ",
-  "names": ["AnimationsHoverDemo_exports", "__export", "AnimationsHoverDemo", "__toCommonJS", "import_jsx_runtime", "import_logo", "import_tamagui"]
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM;AAlBN,kBAAyB;AACzB,qBAAuB;AAEhB,SAAS,sBAAsB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,sDAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
+  "names": []
 }

package/dist/cjs/AnimationsPresenceDemo.js

@@ -1,2 +1,97 @@
-"use strict";var y=Object.create;var s=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var P=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},u=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of x(e))!L.call(t,a)&&a!==i&&s(t,a,{get:()=>e[a],enumerable:!(o=k(e,a))||o.enumerable});return t};var m=(t,e,i)=>(i=t!=null?y(S(t)):{},u(e||!t||!t.__esModule?s(i,"default",{value:t,enumerable:!0}):i,t)),V=t=>u(s({},"__esModule",{value:!0}),t);var R={};P(R,{AnimationsPresenceDemo:()=>w,images:()=>l});module.exports=V(R);var n=require("react/jsx-runtime"),g=require("@tamagui/animate-presence"),c=require("@tamagui/lucide-icons"),h=require("react"),r=require("tamagui"),f=m(require("../../public/photo1.jpg")),b=m(require("../../public/photo2.jpg")),d=m(require("../../public/photo3.jpg"));const l=[f.default,b.default,d.default].map(t=>t.src||t),v=(0,r.styled)(r.YStack,{variants:{isLeft:{true:{x:-300,opacity:0}},isRight:{true:{x:300,opacity:0}}}});function w(){const[[t,e],i]=(0,h.useState)([0,0]),o=A(0,l.length,t),a=p=>{i([t+p,p])};return(0,n.jsxs)(r.XStack,{overflow:"hidden",backgroundColor:"#000",position:"relative",height:300,width:"100%",alignItems:"center",children:[(0,n.jsx)(g.AnimatePresence,{enterVariant:e===1||e===0?"isRight":"isLeft",exitVariant:e===1?"isLeft":"isRight",children:(0,n.jsx)(v,{animation:"bouncy",fullscreen:!0,x:0,opacity:1,children:(0,n.jsx)(r.Image,{src:l[o],width:780,height:300})},t)}),(0,n.jsx)(r.Button,{accessibilityLabel:"Carousel left",icon:c.ArrowLeft,size:"$5",position:"absolute",left:"$4",circular:!0,elevate:!0,onPress:()=>a(-1)}),(0,n.jsx)(r.Button,{accessibilityLabel:"Carousel right",icon:c.ArrowRight,size:"$5",position:"absolute",right:"$4",circular:!0,elevate:!0,onPress:()=>a(1)})]})}const A=(t,e,i)=>{const o=e-t;return((i-t)%o+o)%o+t};0&&(module.exports={AnimationsPresenceDemo,images});
+"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)
+    __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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AnimationsPresenceDemo_exports = {};
+__export(AnimationsPresenceDemo_exports, {
+  AnimationsPresenceDemo: () => AnimationsPresenceDemo,
+  images: () => images
+});
+module.exports = __toCommonJS(AnimationsPresenceDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_animate_presence = require("@tamagui/animate-presence");
+var import_lucide_icons = require("@tamagui/lucide-icons");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_photo1 = __toESM(require("../../public/photo1.jpg"));
+var import_photo2 = __toESM(require("../../public/photo2.jpg"));
+var import_photo3 = __toESM(require("../../public/photo3.jpg"));
+const images = [import_photo1.default, import_photo2.default, import_photo3.default].map((x) => x.src || x);
+const YStackEnterable = (0, import_tamagui.styled)(import_tamagui.YStack, {
+  variants: {
+    isLeft: { true: { x: -300, opacity: 0 } },
+    isRight: { true: { x: 300, opacity: 0 } }
+  }
+});
+function AnimationsPresenceDemo() {
+  const [[page, direction], setPage] = (0, import_react.useState)([0, 0]);
+  const imageIndex = wrap(0, images.length, page);
+  const paginate = (newDirection) => {
+    setPage([page + newDirection, newDirection]);
+  };
+  const enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft";
+  const exitVariant = direction === 1 ? "isLeft" : "isRight";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { overflow: "hidden", backgroundColor: "#000", position: "relative", height: 300, width: "100%", alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, { enterVariant, exitVariant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YStackEnterable, { animation: "bouncy", fullscreen: true, x: 0, opacity: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Image, { src: images[imageIndex], width: 780, height: 300 }) }, page) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        accessibilityLabel: "Carousel left",
+        icon: import_lucide_icons.ArrowLeft,
+        size: "$5",
+        position: "absolute",
+        left: "$4",
+        circular: true,
+        elevate: true,
+        onPress: () => paginate(-1)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        accessibilityLabel: "Carousel right",
+        icon: import_lucide_icons.ArrowRight,
+        size: "$5",
+        position: "absolute",
+        right: "$4",
+        circular: true,
+        elevate: true,
+        onPress: () => paginate(1)
+      }
+    )
+  ] });
+}
+const wrap = (min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimationsPresenceDemo,
+  images
+});
 //# sourceMappingURL=AnimationsPresenceDemo.js.map

package/dist/cjs/AnimationsPresenceDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
   "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1, photo2, photo3].map((x) => x.src || x)\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  } as const,\n})\n\nexport function AnimationsPresenceDemo() {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack overflow=\"hidden\" backgroundColor=\"#000\" position=\"relative\" height={300} width=\"100%\" alignItems=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} opacity={1}>\n          <Image src={images[imageIndex]} width={780} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        position=\"absolute\"\n        left=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        position=\"absolute\"\n        right=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4BAAAE,EAAA,WAAAC,IAAA,eAAAC,EAAAJ,GAkCI,IAAAK,EAAA,6BAlCJC,EAAgC,qCAChCC,EAAsC,iCACtCC,EAAyB,iBACzBC,EAAsD,mBAGtDC,EAAmB,sCAEnBC,EAAmB,sCAEnBC,EAAmB,sCAEZ,MAAMT,EAAS,CAAC,EAAAU,QAAQ,EAAAC,QAAQ,EAAAC,OAAM,EAAE,IAAKC,GAAMA,EAAE,KAAOA,CAAC,EAE9DC,KAAkB,UAAO,SAAQ,CACrC,SAAU,CACR,OAAQ,CAAE,KAAM,CAAE,EAAG,KAAM,QAAS,CAAE,CAAE,EACxC,QAAS,CAAE,KAAM,CAAE,EAAG,IAAK,QAAS,CAAE,CAAE,CAC1C,CACF,CAAC,EAEM,SAASf,GAAyB,CACvC,KAAM,CAAC,CAACgB,EAAMC,CAAS,EAAGC,CAAO,KAAI,YAAS,CAAC,EAAG,CAAC,CAAC,EAE9CC,EAAaC,EAAK,EAAGnB,EAAO,OAAQe,CAAI,EAExCK,EAAYC,GAAyB,CACzCJ,EAAQ,CAACF,EAAOM,EAAcA,CAAY,CAAC,CAC7C,EAKA,SACE,QAAC,UAAO,SAAS,SAAS,gBAAgB,OAAO,SAAS,WAAW,OAAQ,IAAK,MAAM,OAAO,WAAW,SACxG,oBAAC,mBAAgB,aALAL,IAAc,GAAKA,IAAc,EAAI,UAAY,SAKrB,YAJ7BA,IAAc,EAAI,SAAW,UAK3C,mBAACF,EAAA,CAA2B,UAAU,SAAS,WAAU,GAAC,EAAG,EAAG,QAAS,EACvE,mBAAC,SAAM,IAAKd,EAAOkB,CAAU,EAAG,MAAO,IAAK,OAAQ,IAAK,GADrCH,CAEtB,EACF,KAEA,OAAC,UACC,mBAAmB,gBACnB,KAAM,YACN,KAAK,KACL,SAAS,WACT,KAAK,KACL,SAAQ,GACR,QAAO,GACP,QAAS,IAAMK,EAAS,EAAE,EAC5B,KACA,OAAC,UACC,mBAAmB,iBACnB,KAAM,aACN,KAAK,KACL,SAAS,WACT,MAAM,KACN,SAAQ,GACR,QAAO,GACP,QAAS,IAAMA,EAAS,CAAC,EAC3B,GACF,CAEJ,CAEA,MAAMD,EAAO,CAACG,EAAaC,EAAaC,IAAc,CACpD,MAAMC,EAAYF,EAAMD,EACxB,QAAWE,EAAIF,GAAOG,EAAaA,GAAaA,EAAaH,CAC/D",
-  "names": ["AnimationsPresenceDemo_exports", "__export", "AnimationsPresenceDemo", "images", "__toCommonJS", "import_jsx_runtime", "import_animate_presence", "import_lucide_icons", "import_react", "import_tamagui", "import_photo1", "import_photo2", "import_photo3", "photo1", "photo2", "photo3", "x", "YStackEnterable", "page", "direction", "setPage", "imageIndex", "wrap", "paginate", "newDirection", "min", "max", "v", "rangeSize"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAlCJ,8BAAgC;AAChC,0BAAsC;AACtC,mBAAyB;AACzB,qBAAsD;AAGtD,oBAAmB;AAEnB,oBAAmB;AAEnB,oBAAmB;AAEZ,MAAM,SAAS,CAAC,cAAAA,SAAQ,cAAAC,SAAQ,cAAAC,OAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;AAEpE,MAAM,sBAAkB,uBAAO,uBAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,QAAI,uBAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,6CAAC,yBAAO,UAAS,UAAS,iBAAgB,QAAO,UAAS,YAAW,QAAQ,KAAK,OAAM,QAAO,YAAW,UACxG;AAAA,gDAAC,2CAAgB,cAA4B,aAC3C,sDAAC,mBAA2B,WAAU,UAAS,YAAU,MAAC,GAAG,GAAG,SAAS,GACvE,sDAAC,wBAAM,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,KAAK,KADrC,IAEtB,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,IAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAS;AAAA,QACT,OAAM;AAAA,QACN,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,CAAC;AAAA;AAAA,IAC3B;AAAA,KACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
+  "names": ["photo1", "photo2", "photo3"]
 }