@tamagui/demos 2.7.7 → 3.0.0-beta.1091.1

package/dist/esm/AlertDialogDemo.mjs

@@ -1,73 +1,53 @@
 import { AlertDialog, Button, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
+
 function AlertDialogDemo() {
-  return /* @__PURE__ */jsxs(AlertDialog, {
-    native: true,
-    children: [/* @__PURE__ */jsx(AlertDialog.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */jsx(Button, {
-        children: "Show Alert"
-      })
-    }), /* @__PURE__ */jsxs(AlertDialog.Portal, {
-      children: [/* @__PURE__ */jsx(AlertDialog.Overlay, {
-        transition: "quick",
-        opacity: 0.5,
-        backgroundColor: "$background",
-        enterStyle: {
-          opacity: 0
-        },
-        exitStyle: {
-          opacity: 0
-        }
-      }, "overlay"), /* @__PURE__ */jsx(AlertDialog.Content, {
-        elevate: true,
-        transition: ["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__ */jsxs(YStack, {
-          gap: "$4",
-          children: [/* @__PURE__ */jsx(AlertDialog.Title, {
-            children: "Accept"
-          }), /* @__PURE__ */jsx(AlertDialog.Description, {
-            children: "By pressing yes, you accept our terms and conditions."
-          }), /* @__PURE__ */jsxs(XStack, {
-            gap: "$3",
-            justify: "flex-end",
-            children: [/* @__PURE__ */jsx(AlertDialog.Cancel, {
-              asChild: true,
-              children: /* @__PURE__ */jsx(Button, {
-                children: "Cancel"
-              })
-            }), /* @__PURE__ */jsx(AlertDialog.Action, {
-              asChild: true,
-              children: /* @__PURE__ */jsx(Button, {
-                theme: "accent",
-                children: "Accept"
-              })
-            })]
-          })]
-        })
-      }, "content")]
-    })]
-  });
+	return /* @__PURE__ */ jsxs(AlertDialog, {
+		native: true,
+		children: [/* @__PURE__ */ jsx(AlertDialog.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, { children: "Show Alert" })
+		}), /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Overlay, {
+			transition: "quick",
+			opacity: "0.5 enter:0 exit:0",
+			backgroundColor: "background"
+		}, "overlay"), /* @__PURE__ */ jsx(AlertDialog.Content, {
+			elevation: "4",
+			transition: {
+				preset: "quick",
+				opacity: {
+					preset: "quick",
+					spring: { overshootClamping: true }
+				}
+			},
+			x: "0 enter:0 exit:0",
+			scale: "1 enter:0.9 exit:0.95",
+			opacity: "1 enter:0 exit:0",
+			y: "0 enter:-20px exit:10px",
+			children: /* @__PURE__ */ jsxs(YStack, {
+				gap: "4",
+				children: [
+					/* @__PURE__ */ jsx(AlertDialog.Title, { children: "Accept" }),
+					/* @__PURE__ */ jsx(AlertDialog.Description, { children: "By pressing yes, you accept our terms and conditions." }),
+					/* @__PURE__ */ jsxs(XStack, {
+						gap: "3",
+						justify: "flex-end",
+						children: [/* @__PURE__ */ jsx(AlertDialog.Cancel, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, { children: "Cancel" })
+						}), /* @__PURE__ */ jsx(AlertDialog.Action, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								theme: "accent",
+								children: "Accept"
+							})
+						})]
+					})
+				]
+			})
+		}, "content")] })]
+	});
 }
+
 export { AlertDialogDemo };
 //# sourceMappingURL=AlertDialogDemo.mjs.map

