@tamagui/demos 2.7.7 → 3.0.0-beta.1091.1

package/dist/esm/AnimationsDemo.mjs

@@ -1,78 +1,64 @@
 import { LogoIcon } from "@tamagui/logo";
 import { Play } from "@tamagui/lucide-icons-2";
-import { Button, isWeb, Square, useControllableState, useEvent } from "tamagui";
+import { Button, Square, isWeb, useControllableState, useEvent } from "tamagui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
 function AnimationsDemo(props) {
-  const [positionI, setPositionI] = useControllableState({
-    strategy: "most-recent-wins",
-    prop: props.position,
-    defaultProp: 0
-  });
-  const position = positions[positionI];
-  const onPress = useEvent(() => {
-    setPositionI(x => {
-      return (x + 1) % positions.length;
-    });
-  });
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [/* @__PURE__ */jsx(Square, {
-      transition: props.animation ?? "bouncy",
-      animateOnly: ["transform"],
-      onPress,
-      size: 104,
-      borderColor: "$borderColor",
-      borderWidth: 1,
-      rounded: "$9",
-      bg: "$color9",
-      hoverStyle: {
-        scale: 1.01
-      },
-      pressStyle: {
-        scale: 0.9
-      },
-      ...position,
-      children: isWeb && /* @__PURE__ */jsx(LogoIcon, {
-        downscale: 0.75
-      })
-    }), /* @__PURE__ */jsx(Button, {
-      position: "absolute",
-      b: 20,
-      l: 20,
-      icon: Play,
-      theme: props.tint ?? "surface2",
-      size: "$5",
-      circular: true,
-      onPress
-    })]
-  });
+	const [positionI, setPositionI] = useControllableState({
+		strategy: "most-recent-wins",
+		prop: props.position,
+		defaultProp: 0
+	});
+	const position = positions[positionI];
+	const onPress = useEvent(() => {
+		setPositionI((x) => {
+			return (x + 1) % positions.length;
+		});
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Square, {
+		transition: {
+			preset: props.animation ?? "bouncy",
+			properties: "transform"
+		},
+		borderColor: "border-color",
+		borderWidth: 1,
+		rounded: "9",
+		bg: "color9",
+		...position,
+		onPress,
+		size: 104,
+		children: isWeb && /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	}), /* @__PURE__ */ jsx(Button, {
+		position: "absolute",
+		b: 20,
+		l: 20,
+		icon: Play,
+		theme: props.tint ?? "level3",
+		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
-  }
-}];
+const positions = [
+	{
+		x: 0,
+		y: 0,
+		scale: "1 hover:1.01 press:0.9",
+		rotate: "0deg"
+	},
+	{
+		x: -50,
+		y: -50,
+		scale: "0.5 hover:0.6 press:0.4",
+		rotate: "-45deg"
+	},
+	{
+		x: 50,
+		y: 50,
+		scale: "1 hover:1.1 press:0.9",
+		rotate: "180deg"
+	}
+];
+
 export { AnimationsDemo, positions };
 //# sourceMappingURL=AnimationsDemo.mjs.map

