@tamagui/demos 1.14.0 → 1.14.2

package/dist/jsx/AlertDialogDemo.js

@@ -1,2 +1,45 @@
-import{AlertDialog as A,Button as D,XStack as C,YStack as S}from"tamagui";function k(){return<A native><A.Trigger asChild><D>Show Alert</D></A.Trigger><A.Portal><A.Overlay key="overlay"animation="quick"opacity={.5}enterStyle={{opacity:0}}exitStyle={{opacity:0}}/><A.Content bordered elevate key="content"animation={["quick",{opacity:{overshootClamping:!0}}]}enterStyle={{x:0,y:-20,opacity:0,scale:.9}}exitStyle={{x:0,y:10,opacity:0,scale:.95}}x={0}scale={1}opacity={1}y={0}><S space><A.Title>Accept</A.Title><A.Description>By pressing yes, you accept our terms and conditions.</A.Description><C space="$3"justifyContent="flex-end"><A.Cancel asChild><D>Cancel</D></A.Cancel><A.Action asChild><D theme="active">Accept</D></A.Action></C></S></A.Content></A.Portal></A>}export{k as AlertDialogDemo};
+import { AlertDialog, Button, XStack, YStack } from "tamagui";
+function AlertDialogDemo() {
+  return <AlertDialog native>
+    <AlertDialog.Trigger asChild><Button>Show Alert</Button></AlertDialog.Trigger>
+    <AlertDialog.Portal>
+      <AlertDialog.Overlay
+        key="overlay"
+        animation="quick"
+        opacity={0.5}
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+      <AlertDialog.Content
+        bordered
+        elevate
+        key="content"
+        animation={[
+          "quick",
+          {
+            opacity: {
+              overshootClamping: true
+            }
+          }
+        ]}
+        enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+        exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+        x={0}
+        scale={1}
+        opacity={1}
+        y={0}
+      ><YStack space>
+        <AlertDialog.Title>Accept</AlertDialog.Title>
+        <AlertDialog.Description>By pressing yes, you accept our terms and conditions.</AlertDialog.Description>
+        <XStack space="$3" justifyContent="flex-end">
+          <AlertDialog.Cancel asChild><Button>Cancel</Button></AlertDialog.Cancel>
+          <AlertDialog.Action asChild><Button theme="active">Accept</Button></AlertDialog.Action>
+        </XStack>
+      </YStack></AlertDialog.Content>
+    </AlertDialog.Portal>
+  </AlertDialog>;
+}
+export {
+  AlertDialogDemo
+};
 //# sourceMappingURL=AlertDialogDemo.js.map

package/dist/jsx/AlertDialogDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AlertDialogDemo.tsx"],
   "sourcesContent": ["import { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog native>\n      <AlertDialog.Trigger asChild>\n        <Button>Show Alert</Button>\n      </AlertDialog.Trigger>\n\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          opacity={0.5}\n          enterStyle={{opacity:0 }}\n          exitStyle={{opacity:0 }}\n        />\n        <AlertDialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <YStack space>\n            <AlertDialog.Title>Accept</AlertDialog.Title>\n            <AlertDialog.Description>\n              By pressing yes, you accept our terms and conditions.\n            </AlertDialog.Description>\n\n            <XStack space=\"$3\" justifyContent=\"flex-end\">\n              <AlertDialog.Cancel asChild>\n                <Button>Cancel</Button>\n              </AlertDialog.Cancel>\n              <AlertDialog.Action asChild>\n                <Button theme=\"active\">Accept</Button>\n              </AlertDialog.Action>\n            </XStack>\n          </YStack>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,eAAAA,EAAa,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAE7C,SAASC,GAAkB,CAChC,MACE,CAACJ,EAAY,OACX,CAACA,EAAY,QAAQ,QACnB,CAACC,EAAO,UAAU,EAAjBA,EACH,EAFCD,EAAY,QAIb,CAACA,EAAY,OACX,CAACA,EAAY,QACX,IAAI,SACJ,UAAU,OACV,SAAS,GACT,YAAY,CAAC,QAAQ,CAAE,EACvB,WAAW,CAAC,QAAQ,CAAE,EACxB,EACA,CAACA,EAAY,QACX,SACA,QACA,IAAI,SACJ,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,GAAG,EACH,OAAO,EACP,SAAS,EACT,GAAG,GAEH,CAACG,EAAO,MACN,CAACH,EAAY,MAAM,MAAM,EAAxBA,EAAY,MACb,CAACA,EAAY,YAAY,qDAEzB,EAFCA,EAAY,YAIb,CAACE,EAAO,MAAM,IAAK,eAAe,WAChC,CAACF,EAAY,OAAO,QAClB,CAACC,EAAO,MAAM,EAAbA,EACH,EAFCD,EAAY,OAGb,CAACA,EAAY,OAAO,QAClB,CAACC,EAAO,MAAM,SAAS,MAAM,EAA5BA,EACH,EAFCD,EAAY,OAGf,EAPCE,EAQH,EAdCC,EAeH,EAlCCH,EAAY,QAmCf,EA3CCA,EAAY,OA4Cf,EAjDCA,EAmDL",
-  "names": ["AlertDialog", "Button", "XStack", "YStack", "AlertDialogDemo"]
+  "mappings": "AAAA,SAAS,aAAa,QAAQ,QAAQ,cAAc;AAE7C,SAAS,kBAAkB;AAChC,SACE,CAAC,YAAY;AAAA,IACX,CAAC,YAAY,QAAQ,QACnB,CAAC,OAAO,UAAU,EAAjB,OACH,EAFC,YAAY;AAAA,IAIb,CAAC,YAAY;AAAA,MACX,CAAC,YAAY;AAAA,QACX,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY,EAAC,SAAQ,EAAE;AAAA,QACvB,WAAW,EAAC,SAAQ,EAAE;AAAA,MACxB;AAAA,MACA,CAAC,YAAY;AAAA,QACX;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD,GAAG;AAAA,QACH,OAAO;AAAA,QACP,SAAS;AAAA,QACT,GAAG;AAAA,OAEH,CAAC,OAAO;AAAA,QACN,CAAC,YAAY,MAAM,MAAM,EAAxB,YAAY;AAAA,QACb,CAAC,YAAY,YAAY,qDAEzB,EAFC,YAAY;AAAA,QAIb,CAAC,OAAO,MAAM,KAAK,eAAe;AAAA,UAChC,CAAC,YAAY,OAAO,QAClB,CAAC,OAAO,MAAM,EAAb,OACH,EAFC,YAAY;AAAA,UAGb,CAAC,YAAY,OAAO,QAClB,CAAC,OAAO,MAAM,SAAS,MAAM,EAA5B,OACH,EAFC,YAAY;AAAA,QAGf,EAPC;AAAA,MAQH,EAdC,OAeH,EAlCC,YAAY;AAAA,IAmCf,EA3CC,YAAY;AAAA,EA4Cf,EAjDC;AAmDL;",
+  "names": []
 }