package/dist/esm/AlertDialogDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["AlertDialog","Button","XStack","YStack","jsx","jsxs","AlertDialogDemo","native","children","Trigger","asChild","Portal","Overlay","transition","opacity","backgroundColor","enterStyle","exitStyle","Content","elevate","overshootClamping","x","y","scale","gap","Title","Description","justify","Cancel","Action","theme"],"sources":["../../src/AlertDialogDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,EAAaC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAM5C,SAAAC,GAAA,EAoCIC,IAAA,QApCJ;AAJD,SAASC,gBAAA,EAAkB;EAChC,OACE,eAAAD,IAAA,CAACL,WAAA;IAAYO,MAAA,EAAM;IACjBC,QAAA,kBAAAJ,GAAA,CAACJ,WAAA,CAAYS,OAAA,EAAZ;MAAoBC,OAAA,EAAO;MAC1BF,QAAA,iBAAAJ,GAAA,CAACH,MAAA;QAAOO,QAAA;MAAA,CAAU;IAAA,CACpB,GAEA,eAAAH,IAAA,CAACL,WAAA,CAAYW,MAAA,EAAZ;MACCH,QAAA,kBAAAJ,GAAA,CAACJ,WAAA,CAAYY,OAAA,EAAZ;QAECC,UAAA,EAAW;QACXC,OAAA,EAAS;QACTC,eAAA,EAAgB;QAChBC,UAAA,EAAY;UAAEF,OAAA,EAAS;QAAE;QACzBG,SAAA,EAAW;UAAEH,OAAA,EAAS;QAAE;MAAA,GALpB,SAMN,GACA,eAAAV,GAAA,CAACJ,WAAA,CAAYkB,OAAA,EAAZ;QACCC,OAAA,EAAO;QAEPN,UAAA,EAAY,CACV,SACA;UACEC,OAAA,EAAS;YACPM,iBAAA,EAAmB;UACrB;QACF,EACF;QACAJ,UAAA,EAAY;UAAEK,CAAA,EAAG;UAAGC,CAAA,EAAG;UAAKR,OAAA,EAAS;UAAGS,KAAA,EAAO;QAAI;QACnDN,SAAA,EAAW;UAAEI,CAAA,EAAG;UAAGC,CAAA,EAAG;UAAIR,OAAA,EAAS;UAAGS,KAAA,EAAO;QAAK;QAClDF,CAAA,EAAG;QACHE,KAAA,EAAO;QACPT,OAAA,EAAS;QACTQ,CAAA,EAAG;QAEHd,QAAA,iBAAAH,IAAA,CAACF,MAAA;UAAOqB,GAAA,EAAI;UACVhB,QAAA,kBAAAJ,GAAA,CAACJ,WAAA,CAAYyB,KAAA,EAAZ;YAAkBjB,QAAA;UAAA,CAAM,GACzB,eAAAJ,GAAA,CAACJ,WAAA,CAAY0B,WAAA,EAAZ;YAAwBlB,QAAA;UAAA,CAEzB,GAEA,eAAAH,IAAA,CAACH,MAAA;YAAOsB,GAAA,EAAI;YAAKG,OAAA,EAAQ;YACvBnB,QAAA,kBAAAJ,GAAA,CAACJ,WAAA,CAAY4B,MAAA,EAAZ;cAAmBlB,OAAA,EAAO;cACzBF,QAAA,iBAAAJ,GAAA,CAACH,MAAA;gBAAOO,QAAA;cAAA,CAAM;YAAA,CAChB,GACA,eAAAJ,GAAA,CAACJ,WAAA,CAAY6B,MAAA,EAAZ;cAAmBnB,OAAA,EAAO;cACzBF,QAAA,iBAAAJ,GAAA,CAACH,MAAA;gBAAO6B,KAAA,EAAM;gBAAStB,QAAA;cAAA,CAAM;YAAA,CAC/B;UAAA,CACF;QAAA,CACF;MAAA,GA9BI,SA+BN;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"file":"AlertDialogDemo.js","names":[],"sources":["esm/AlertDialogDemo.js"],"sourcesContent":["import { AlertDialog, Button, XStack, YStack } from \"tamagui\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction AlertDialogDemo() {\n  return /* @__PURE__ */ jsxs(AlertDialog, { native: true, children: [\n    /* @__PURE__ */ jsx(AlertDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: \"Show Alert\" }) }),\n    /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [\n      /* @__PURE__ */ jsx(\n        AlertDialog.Overlay,\n        {\n          transition: \"quick\",\n          opacity: \"0.5 enter:0 exit:0\",\n          backgroundColor: \"background\"\n        },\n        \"overlay\"\n      ),\n      /* @__PURE__ */ jsx(\n        AlertDialog.Content,\n        {\n          elevation: \"4\",\n          transition: {\n            preset: \"quick\",\n            opacity: { preset: \"quick\", spring: { overshootClamping: true } }\n          },\n          x: \"0 enter:0 exit:0\",\n          scale: \"1 enter:0.9 exit:0.95\",\n          opacity: \"1 enter:0 exit:0\",\n          y: \"0 enter:-20px exit:10px\",\n          children: /* @__PURE__ */ jsxs(YStack, { gap: \"4\", children: [\n            /* @__PURE__ */ jsx(AlertDialog.Title, { children: \"Accept\" }),\n            /* @__PURE__ */ jsx(AlertDialog.Description, { children: \"By pressing yes, you accept our terms and conditions.\" }),\n            /* @__PURE__ */ jsxs(XStack, { gap: \"3\", justify: \"flex-end\", children: [\n              /* @__PURE__ */ jsx(AlertDialog.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: \"Cancel\" }) }),\n              /* @__PURE__ */ jsx(AlertDialog.Action, { asChild: true, children: /* @__PURE__ */ jsx(Button, { theme: \"accent\", children: \"Accept\" }) })\n            ] })\n          ] })\n        },\n        \"content\"\n      )\n    ] })\n  ] });\n}\nexport {\n  AlertDialogDemo\n};\n//# sourceMappingURL=AlertDialogDemo.js.map\n"],"mappings":";;;;AAEA,SAAS,kBAAkB;CACzB,OAAuB,qBAAK,aAAa;EAAE,QAAQ;EAAM,UAAU,CACjD,oBAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAA0B,oBAAI,QAAQ,EAAE,UAAU,aAAa,CAAC;EAAE,CAAC,GAC7G,qBAAK,YAAY,QAAQ,EAAE,UAAU,CACnC,oBACd,YAAY,SACZ;GACE,YAAY;GACZ,SAAS;GACT,iBAAiB;EACnB,GACA,SACF,GACgB,oBACd,YAAY,SACZ;GACE,WAAW;GACX,YAAY;IACV,QAAQ;IACR,SAAS;KAAE,QAAQ;KAAS,QAAQ,EAAE,mBAAmB,KAAK;IAAE;GAClE;GACA,GAAG;GACH,OAAO;GACP,SAAS;GACT,GAAG;GACH,UAA0B,qBAAK,QAAQ;IAAE,KAAK;IAAK,UAAU;KAC3C,oBAAI,YAAY,OAAO,EAAE,UAAU,SAAS,CAAC;KAC7C,oBAAI,YAAY,aAAa,EAAE,UAAU,wDAAwD,CAAC;KAClG,qBAAK,QAAQ;MAAE,KAAK;MAAK,SAAS;MAAY,UAAU,CACtD,oBAAI,YAAY,QAAQ;OAAE,SAAS;OAAM,UAA0B,oBAAI,QAAQ,EAAE,UAAU,SAAS,CAAC;MAAE,CAAC,GACxG,oBAAI,YAAY,QAAQ;OAAE,SAAS;OAAM,UAA0B,oBAAI,QAAQ;QAAE,OAAO;QAAU,UAAU;OAAS,CAAC;MAAE,CAAC,CAC3I;KAAE,CAAC;IACL;GAAE,CAAC;EACL,GACA,SACF,CACF,EAAE,CAAC,CACL;CAAE,CAAC;AACL"}