package/dist/esm/AnimationsDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["LogoIcon","Play","Button","isWeb","Square","useControllableState","useEvent","Fragment","jsx","jsxs","AnimationsDemo","props","positionI","setPositionI","strategy","prop","position","defaultProp","positions","onPress","x","length","children","transition","animation","animateOnly","size","borderColor","borderWidth","rounded","bg","hoverStyle","scale","pressStyle","downscale","b","l","icon","theme","tint","circular","y","rotate"],"sources":["../../src/AnimationsDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,QAAgB;AACzB,SAASC,IAAA,QAAY;AACrB,SAASC,MAAA,EAAQC,KAAA,EAAOC,MAAA,EAAQC,oBAAA,EAA6BC,QAAA,QAAgB;AAgBzE,SAAAC,QAAA,EAkBcC,GAAA,EAlBdC,IAAA;AAdG,SAASC,eAAeC,KAAA,EAAO;EACpC,MAAM,CAACC,SAAA,EAAWC,YAAY,IAAIR,oBAAA,CAAqB;IACrDS,QAAA,EAAU;IACVC,IAAA,EAAMJ,KAAA,CAAMK,QAAA;IACZC,WAAA,EAAa;EACf,CAAC;EACD,MAAMD,QAAA,GAAWE,SAAA,CAAUN,SAAS;EACpC,MAAMO,OAAA,GAAUb,QAAA,CAAS,MAAM;IAC7BO,YAAA,CAAcO,CAAA,IAAM;MAClB,QAAQA,CAAA,GAAI,KAAKF,SAAA,CAAUG,MAAA;IAC7B,CAAC;EACH,CAAC;EAED,OACE,eAAAZ,IAAA,CAAAF,QAAA;IACEe,QAAA,kBAAAd,GAAA,CAACJ,MAAA;MACCmB,UAAA,EAAYZ,KAAA,CAAMa,SAAA,IAAa;MAC/BC,WAAA,EAAa,CAAC,WAAW;MACzBN,OAAA;MACAO,IAAA,EAAM;MACNC,WAAA,EAAY;MACZC,WAAA,EAAa;MACbC,OAAA,EAAQ;MACRC,EAAA,EAAG;MACHC,UAAA,EAAY;QACVC,KAAA,EAAO;MACT;MACAC,UAAA,EAAY;QACVD,KAAA,EAAO;MACT;MACC,GAAGhB,QAAA;MAEHM,QAAA,EAAAnB,KAAA,IAAS,eAAAK,GAAA,CAACR,QAAA;QAASkC,SAAA,EAAW;MAAA,CAAM;IAAA,CACvC,GAEA,eAAA1B,GAAA,CAACN,MAAA;MACCc,QAAA,EAAS;MACTmB,CAAA,EAAG;MACHC,CAAA,EAAG;MACHC,IAAA,EAAMpC,IAAA;MACNqC,KAAA,EAAO3B,KAAA,CAAM4B,IAAA,IAAQ;MACrBb,IAAA,EAAK;MACLc,QAAA,EAAQ;MACRrB;IAAA,CACF;EAAA,CACF;AAEJ;AAEO,MAAMD,SAAA,GAAY,CACvB;EACEE,CAAA,EAAG;EACHqB,CAAA,EAAG;EACHT,KAAA,EAAO;EACPU,MAAA,EAAQ;AACV,GACA;EACEtB,CAAA,EAAG;EACHqB,CAAA,EAAG;EACHT,KAAA,EAAO;EACPU,MAAA,EAAQ;EACRX,UAAA,EAAY;IACVC,KAAA,EAAO;EACT;EACAC,UAAA,EAAY;IACVD,KAAA,EAAO;EACT;AACF,GACA;EACEZ,CAAA,EAAG;EACHqB,CAAA,EAAG;EACHT,KAAA,EAAO;EACPU,MAAA,EAAQ;EACRX,UAAA,EAAY;IACVC,KAAA,EAAO;EACT;EACAC,UAAA,EAAY;IACVD,KAAA,EAAO;EACT;AACF,EACF","ignoreList":[]}
+{"version":3,"file":"AnimationsDemo.js","names":[],"sources":["esm/AnimationsDemo.js"],"sourcesContent":["import { LogoIcon } from \"@tamagui/logo\";\nimport { Play } from \"@tamagui/lucide-icons-2\";\nimport { Button, isWeb, Square, useControllableState, useEvent } from \"tamagui\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nfunction 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  return /* @__PURE__ */ jsxs(Fragment, { children: [\n    /* @__PURE__ */ jsx(\n      Square,\n      {\n        transition: { preset: props.animation ?? \"bouncy\", properties: \"transform\" },\n        borderColor: \"border-color\",\n        borderWidth: 1,\n        rounded: \"9\",\n        bg: \"color9\",\n        ...position,\n        onPress,\n        size: 104,\n        children: isWeb && /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })\n      }\n    ),\n    /* @__PURE__ */ jsx(\n      Button,\n      {\n        position: \"absolute\",\n        b: 20,\n        l: 20,\n        icon: Play,\n        theme: props.tint ?? \"level3\",\n        size: \"5\",\n        circular: true,\n        onPress\n      }\n    )\n  ] });\n}\nconst positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: \"1 hover:1.01 press:0.9\",\n    rotate: \"0deg\"\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: \"0.5 hover:0.6 press:0.4\",\n    rotate: \"-45deg\"\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: \"1 hover:1.1 press:0.9\",\n    rotate: \"180deg\"\n  }\n];\nexport {\n  AnimationsDemo,\n  positions\n};\n//# sourceMappingURL=AnimationsDemo.js.map\n"],"mappings":";;;;;;AAIA,SAAS,eAAe,OAAO;CAC7B,MAAM,CAAC,WAAW,gBAAgB,qBAAqB;EACrD,UAAU;EACV,MAAM,MAAM;EACZ,aAAa;CACf,CAAC;CACD,MAAM,WAAW,UAAU;CAC3B,MAAM,UAAU,eAAe;EAC7B,cAAc,MAAM;GAClB,QAAQ,IAAI,KAAK,UAAU;EAC7B,CAAC;CACH,CAAC;CACD,OAAuB,qBAAK,UAAU,EAAE,UAAU,CAChC,oBACd,QACA;EACE,YAAY;GAAE,QAAQ,MAAM,aAAa;GAAU,YAAY;EAAY;EAC3E,aAAa;EACb,aAAa;EACb,SAAS;EACT,IAAI;EACJ,GAAG;EACH;EACA,MAAM;EACN,UAAU,SAAyB,oBAAI,UAAU,EAAE,WAAW,IAAK,CAAC;CACtE,CACF,GACgB,oBACd,QACA;EACE,UAAU;EACV,GAAG;EACH,GAAG;EACH,MAAM;EACN,OAAO,MAAM,QAAQ;EACrB,MAAM;EACN,UAAU;EACV;CACF,CACF,CACF,EAAE,CAAC;AACL;AACA,MAAM,YAAY;CAChB;EACE,GAAG;EACH,GAAG;EACH,OAAO;EACP,QAAQ;CACV;CACA;EACE,GAAG,CAAC;EACJ,GAAG,CAAC;EACJ,OAAO;EACP,QAAQ;CACV;CACA;EACE,GAAG;EACH,GAAG;EACH,OAAO;EACP,QAAQ;CACV;AACF"}

package/dist/esm/AnimationsDemo.native.js

@@ -1,79 +1,65 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { LogoIcon } from "@tamagui/logo";
 import { Play } from "@tamagui/lucide-icons-2";
