@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ChevronDown","Accordion","Paragraph","Square","AccordionDemo","overflow","width","type","children","Item","value","mb","Trigger","flexDirection","justify","borderWidth","borderColor","param","open","transparent","transition","rotate","size","color","HeightAnimator","Content","exitStyle","opacity","borderTopWidth"],"sources":["../../src/AccordionDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAmBC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAC5B,SAASC,WAAW,iCAAyB;AAcjC,SAAAC,SAAA,EACEC,SADF,EAAAC,MAAA;AAZL,SAASC,cAAA,EAAgB;EAC9B,OACE,eAAAP,KAAC,CAAAI,SAAA;IAECI,QAAA;IACEC,KAAA;IAAAC,IAAC,YAAU;IAAAC,QAAV;IACe,eACNX,KAAA,CAAAI,SAAA,CAAAQ,IAAA;MAAAC,KACR;MAAaC,EACb;MAAYH,QAEX,GAEG,eAAAb,IAAA,CAAAM,SAAC,CAAAW,OAAU;QACXC,aAAA,OAAC;QAEDC,OACF;QAAAC,WAAA;QAEJC,WAAA;QACAR,QAAA,WAAAA,CAACS,KAAU;UACR,IAAU;YAAAC;UAAA,IAAAD,KAAA;UAAV,sBAAApB,KAAA,CAAAE,SAAA;YACCS,QAAW,GACX,eAAwBb,IAAA,CAAAO,SAAA;cACxBM,QAAa;YACb,IACA,eAAYb,IAAA,CAAAQ,MAAA;cAEZgB,WAAA;cAGAC,UAAA;cAEJC,MAAA,EAAAH,IAAA;cACFV,QAAA,iBAAAb,IAAA,CAAAK,WAAA;gBAEAsB,IAAC;gBACCC,KAAA;cAAW;YAAV;UAEC;QACA;MACA,IAEC,eAAG5B,IAAK,CAAAM,SACP,CAAAuB,cAAA;QACEJ,UAAA;QACAZ,QAAA,iBAACb,IAAO,CAAAM,SAAA,CAAAwB,OAAW,EAAC;UAGtBL,UAAA;UAAAM,SAAA;YAEJC,OAAA;UACA;UACGZ,WAAU;UAAVa,cAAA;UACCZ,WAAW;UACXR,QAAW,EAAE,eAAWb,IAAA,CAAAO,SAAA;YACxBM,QAAa;UACb;QACA;MAEA;IAIF,IACF,eACFX,KAAA,CAAAI,SAAA,CAAAQ,IAAA;MACFC,KAAA;MAEJF,QAAA,G","ignoreList":[]}
+{"version":3,"file":"AccordionDemo.native.js","names":["_Fragment"],"sources":["esm/AccordionDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { ChevronDown } from \"@tamagui/lucide-icons-2\";\nimport { Accordion, Paragraph, Square } from \"tamagui\";\nfunction AccordionDemo() {\n  return /* @__PURE__ */ _jsxs(Accordion, {\n    overflow: \"hidden\",\n    width: \"20\",\n    type: \"multiple\",\n    children: [\n      /* negative margin prevents double border between items */\n      /* @__PURE__ */ _jsxs(Accordion.Item, {\n        value: \"a1\",\n        mb: -1,\n        children: [\n          /* @__PURE__ */ _jsx(Accordion.Trigger, {\n            flexDirection: \"row\",\n            justify: \"space-between\",\n            borderWidth: 1,\n            borderColor: \"border-color\",\n            children: function(param) {\n              var { open } = param;\n              return /* @__PURE__ */ _jsxs(_Fragment, {\n                children: [\n                  /* @__PURE__ */ _jsx(Paragraph, {\n                    children: \"1. Take a cold shower\"\n                  }),\n                  /* @__PURE__ */ _jsx(Square, {\n                    transparent: true,\n                    transition: \"quick\",\n                    rotate: open ? \"180deg\" : \"0deg\",\n                    children: /* @__PURE__ */ _jsx(ChevronDown, {\n                      size: \"1\",\n                      color: \"color\"\n                    })\n                  })\n                ]\n              });\n            }\n          }),\n          /* @__PURE__ */ _jsx(Accordion.HeightAnimator, {\n            transition: \"300ms\",\n            children: /* @__PURE__ */ _jsx(Accordion.Content, {\n              transition: \"300ms\",\n              opacity: \"exit:0\",\n              borderWidth: 1,\n              borderTopWidth: 0,\n              borderColor: \"border-color\",\n              children: /* @__PURE__ */ _jsx(Paragraph, {\n                children: \"Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue.\"\n              })\n            })\n          })\n        ]\n      }),\n      /* @__PURE__ */ _jsxs(Accordion.Item, {\n        value: \"a2\",\n        children: [\n          /* @__PURE__ */ _jsx(Accordion.Trigger, {\n            flexDirection: \"row\",\n            justify: \"space-between\",\n            borderWidth: 1,\n            borderColor: \"border-color\",\n            children: function(param) {\n              var { open } = param;\n              return /* @__PURE__ */ _jsxs(_Fragment, {\n                children: [\n                  /* @__PURE__ */ _jsx(Paragraph, {\n                    children: \"2. Eat 4 eggs\"\n                  }),\n                  /* @__PURE__ */ _jsx(Square, {\n                    transparent: true,\n                    transition: \"quick\",\n                    rotate: open ? \"180deg\" : \"0deg\",\n                    children: /* @__PURE__ */ _jsx(ChevronDown, {\n                      size: \"1\",\n                      color: \"color\"\n                    })\n                  })\n                ]\n              });\n            }\n          }),\n          /* @__PURE__ */ _jsx(Accordion.HeightAnimator, {\n            transition: \"300ms\",\n            children: /* @__PURE__ */ _jsx(Accordion.Content, {\n              transition: \"300ms\",\n              opacity: \"exit:0\",\n              borderWidth: 1,\n              borderTopWidth: 0,\n              borderColor: \"border-color\",\n              children: /* @__PURE__ */ _jsx(Paragraph, {\n                children: \"Eggs have been a dietary staple since time immemorial and there's good reason for their continued presence in our menus and meals.\"\n              })\n            })\n          })\n        ]\n      })\n    ]\n  });\n}\nexport {\n  AccordionDemo\n};\n//# sourceMappingURL=AccordionDemo.js.map\n"],"mappings":";;;;;AAGA,SAAS,gBAAgB;CACvB,OAAuB,qBAAM,WAAW;EACtC,UAAU;EACV,OAAO;EACP,MAAM;EACN,UAAU,CAEQ,qBAAM,UAAU,MAAM;GACpC,OAAO;GACP,IAAI,CAAC;GACL,UAAU,CACQ,oBAAK,UAAU,SAAS;IACtC,eAAe;IACf,SAAS;IACT,aAAa;IACb,aAAa;IACb,UAAU,SAAS,OAAO;KACxB,IAAI,EAAE,SAAS;KACf,OAAuB,qBAAMA,UAAW,EACtC,UAAU,CACQ,oBAAK,WAAW,EAC9B,UAAU,wBACZ,CAAC,GACe,oBAAK,QAAQ;MAC3B,aAAa;MACb,YAAY;MACZ,QAAQ,OAAO,WAAW;MAC1B,UAA0B,oBAAK,aAAa;OAC1C,MAAM;OACN,OAAO;MACT,CAAC;KACH,CAAC,CACH,EACF,CAAC;IACH;GACF,CAAC,GACe,oBAAK,UAAU,gBAAgB;IAC7C,YAAY;IACZ,UAA0B,oBAAK,UAAU,SAAS;KAChD,YAAY;KACZ,SAAS;KACT,aAAa;KACb,gBAAgB;KAChB,aAAa;KACb,UAA0B,oBAAK,WAAW,EACxC,UAAU,6IACZ,CAAC;IACH,CAAC;GACH,CAAC,CACH;EACF,CAAC,GACe,qBAAM,UAAU,MAAM;GACpC,OAAO;GACP,UAAU,CACQ,oBAAK,UAAU,SAAS;IACtC,eAAe;IACf,SAAS;IACT,aAAa;IACb,aAAa;IACb,UAAU,SAAS,OAAO;KACxB,IAAI,EAAE,SAAS;KACf,OAAuB,qBAAMA,UAAW,EACtC,UAAU,CACQ,oBAAK,WAAW,EAC9B,UAAU,gBACZ,CAAC,GACe,oBAAK,QAAQ;MAC3B,aAAa;MACb,YAAY;MACZ,QAAQ,OAAO,WAAW;MAC1B,UAA0B,oBAAK,aAAa;OAC1C,MAAM;OACN,OAAO;MACT,CAAC;KACH,CAAC,CACH,EACF,CAAC;IACH;GACF,CAAC,GACe,oBAAK,UAAU,gBAAgB;IAC7C,YAAY;IACZ,UAA0B,oBAAK,UAAU,SAAS;KAChD,YAAY;KACZ,SAAS;KACT,aAAa;KACb,gBAAgB;KAChB,aAAa;KACb,UAA0B,oBAAK,WAAW,EACxC,UAAU,qIACZ,CAAC;IACH,CAAC;GACH,CAAC,CACH;EACF,CAAC,CACH;CACF,CAAC;AACH"}