package/dist/jsx/AlertDialogDemo.mjs

@@ -1,2 +1,45 @@
-import{AlertDialog as A,Button as D,XStack as C,YStack as S}from"tamagui";function k(){return<A native><A.Trigger asChild><D>Show Alert</D></A.Trigger><A.Portal><A.Overlay key="overlay"animation="quick"opacity={.5}enterStyle={{opacity:0}}exitStyle={{opacity:0}}/><A.Content bordered elevate key="content"animation={["quick",{opacity:{overshootClamping:!0}}]}enterStyle={{x:0,y:-20,opacity:0,scale:.9}}exitStyle={{x:0,y:10,opacity:0,scale:.95}}x={0}scale={1}opacity={1}y={0}><S space><A.Title>Accept</A.Title><A.Description>By pressing yes, you accept our terms and conditions.</A.Description><C space="$3"justifyContent="flex-end"><A.Cancel asChild><D>Cancel</D></A.Cancel><A.Action asChild><D theme="active">Accept</D></A.Action></C></S></A.Content></A.Portal></A>}export{k as AlertDialogDemo};
+import { AlertDialog, Button, XStack, YStack } from "tamagui";
+function AlertDialogDemo() {
+  return <AlertDialog native>
+    <AlertDialog.Trigger asChild><Button>Show Alert</Button></AlertDialog.Trigger>
+    <AlertDialog.Portal>
+      <AlertDialog.Overlay
+        key="overlay"
+        animation="quick"
+        opacity={0.5}
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+      <AlertDialog.Content
+        bordered
+        elevate
+        key="content"
+        animation={[
+          "quick",
+          {
+            opacity: {
+              overshootClamping: true
+            }
+          }
+        ]}
+        enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+        exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+        x={0}
+        scale={1}
+        opacity={1}
+        y={0}
+      ><YStack space>
+        <AlertDialog.Title>Accept</AlertDialog.Title>
+        <AlertDialog.Description>By pressing yes, you accept our terms and conditions.</AlertDialog.Description>
+        <XStack space="$3" justifyContent="flex-end">
+          <AlertDialog.Cancel asChild><Button>Cancel</Button></AlertDialog.Cancel>
+          <AlertDialog.Action asChild><Button theme="active">Accept</Button></AlertDialog.Action>
+        </XStack>
+      </YStack></AlertDialog.Content>
+    </AlertDialog.Portal>
+  </AlertDialog>;
+}
+export {
+  AlertDialogDemo
+};
 //# sourceMappingURL=AlertDialogDemo.mjs.map