-import { Button, isWeb, Square, useControllableState, useEvent } from "tamagui";
+import { Button, Square, isWeb, useControllableState, useEvent } from "tamagui";
+
 function AnimationsDemo(props) {
-  var [positionI, setPositionI] = useControllableState({
-    strategy: "most-recent-wins",
-    prop: props.position,
-    defaultProp: 0
-  });
-  var position = positions[positionI];
-  var onPress = useEvent(function () {
-    setPositionI(function (x) {
-      return (x + 1) % positions.length;
-    });
-  });
-  var _props_animation, _props_tint;
-  return /* @__PURE__ */_jsxs(_Fragment, {
-    children: [/* @__PURE__ */_jsx(Square, {
-      transition: (_props_animation = props.animation) !== null && _props_animation !== void 0 ? _props_animation : "bouncy",
-      animateOnly: ["transform"],
-      onPress,
-      size: 104,
-      borderColor: "$borderColor",
-      borderWidth: 1,
-      rounded: "$9",
-      bg: "$color9",
-      hoverStyle: {
-        scale: 1.01
-      },
-      pressStyle: {
-        scale: 0.9
-      },
-      ...position,
-      children: isWeb && /* @__PURE__ */_jsx(LogoIcon, {
-        downscale: 0.75
-      })
-    }), /* @__PURE__ */_jsx(Button, {
-      position: "absolute",
-      b: 20,
-      l: 20,
-      icon: Play,
-      theme: (_props_tint = props.tint) !== null && _props_tint !== void 0 ? _props_tint : "surface2",
-      size: "$5",
-      circular: true,
-      onPress
-    })]
-  });
+	var [positionI, setPositionI] = useControllableState({
+		strategy: "most-recent-wins",
+		prop: props.position,
+		defaultProp: 0
+	});
+	var position = positions[positionI];
+	var onPress = useEvent(function() {
+		setPositionI(function(x) {
+			return (x + 1) % positions.length;
+		});
+	});
+	var _props_animation, _props_tint;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Square, {
+		transition: {
+			preset: (_props_animation = props.animation) !== null && _props_animation !== void 0 ? _props_animation : "bouncy",
+			properties: "transform"
+		},
+		borderColor: "border-color",
+		borderWidth: 1,
+		rounded: "9",
+		bg: "color9",
+		...position,
+		onPress,
+		size: 104,
+		children: isWeb && /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	}), /* @__PURE__ */ jsx(Button, {
+		position: "absolute",
+		b: 20,
+		l: 20,
+		icon: Play,
+		theme: (_props_tint = props.tint) !== null && _props_tint !== void 0 ? _props_tint : "level3",
+		size: "5",
+		circular: true,
+		onPress
+	})] });
 }
-var 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
-  }
-}];
+var positions = [
+	{
+		x: 0,
+		y: 0,
+		scale: "1 hover:1.01 press:0.9",
+		rotate: "0deg"
+	},
+	{
+		x: -50,
+		y: -50,
+		scale: "0.5 hover:0.6 press:0.4",
+		rotate: "-45deg"
+	},
+	{
+		x: 50,
+		y: 50,
+		scale: "1 hover:1.1 press:0.9",
+		rotate: "180deg"
+	}
+];
+
 export { AnimationsDemo, positions };
 //# sourceMappingURL=AnimationsDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","LogoIcon","Play","Button","isWeb","Square","useControllableState","useEvent","AnimationsDemo","props","positionI","setPositionI","strategy","prop","position","defaultProp","positions","onPress","x","length","_props_animation","_props_tint","children","transition","animation","animateOnly","size","borderColor","borderWidth","rounded","bg","hoverStyle","scale","pressStyle","downscale","b","l","icon","theme","tint","circular","y","rotate"],"sources":["../../src/AnimationsDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAgB,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AACzB,SAASC,QAAA,QAAY;AACrB,SAASC,IAAA,QAAQ,yBAAe;AAgB5B,SAAAC,MAAA,EAAAC,KAkBc,EAlBdC,MAAA,EAAAC,oBAAA,EAAAC,QAAA;AAdG,SAASC,eAAeC,KAAA,EAAO;EACpC,KAAAC,SAAO,EAAAC,YAAW,IAAYL,oBAAI;IAChCM,QAAA,EAAU;IACVC,IAAA,EAAMJ,KAAA,CAAMK,QAAA;IACZC,WAAA,EAAa;EACf,CAAC;EACD,IAAAD,QAAM,GAAAE,SAAW,CAAAN,SAAU;EAC3B,IAAAO,OAAM,GAAAV,QAAU,aAAe;IAC7BI,YAAA,CAAa,UAAOO,CAAA;MAClB,QAAQA,CAAA,GAAI,KAAKF,SAAA,CAAUG,MAAA;IAC7B,CAAC;EACH,CAAC;EAED,IAAAC,gBACE,EAAAC,WAAA;EACE,sBAAAvB,KAAA,CAAAE,SAAA;IAAAsB,QAAC,kBAAA1B,IAAA,CAAAS,MAAA;MACCkB,UAAA,EAAY,CAAAH,gBAAM,GAAaX,KAAA,CAAAe,SAAA,cAAAJ,gBAAA,cAAAA,gBAAA;MAC/BK,WAAA,EAAa,CACb,YACA;MACAR,OAAA;MACAS,IAAA;MACAC,WAAQ;MACRC,WAAG;MACHC,OAAA,MAAY;MAAAC,EACV,WAAO;MACTC,UAAA;QACAC,KAAA;MAAY;MAEZC,UAAA;QACCD,KAAG;MAEH;MAAoC,GAAAlB,QAAA;MACvCQ,QAAA,EAAAlB,KAAA,mBAAAR,IAAA,CAAAK,QAAA;QAEAiC,SAAA;MAAC;IAAA,mBACUtC,IAAA,CAAAO,MAAA;MACTW,QAAG;MACHqB,CAAA,EAAG;MACHC,CAAA;MACAC,IAAA,EAAAnC,IAAO;MACPoC,KAAA,EAAK,CAAAjB,WAAA,GAAAZ,KAAA,CAAA8B,IAAA,cAAAlB,WAAA,cAAAA,WAAA;MACLK,IAAA,MAAQ;MACRc,QAAA;MAAAvB;IACF;EAGN;AAEO;AAAkB,IACvBD,SAAA;EAEEE,CAAA,EAAG;EACHuB,CAAA;EACAT,KAAA,GAAQ;EACVU,MAAA;AACA;EAEExB,CAAA,EAAG;EACHuB,CAAA;EACAT,KAAA,KAAQ;EACRU,MAAA,UAAY;EAAAX,UACH;IACTC,KAAA;EACA;EAAYC,UACH;IACTD,KAAA;EACF;AACA;EAEEd,CAAA,EAAG;EACHuB,CAAA;EACAT,KAAA,GAAQ;EACRU,MAAA,UAAY;EAAAX,UACH;IACTC,KAAA;EACA;EAAYC,UACH;IACTD,KAAA;EACF;AACF,E","ignoreList":[]}