package/dist/esm/AlertDialogDemo.native.js

@@ -1,73 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog, Button, XStack, YStack } from "tamagui";
+
 function AlertDialogDemo() {
-  return /* @__PURE__ */_jsxs(AlertDialog, {
-    native: true,
-    children: [/* @__PURE__ */_jsx(AlertDialog.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */_jsx(Button, {
-        children: "Show Alert"
-      })
-    }), /* @__PURE__ */_jsxs(AlertDialog.Portal, {
-      children: [/* @__PURE__ */_jsx(AlertDialog.Overlay, {
-        transition: "quick",
-        opacity: 0.5,
-        backgroundColor: "$background",
-        enterStyle: {
-          opacity: 0
-        },
-        exitStyle: {
-          opacity: 0
-        }
-      }, "overlay"), /* @__PURE__ */_jsx(AlertDialog.Content, {
-        elevate: true,
-        transition: ["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__ */_jsxs(YStack, {
-          gap: "$4",
-          children: [/* @__PURE__ */_jsx(AlertDialog.Title, {
-            children: "Accept"
-          }), /* @__PURE__ */_jsx(AlertDialog.Description, {
-            children: "By pressing yes, you accept our terms and conditions."
-          }), /* @__PURE__ */_jsxs(XStack, {
-            gap: "$3",
-            justify: "flex-end",
-            children: [/* @__PURE__ */_jsx(AlertDialog.Cancel, {
-              asChild: true,
-              children: /* @__PURE__ */_jsx(Button, {
-                children: "Cancel"
-              })
-            }), /* @__PURE__ */_jsx(AlertDialog.Action, {
-              asChild: true,
-              children: /* @__PURE__ */_jsx(Button, {
-                theme: "accent",
-                children: "Accept"
-              })
-            })]
-          })]
-        })
-      }, "content")]
-    })]
-  });
+	return /* @__PURE__ */ jsxs(AlertDialog, {
+		native: true,
+		children: [/* @__PURE__ */ jsx(AlertDialog.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, { children: "Show Alert" })
+		}), /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Overlay, {
+			transition: "quick",
+			opacity: "0.5 enter:0 exit:0",
+			backgroundColor: "background"
+		}, "overlay"), /* @__PURE__ */ jsx(AlertDialog.Content, {
+			elevation: "4",
+			transition: {
+				preset: "quick",
+				opacity: {
+					preset: "quick",
+					spring: { overshootClamping: true }
+				}
+			},
+			x: "0 enter:0 exit:0",
+			scale: "1 enter:0.9 exit:0.95",
+			opacity: "1 enter:0 exit:0",
+			y: "0 enter:-20px exit:10px",
+			children: /* @__PURE__ */ jsxs(YStack, {
+				gap: "4",
+				children: [
+					/* @__PURE__ */ jsx(AlertDialog.Title, { children: "Accept" }),
+					/* @__PURE__ */ jsx(AlertDialog.Description, { children: "By pressing yes, you accept our terms and conditions." }),
+					/* @__PURE__ */ jsxs(XStack, {
+						gap: "3",
+						justify: "flex-end",
+						children: [/* @__PURE__ */ jsx(AlertDialog.Cancel, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, { children: "Cancel" })
+						}), /* @__PURE__ */ jsx(AlertDialog.Action, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								theme: "accent",
+								children: "Accept"
+							})
+						})]
+					})
+				]
+			})
+		}, "content")] })]
+	});
 }