package/dist/jsx/AlertDialogDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AlertDialogDemo.tsx"],
   "sourcesContent": ["import { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog native>\n      <AlertDialog.Trigger asChild>\n        <Button>Show Alert</Button>\n      </AlertDialog.Trigger>\n\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          opacity={0.5}\n          enterStyle={{opacity:0 }}\n          exitStyle={{opacity:0 }}\n        />\n        <AlertDialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <YStack space>\n            <AlertDialog.Title>Accept</AlertDialog.Title>\n            <AlertDialog.Description>\n              By pressing yes, you accept our terms and conditions.\n            </AlertDialog.Description>\n\n            <XStack space=\"$3\" justifyContent=\"flex-end\">\n              <AlertDialog.Cancel asChild>\n                <Button>Cancel</Button>\n              </AlertDialog.Cancel>\n              <AlertDialog.Action asChild>\n                <Button theme=\"active\">Accept</Button>\n              </AlertDialog.Action>\n            </XStack>\n          </YStack>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,eAAAA,EAAa,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAE7C,SAASC,GAAkB,CAChC,MACE,CAACJ,EAAY,OACX,CAACA,EAAY,QAAQ,QACnB,CAACC,EAAO,UAAU,EAAjBA,EACH,EAFCD,EAAY,QAIb,CAACA,EAAY,OACX,CAACA,EAAY,QACX,IAAI,SACJ,UAAU,OACV,SAAS,GACT,YAAY,CAAC,QAAQ,CAAE,EACvB,WAAW,CAAC,QAAQ,CAAE,EACxB,EACA,CAACA,EAAY,QACX,SACA,QACA,IAAI,SACJ,WAAW,CACT,QACA,CACE,QAAS,CACP,kBAAmB,EACrB,CACF,CACF,EACA,YAAY,CAAE,EAAG,EAAG,EAAG,IAAK,QAAS,EAAG,MAAO,EAAI,EACnD,WAAW,CAAE,EAAG,EAAG,EAAG,GAAI,QAAS,EAAG,MAAO,GAAK,EAClD,GAAG,EACH,OAAO,EACP,SAAS,EACT,GAAG,GAEH,CAACG,EAAO,MACN,CAACH,EAAY,MAAM,MAAM,EAAxBA,EAAY,MACb,CAACA,EAAY,YAAY,qDAEzB,EAFCA,EAAY,YAIb,CAACE,EAAO,MAAM,IAAK,eAAe,WAChC,CAACF,EAAY,OAAO,QAClB,CAACC,EAAO,MAAM,EAAbA,EACH,EAFCD,EAAY,OAGb,CAACA,EAAY,OAAO,QAClB,CAACC,EAAO,MAAM,SAAS,MAAM,EAA5BA,EACH,EAFCD,EAAY,OAGf,EAPCE,EAQH,EAdCC,EAeH,EAlCCH,EAAY,QAmCf,EA3CCA,EAAY,OA4Cf,EAjDCA,EAmDL",
-  "names": ["AlertDialog", "Button", "XStack", "YStack", "AlertDialogDemo"]
+  "mappings": "AAAA,SAAS,aAAa,QAAQ,QAAQ,cAAc;AAE7C,SAAS,kBAAkB;AAChC,SACE,CAAC,YAAY;AAAA,IACX,CAAC,YAAY,QAAQ,QACnB,CAAC,OAAO,UAAU,EAAjB,OACH,EAFC,YAAY;AAAA,IAIb,CAAC,YAAY;AAAA,MACX,CAAC,YAAY;AAAA,QACX,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY,EAAC,SAAQ,EAAE;AAAA,QACvB,WAAW,EAAC,SAAQ,EAAE;AAAA,MACxB;AAAA,MACA,CAAC,YAAY;AAAA,QACX;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD,GAAG;AAAA,QACH,OAAO;AAAA,QACP,SAAS;AAAA,QACT,GAAG;AAAA,OAEH,CAAC,OAAO;AAAA,QACN,CAAC,YAAY,MAAM,MAAM,EAAxB,YAAY;AAAA,QACb,CAAC,YAAY,YAAY,qDAEzB,EAFC,YAAY;AAAA,QAIb,CAAC,OAAO,MAAM,KAAK,eAAe;AAAA,UAChC,CAAC,YAAY,OAAO,QAClB,CAAC,OAAO,MAAM,EAAb,OACH,EAFC,YAAY;AAAA,UAGb,CAAC,YAAY,OAAO,QAClB,CAAC,OAAO,MAAM,SAAS,MAAM,EAA5B,OACH,EAFC,YAAY;AAAA,QAGf,EAPC;AAAA,MAQH,EAdC,OAeH,EAlCC,YAAY;AAAA,IAmCf,EA3CC,YAAY;AAAA,EA4Cf,EAjDC;AAmDL;",
+  "names": []
 }

package/dist/jsx/AnimationsDemo.js

@@ -1,2 +1,81 @@
-import{LogoIcon as S}from"@tamagui/logo";import{Play as g}from"@tamagui/lucide-icons";import{Button as P,Square as C,useControllableState as $,useEvent as I}from"tamagui";function k(o){const[r,s]=$({strategy:"most-recent-wins",prop:o.position,defaultProp:0}),n=t[r],e=I(()=>{s(i=>(i+1)%t.length)});return<><C animation={o.animation||"bouncy"}onPress={e}size={104}borderColor="$borderColor"borderWidth={1}borderRadius="$9"backgroundColor="$color9"hoverStyle={{scale:1.1}}pressStyle={{scale:.9}}{...n}>{o.children||<S downscale={.75}/>}</C><P position="absolute"bottom={20}left={20}icon={g}theme={o.tint}size="$5"circular onPress={e}/></>}const t=[{x:0,y:0,scale:1,rotate:"0deg"},{x:-50,y:-50,scale:.5,rotate:"-45deg",hoverStyle:{scale:.6},pressStyle:{scale:.4}},{x:50,y:50,scale:1,rotate:"180deg",hoverStyle:{scale:1.1},pressStyle:{scale:.9}}];export{k as AnimationsDemo,t as positions};
+import { LogoIcon } from "@tamagui/logo";
+import { Play } from "@tamagui/lucide-icons";
+import { Button, Square, useControllableState, useEvent } from "tamagui";
+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 <>
+    <Square
+      animation={props.animation || "bouncy"}
+      onPress={onPress}
+      size={104}
+      borderColor="$borderColor"
+      borderWidth={1}
+      borderRadius="$9"
+      backgroundColor="$color9"
+      hoverStyle={{
+        scale: 1.1
+      }}
+      pressStyle={{
+        scale: 0.9
+      }}
+      {...position}
+    >{props.children || <LogoIcon downscale={0.75} />}</Square>
+    <Button
+      position="absolute"
+      bottom={20}
+      left={20}
+      icon={Play}
+      theme={props.tint}
+      size="$5"
+      circular
+      onPress={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
+    }
+  }
+];
+export {
+  AnimationsDemo,
+  positions
+};
 //# sourceMappingURL=AnimationsDemo.js.map