+{"version":3,"file":"AnimationsDemo.native.js","names":["_Fragment"],"sources":["esm/AnimationsDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { LogoIcon } from \"@tamagui/logo\";\nimport { Play } from \"@tamagui/lucide-icons-2\";\nimport { Button, isWeb, Square, useControllableState, useEvent } from \"tamagui\";\nfunction AnimationsDemo(props) {\n  var [positionI, setPositionI] = useControllableState({\n    strategy: \"most-recent-wins\",\n    prop: props.position,\n    defaultProp: 0\n  });\n  var position = positions[positionI];\n  var onPress = useEvent(function() {\n    setPositionI(function(x) {\n      return (x + 1) % positions.length;\n    });\n  });\n  var _props_animation, _props_tint;\n  return /* @__PURE__ */ _jsxs(_Fragment, {\n    children: [\n      /* @__PURE__ */ _jsx(Square, {\n        transition: {\n          preset: (_props_animation = props.animation) !== null && _props_animation !== void 0 ? _props_animation : \"bouncy\",\n          properties: \"transform\"\n        },\n        borderColor: \"border-color\",\n        borderWidth: 1,\n        rounded: \"9\",\n        bg: \"color9\",\n        ...position,\n        onPress,\n        size: 104,\n        children: isWeb && /* @__PURE__ */ _jsx(LogoIcon, {\n          downscale: 0.75\n        })\n      }),\n      /* @__PURE__ */ _jsx(Button, {\n        position: \"absolute\",\n        b: 20,\n        l: 20,\n        icon: Play,\n        theme: (_props_tint = props.tint) !== null && _props_tint !== void 0 ? _props_tint : \"level3\",\n        size: \"5\",\n        circular: true,\n        onPress\n      })\n    ]\n  });\n}\nvar positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: \"1 hover:1.01 press:0.9\",\n    rotate: \"0deg\"\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: \"0.5 hover:0.6 press:0.4\",\n    rotate: \"-45deg\"\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: \"1 hover:1.1 press:0.9\",\n    rotate: \"180deg\"\n  }\n];\nexport {\n  AnimationsDemo,\n  positions\n};\n//# sourceMappingURL=AnimationsDemo.js.map\n"],"mappings":";;;;;;AAIA,SAAS,eAAe,OAAO;CAC7B,IAAI,CAAC,WAAW,gBAAgB,qBAAqB;EACnD,UAAU;EACV,MAAM,MAAM;EACZ,aAAa;CACf,CAAC;CACD,IAAI,WAAW,UAAU;CACzB,IAAI,UAAU,SAAS,WAAW;EAChC,aAAa,SAAS,GAAG;GACvB,QAAQ,IAAI,KAAK,UAAU;EAC7B,CAAC;CACH,CAAC;CACD,IAAI,kBAAkB;CACtB,OAAuB,qBAAMA,UAAW,EACtC,UAAU,CACQ,oBAAK,QAAQ;EAC3B,YAAY;GACV,SAAS,mBAAmB,MAAM,eAAe,QAAQ,qBAAqB,KAAK,IAAI,mBAAmB;GAC1G,YAAY;EACd;EACA,aAAa;EACb,aAAa;EACb,SAAS;EACT,IAAI;EACJ,GAAG;EACH;EACA,MAAM;EACN,UAAU,SAAyB,oBAAK,UAAU,EAChD,WAAW,IACb,CAAC;CACH,CAAC,GACe,oBAAK,QAAQ;EAC3B,UAAU;EACV,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ,cAAc,MAAM,UAAU,QAAQ,gBAAgB,KAAK,IAAI,cAAc;EACrF,MAAM;EACN,UAAU;EACV;CACF,CAAC,CACH,EACF,CAAC;AACH;AACA,IAAI,YAAY;CACd;EACE,GAAG;EACH,GAAG;EACH,OAAO;EACP,QAAQ;CACV;CACA;EACE,GAAG,CAAC;EACJ,GAAG,CAAC;EACJ,OAAO;EACP,QAAQ;CACV;CACA;EACE,GAAG;EACH,GAAG;EACH,OAAO;EACP,QAAQ;CACV;AACF"}

package/dist/esm/AnimationsEnterDemo.mjs