+
 export { AlertDialogDemo };
 //# sourceMappingURL=AlertDialogDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","AlertDialog","Button","XStack","YStack","AlertDialogDemo","native","children","Trigger","asChild","Portal","Overlay","transition","opacity","backgroundColor","enterStyle","exitStyle","Content","elevate","overshootClamping","x","y","scale"],"sources":["../../src/AlertDialogDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAaC,IAAA,IAAQC,KAAA,QAAQ,mBAAc;AAM5C,SAAAC,WAoCI,EAAAC,MApCJ,EAAAC,MAAA,EAAAC,MAAA;AAJD,SAASC,gBAAA,EAAkB;EAChC,OACE,eAAAL,KAAC,CAAAC,WAAA;IACCK,MAAA;IAIAC,QAAA,GACE,eAAAT,IAAA,CAAAG,WAAA,CAAAO,OAAA;MAACC,OAAA,MAAY;MAAZF,QAAA,iBAAAT,IAAA,CAAAI,MAAA;QAECK,QAAA;MAAW;IACF,IACO,eACJP,KAAE,CAAAC,WAAW,CAAAS,MAAA;MAAAH,QACzB,GAAwB,eAAAT,IAAA,CAAAG,WAAA,CAAAU,OAAA;QALpBC,UAAA;QAMNC,OAAA;QACAC,eAAA;QAACC,UAAY;UAAZF,OAAA;QACC;QAEAG,SAAA,EAAY;UACVH,OAAA;QACA;MAAA,YACE,CAAS,iBACPf,IAAA,CAAAG,WAAmB,CAAAgB,OAAA;QAAAC,OACrB;QACFN,UAAA,GACF,SACA;UACAC,OAAa;YACVM,iBAAA;UACH;QACA,EACG;QAEHJ,UAAA;UACEK,CAAA;UACAC,CAAA;UAIAR,OAAA;UACES,KAAA;QAEA;QAGAN,SACF;UACFI,CAAA;UAAAC,CAAA;UA9BIR,OAAA;UA+BNS,KAAA;QACF;QACFF,CAAA;QAEJE,KAAA","ignoreList":[]}
+{"version":3,"file":"AlertDialogDemo.native.js","names":[],"sources":["esm/AlertDialogDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { AlertDialog, Button, XStack, YStack } from \"tamagui\";\nfunction AlertDialogDemo() {\n  return /* @__PURE__ */ _jsxs(AlertDialog, {\n    native: true,\n    children: [\n      /* @__PURE__ */ _jsx(AlertDialog.Trigger, {\n        asChild: true,\n        children: /* @__PURE__ */ _jsx(Button, {\n          children: \"Show Alert\"\n        })\n      }),\n      /* @__PURE__ */ _jsxs(AlertDialog.Portal, {\n        children: [\n          /* @__PURE__ */ _jsx(AlertDialog.Overlay, {\n            transition: \"quick\",\n            opacity: \"0.5 enter:0 exit:0\",\n            backgroundColor: \"background\"\n          }, \"overlay\"),\n          /* @__PURE__ */ _jsx(AlertDialog.Content, {\n            elevation: \"4\",\n            transition: {\n              preset: \"quick\",\n              opacity: {\n                preset: \"quick\",\n                spring: {\n                  overshootClamping: true\n                }\n              }\n            },\n            x: \"0 enter:0 exit:0\",\n            scale: \"1 enter:0.9 exit:0.95\",\n            opacity: \"1 enter:0 exit:0\",\n            y: \"0 enter:-20px exit:10px\",\n            children: /* @__PURE__ */ _jsxs(YStack, {\n              gap: \"4\",\n              children: [\n                /* @__PURE__ */ _jsx(AlertDialog.Title, {\n                  children: \"Accept\"\n                }),\n                /* @__PURE__ */ _jsx(AlertDialog.Description, {\n                  children: \"By pressing yes, you accept our terms and conditions.\"\n                }),\n                /* @__PURE__ */ _jsxs(XStack, {\n                  gap: \"3\",\n                  justify: \"flex-end\",\n                  children: [\n                    /* @__PURE__ */ _jsx(AlertDialog.Cancel, {\n                      asChild: true,\n                      children: /* @__PURE__ */ _jsx(Button, {\n                        children: \"Cancel\"\n                      })\n                    }),\n                    /* @__PURE__ */ _jsx(AlertDialog.Action, {\n                      asChild: true,\n                      children: /* @__PURE__ */ _jsx(Button, {\n                        theme: \"accent\",\n                        children: \"Accept\"\n                      })\n                    })\n                  ]\n                })\n              ]\n            })\n          }, \"content\")\n        ]\n      })\n    ]\n  });\n}\nexport {\n  AlertDialogDemo\n};\n//# sourceMappingURL=AlertDialogDemo.js.map\n"],"mappings":";;;;AAEA,SAAS,kBAAkB;CACzB,OAAuB,qBAAM,aAAa;EACxC,QAAQ;EACR,UAAU,CACQ,oBAAK,YAAY,SAAS;GACxC,SAAS;GACT,UAA0B,oBAAK,QAAQ,EACrC,UAAU,aACZ,CAAC;EACH,CAAC,GACe,qBAAM,YAAY,QAAQ,EACxC,UAAU,CACQ,oBAAK,YAAY,SAAS;GACxC,YAAY;GACZ,SAAS;GACT,iBAAiB;EACnB,GAAG,SAAS,GACI,oBAAK,YAAY,SAAS;GACxC,WAAW;GACX,YAAY;IACV,QAAQ;IACR,SAAS;KACP,QAAQ;KACR,QAAQ,EACN,mBAAmB,KACrB;IACF;GACF;GACA,GAAG;GACH,OAAO;GACP,SAAS;GACT,GAAG;GACH,UAA0B,qBAAM,QAAQ;IACtC,KAAK;IACL,UAAU;KACQ,oBAAK,YAAY,OAAO,EACtC,UAAU,SACZ,CAAC;KACe,oBAAK,YAAY,aAAa,EAC5C,UAAU,wDACZ,CAAC;KACe,qBAAM,QAAQ;MAC5B,KAAK;MACL,SAAS;MACT,UAAU,CACQ,oBAAK,YAAY,QAAQ;OACvC,SAAS;OACT,UAA0B,oBAAK,QAAQ,EACrC,UAAU,SACZ,CAAC;MACH,CAAC,GACe,oBAAK,YAAY,QAAQ;OACvC,SAAS;OACT,UAA0B,oBAAK,QAAQ;QACrC,OAAO;QACP,UAAU;OACZ,CAAC;MACH,CAAC,CACH;KACF,CAAC;IACH;GACF,CAAC;EACH,GAAG,SAAS,CACd,EACF,CAAC,CACH;CACF,CAAC;AACH"}