package/dist/jsx/AnimationsDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const onPress = useEvent(() => {\n    setPositionI((x) => {\n      return (x + 1) % positions.length\n    })\n  })\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={onPress}\n        size={104}\n        borderColor=\"$borderColor\"\n        borderWidth={1}\n        borderRadius=\"$9\"\n        backgroundColor=\"$color9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        position=\"absolute\"\n        bottom={20}\n        left={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={onPress}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
-  "mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,QAAAC,MAAY,wBACrB,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,wBAAAC,EAAsB,YAAAC,MAAgB,UAExD,SAASC,EAAeC,EAAO,CACpC,KAAM,CAACC,EAAWC,CAAY,EAAIL,EAAqB,CACrD,SAAU,mBACV,KAAMG,EAAM,SACZ,YAAa,CACf,CAAC,EACKG,EAAWC,EAAUH,CAAS,EAC9BI,EAAUP,EAAS,IAAM,CAC7BI,EAAcI,IACJA,EAAI,GAAKF,EAAU,MAC5B,CACH,CAAC,EAED,MACE,EACE,CAACR,EACC,WAAWI,EAAM,WAAa,SAC9B,SAASK,EACT,MAAM,IACN,YAAY,cACZ,aAAa,EACb,aAAa,IACb,gBAAgB,SAChB,YAAY,CACV,MAAO,GACT,EACA,YAAY,CACV,MAAO,EACT,MACIF,IAEHH,EAAM,UAAY,CAACP,EAAS,WAAW,IAAM,GAChD,EAjBCG,EAmBD,CAACD,EACC,SAAS,UACT,QAAQ,GACR,MAAM,GACN,MAAMD,EACN,OAAOM,EAAM,KACb,KAAK,IACL,SACA,SAASK,EACX,EACF,GAEJ,CAEO,MAAMD,EAAY,CACvB,CACE,EAAG,EACH,EAAG,EACH,MAAO,EACP,OAAQ,MACV,EACA,CACE,EAAG,IACH,EAAG,IACH,MAAO,GACP,OAAQ,SACR,WAAY,CACV,MAAO,EACT,EACA,WAAY,CACV,MAAO,EACT,CACF,EACA,CACE,EAAG,GACH,EAAG,GACH,MAAO,EACP,OAAQ,SACR,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,CACF,CACF",
-  "names": ["LogoIcon", "Play", "Button", "Square", "useControllableState", "useEvent", "AnimationsDemo", "props", "positionI", "setPositionI", "position", "positions", "onPress", "x"]
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,QAAQ,QAAQ,sBAAsB,gBAAgB;AAExD,SAAS,eAAe,OAAO;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU,SAAS;AACpC,QAAM,UAAU,SAAS,MAAM;AAC7B,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,KAAK,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAED,SACE;AAAA,IACE,CAAC;AAAA,MACC,WAAW,MAAM,aAAa;AAAA,MAC9B,SAAS;AAAA,MACT,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,UACI;AAAA,MAEH,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAjBC;AAAA,IAmBD,CAAC;AAAA,MACC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO,MAAM;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,SAAS;AAAA,IACX;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "names": []
 }

package/dist/jsx/AnimationsDemo.mjs

@@ -1,2 +1,81 @@
-import{LogoIcon as S}from"@tamagui/logo";import{Play as g}from"@tamagui/lucide-icons";import{Button as P,Square as C,useControllableState as $,useEvent as I}from"tamagui";function k(o){const[r,s]=$({strategy:"most-recent-wins",prop:o.position,defaultProp:0}),n=t[r],e=I(()=>{s(i=>(i+1)%t.length)});return<><C animation={o.animation||"bouncy"}onPress={e}size={104}borderColor="$borderColor"borderWidth={1}borderRadius="$9"backgroundColor="$color9"hoverStyle={{scale:1.1}}pressStyle={{scale:.9}}{...n}>{o.children||<S downscale={.75}/>}</C><P position="absolute"bottom={20}left={20}icon={g}theme={o.tint}size="$5"circular onPress={e}/></>}const t=[{x:0,y:0,scale:1,rotate:"0deg"},{x:-50,y:-50,scale:.5,rotate:"-45deg",hoverStyle:{scale:.6},pressStyle:{scale:.4}},{x:50,y:50,scale:1,rotate:"180deg",hoverStyle:{scale:1.1},pressStyle:{scale:.9}}];export{k as AnimationsDemo,t as positions};
+import { LogoIcon } from "@tamagui/logo";
+import { Play } from "@tamagui/lucide-icons";
+import { Button, Square, useControllableState, useEvent } from "tamagui";
+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 <>
+    <Square
+      animation={props.animation || "bouncy"}
+      onPress={onPress}
+      size={104}
+      borderColor="$borderColor"
+      borderWidth={1}
+      borderRadius="$9"
+      backgroundColor="$color9"
+      hoverStyle={{
+        scale: 1.1
+      }}
+      pressStyle={{
+        scale: 0.9
+      }}
+      {...position}
+    >{props.children || <LogoIcon downscale={0.75} />}</Square>
+    <Button
+      position="absolute"
+      bottom={20}
+      left={20}
+      icon={Play}
+      theme={props.tint}
+      size="$5"
+      circular
+      onPress={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
+    }
+  }
+];
+export {
+  AnimationsDemo,
+  positions
+};
 //# sourceMappingURL=AnimationsDemo.mjs.map