package/dist/esm/AddThemeDemo.mjs

@@ -2,37 +2,41 @@ import { addTheme } from "@tamagui/theme";
 import React from "react";
 import { Button, H3, Theme, View, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
+
 function AddThemeDemo() {
-  const [theme, setTheme] = React.useState();
-  return /* @__PURE__ */jsxs(YStack, {
-    items: "center",
-    gap: "$4",
-    children: [/* @__PURE__ */jsxs(H3, {
-      children: ["Theme: ", theme ?? "none"]
-    }), /* @__PURE__ */jsx(Theme, {
-      name: theme ?? "red",
-      children: /* @__PURE__ */jsx(View, {
-        rounded: "$8",
-        width: 100,
-        height: 100,
-        bg: "$color"
-      })
-    }), /* @__PURE__ */jsx(Button, {
-      disabled: theme === "superblue",
-      onPress: () => {
-        addTheme({
-          name: "superblue",
-          insertCSS: true,
-          theme: {
-            background: "#000",
-            color: "blue"
-          }
-        });
-        setTheme("superblue");
-      },
-      children: "Add superblue theme"
-    })]
-  });
+	const [theme, setTheme] = React.useState();
+	return /* @__PURE__ */ jsxs(YStack, {
+		items: "center",
+		gap: "4",
+		children: [
+			/* @__PURE__ */ jsxs(H3, { children: ["Theme: ", theme ?? "none"] }),
+			/* @__PURE__ */ jsx(Theme, {
+				name: theme ?? "red",
+				children: /* @__PURE__ */ jsx(View, {
+					rounded: "8",
+					width: 100,
+					height: 100,
+					bg: "color"
+				})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				disabled: theme === "superblue",
+				onPress: () => {
+					addTheme({
+						name: "superblue",
+						insertCSS: true,
+						theme: {
+							background: "#000",
+							color: "blue"
+						}
+					});
+					setTheme("superblue");
+				},
+				children: "Add superblue theme"
+			})
+		]
+	});
 }
+
 export { AddThemeDemo };
 //# sourceMappingURL=AddThemeDemo.mjs.map

package/dist/esm/AddThemeDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["addTheme","React","Button","H3","Theme","View","YStack","jsx","jsxs","AddThemeDemo","theme","setTheme","useState","items","gap","children","name","rounded","width","height","bg","disabled","onPress","insertCSS","background","color"],"sources":["../../src/AddThemeDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,QAAgB;AACzB,OAAOC,KAAA,MAAW;AAElB,SAASC,MAAA,EAAQC,EAAA,EAAIC,KAAA,EAAOC,IAAA,EAAMC,MAAA,QAAc;AAO1C,SAGEC,GAAA,EAHFC,IAAA;AALC,SAASC,aAAA,EAAe;EAC7B,MAAM,CAACC,KAAA,EAAOC,QAAQ,IAAIV,KAAA,CAAMW,QAAA,CAAc;EAE9C,OACE,eAAAJ,IAAA,CAACF,MAAA;IAAOO,KAAA,EAAM;IAASC,GAAA,EAAI;IACzBC,QAAA,kBAAAP,IAAA,CAACL,EAAA;MAAGY,QAAA,cAAQL,KAAA,IAAS;IAAA,CAAO,GAE5B,eAAAH,GAAA,CAACH,KAAA;MAAMY,IAAA,EAAMN,KAAA,IAAS;MACpBK,QAAA,iBAAAR,GAAA,CAACF,IAAA;QAAKY,OAAA,EAAQ;QAAKC,KAAA,EAAO;QAAKC,MAAA,EAAQ;QAAKC,EAAA,EAAG;MAAA,CAAS;IAAA,CAC1D,GAEA,eAAAb,GAAA,CAACL,MAAA;MACCmB,QAAA,EAAUX,KAAA,KAAU;MACpBY,OAAA,EAASA,CAAA,KAAM;QACbtB,QAAA,CAAS;UACPgB,IAAA,EAAM;UACNO,SAAA,EAAW;UACXb,KAAA,EAAO;YACLc,UAAA,EAAY;YACZC,KAAA,EAAO;UACT;QACF,CAAC;QACDd,QAAA,CAAS,WAAW;MACtB;MACDI,QAAA;IAAA,CAED;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"file":"AddThemeDemo.js","names":[],"sources":["esm/AddThemeDemo.js"],"sourcesContent":["import { addTheme } from \"@tamagui/theme\";\nimport React from \"react\";\nimport { Button, H3, Theme, View, YStack } from \"tamagui\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction AddThemeDemo() {\n  const [theme, setTheme] = React.useState();\n  return /* @__PURE__ */ jsxs(YStack, { items: \"center\", gap: \"4\", children: [\n    /* @__PURE__ */ jsxs(H3, { children: [\n      \"Theme: \",\n      theme ?? \"none\"\n    ] }),\n    /* @__PURE__ */ jsx(Theme, { name: theme ?? \"red\", children: /* @__PURE__ */ jsx(View, { rounded: \"8\", width: 100, height: 100, bg: \"color\" }) }),\n    /* @__PURE__ */ jsx(\n      Button,\n      {\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        children: \"Add superblue theme\"\n      }\n    )\n  ] });\n}\nexport {\n  AddThemeDemo\n};\n//# sourceMappingURL=AddThemeDemo.js.map\n"],"mappings":";;;;;;AAIA,SAAS,eAAe;CACtB,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS;CACzC,OAAuB,qBAAK,QAAQ;EAAE,OAAO;EAAU,KAAK;EAAK,UAAU;GACzD,qBAAK,IAAI,EAAE,UAAU,CACnC,WACA,SAAS,MACX,EAAE,CAAC;GACa,oBAAI,OAAO;IAAE,MAAM,SAAS;IAAO,UAA0B,oBAAI,MAAM;KAAE,SAAS;KAAK,OAAO;KAAK,QAAQ;KAAK,IAAI;IAAQ,CAAC;GAAE,CAAC;GAChI,oBACd,QACA;IACE,UAAU,UAAU;IACpB,eAAe;KACb,SAAS;MACP,MAAM;MACN,WAAW;MACX,OAAO;OACL,YAAY;OACZ,OAAO;MACT;KACF,CAAC;KACD,SAAS,WAAW;IACtB;IACA,UAAU;GACZ,CACF;EACF;CAAE,CAAC;AACL"}