@@ -3,42 +3,31 @@ import { LogoIcon } from "@tamagui/logo";
 import { Button, Square, YStack, isWeb } from "tamagui";
 import { useIsIntersecting } from "./useOnIntersecting.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
 function AnimationsEnterDemo(props) {
-  const ref = React.useRef(null);
-  const [key, setKey] = React.useState(0);
-  const hasIntersected = useIsIntersecting(ref, {
-    once: true
-  });
-  if (isWeb && !hasIntersected) {
-    return /* @__PURE__ */jsx(YStack, {
-      ref
-    });
-  }
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [/* @__PURE__ */jsx(Square, {
-      enterStyle: {
-        scale: 1.5,
-        y: -10,
-        opacity: 0
-      },
-      transition: "bouncy",
-      elevation: "$4",
-      size: 110,
-      opacity: 1,
-      scale: 1,
-      y: 0,
-      bg: "$color9",
-      rounded: "$9",
-      children: props.children ?? /* @__PURE__ */jsx(LogoIcon, {
-        downscale: 0.75
-      })
-    }, key), /* @__PURE__ */jsx(Button, {
-      size: "$3",
-      mt: "$4",
-      onPress: () => setKey(Math.random()),
-      children: "Re-mount"
-    })]
-  });
+	const ref = React.useRef(null);
+	const [key, setKey] = React.useState(0);
+	const hasIntersected = useIsIntersecting(ref, { once: true });
+	if (isWeb && !hasIntersected) {
+		return /* @__PURE__ */ jsx(YStack, { ref });
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Square, {
+		opacity: "1 enter:0",
+		scale: "1 enter:1.5",
+		y: "0 enter:-10px",
+		transition: "bouncy",
+		bg: "color9",
+		rounded: "9",
+		elevation: "4",
+		size: 110,
+		children: props.children ?? /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	}, key), /* @__PURE__ */ jsx(Button, {
+		size: "3",
+		mt: "4",
+		onPress: () => setKey(Math.random()),
+		children: "Re-mount"
+	})] });
 }
+
 export { AnimationsEnterDemo };
 //# sourceMappingURL=AnimationsEnterDemo.mjs.map

package/dist/esm/AnimationsEnterDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["React","LogoIcon","Button","Square","YStack","isWeb","useIsIntersecting","Fragment","jsx","jsxs","AnimationsEnterDemo","props","ref","useRef","key","setKey","useState","hasIntersected","once","children","enterStyle","scale","y","opacity","transition","elevation","size","bg","rounded","downscale","mt","onPress","Math","random"],"sources":["../../src/AnimationsEnterDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAClB,SAASC,QAAA,QAAgB;AAEzB,SAASC,MAAA,EAAQC,MAAA,EAAQC,MAAA,EAAQC,KAAA,QAAa;AAE9C,SAASC,iBAAA,QAAyB;AAQvB,SAIPC,QAAA,EAJOC,GAAA,EAIPC,IAAA,QAJO;AANJ,SAASC,oBAAoBC,KAAA,EAAY;EAC9C,MAAMC,GAAA,GAAMZ,KAAA,CAAMa,MAAA,CAAoB,IAAI;EAC1C,MAAM,CAACC,GAAA,EAAKC,MAAM,IAAIf,KAAA,CAAMgB,QAAA,CAAS,CAAC;EACtC,MAAMC,cAAA,GAAiBX,iBAAA,CAAkBM,GAAA,EAAK;IAAEM,IAAA,EAAM;EAAK,CAAC;EAE5D,IAAIb,KAAA,IAAS,CAACY,cAAA,EAAgB;IAC5B,OAAO,eAAAT,GAAA,CAACJ,MAAA;MAAOQ;IAAA,CAAiB;EAClC;EAEA,OACE,eAAAH,IAAA,CAAAF,QAAA;IACEY,QAAA,kBAAAX,GAAA,CAACL,MAAA;MAECiB,UAAA,EAAY;QACVC,KAAA,EAAO;QACPC,CAAA,EAAG;QACHC,OAAA,EAAS;MACX;MACAC,UAAA,EAAW;MACXC,SAAA,EAAU;MACVC,IAAA,EAAM;MACNH,OAAA,EAAS;MACTF,KAAA,EAAO;MACPC,CAAA,EAAG;MACHK,EAAA,EAAG;MACHC,OAAA,EAAQ;MAEPT,QAAA,EAAAR,KAAA,CAAMQ,QAAA,IAAY,eAAAX,GAAA,CAACP,QAAA;QAAS4B,SAAA,EAAW;MAAA,CAAM;IAAA,GAfzCf,GAgBP,GAEA,eAAAN,GAAA,CAACN,MAAA;MAAOwB,IAAA,EAAK;MAAKI,EAAA,EAAG;MAAKC,OAAA,EAASA,CAAA,KAAMhB,MAAA,CAAOiB,IAAA,CAAKC,MAAA,CAAO,CAAC;MAAGd,QAAA;IAAA,CAEhE;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"file":"AnimationsEnterDemo.js","names":[],"sources":["esm/AnimationsEnterDemo.js"],"sourcesContent":["import React from \"react\";\nimport { LogoIcon } from \"@tamagui/logo\";\nimport { Button, Square, YStack, isWeb } from \"tamagui\";\nimport { useIsIntersecting } from \"./useOnIntersecting\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nfunction AnimationsEnterDemo(props) {\n  const ref = React.useRef(null);\n  const [key, setKey] = React.useState(0);\n  const hasIntersected = useIsIntersecting(ref, { once: true });\n  if (isWeb && !hasIntersected) {\n    return /* @__PURE__ */ jsx(YStack, { ref });\n  }\n  return /* @__PURE__ */ jsxs(Fragment, { children: [\n    /* @__PURE__ */ jsx(\n      Square,\n      {\n        opacity: \"1 enter:0\",\n        scale: \"1 enter:1.5\",\n        y: \"0 enter:-10px\",\n        transition: \"bouncy\",\n        bg: \"color9\",\n        rounded: \"9\",\n        elevation: \"4\",\n        size: 110,\n        children: props.children ?? /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })\n      },\n      key\n    ),\n    /* @__PURE__ */ jsx(Button, { size: \"3\", mt: \"4\", onPress: () => setKey(Math.random()), children: \"Re-mount\" })\n  ] });\n}\nexport {\n  AnimationsEnterDemo\n};\n//# sourceMappingURL=AnimationsEnterDemo.js.map\n"],"mappings":";;;;;;;AAKA,SAAS,oBAAoB,OAAO;CAClC,MAAM,MAAM,MAAM,OAAO,IAAI;CAC7B,MAAM,CAAC,KAAK,UAAU,MAAM,SAAS,CAAC;CACtC,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;CAC5D,IAAI,SAAS,CAAC,gBAAgB;EAC5B,OAAuB,oBAAI,QAAQ,EAAE,IAAI,CAAC;CAC5C;CACA,OAAuB,qBAAK,UAAU,EAAE,UAAU,CAChC,oBACd,QACA;EACE,SAAS;EACT,OAAO;EACP,GAAG;EACH,YAAY;EACZ,IAAI;EACJ,SAAS;EACT,WAAW;EACX,MAAM;EACN,UAAU,MAAM,YAA4B,oBAAI,UAAU,EAAE,WAAW,IAAK,CAAC;CAC/E,GACA,GACF,GACgB,oBAAI,QAAQ;EAAE,MAAM;EAAK,IAAI;EAAK,eAAe,OAAO,KAAK,OAAO,CAAC;EAAG,UAAU;CAAW,CAAC,CAChH,EAAE,CAAC;AACL"}