package/dist/jsx/AnimationsDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const onPress = useEvent(() => {\n    setPositionI((x) => {\n      return (x + 1) % positions.length\n    })\n  })\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={onPress}\n        size={104}\n        borderColor=\"$borderColor\"\n        borderWidth={1}\n        borderRadius=\"$9\"\n        backgroundColor=\"$color9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        position=\"absolute\"\n        bottom={20}\n        left={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={onPress}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
-  "mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,QAAAC,MAAY,wBACrB,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,wBAAAC,EAAsB,YAAAC,MAAgB,UAExD,SAASC,EAAeC,EAAO,CACpC,KAAM,CAACC,EAAWC,CAAY,EAAIL,EAAqB,CACrD,SAAU,mBACV,KAAMG,EAAM,SACZ,YAAa,CACf,CAAC,EACKG,EAAWC,EAAUH,CAAS,EAC9BI,EAAUP,EAAS,IAAM,CAC7BI,EAAcI,IACJA,EAAI,GAAKF,EAAU,MAC5B,CACH,CAAC,EAED,MACE,EACE,CAACR,EACC,WAAWI,EAAM,WAAa,SAC9B,SAASK,EACT,MAAM,IACN,YAAY,cACZ,aAAa,EACb,aAAa,IACb,gBAAgB,SAChB,YAAY,CACV,MAAO,GACT,EACA,YAAY,CACV,MAAO,EACT,MACIF,IAEHH,EAAM,UAAY,CAACP,EAAS,WAAW,IAAM,GAChD,EAjBCG,EAmBD,CAACD,EACC,SAAS,UACT,QAAQ,GACR,MAAM,GACN,MAAMD,EACN,OAAOM,EAAM,KACb,KAAK,IACL,SACA,SAASK,EACX,EACF,GAEJ,CAEO,MAAMD,EAAY,CACvB,CACE,EAAG,EACH,EAAG,EACH,MAAO,EACP,OAAQ,MACV,EACA,CACE,EAAG,IACH,EAAG,IACH,MAAO,GACP,OAAQ,SACR,WAAY,CACV,MAAO,EACT,EACA,WAAY,CACV,MAAO,EACT,CACF,EACA,CACE,EAAG,GACH,EAAG,GACH,MAAO,EACP,OAAQ,SACR,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,CACF,CACF",
-  "names": ["LogoIcon", "Play", "Button", "Square", "useControllableState", "useEvent", "AnimationsDemo", "props", "positionI", "setPositionI", "position", "positions", "onPress", "x"]
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,QAAQ,QAAQ,sBAAsB,gBAAgB;AAExD,SAAS,eAAe,OAAO;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU,SAAS;AACpC,QAAM,UAAU,SAAS,MAAM;AAC7B,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,KAAK,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAED,SACE;AAAA,IACE,CAAC;AAAA,MACC,WAAW,MAAM,aAAa;AAAA,MAC9B,SAAS;AAAA,MACT,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,UACI;AAAA,MAEH,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAjBC;AAAA,IAmBD,CAAC;AAAA,MACC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO,MAAM;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,SAAS;AAAA,IACX;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "names": []
 }

package/dist/jsx/AnimationsEnterDemo.js

@@ -1,2 +1,35 @@
-import{LogoIcon as S}from"@tamagui/logo";import{useRef as $,useState as g}from"react";import{Button as I,Square as R,YStack as B}from"tamagui";import{useIsIntersecting as E}from"./useOnIntersecting";function w(o){const e=$(null),t=E(e,{once:!0}),[n,r]=g(0);return t?<><R key={n}enterStyle={{scale:1.5,y:-10,opacity:0}}animation="bouncy"elevation="$4"size={110}opacity={1}scale={1}y={0}backgroundColor="$pink10"borderRadius="$9">{o.children??<S downscale={.75}/>}</R><I size="$3"marginTop="$4"onPress={()=>r(Math.random())}>Re-mount</I></>:<B ref={e}/>}export{w as AnimationsEnterDemo};
+import { LogoIcon } from "@tamagui/logo";
+import { useRef, useState } from "react";
+import { Button, Square, YStack } from "tamagui";
+import { useIsIntersecting } from "./useOnIntersecting";
+function AnimationsEnterDemo(props) {
+  const ref = useRef(null);
+  const hasIntersected = useIsIntersecting(ref, { once: true });
+  const [key, setKey] = useState(0);
+  if (!hasIntersected) {
+    return <YStack ref={ref} />;
+  }
+  return <>
+    <Square
+      key={key}
+      enterStyle={{
+        scale: 1.5,
+        y: -10,
+        opacity: 0
+      }}
+      animation="bouncy"
+      elevation="$4"
+      size={110}
+      opacity={1}
+      scale={1}
+      y={0}
+      backgroundColor="$pink10"
+      borderRadius="$9"
+    >{props.children ?? <LogoIcon downscale={0.75} />}</Square>
+    <Button size="$3" marginTop="$4" onPress={() => setKey(Math.random())}>Re-mount</Button>
+  </>;
+}
+export {
+  AnimationsEnterDemo
+};
 //# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/jsx/AnimationsEnterDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsEnterDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        backgroundColor=\"$pink10\"\n        borderRadius=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" marginTop=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,UAAAC,EAAQ,YAAAC,MAAgB,QACjC,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEvC,OAAS,qBAAAC,MAAyB,sBAE3B,SAASC,EAAoBC,EAAY,CAC9C,MAAMC,EAAMR,EAAoB,IAAI,EAC9BS,EAAiBJ,EAAkBG,EAAK,CAAE,KAAM,EAAK,CAAC,EACtD,CAACE,EAAKC,CAAM,EAAIV,EAAS,CAAC,EAEhC,OAAKQ,EAKH,EACE,CAACN,EACC,KAAKO,EACL,YAAY,CACV,MAAO,IACP,EAAG,IACH,QAAS,CACX,EACA,UAAU,QACV,UAAU,IACV,MAAM,IACN,SAAS,EACT,OAAO,EACP,GAAG,EACH,gBAAgB,SAChB,aAAa,MAEZH,EAAM,UAAY,CAACR,EAAS,WAAW,IAAM,GAChD,EAjBCI,EAmBD,CAACD,EAAO,KAAK,IAAK,UAAU,IAAK,SAAS,IAAMS,EAAO,KAAK,OAAO,CAAC,GAAG,QAEvE,EAFCT,EAGH,IA3BO,CAACE,EAAO,KAAKI,EAAK,EA6B7B",