package/dist/esm/AddThemeDemo.native.js

@@ -1,38 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { addTheme } from "@tamagui/theme";
 import React from "react";
 import { Button, H3, Theme, View, YStack } from "tamagui";
+
 function AddThemeDemo() {
-  var [theme, setTheme] = React.useState();
-  return /* @__PURE__ */_jsxs(YStack, {
-    items: "center",
-    gap: "$4",
-    children: [/* @__PURE__ */_jsxs(H3, {
-      children: ["Theme: ", theme !== null && theme !== void 0 ? theme : "none"]
-    }), /* @__PURE__ */_jsx(Theme, {
-      name: theme !== null && theme !== void 0 ? theme : "red",
-      children: /* @__PURE__ */_jsx(View, {
-        rounded: "$8",
-        width: 100,
-        height: 100,
-        bg: "$color"
-      })
-    }), /* @__PURE__ */_jsx(Button, {
-      disabled: theme === "superblue",
-      onPress: function () {
-        addTheme({
-          name: "superblue",
-          insertCSS: true,
-          theme: {
-            background: "#000",
-            color: "blue"
-          }
-        });
-        setTheme("superblue");
-      },
-      children: "Add superblue theme"
-    })]
-  });
+	var [theme, setTheme] = React.useState();
+	return /* @__PURE__ */ jsxs(YStack, {
+		items: "center",
+		gap: "4",
+		children: [
+			/* @__PURE__ */ jsxs(H3, { children: ["Theme: ", theme !== null && theme !== void 0 ? theme : "none"] }),
+			/* @__PURE__ */ jsx(Theme, {
+				name: theme !== null && theme !== void 0 ? theme : "red",
+				children: /* @__PURE__ */ jsx(View, {
+					rounded: "8",
+					width: 100,
+					height: 100,
+					bg: "color"
+				})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				disabled: theme === "superblue",
+				onPress: function() {
+					addTheme({
+						name: "superblue",
+						insertCSS: true,
+						theme: {
+							background: "#000",
+							color: "blue"
+						}
+					});
+					setTheme("superblue");
+				},
+				children: "Add superblue theme"
+			})
+		]
+	});
 }