package/dist/esm/AnimationsDelayDemo.mjs

@@ -2,53 +2,50 @@ import React from "react";
 import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from "tamagui";
 import { useIsIntersecting } from "./useOnIntersecting.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-const colors = ["$color9", "$color10", "$color11", "$color12"];
+
+const colors = [
+	"color8",
+	"color9",
+	"color10",
+	"color11"
+];
 function AnimationsDelayDemo() {
-  const ref = React.useRef(null);
-  const hasIntersected = useIsIntersecting(ref, {
-    once: true
-  });
-  const [show, setShow] = React.useState(true);
-  if (isWeb && !hasIntersected) {
-    return /* @__PURE__ */jsx(YStack, {
-      ref,
-      height: 150
-    });
-  }
-  return /* @__PURE__ */jsxs(YStack, {
-    gap: "$4",
-    items: "center",
-    children: [/* @__PURE__ */jsx(XStack, {
-      gap: "$3",
-      height: 100,
-      items: "center",
-      justify: "center",
-      children: /* @__PURE__ */jsx(AnimatePresence, {
-        children: show && colors.map((color, i) => /* @__PURE__ */jsx(Square, {
-          transition: ["200ms", {
-            delay: i * 100
-          }],
-          enterStyle: {
-            opacity: 0,
-            scale: 0.5,
-            y: 20
-          },
-          exitStyle: {
-            opacity: 0,
-            scale: 0,
-            y: 20
-          },
-          size: 60,
-          bg: color,
-          rounded: "$4"
-        }, color))
-      })
-    }), /* @__PURE__ */jsx(Button, {
-      size: "$3",
-      onPress: () => setShow(!show),
-      children: show ? "Hide" : "Show"
-    })]
-  });
+	const ref = React.useRef(null);
+	const hasIntersected = useIsIntersecting(ref, { once: true });
+	const [show, setShow] = React.useState(true);
+	if (isWeb && !hasIntersected) {
+		return /* @__PURE__ */ jsx(YStack, {
+			ref,
+			height: 150
+		});
+	}
+	return /* @__PURE__ */ jsxs(YStack, {
+		gap: "4",
+		items: "center",
+		children: [/* @__PURE__ */ jsx(XStack, {
+			gap: "3",
+			height: 100,
+			items: "center",
+			justify: "center",
+			children: /* @__PURE__ */ jsx(AnimatePresence, { children: show && colors.map((color, i) => /* @__PURE__ */ jsx(Square, {
+				transition: {
+					duration: 200,
+					delay: i * 100
+				},
+				opacity: "enter:0 exit:0",
+				scale: "enter:0.5 exit:0",
+				y: "enter:20px exit:20px",
+				bg: color,
+				rounded: "4",
+				size: 60
+			}, color)) })
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "3",
+			onPress: () => setShow(!show),
+			children: show ? "Hide" : "Show"
+		})]
+	});
 }
+
 export { AnimationsDelayDemo };
 //# sourceMappingURL=AnimationsDelayDemo.mjs.map