-  "names": ["LogoIcon", "useRef", "useState", "Button", "Square", "YStack", "useIsIntersecting", "AnimationsEnterDemo", "props", "ref", "hasIntersected", "key", "setKey"]
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,CAAC,OAAO,KAAK,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IACE,CAAC;AAAA,MACC,KAAK;AAAA,MACL,YAAY;AAAA,QACV,OAAO;AAAA,QACP,GAAG;AAAA,QACH,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,GAAG;AAAA,MACH,gBAAgB;AAAA,MAChB,aAAa;AAAA,MAEZ,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAjBC;AAAA,IAmBD,CAAC,OAAO,KAAK,KAAK,UAAU,KAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,QAEvE,EAFC;AAAA,EAGH;AAEJ;",
+  "names": []
 }

package/dist/jsx/AnimationsEnterDemo.mjs

@@ -1,2 +1,35 @@
-import{LogoIcon as S}from"@tamagui/logo";import{useRef as $,useState as g}from"react";import{Button as I,Square as R,YStack as B}from"tamagui";import{useIsIntersecting as E}from"./useOnIntersecting";function w(o){const e=$(null),t=E(e,{once:!0}),[n,r]=g(0);return t?<><R key={n}enterStyle={{scale:1.5,y:-10,opacity:0}}animation="bouncy"elevation="$4"size={110}opacity={1}scale={1}y={0}backgroundColor="$pink10"borderRadius="$9">{o.children??<S downscale={.75}/>}</R><I size="$3"marginTop="$4"onPress={()=>r(Math.random())}>Re-mount</I></>:<B ref={e}/>}export{w as AnimationsEnterDemo};
+import { LogoIcon } from "@tamagui/logo";
+import { useRef, useState } from "react";
+import { Button, Square, YStack } from "tamagui";
+import { useIsIntersecting } from "./useOnIntersecting";
+function AnimationsEnterDemo(props) {
+  const ref = useRef(null);
+  const hasIntersected = useIsIntersecting(ref, { once: true });
+  const [key, setKey] = useState(0);
+  if (!hasIntersected) {
+    return <YStack ref={ref} />;
+  }
+  return <>
+    <Square
+      key={key}
+      enterStyle={{
+        scale: 1.5,
+        y: -10,
+        opacity: 0
+      }}
+      animation="bouncy"
+      elevation="$4"
+      size={110}
+      opacity={1}
+      scale={1}
+      y={0}
+      backgroundColor="$pink10"
+      borderRadius="$9"
+    >{props.children ?? <LogoIcon downscale={0.75} />}</Square>
+    <Button size="$3" marginTop="$4" onPress={() => setKey(Math.random())}>Re-mount</Button>
+  </>;
+}
+export {
+  AnimationsEnterDemo
+};
 //# sourceMappingURL=AnimationsEnterDemo.mjs.map

package/dist/jsx/AnimationsEnterDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsEnterDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        backgroundColor=\"$pink10\"\n        borderRadius=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" marginTop=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,UAAAC,EAAQ,YAAAC,MAAgB,QACjC,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEvC,OAAS,qBAAAC,MAAyB,sBAE3B,SAASC,EAAoBC,EAAY,CAC9C,MAAMC,EAAMR,EAAoB,IAAI,EAC9BS,EAAiBJ,EAAkBG,EAAK,CAAE,KAAM,EAAK,CAAC,EACtD,CAACE,EAAKC,CAAM,EAAIV,EAAS,CAAC,EAEhC,OAAKQ,EAKH,EACE,CAACN,EACC,KAAKO,EACL,YAAY,CACV,MAAO,IACP,EAAG,IACH,QAAS,CACX,EACA,UAAU,QACV,UAAU,IACV,MAAM,IACN,SAAS,EACT,OAAO,EACP,GAAG,EACH,gBAAgB,SAChB,aAAa,MAEZH,EAAM,UAAY,CAACR,EAAS,WAAW,IAAM,GAChD,EAjBCI,EAmBD,CAACD,EAAO,KAAK,IAAK,UAAU,IAAK,SAAS,IAAMS,EAAO,KAAK,OAAO,CAAC,GAAG,QAEvE,EAFCT,EAGH,IA3BO,CAACE,EAAO,KAAKI,EAAK,EA6B7B",
-  "names": ["LogoIcon", "useRef", "useState", "Button", "Square", "YStack", "useIsIntersecting", "AnimationsEnterDemo", "props", "ref", "hasIntersected", "key", "setKey"]
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,CAAC,OAAO,KAAK,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IACE,CAAC;AAAA,MACC,KAAK;AAAA,MACL,YAAY;AAAA,QACV,OAAO;AAAA,QACP,GAAG;AAAA,QACH,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,GAAG;AAAA,MACH,gBAAgB;AAAA,MAChB,aAAa;AAAA,MAEZ,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAjBC;AAAA,IAmBD,CAAC,OAAO,KAAK,KAAK,UAAU,KAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,QAEvE,EAFC;AAAA,EAGH;AAEJ;",
+  "names": []
 }

package/dist/jsx/AnimationsHoverDemo.js