+
 export { AddThemeDemo };
 //# sourceMappingURL=AddThemeDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","addTheme","React","Button","H3","Theme","View","YStack","AddThemeDemo","theme","setTheme","useState","items","gap","children","name","rounded","width","height","bg","disabled","onPress","insertCSS"],"sources":["../../src/AddThemeDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAgB,IAAAC,KAAA;AACzB,SAAOC,QAAA,QAAW;AAElB,OAAAC,KAAS,MAAQ,OAAI;AAOf,SAGEC,MAHF,EAAAC,EAAA,EAAAC,KAAA,EAAAC,IAAA,EAAAC,MAAA;AALC,SAASC,aAAA,EAAe;EAC7B,KAAAC,KAAO,EAAAC,QAAO,IAAQR,KAAI,CAAAS,QAAM;EAEhC,OACE,eAAAX,KAAC,CAAAO,MAAA;IACCK,KAAA;IAAIC,GAAA;IAAAC,QAAQ,GAAS,eAAOd,KAAA,CAAAI,EAAA;MAE5BU,QAAA,GAIA,WAACL,KAAA,aAAAA,KAAA,cAAAA,KAAA;IAAA,EACC,EAAoB,eACXX,IAAM,CAAAO,KAAA;MACbU,IAAA,EAAAN,KAAS,aAAAA,KAAA,cAAAA,KAAA;MAAAK,QACP,EAAM,eAAAhB,IAAA,CAAAQ,IAAA;QAAAU,OACN,MAAW;QAAAC,KACX,KAAO;QAAAC,MACL;QAAYC,EAAA,EACZ;MAAO;IACT,IAEF,eAASrB,IAAA,CAAAK,MAAW;MACtBiB,QAAA,EAAAX,KAAA;MACDY,OAAA,WAAAA,CAAA;QAAApB,QAAA;UAEDc,IAAA;UACFO,SAAA;UAEJb,KAAA","ignoreList":[]}