package/dist/esm/AnimationsDelayDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["React","AnimatePresence","Button","Square","XStack","YStack","isWeb","useIsIntersecting","jsx","jsxs","colors","AnimationsDelayDemo","ref","useRef","hasIntersected","once","show","setShow","useState","height","gap","items","children","justify","map","color","i","transition","delay","enterStyle","opacity","scale","y","exitStyle","size","bg","rounded","onPress"],"sources":["../../src/AnimationsDelayDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAClB,SAASC,eAAA,EAAiBC,MAAA,EAAQC,MAAA,EAAQC,MAAA,EAAQC,MAAA,EAAQC,KAAA,QAAa;AAEvE,SAASC,iBAAA,QAAyB;AAUvB,SAAAC,GAAA,EAIPC,IAAA,QAJO;AARX,MAAMC,MAAA,GAAS,CAAC,WAAW,YAAY,YAAY,UAAU;AAEtD,SAASC,oBAAA,EAAsB;EACpC,MAAMC,GAAA,GAAMZ,KAAA,CAAMa,MAAA,CAAoB,IAAI;EAC1C,MAAMC,cAAA,GAAiBP,iBAAA,CAAkBK,GAAA,EAAK;IAAEG,IAAA,EAAM;EAAK,CAAC;EAC5D,MAAM,CAACC,IAAA,EAAMC,OAAO,IAAIjB,KAAA,CAAMkB,QAAA,CAAS,IAAI;EAE3C,IAAIZ,KAAA,IAAS,CAACQ,cAAA,EAAgB;IAC5B,OAAO,eAAAN,GAAA,CAACH,MAAA;MAAOO,GAAA;MAAiBO,MAAA,EAAQ;IAAA,CAAK;EAC/C;EAEA,OACE,eAAAV,IAAA,CAACJ,MAAA;IAAOe,GAAA,EAAI;IAAKC,KAAA,EAAM;IACrBC,QAAA,kBAAAd,GAAA,CAACJ,MAAA;MAAOgB,GAAA,EAAI;MAAKD,MAAA,EAAQ;MAAKE,KAAA,EAAM;MAASE,OAAA,EAAQ;MACnDD,QAAA,iBAAAd,GAAA,CAACP,eAAA;QACEqB,QAAA,EAAAN,IAAA,IACCN,MAAA,CAAOc,GAAA,CAAI,CAACC,KAAA,EAAOC,CAAA,KACjB,eAAAlB,GAAA,CAACL,MAAA;UAECwB,UAAA,EAAY,CAAC,SAAS;YAAEC,KAAA,EAAOF,CAAA,GAAI;UAAI,CAAC;UACxCG,UAAA,EAAY;YACVC,OAAA,EAAS;YACTC,KAAA,EAAO;YACPC,CAAA,EAAG;UACL;UACAC,SAAA,EAAW;YACTH,OAAA,EAAS;YACTC,KAAA,EAAO;YACPC,CAAA,EAAG;UACL;UACAE,IAAA,EAAM;UACNC,EAAA,EAAIV,KAAA;UACJW,OAAA,EAAQ;QAAA,GAdHX,KAeP,CACD;MAAA,CACL;IAAA,CACF,GAEA,eAAAjB,GAAA,CAACN,MAAA;MAAOgC,IAAA,EAAK;MAAKG,OAAA,EAASA,CAAA,KAAMpB,OAAA,CAAQ,CAACD,IAAI;MAC3CM,QAAA,EAAAN,IAAA,GAAO,SAAS;IAAA,CACnB;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"file":"AnimationsDelayDemo.js","names":[],"sources":["esm/AnimationsDelayDemo.js"],"sourcesContent":["import React from \"react\";\nimport { AnimatePresence, Button, Square, XStack, YStack, isWeb } from \"tamagui\";\nimport { useIsIntersecting } from \"./useOnIntersecting\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst colors = [\"color8\", \"color9\", \"color10\", \"color11\"];\nfunction AnimationsDelayDemo() {\n  const ref = React.useRef(null);\n  const hasIntersected = useIsIntersecting(ref, { once: true });\n  const [show, setShow] = React.useState(true);\n  if (isWeb && !hasIntersected) {\n    return /* @__PURE__ */ jsx(YStack, { ref, height: 150 });\n  }\n  return /* @__PURE__ */ jsxs(YStack, { gap: \"4\", items: \"center\", children: [\n    /* @__PURE__ */ jsx(XStack, { gap: \"3\", height: 100, items: \"center\", justify: \"center\", children: /* @__PURE__ */ jsx(AnimatePresence, { children: show && colors.map((color, i) => /* @__PURE__ */ jsx(\n      Square,\n      {\n        transition: { duration: 200, delay: i * 100 },\n        opacity: \"enter:0 exit:0\",\n        scale: \"enter:0.5 exit:0\",\n        y: \"enter:20px exit:20px\",\n        bg: color,\n        rounded: \"4\",\n        size: 60\n      },\n      color\n    )) }) }),\n    /* @__PURE__ */ jsx(Button, { size: \"3\", onPress: () => setShow(!show), children: show ? \"Hide\" : \"Show\" })\n  ] });\n}\nexport {\n  AnimationsDelayDemo\n};\n//# sourceMappingURL=AnimationsDelayDemo.js.map\n"],"mappings":";;;;;;AAIA,MAAM,SAAS;CAAC;CAAU;CAAU;CAAW;AAAS;AACxD,SAAS,sBAAsB;CAC7B,MAAM,MAAM,MAAM,OAAO,IAAI;CAC7B,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;CAC5D,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,IAAI;CAC3C,IAAI,SAAS,CAAC,gBAAgB;EAC5B,OAAuB,oBAAI,QAAQ;GAAE;GAAK,QAAQ;EAAI,CAAC;CACzD;CACA,OAAuB,qBAAK,QAAQ;EAAE,KAAK;EAAK,OAAO;EAAU,UAAU,CACzD,oBAAI,QAAQ;GAAE,KAAK;GAAK,QAAQ;GAAK,OAAO;GAAU,SAAS;GAAU,UAA0B,oBAAI,iBAAiB,EAAE,UAAU,QAAQ,OAAO,KAAK,OAAO,MAAsB,oBACnM,QACA;IACE,YAAY;KAAE,UAAU;KAAK,OAAO,IAAI;IAAI;IAC5C,SAAS;IACT,OAAO;IACP,GAAG;IACH,IAAI;IACJ,SAAS;IACT,MAAM;GACR,GACA,KACF,CAAC,EAAE,CAAC;EAAE,CAAC,GACS,oBAAI,QAAQ;GAAE,MAAM;GAAK,eAAe,QAAQ,CAAC,IAAI;GAAG,UAAU,OAAO,SAAS;EAAO,CAAC,CAC5G;CAAE,CAAC;AACL"}