@@ -1,2 +1,21 @@
-import{LogoIcon as S}from"@tamagui/logo";import{Square as $}from"tamagui";function h(){return<$ borderColor="$pink10"animation="bouncy"elevation="$4"size={110}borderRadius="$9"hoverStyle={{scale:1.2}}pressStyle={{scale:.9}}><S downscale={.75}/></$>}export{h as AnimationsHoverDemo};
+import { LogoIcon } from "@tamagui/logo";
+import { Square } from "tamagui";
+function AnimationsHoverDemo() {
+  return <Square
+    borderColor="$pink10"
+    animation="bouncy"
+    elevation="$4"
+    size={110}
+    borderRadius="$9"
+    hoverStyle={{
+      scale: 1.2
+    }}
+    pressStyle={{
+      scale: 0.9
+    }}
+  ><LogoIcon downscale={0.75} /></Square>;
+}
+export {
+  AnimationsHoverDemo
+};
 //# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/jsx/AnimationsHoverDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsHoverDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      borderColor=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,UAAAC,MAAc,UAEhB,SAASC,GAAsB,CACpC,MACE,CAACD,EACC,YAAY,SACZ,UAAU,QACV,UAAU,IACV,MAAM,IACN,aAAa,IACb,YAAY,CACV,MAAO,GACT,EACA,YAAY,CACV,MAAO,EACT,GAEA,CAACD,EAAS,WAAW,IAAM,EAC7B,EAdCC,EAgBL",
-  "names": ["LogoIcon", "Square", "AnimationsHoverDemo"]
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,sBAAsB;AACpC,SACE,CAAC;AAAA,IACC,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,GAEA,CAAC,SAAS,WAAW,MAAM,EAC7B,EAdC;AAgBL;",
+  "names": []
 }

package/dist/jsx/AnimationsHoverDemo.mjs

@@ -1,2 +1,21 @@
-import{LogoIcon as S}from"@tamagui/logo";import{Square as $}from"tamagui";function h(){return<$ borderColor="$pink10"animation="bouncy"elevation="$4"size={110}borderRadius="$9"hoverStyle={{scale:1.2}}pressStyle={{scale:.9}}><S downscale={.75}/></$>}export{h as AnimationsHoverDemo};
+import { LogoIcon } from "@tamagui/logo";
+import { Square } from "tamagui";
+function AnimationsHoverDemo() {
+  return <Square
+    borderColor="$pink10"
+    animation="bouncy"
+    elevation="$4"
+    size={110}
+    borderRadius="$9"
+    hoverStyle={{
+      scale: 1.2
+    }}
+    pressStyle={{
+      scale: 0.9
+    }}
+  ><LogoIcon downscale={0.75} /></Square>;
+}
+export {
+  AnimationsHoverDemo
+};
 //# sourceMappingURL=AnimationsHoverDemo.mjs.map

package/dist/jsx/AnimationsHoverDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsHoverDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      borderColor=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,YAAAA,MAAgB,gBACzB,OAAS,UAAAC,MAAc,UAEhB,SAASC,GAAsB,CACpC,MACE,CAACD,EACC,YAAY,SACZ,UAAU,QACV,UAAU,IACV,MAAM,IACN,aAAa,IACb,YAAY,CACV,MAAO,GACT,EACA,YAAY,CACV,MAAO,EACT,GAEA,CAACD,EAAS,WAAW,IAAM,EAC7B,EAdCC,EAgBL",
-  "names": ["LogoIcon", "Square", "AnimationsHoverDemo"]
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,sBAAsB;AACpC,SACE,CAAC;AAAA,IACC,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,GAEA,CAAC,SAAS,WAAW,MAAM,EAC7B,EAdC;AAgBL;",
+  "names": []
 }

package/dist/jsx/AnimationsPresenceDemo.js

@@ -1,2 +1,55 @@
-import{AnimatePresence as A}from"@tamagui/animate-presence";import{ArrowLeft as R,ArrowRight as V}from"@tamagui/lucide-icons";import{useState as $}from"react";import{Button as S,Image as C,XStack as I,YStack as Y,styled as E}from"tamagui";import X from"../../public/photo1.jpg";import B from"../../public/photo2.jpg";import j from"../../public/photo3.jpg";const L=[X,B,j].map(t=>t.src||t),D=E(Y,{variants:{isLeft:{true:{x:-300,opacity:0}},isRight:{true:{x:300,opacity:0}}}});function Q(){const[[t,e],o]=$([0,0]),i=F(0,L.length,t),r=a=>{o([t+a,a])},P=e===1||e===0?"isRight":"isLeft",v=e===1?"isLeft":"isRight";return<I overflow="hidden"backgroundColor="#000"position="relative"height={300}width="100%"alignItems="center"><A enterVariant={P}exitVariant={v}><D key={t}animation="bouncy"fullscreen x={0}opacity={1}><C src={L[i]}width={780}height={300}/></D></A><S accessibilityLabel="Carousel left"icon={R}size="$5"position="absolute"left="$4"circular elevate onPress={()=>r(-1)}/><S accessibilityLabel="Carousel right"icon={V}size="$5"position="absolute"right="$4"circular elevate onPress={()=>r(1)}/></I>}const F=(t,e,o)=>{const i=e-t;return((o-t)%i+i)%i+t};export{Q as AnimationsPresenceDemo,L as images};
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { ArrowLeft, ArrowRight } from "@tamagui/lucide-icons";
+import { useState } from "react";
+import { Button, Image, XStack, YStack, styled } from "tamagui";
+import photo1 from "../../public/photo1.jpg";
+import photo2 from "../../public/photo2.jpg";
+import photo3 from "../../public/photo3.jpg";
+const images = [photo1, photo2, photo3].map((x) => x.src || x);
+const YStackEnterable = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -300, opacity: 0 } },
+    isRight: { true: { x: 300, opacity: 0 } }
+  }
+});
+function AnimationsPresenceDemo() {
+  const [[page, direction], setPage] = useState([0, 0]);
+  const imageIndex = wrap(0, images.length, page);
+  const paginate = (newDirection) => {
+    setPage([page + newDirection, newDirection]);
+  };
+  const enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft";
+  const exitVariant = direction === 1 ? "isLeft" : "isRight";
+  return <XStack overflow="hidden" backgroundColor="#000" position="relative" height={300} width="100%" alignItems="center">
+    <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}><YStackEnterable key={page} animation="bouncy" fullscreen x={0} opacity={1}><Image src={images[imageIndex]} width={780} height={300} /></YStackEnterable></AnimatePresence>
+    <Button
+      accessibilityLabel="Carousel left"
+      icon={ArrowLeft}
+      size="$5"
+      position="absolute"
+      left="$4"
+      circular
+      elevate
+      onPress={() => paginate(-1)}
+    />
+    <Button
+      accessibilityLabel="Carousel right"
+      icon={ArrowRight}
+      size="$5"
+      position="absolute"
+      right="$4"
+      circular
+      elevate
+      onPress={() => paginate(1)}
+    />
+  </XStack>;
+}
+const wrap = (min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+};
+export {
+  AnimationsPresenceDemo,
+  images
+};
 //# sourceMappingURL=AnimationsPresenceDemo.js.map