package/dist/esm/AnimationsEnterDemo.native.js

@@ -1,47 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { LogoIcon } from "@tamagui/logo";
 import { Button, Square, YStack, isWeb } from "tamagui";
 import { useIsIntersecting } from "./useOnIntersecting.native.js";
+
 function AnimationsEnterDemo(props) {
-  var ref = React.useRef(null);
-  var [key, setKey] = React.useState(0);
-  var hasIntersected = useIsIntersecting(ref, {
-    once: true
-  });
-  if (isWeb && !hasIntersected) {
-    return /* @__PURE__ */_jsx(YStack, {
-      ref
-    });
-  }
-  var _props_children;
-  return /* @__PURE__ */_jsxs(_Fragment, {
-    children: [/* @__PURE__ */_jsx(Square, {
-      enterStyle: {
-        scale: 1.5,
-        y: -10,
-        opacity: 0
-      },
-      transition: "bouncy",
-      elevation: "$4",
-      size: 110,
-      opacity: 1,
-      scale: 1,
-      y: 0,
-      bg: "$color9",
-      rounded: "$9",
-      children: (_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : /* @__PURE__ */_jsx(LogoIcon, {
-        downscale: 0.75
-      })
-    }, key), /* @__PURE__ */_jsx(Button, {
-      size: "$3",
-      mt: "$4",
-      onPress: function () {
-        return setKey(Math.random());
-      },
-      children: "Re-mount"
-    })]
-  });
+	var ref = React.useRef(null);
+	var [key, setKey] = React.useState(0);
+	var hasIntersected = useIsIntersecting(ref, { once: true });
+	if (isWeb && !hasIntersected) {
+		return /* @__PURE__ */ jsx(YStack, { ref });
+	}
+	var _props_children;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Square, {
+		opacity: "1 enter:0",
+		scale: "1 enter:1.5",
+		y: "0 enter:-10px",
+		transition: "bouncy",
+		bg: "color9",
+		rounded: "9",
+		elevation: "4",
+		size: 110,
+		children: (_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	}, key), /* @__PURE__ */ jsx(Button, {
+		size: "3",
+		mt: "4",
+		onPress: function() {
+			return setKey(Math.random());
+		},
+		children: "Re-mount"
+	})] });
 }
+
 export { AnimationsEnterDemo };
 //# sourceMappingURL=AnimationsEnterDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","LogoIcon","Button","Square","YStack","isWeb","useIsIntersecting","AnimationsEnterDemo","props","ref","useRef","key","setKey","useState","hasIntersected","once","_props_children","children","enterStyle","scale","y","opacity","transition","elevation","size","bg","rounded","downscale"],"sources":["../../src/AnimationsEnterDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAClB,OAAAC,KAAS,aAAgB;AAEzB,SAASC,QAAQ,QAAQ,eAAQ;AAEjC,SAASC,MAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,KAAyB;AAQvB,SAIPC,iBAAA,uCAJO;AANJ,SAASC,oBAAoBC,KAAA,EAAY;EAC9C,IAAAC,GAAM,GAAAT,KAAM,CAAAU,MAAM,KAAoB;EACtC,KAAAC,GAAO,EAAAC,MAAK,IAAMZ,KAAI,CAAAa,QAAM,GAAS;EACrC,IAAAC,cAAM,GAAAR,iBAAiB,CAAAG,GAAkB;IAEzCM,IAAI;EACF;EACF,IAAAV,KAAA,KAAAS,cAAA;IAEA,OACE,eAAAnB,IAAA,CAAAS,MAAA;MACEK;IAAA,EAAC;EAAA;EAAA,IAAAO,eAEa;EAAA,sBACHnB,KAAA,CAAAE,SAAA;IAAAkB,QACP,EAAG,gBACMtB,IAAA,CAAAQ,MAAA;MACXe,UAAA;QACAC,KAAA,KAAW;QACXC,CAAA;QACAC,OAAM;MACN;MACAC,UAAO;MACPC,SAAG;MACHC,IAAG;MACHH,OAAA,EAAQ;MAEPF,KAAA;MAA6CC,CAAA;MAfzCK,EAAA;MAgBPC,OAAA;MAEAT,QAAA,GAAAD,eAAQ,GAAAR,KAAK,CAAAS,QAAQ,MAAK,QAASD,eAAa,KAAK,KAAO,CAAC,GAAGA,eAAA,kBAEhErB,IAAA,CAAAM,QAAA;QACF0B,SAAA;MAEJ","ignoreList":[]}