package/dist/esm/AnimationsDelayDemo.native.js

@@ -1,58 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from "tamagui";
 import { useIsIntersecting } from "./useOnIntersecting.native.js";
-var colors = ["$color9", "$color10", "$color11", "$color12"];
+
+var colors = [
+	"color8",
+	"color9",
+	"color10",
+	"color11"
+];
 function AnimationsDelayDemo() {
-  var ref = React.useRef(null);
-  var hasIntersected = useIsIntersecting(ref, {
-    once: true
-  });
-  var [show, setShow] = React.useState(true);
-  if (isWeb && !hasIntersected) {
-    return /* @__PURE__ */_jsx(YStack, {
-      ref,
-      height: 150
-    });
-  }
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    items: "center",
-    children: [/* @__PURE__ */_jsx(XStack, {
-      gap: "$3",
-      height: 100,
-      items: "center",
-      justify: "center",
-      children: /* @__PURE__ */_jsx(AnimatePresence, {
-        children: show && colors.map(function (color, i) {
-          return /* @__PURE__ */_jsx(Square, {
-            transition: ["200ms", {
-              delay: i * 100
-            }],
-            enterStyle: {
-              opacity: 0,
-              scale: 0.5,
-              y: 20
-            },
-            exitStyle: {
-              opacity: 0,
-              scale: 0,
-              y: 20
-            },
-            size: 60,
-            bg: color,
-            rounded: "$4"
-          }, color);
-        })
-      })
-    }), /* @__PURE__ */_jsx(Button, {
-      size: "$3",
-      onPress: function () {
-        return setShow(!show);
-      },
-      children: show ? "Hide" : "Show"
-    })]
-  });
+	var ref = React.useRef(null);
+	var hasIntersected = useIsIntersecting(ref, { once: true });
+	var [show, setShow] = React.useState(true);
+	if (isWeb && !hasIntersected) {
+		return /* @__PURE__ */ jsx(YStack, {
+			ref,
+			height: 150
+		});
+	}
+	return /* @__PURE__ */ jsxs(YStack, {
+		gap: "4",
+		items: "center",
+		children: [/* @__PURE__ */ jsx(XStack, {
+			gap: "3",
+			height: 100,
+			items: "center",
+			justify: "center",
+			children: /* @__PURE__ */ jsx(AnimatePresence, { children: show && colors.map(function(color, i) {
+				return /* @__PURE__ */ jsx(Square, {
+					transition: {
+						duration: 200,
+						delay: i * 100
+					},
+					opacity: "enter:0 exit:0",
+					scale: "enter:0.5 exit:0",
+					y: "enter:20px exit:20px",
+					bg: color,
+					rounded: "4",
+					size: 60
+				}, color);
+			}) })
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "3",
+			onPress: function() {
+				return setShow(!show);
+			},
+			children: show ? "Hide" : "Show"
+		})]
+	});
 }