package/dist/jsx/AnimationsPresenceDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
   "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1, photo2, photo3].map((x) => x.src || x)\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  } as const,\n})\n\nexport function AnimationsPresenceDemo() {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack overflow=\"hidden\" backgroundColor=\"#000\" position=\"relative\" height={300} width=\"100%\" alignItems=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} opacity={1}>\n          <Image src={images[imageIndex]} width={780} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        position=\"absolute\"\n        left=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        position=\"absolute\"\n        right=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
-  "mappings": "AAAA,OAAS,mBAAAA,MAAuB,4BAChC,OAAS,aAAAC,EAAW,cAAAC,MAAkB,wBACtC,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,SAAAC,EAAO,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAGtD,OAAOC,MAAY,0BAEnB,OAAOC,MAAY,0BAEnB,OAAOC,MAAY,0BAEZ,MAAMC,EAAS,CAACH,EAAQC,EAAQC,CAAM,EAAE,IAAKE,GAAMA,EAAE,KAAOA,CAAC,EAE9DC,EAAkBN,EAAOD,EAAQ,CACrC,SAAU,CACR,OAAQ,CAAE,KAAM,CAAE,EAAG,KAAM,QAAS,CAAE,CAAE,EACxC,QAAS,CAAE,KAAM,CAAE,EAAG,IAAK,QAAS,CAAE,CAAE,CAC1C,CACF,CAAC,EAEM,SAASQ,GAAyB,CACvC,KAAM,CAAC,CAACC,EAAMC,CAAS,EAAGC,CAAO,EAAIf,EAAS,CAAC,EAAG,CAAC,CAAC,EAE9CgB,EAAaC,EAAK,EAAGR,EAAO,OAAQI,CAAI,EAExCK,EAAYC,GAAyB,CACzCJ,EAAQ,CAACF,EAAOM,EAAcA,CAAY,CAAC,CAC7C,EAEMC,EAAeN,IAAc,GAAKA,IAAc,EAAI,UAAY,SAChEO,EAAcP,IAAc,EAAI,SAAW,UAEjD,MACE,CAACX,EAAO,SAAS,QAAS,gBAAgB,MAAO,SAAS,UAAW,QAAQ,IAAK,MAAM,MAAO,WAAW,SACxG,CAACN,EAAgB,cAAcuB,EAAc,aAAaC,GACxD,CAACV,EAAgB,KAAKE,EAAM,UAAU,QAAS,WAAW,GAAG,EAAG,SAAS,GACvE,CAACX,EAAM,KAAKO,EAAOO,CAAU,EAAG,OAAO,IAAK,QAAQ,IAAK,EAC3D,EAFCL,EAGH,EAJCd,EAMD,CAACI,EACC,mBAAmB,eACnB,MAAMH,EACN,KAAK,IACL,SAAS,UACT,KAAK,IACL,SACA,QACA,SAAS,IAAMoB,EAAS,EAAE,EAC5B,EACA,CAACjB,EACC,mBAAmB,gBACnB,MAAMF,EACN,KAAK,IACL,SAAS,UACT,MAAM,IACN,SACA,QACA,SAAS,IAAMmB,EAAS,CAAC,EAC3B,EACF,EA3BCf,EA6BL,CAEA,MAAMc,EAAO,CAACK,EAAaC,EAAaC,IAAc,CACpD,MAAMC,EAAYF,EAAMD,EACxB,QAAWE,EAAIF,GAAOG,EAAaA,GAAaA,EAAaH,CAC/D",
-  "names": ["AnimatePresence", "ArrowLeft", "ArrowRight", "useState", "Button", "Image", "XStack", "YStack", "styled", "photo1", "photo2", "photo3", "images", "x", "YStackEnterable", "AnimationsPresenceDemo", "page", "direction", "setPage", "imageIndex", "wrap", "paginate", "newDirection", "enterVariant", "exitVariant", "min", "max", "v", "rangeSize"]
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAGtD,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEZ,MAAM,SAAS,CAAC,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;AAEpE,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,CAAC,OAAO,SAAS,SAAS,gBAAgB,OAAO,SAAS,WAAW,QAAQ,KAAK,MAAM,OAAO,WAAW;AAAA,IACxG,CAAC,gBAAgB,cAAc,cAAc,aAAa,aACxD,CAAC,gBAAgB,KAAK,MAAM,UAAU,SAAS,WAAW,GAAG,GAAG,SAAS,GACvE,CAAC,MAAM,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,KAAK,EAC3D,EAFC,gBAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,EAAE;AAAA,IAC5B;AAAA,IACA,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,CAAC;AAAA,IAC3B;AAAA,EACF,EA3BC;AA6BL;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
+  "names": []
 }