+{"version":3,"file":"AnimationsEnterDemo.native.js","names":["_Fragment"],"sources":["esm/AnimationsEnterDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport { LogoIcon } from \"@tamagui/logo\";\nimport { Button, Square, YStack, isWeb } from \"tamagui\";\nimport { useIsIntersecting } from \"./useOnIntersecting\";\nfunction AnimationsEnterDemo(props) {\n  var ref = React.useRef(null);\n  var [key, setKey] = React.useState(0);\n  var hasIntersected = useIsIntersecting(ref, {\n    once: true\n  });\n  if (isWeb && !hasIntersected) {\n    return /* @__PURE__ */ _jsx(YStack, {\n      ref\n    });\n  }\n  var _props_children;\n  return /* @__PURE__ */ _jsxs(_Fragment, {\n    children: [\n      /* @__PURE__ */ _jsx(Square, {\n        opacity: \"1 enter:0\",\n        scale: \"1 enter:1.5\",\n        y: \"0 enter:-10px\",\n        transition: \"bouncy\",\n        bg: \"color9\",\n        rounded: \"9\",\n        elevation: \"4\",\n        size: 110,\n        children: (_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : /* @__PURE__ */ _jsx(LogoIcon, {\n          downscale: 0.75\n        })\n      }, key),\n      /* @__PURE__ */ _jsx(Button, {\n        size: \"3\",\n        mt: \"4\",\n        onPress: function() {\n          return setKey(Math.random());\n        },\n        children: \"Re-mount\"\n      })\n    ]\n  });\n}\nexport {\n  AnimationsEnterDemo\n};\n//# sourceMappingURL=AnimationsEnterDemo.js.map\n"],"mappings":";;;;;;;AAKA,SAAS,oBAAoB,OAAO;CAClC,IAAI,MAAM,MAAM,OAAO,IAAI;CAC3B,IAAI,CAAC,KAAK,UAAU,MAAM,SAAS,CAAC;CACpC,IAAI,iBAAiB,kBAAkB,KAAK,EAC1C,MAAM,KACR,CAAC;CACD,IAAI,SAAS,CAAC,gBAAgB;EAC5B,OAAuB,oBAAK,QAAQ,EAClC,IACF,CAAC;CACH;CACA,IAAI;CACJ,OAAuB,qBAAMA,UAAW,EACtC,UAAU,CACQ,oBAAK,QAAQ;EAC3B,SAAS;EACT,OAAO;EACP,GAAG;EACH,YAAY;EACZ,IAAI;EACJ,SAAS;EACT,WAAW;EACX,MAAM;EACN,WAAW,kBAAkB,MAAM,cAAc,QAAQ,oBAAoB,KAAK,IAAI,kBAAkC,oBAAK,UAAU,EACrI,WAAW,IACb,CAAC;CACH,GAAG,GAAG,GACU,oBAAK,QAAQ;EAC3B,MAAM;EACN,IAAI;EACJ,SAAS,WAAW;GAClB,OAAO,OAAO,KAAK,OAAO,CAAC;EAC7B;EACA,UAAU;CACZ,CAAC,CACH,EACF,CAAC;AACH"}

package/dist/esm/AnimationsHoverDemo.mjs

@@ -1,24 +1,19 @@
 import { LogoIcon } from "@tamagui/logo";
 import { Square } from "tamagui";
 import { jsx } from "react/jsx-runtime";
+
 function AnimationsHoverDemo() {
-  return /* @__PURE__ */jsx(Square, {
-    borderColor: "$borderColor",
-    transition: "bouncy",
-    elevation: "$4",
-    bg: "$color9",
-    size: 104,
-    rounded: "$9",
-    hoverStyle: {
-      scale: 1.2
-    },
-    pressStyle: {
-      scale: 0.9
-    },
-    children: /* @__PURE__ */jsx(LogoIcon, {
-      downscale: 0.75
-    })
-  });
+	return /* @__PURE__ */ jsx(Square, {
+		borderColor: "border-color",
+		transition: "bouncy",
+		bg: "color9",
+		rounded: "9",
+		scale: "hover:1.2 press:0.9",
+		elevation: "4",
+		size: 104,
+		children: /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	});
 }
+
 export { AnimationsHoverDemo };
 //# sourceMappingURL=AnimationsHoverDemo.mjs.map