+
 export { AnimationsDelayDemo };
 //# sourceMappingURL=AnimationsDelayDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","AnimatePresence","Button","Square","XStack","YStack","isWeb","useIsIntersecting","colors","AnimationsDelayDemo","ref","useRef","hasIntersected","once","show","setShow","useState","height","gap","items","children","justify","map","color","i","transition"],"sources":["../../src/AnimationsDelayDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA;AAClB,OAAAC,KAAS;AAET,SAASC,eAAA,EAAAC,MAAA,EAAyBC,MAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,KAAA;AAUvB,SAAAC,iBAAA;AARX,IAAAC,MAAM,IAEC,SAAS,EACd,UAAM,EACN,UAAM,EACN,UAAO,CAEP;AACE,SAAAC,mBAAOA,CAAA,EAAC;EACV,IAAAC,GAAA,GAAAV,KAAA,CAAAW,MAAA;EAEA,IAAAC,cACE,GAAAL,iBAAQ,CAAAG,GAAA,EAAI;IACVG,IAAA;EAIQ;EAAC,KAAAC,IAAA,EAAAC,OAAA,IAAAf,KAAA,CAAAgB,QAAA;EAAA,IAAAV,KAEC,KAAAM,cAAsB,EAAE;IAAgB,OACxC,eAAYf,IAAA,CAAAQ,MAAA;MAAAK,GAAA;MACDO,MACT;IAAO;EACJ;EACL,OACA,eAAWlB,KAAA,CAAAM,MAAA;IAAAa,GAAA,MACT;IAASC,KAAA,EACT,QAAO;IAAAC,QACP,EAAG,gBACLvB,IAAA,CAAAO,MAAA;MACAc,GAAA,MAAM;MACND,MAAI;MACJE,KAAA,UAAQ;MAAAE,OAAA;MAdHD,QAAA,iBAAAvB,IAAA,CAAAI,eAAA;QAiBbmB,QACF,EAAAN,IAAA,IAAAN,MAAA,CAAAc,GAAA,WAAAC,KAAA,EAAAC,CAAA;UAEA,sBAAQ3B,IAAA,CAAKM,MAAK;YAGpBsB,UAAA,GAEJ,S","ignoreList":[]}
+{"version":3,"file":"AnimationsDelayDemo.native.js","names":[],"sources":["esm/AnimationsDelayDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { AnimatePresence, Button, Square, XStack, YStack, isWeb } from \"tamagui\";\nimport { useIsIntersecting } from \"./useOnIntersecting\";\nvar colors = [\n  \"color8\",\n  \"color9\",\n  \"color10\",\n  \"color11\"\n];\nfunction AnimationsDelayDemo() {\n  var ref = React.useRef(null);\n  var hasIntersected = useIsIntersecting(ref, {\n    once: true\n  });\n  var [show, setShow] = React.useState(true);\n  if (isWeb && !hasIntersected) {\n    return /* @__PURE__ */ _jsx(YStack, {\n      ref,\n      height: 150\n    });\n  }\n  return /* @__PURE__ */ _jsxs(YStack, {\n    gap: \"4\",\n    items: \"center\",\n    children: [\n      /* @__PURE__ */ _jsx(XStack, {\n        gap: \"3\",\n        height: 100,\n        items: \"center\",\n        justify: \"center\",\n        children: /* @__PURE__ */ _jsx(AnimatePresence, {\n          children: show && colors.map(function(color, i) {\n            return /* @__PURE__ */ _jsx(Square, {\n              transition: {\n                duration: 200,\n                delay: i * 100\n              },\n              opacity: \"enter:0 exit:0\",\n              scale: \"enter:0.5 exit:0\",\n              y: \"enter:20px exit:20px\",\n              bg: color,\n              rounded: \"4\",\n              size: 60\n            }, color);\n          })\n        })\n      }),\n      /* @__PURE__ */ _jsx(Button, {\n        size: \"3\",\n        onPress: function() {\n          return setShow(!show);\n        },\n        children: show ? \"Hide\" : \"Show\"\n      })\n    ]\n  });\n}\nexport {\n  AnimationsDelayDemo\n};\n//# sourceMappingURL=AnimationsDelayDemo.js.map\n"],"mappings":";;;;;;AAIA,IAAI,SAAS;CACX;CACA;CACA;CACA;AACF;AACA,SAAS,sBAAsB;CAC7B,IAAI,MAAM,MAAM,OAAO,IAAI;CAC3B,IAAI,iBAAiB,kBAAkB,KAAK,EAC1C,MAAM,KACR,CAAC;CACD,IAAI,CAAC,MAAM,WAAW,MAAM,SAAS,IAAI;CACzC,IAAI,SAAS,CAAC,gBAAgB;EAC5B,OAAuB,oBAAK,QAAQ;GAClC;GACA,QAAQ;EACV,CAAC;CACH;CACA,OAAuB,qBAAM,QAAQ;EACnC,KAAK;EACL,OAAO;EACP,UAAU,CACQ,oBAAK,QAAQ;GAC3B,KAAK;GACL,QAAQ;GACR,OAAO;GACP,SAAS;GACT,UAA0B,oBAAK,iBAAiB,EAC9C,UAAU,QAAQ,OAAO,IAAI,SAAS,OAAO,GAAG;IAC9C,OAAuB,oBAAK,QAAQ;KAClC,YAAY;MACV,UAAU;MACV,OAAO,IAAI;KACb;KACA,SAAS;KACT,OAAO;KACP,GAAG;KACH,IAAI;KACJ,SAAS;KACT,MAAM;IACR,GAAG,KAAK;GACV,CAAC,EACH,CAAC;EACH,CAAC,GACe,oBAAK,QAAQ;GAC3B,MAAM;GACN,SAAS,WAAW;IAClB,OAAO,QAAQ,CAAC,IAAI;GACtB;GACA,UAAU,OAAO,SAAS;EAC5B,CAAC,CACH;CACF,CAAC;AACH"}