+{"version":3,"file":"AddThemeDemo.native.js","names":[],"sources":["esm/AddThemeDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { addTheme } from \"@tamagui/theme\";\nimport React from \"react\";\nimport { Button, H3, Theme, View, YStack } from \"tamagui\";\nfunction AddThemeDemo() {\n  var [theme, setTheme] = React.useState();\n  return /* @__PURE__ */ _jsxs(YStack, {\n    items: \"center\",\n    gap: \"4\",\n    children: [\n      /* @__PURE__ */ _jsxs(H3, {\n        children: [\n          \"Theme: \",\n          theme !== null && theme !== void 0 ? theme : \"none\"\n        ]\n      }),\n      /* @__PURE__ */ _jsx(Theme, {\n        name: theme !== null && theme !== void 0 ? theme : \"red\",\n        children: /* @__PURE__ */ _jsx(View, {\n          rounded: \"8\",\n          width: 100,\n          height: 100,\n          bg: \"color\"\n        })\n      }),\n      /* @__PURE__ */ _jsx(Button, {\n        disabled: theme === \"superblue\",\n        onPress: function() {\n          addTheme({\n            name: \"superblue\",\n            insertCSS: true,\n            theme: {\n              background: \"#000\",\n              color: \"blue\"\n            }\n          });\n          setTheme(\"superblue\");\n        },\n        children: \"Add superblue theme\"\n      })\n    ]\n  });\n}\nexport {\n  AddThemeDemo\n};\n//# sourceMappingURL=AddThemeDemo.js.map\n"],"mappings":";;;;;;AAIA,SAAS,eAAe;CACtB,IAAI,CAAC,OAAO,YAAY,MAAM,SAAS;CACvC,OAAuB,qBAAM,QAAQ;EACnC,OAAO;EACP,KAAK;EACL,UAAU;GACQ,qBAAM,IAAI,EACxB,UAAU,CACR,WACA,UAAU,QAAQ,UAAU,KAAK,IAAI,QAAQ,MAC/C,EACF,CAAC;GACe,oBAAK,OAAO;IAC1B,MAAM,UAAU,QAAQ,UAAU,KAAK,IAAI,QAAQ;IACnD,UAA0B,oBAAK,MAAM;KACnC,SAAS;KACT,OAAO;KACP,QAAQ;KACR,IAAI;IACN,CAAC;GACH,CAAC;GACe,oBAAK,QAAQ;IAC3B,UAAU,UAAU;IACpB,SAAS,WAAW;KAClB,SAAS;MACP,MAAM;MACN,WAAW;MACX,OAAO;OACL,YAAY;OACZ,OAAO;MACT;KACF,CAAC;KACD,SAAS,WAAW;IACtB;IACA,UAAU;GACZ,CAAC;EACH;CACF,CAAC;AACH"}

package/dist/esm/AlertDialogDemo.mjs

@@ -1,73 +1,47 @@
 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: ["quick", { opacity: { 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: [\"quick\", { opacity: { overshootClamping: true } }],\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,CAAC,SAAS,EAAE,SAAS,EAAE,mBAAmB,KAAK,EAAE,CAAC;GAC9D,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,47 @@
-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: ["quick", { opacity: { 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              \"quick\",\n              {\n                opacity: {\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,CACV,SACA,EACE,SAAS,EACP,mBAAmB,KACrB,EACF,CACF;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,47 @@ 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: ["200ms", { 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: [\"200ms\", { 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,CAAC,SAAS,EAAE,OAAO,IAAI,IAAI,CAAC;IACxC,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"}