package/dist/esm/AnimationsHoverDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["LogoIcon","Square","jsx","AnimationsHoverDemo","borderColor","transition","elevation","bg","size","rounded","hoverStyle","scale","pressStyle","children","downscale"],"sources":["../../src/AnimationsHoverDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,QAAgB;AACzB,SAASC,MAAA,QAAc;AAkBjB,SAAAC,GAAA;AAhBC,SAASC,oBAAA,EAAsB;EACpC,OACE,eAAAD,GAAA,CAACD,MAAA;IACCG,WAAA,EAAY;IACZC,UAAA,EAAW;IACXC,SAAA,EAAU;IACVC,EAAA,EAAG;IACHC,IAAA,EAAM;IACNC,OAAA,EAAQ;IACRC,UAAA,EAAY;MACVC,KAAA,EAAO;IACT;IACAC,UAAA,EAAY;MACVD,KAAA,EAAO;IACT;IAEAE,QAAA,iBAAAX,GAAA,CAACF,QAAA;MAASc,SAAA,EAAW;IAAA,CAAM;EAAA,CAC7B;AAEJ","ignoreList":[]}
+{"version":3,"file":"AnimationsHoverDemo.js","names":[],"sources":["esm/AnimationsHoverDemo.js"],"sourcesContent":["import { LogoIcon } from \"@tamagui/logo\";\nimport { Square } from \"tamagui\";\nimport { jsx } from \"react/jsx-runtime\";\nfunction AnimationsHoverDemo() {\n  return /* @__PURE__ */ jsx(\n    Square,\n    {\n      borderColor: \"border-color\",\n      transition: \"bouncy\",\n      bg: \"color9\",\n      rounded: \"9\",\n      scale: \"hover:1.2 press:0.9\",\n      elevation: \"4\",\n      size: 104,\n      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })\n    }\n  );\n}\nexport {\n  AnimationsHoverDemo\n};\n//# sourceMappingURL=AnimationsHoverDemo.js.map\n"],"mappings":";;;;;AAGA,SAAS,sBAAsB;CAC7B,OAAuB,oBACrB,QACA;EACE,aAAa;EACb,YAAY;EACZ,IAAI;EACJ,SAAS;EACT,OAAO;EACP,WAAW;EACX,MAAM;EACN,UAA0B,oBAAI,UAAU,EAAE,WAAW,IAAK,CAAC;CAC7D,CACF;AACF"}

package/dist/esm/AnimationsHoverDemo.native.js

@@ -1,24 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { LogoIcon } from "@tamagui/logo";
 import { Square } from "tamagui";
+
 function AnimationsHoverDemo() {
-  return /* @__PURE__ */_jsx(Square, {
-    borderColor: "$borderColor",
-    transition: "bouncy",
-    elevation: "$4",
-    bg: "$color9",
-    size: 104,
-    rounded: "$9",
-    hoverStyle: {
-      scale: 1.2
-    },
-    pressStyle: {
-      scale: 0.9
-    },
-    children: /* @__PURE__ */_jsx(LogoIcon, {
-      downscale: 0.75
-    })
-  });
+	return /* @__PURE__ */ jsx(Square, {
+		borderColor: "border-color",
+		transition: "bouncy",
+		bg: "color9",
+		rounded: "9",
+		scale: "hover:1.2 press:0.9",
+		elevation: "4",
+		size: 104,
+		children: /* @__PURE__ */ jsx(LogoIcon, { downscale: .75 })
+	});
 }
+
 export { AnimationsHoverDemo };
 //# sourceMappingURL=AnimationsHoverDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","LogoIcon","Square","AnimationsHoverDemo","borderColor","transition","elevation","bg","size","rounded","hoverStyle","scale","pressStyle","children","downscale"],"sources":["../../src/AnimationsHoverDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAgB;AACzB,SAASC,QAAA,QAAc;AAkBjB,SAAAC,MAAA;AAhBC,SAASC,oBAAA,EAAsB;EACpC,OACE,eAAAH,IAAA,CAAAE,MAAA;IAACE,WAAA;IAAAC,UAAA;IAAAC,SACC,MAAY;IAAAC,EACZ;IAAWC,IACX;IAAUC,OACP;IAAAC,UACG;MACNC,KAAA;IAAQ;IACIC,UACV,EAAO;MACTD,KAAA;IAAA;IACYE,QACV,iBAAOb,IAAA,CAAAC,QAAA;MACTa,SAAA;IAAA;EAE2B;AAAA;AAGjC,S","ignoreList":[]}
+{"version":3,"file":"AnimationsHoverDemo.native.js","names":[],"sources":["esm/AnimationsHoverDemo.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { LogoIcon } from \"@tamagui/logo\";\nimport { Square } from \"tamagui\";\nfunction AnimationsHoverDemo() {\n  return /* @__PURE__ */ _jsx(Square, {\n    borderColor: \"border-color\",\n    transition: \"bouncy\",\n    bg: \"color9\",\n    rounded: \"9\",\n    scale: \"hover:1.2 press:0.9\",\n    elevation: \"4\",\n    size: 104,\n    children: /* @__PURE__ */ _jsx(LogoIcon, {\n      downscale: 0.75\n    })\n  });\n}\nexport {\n  AnimationsHoverDemo\n};\n//# sourceMappingURL=AnimationsHoverDemo.js.map\n"],"mappings":";;;;;AAGA,SAAS,sBAAsB;CAC7B,OAAuB,oBAAK,QAAQ;EAClC,aAAa;EACb,YAAY;EACZ,IAAI;EACJ,SAAS;EACT,OAAO;EACP,WAAW;EACX,MAAM;EACN,UAA0B,oBAAK,UAAU,EACvC,WAAW,IACb,CAAC;CACH,CAAC;AACH"}