@tamagui/demos 1.13.3 → 1.13.4

package/dist/esm/AnimationsDemo.mjs

@@ -1,89 +1,2 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Square,
-      {
-        animation: props.animation || "bouncy",
-        onPress,
-        size: 104,
-        borderColor: "$borderColor",
-        borderWidth: 1,
-        borderRadius: "$9",
-        backgroundColor: "$color9",
-        hoverStyle: {
-          scale: 1.1
-        },
-        pressStyle: {
-          scale: 0.9
-        },
-        ...position,
-        children: props.children || /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        position: "absolute",
-        bottom: 20,
-        left: 20,
-        icon: Play,
-        theme: props.tint,
-        size: "$5",
-        circular: true,
-        onPress
-      }
-    )
-  ] });
-}
-const positions = [
-  {
-    x: 0,
-    y: 0,
-    scale: 1,
-    rotate: "0deg"
-  },
-  {
-    x: -50,
-    y: -50,
-    scale: 0.5,
-    rotate: "-45deg",
-    hoverStyle: {
-      scale: 0.6
-    },
-    pressStyle: {
-      scale: 0.4
-    }
-  },
-  {
-    x: 50,
-    y: 50,
-    scale: 1,
-    rotate: "180deg",
-    hoverStyle: {
-      scale: 1.1
-    },
-    pressStyle: {
-      scale: 0.9
-    }
-  }
-];
-export {
-  AnimationsDemo,
-  positions
-};
+import{Fragment as p,jsx as e,jsxs as b}from"react/jsx-runtime";import{LogoIcon as a}from"@tamagui/logo";import{Play as c}from"@tamagui/lucide-icons";import{Button as d,Square as u,useControllableState as m,useEvent as y}from"tamagui";function f(o){const[s,n]=m({strategy:"most-recent-wins",prop:o.position,defaultProp:0}),i=r[s],t=y(()=>{n(l=>(l+1)%r.length)});return b(p,{children:[e(u,{animation:o.animation||"bouncy",onPress:t,size:104,borderColor:"$borderColor",borderWidth:1,borderRadius:"$9",backgroundColor:"$color9",hoverStyle:{scale:1.1},pressStyle:{scale:.9},...i,children:o.children||e(a,{downscale:.75})}),e(d,{position:"absolute",bottom:20,left:20,icon:c,theme:o.tint,size:"$5",circular:!0,onPress:t})]})}const r=[{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{f as AnimationsDemo,r as positions};
 //# sourceMappingURL=AnimationsDemo.mjs.map

package/dist/esm/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": "AAkBI,mBAiBuB,KAjBvB;AAlBJ,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,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM,aAAa;AAAA,QAC9B;AAAA,QACA,MAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAa;AAAA,QACb,cAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEH,gBAAM,YAAY,oBAAC,YAAS,WAAW,MAAM;AAAA;AAAA,IAChD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO,MAAM;AAAA,QACb,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
-  "names": []
+  "mappings": "AAkBI,mBAAAA,EAiBuB,OAAAC,EAjBvB,QAAAC,MAAA,oBAlBJ,OAAS,YAAAC,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,OACEZ,EAAAF,EAAA,CACE,UAAAC,EAACK,EAAA,CACC,UAAWI,EAAM,WAAa,SAC9B,QAASK,EACT,KAAM,IACN,YAAY,eACZ,YAAa,EACb,aAAa,KACb,gBAAgB,UAChB,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,EACC,GAAGF,EAEH,SAAAH,EAAM,UAAYT,EAACE,EAAA,CAAS,UAAW,IAAM,EAChD,EAEAF,EAACI,EAAA,CACC,SAAS,WACT,OAAQ,GACR,KAAM,GACN,KAAMD,EACN,MAAOM,EAAM,KACb,KAAK,KACL,SAAQ,GACR,QAASK,EACX,GACF,CAEJ,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": ["Fragment", "jsx", "jsxs", "LogoIcon", "Play", "Button", "Square", "useControllableState", "useEvent", "AnimationsDemo", "props", "positionI", "setPositionI", "position", "positions", "onPress", "x"]
 }

package/dist/esm/AnimationsEnterDemo.js

@@ -1,40 +1,2 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsx(YStack, { ref });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Square,
-      {
-        enterStyle: {
-          scale: 1.5,
-          y: -10,
-          opacity: 0
-        },
-        animation: "bouncy",
-        elevation: "$4",
-        size: 110,
-        opacity: 1,
-        scale: 1,
-        y: 0,
-        backgroundColor: "$pink10",
-        borderRadius: "$9",
-        children: props.children ?? /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-      },
-      key
-    ),
-    /* @__PURE__ */ jsx(Button, { size: "$3", marginTop: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })
-  ] });
-}
-export {
-  AnimationsEnterDemo
-};
+import{Fragment as f,jsx as e,jsxs as p}from"react/jsx-runtime";import{LogoIcon as i}from"@tamagui/logo";import{useRef as s,useState as c}from"react";import{Button as u,Square as m,YStack as l}from"tamagui";import{useIsIntersecting as y}from"./useOnIntersecting";function g(t){const o=s(null),n=y(o,{once:!0}),[r,a]=c(0);return n?p(f,{children:[e(m,{enterStyle:{scale:1.5,y:-10,opacity:0},animation:"bouncy",elevation:"$4",size:110,opacity:1,scale:1,y:0,backgroundColor:"$pink10",borderRadius:"$9",children:t.children??e(i,{downscale:.75})},r),e(u,{size:"$3",marginTop:"$4",onPress:()=>a(Math.random()),children:"Re-mount"})]}):e(l,{ref:o})}export{g as AnimationsEnterDemo};
 //# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/esm/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": "AAYW,SAIP,UAJO,KAIP,YAJO;AAZX,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,oBAAC,UAAO,KAAU;AAAA,EAC3B;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,GAAG;AAAA,UACH,SAAS;AAAA,QACX;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,GAAG;AAAA,QACH,iBAAgB;AAAA,QAChB,cAAa;AAAA,QAEZ,gBAAM,YAAY,oBAAC,YAAS,WAAW,MAAM;AAAA;AAAA,MAfzC;AAAA,IAgBP;AAAA,IAEA,oBAAC,UAAO,MAAK,MAAK,WAAU,MAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,sBAEvE;AAAA,KACF;AAEJ;",
-  "names": []
+  "mappings": "AAYW,OAIP,YAAAA,EAJO,OAAAC,EAIP,QAAAC,MAJO,oBAZX,OAAS,YAAAC,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,EAKHX,EAAAF,EAAA,CACE,UAAAC,EAACM,EAAA,CAEC,WAAY,CACV,MAAO,IACP,EAAG,IACH,QAAS,CACX,EACA,UAAU,SACV,UAAU,KACV,KAAM,IACN,QAAS,EACT,MAAO,EACP,EAAG,EACH,gBAAgB,UAChB,aAAa,KAEZ,SAAAI,EAAM,UAAYV,EAACE,EAAA,CAAS,UAAW,IAAM,GAfzCW,CAgBP,EAEAb,EAACK,EAAA,CAAO,KAAK,KAAK,UAAU,KAAK,QAAS,IAAMS,EAAO,KAAK,OAAO,CAAC,EAAG,oBAEvE,GACF,EA3BOd,EAACO,EAAA,CAAO,IAAKI,EAAK,CA6B7B",
+  "names": ["Fragment", "jsx", "jsxs", "LogoIcon", "useRef", "useState", "Button", "Square", "YStack", "useIsIntersecting", "AnimationsEnterDemo", "props", "ref", "hasIntersected", "key", "setKey"]
 }

package/dist/esm/AnimationsEnterDemo.mjs

@@ -1,40 +1,2 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsx(YStack, { ref });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Square,
-      {
-        enterStyle: {
-          scale: 1.5,
-          y: -10,
-          opacity: 0
-        },
-        animation: "bouncy",
-        elevation: "$4",
-        size: 110,
-        opacity: 1,
-        scale: 1,
-        y: 0,
-        backgroundColor: "$pink10",
-        borderRadius: "$9",
-        children: props.children ?? /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-      },
-      key
-    ),
-    /* @__PURE__ */ jsx(Button, { size: "$3", marginTop: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })
-  ] });
-}
-export {
-  AnimationsEnterDemo
-};
+import{Fragment as f,jsx as e,jsxs as p}from"react/jsx-runtime";import{LogoIcon as i}from"@tamagui/logo";import{useRef as s,useState as c}from"react";import{Button as u,Square as m,YStack as l}from"tamagui";import{useIsIntersecting as y}from"./useOnIntersecting";function g(t){const o=s(null),n=y(o,{once:!0}),[r,a]=c(0);return n?p(f,{children:[e(m,{enterStyle:{scale:1.5,y:-10,opacity:0},animation:"bouncy",elevation:"$4",size:110,opacity:1,scale:1,y:0,backgroundColor:"$pink10",borderRadius:"$9",children:t.children??e(i,{downscale:.75})},r),e(u,{size:"$3",marginTop:"$4",onPress:()=>a(Math.random()),children:"Re-mount"})]}):e(l,{ref:o})}export{g as AnimationsEnterDemo};
 //# sourceMappingURL=AnimationsEnterDemo.mjs.map

package/dist/esm/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": "AAYW,SAIP,UAJO,KAIP,YAJO;AAZX,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,oBAAC,UAAO,KAAU;AAAA,EAC3B;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,GAAG;AAAA,UACH,SAAS;AAAA,QACX;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,GAAG;AAAA,QACH,iBAAgB;AAAA,QAChB,cAAa;AAAA,QAEZ,gBAAM,YAAY,oBAAC,YAAS,WAAW,MAAM;AAAA;AAAA,MAfzC;AAAA,IAgBP;AAAA,IAEA,oBAAC,UAAO,MAAK,MAAK,WAAU,MAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,sBAEvE;AAAA,KACF;AAEJ;",
-  "names": []
+  "mappings": "AAYW,OAIP,YAAAA,EAJO,OAAAC,EAIP,QAAAC,MAJO,oBAZX,OAAS,YAAAC,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,EAKHX,EAAAF,EAAA,CACE,UAAAC,EAACM,EAAA,CAEC,WAAY,CACV,MAAO,IACP,EAAG,IACH,QAAS,CACX,EACA,UAAU,SACV,UAAU,KACV,KAAM,IACN,QAAS,EACT,MAAO,EACP,EAAG,EACH,gBAAgB,UAChB,aAAa,KAEZ,SAAAI,EAAM,UAAYV,EAACE,EAAA,CAAS,UAAW,IAAM,GAfzCW,CAgBP,EAEAb,EAACK,EAAA,CAAO,KAAK,KAAK,UAAU,KAAK,QAAS,IAAMS,EAAO,KAAK,OAAO,CAAC,EAAG,oBAEvE,GACF,EA3BOd,EAACO,EAAA,CAAO,IAAKI,EAAK,CA6B7B",
+  "names": ["Fragment", "jsx", "jsxs", "LogoIcon", "useRef", "useState", "Button", "Square", "YStack", "useIsIntersecting", "AnimationsEnterDemo", "props", "ref", "hasIntersected", "key", "setKey"]
 }

package/dist/esm/AnimationsHoverDemo.js

@@ -1,26 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-import { LogoIcon } from "@tamagui/logo";
-import { Square } from "tamagui";
-function AnimationsHoverDemo() {
-  return /* @__PURE__ */ jsx(
-    Square,
-    {
-      borderColor: "$pink10",
-      animation: "bouncy",
-      elevation: "$4",
-      size: 110,
-      borderRadius: "$9",
-      hoverStyle: {
-        scale: 1.2
-      },
-      pressStyle: {
-        scale: 0.9
-      },
-      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-    }
-  );
-}
-export {
-  AnimationsHoverDemo
-};
+import{jsx as o}from"react/jsx-runtime";import{LogoIcon as e}from"@tamagui/logo";import{Square as r}from"tamagui";function a(){return o(r,{borderColor:"$pink10",animation:"bouncy",elevation:"$4",size:110,borderRadius:"$9",hoverStyle:{scale:1.2},pressStyle:{scale:.9},children:o(e,{downscale:.75})})}export{a as AnimationsHoverDemo};
 //# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/esm/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": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,sBAAsB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,8BAAC,YAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
-  "names": []
+  "mappings": "AAkBM,cAAAA,MAAA,oBAlBN,OAAS,YAAAC,MAAgB,gBACzB,OAAS,UAAAC,MAAc,UAEhB,SAASC,GAAsB,CACpC,OACEH,EAACE,EAAA,CACC,YAAY,UACZ,UAAU,SACV,UAAU,KACV,KAAM,IACN,aAAa,KACb,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,EAEA,SAAAF,EAACC,EAAA,CAAS,UAAW,IAAM,EAC7B,CAEJ",
+  "names": ["jsx", "LogoIcon", "Square", "AnimationsHoverDemo"]
 }

package/dist/esm/AnimationsHoverDemo.mjs

@@ -1,26 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-import { LogoIcon } from "@tamagui/logo";
-import { Square } from "tamagui";
-function AnimationsHoverDemo() {
-  return /* @__PURE__ */ jsx(
-    Square,
-    {
-      borderColor: "$pink10",
-      animation: "bouncy",
-      elevation: "$4",
-      size: 110,
-      borderRadius: "$9",
-      hoverStyle: {
-        scale: 1.2
-      },
-      pressStyle: {
-        scale: 0.9
-      },
-      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-    }
-  );
-}
-export {
-  AnimationsHoverDemo
-};
+import{jsx as o}from"react/jsx-runtime";import{LogoIcon as e}from"@tamagui/logo";import{Square as r}from"tamagui";function a(){return o(r,{borderColor:"$pink10",animation:"bouncy",elevation:"$4",size:110,borderRadius:"$9",hoverStyle:{scale:1.2},pressStyle:{scale:.9},children:o(e,{downscale:.75})})}export{a as AnimationsHoverDemo};
 //# sourceMappingURL=AnimationsHoverDemo.mjs.map

package/dist/esm/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": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,sBAAsB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,8BAAC,YAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
-  "names": []
+  "mappings": "AAkBM,cAAAA,MAAA,oBAlBN,OAAS,YAAAC,MAAgB,gBACzB,OAAS,UAAAC,MAAc,UAEhB,SAASC,GAAsB,CACpC,OACEH,EAACE,EAAA,CACC,YAAY,UACZ,UAAU,SACV,UAAU,KACV,KAAM,IACN,aAAa,KACb,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,EAEA,SAAAF,EAACC,EAAA,CAAS,UAAW,IAAM,EAC7B,CAEJ",
+  "names": ["jsx", "LogoIcon", "Square", "AnimationsHoverDemo"]
 }

package/dist/esm/AnimationsPresenceDemo.js

@@ -1,62 +1,2 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsxs(XStack, { overflow: "hidden", backgroundColor: "#000", position: "relative", height: 300, width: "100%", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { enterVariant, exitVariant, children: /* @__PURE__ */ jsx(YStackEnterable, { animation: "bouncy", fullscreen: true, x: 0, opacity: 1, children: /* @__PURE__ */ jsx(Image, { src: images[imageIndex], width: 780, height: 300 }) }, page) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        accessibilityLabel: "Carousel left",
-        icon: ArrowLeft,
-        size: "$5",
-        position: "absolute",
-        left: "$4",
-        circular: true,
-        elevate: true,
-        onPress: () => paginate(-1)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        accessibilityLabel: "Carousel right",
-        icon: ArrowRight,
-        size: "$5",
-        position: "absolute",
-        right: "$4",
-        circular: true,
-        elevate: true,
-        onPress: () => paginate(1)
-      }
-    )
-  ] });
-}
-const wrap = (min, max, v) => {
-  const rangeSize = max - min;
-  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
-};
-export {
-  AnimationsPresenceDemo,
-  images
-};
+import{jsx as r,jsxs as L}from"react/jsx-runtime";import{AnimatePresence as m}from"@tamagui/animate-presence";import{ArrowLeft as l,ArrowRight as p}from"@tamagui/lucide-icons";import{useState as u}from"react";import{Button as s,Image as g,XStack as h,YStack as f,styled as b}from"tamagui";import d from"../../public/photo1.jpg";import y from"../../public/photo2.jpg";import k from"../../public/photo3.jpg";const c=[d,y,k].map(t=>t.src||t),x=b(f,{variants:{isLeft:{true:{x:-300,opacity:0}},isRight:{true:{x:300,opacity:0}}}});function I(){const[[t,e],o]=u([0,0]),i=S(0,c.length,t),a=n=>{o([t+n,n])};return L(h,{overflow:"hidden",backgroundColor:"#000",position:"relative",height:300,width:"100%",alignItems:"center",children:[r(m,{enterVariant:e===1||e===0?"isRight":"isLeft",exitVariant:e===1?"isLeft":"isRight",children:r(x,{animation:"bouncy",fullscreen:!0,x:0,opacity:1,children:r(g,{src:c[i],width:780,height:300})},t)}),r(s,{accessibilityLabel:"Carousel left",icon:l,size:"$5",position:"absolute",left:"$4",circular:!0,elevate:!0,onPress:()=>a(-1)}),r(s,{accessibilityLabel:"Carousel right",icon:p,size:"$5",position:"absolute",right:"$4",circular:!0,elevate:!0,onPress:()=>a(1)})]})}const S=(t,e,o)=>{const i=e-t;return((o-t)%i+i)%i+t};export{I as AnimationsPresenceDemo,c as images};
 //# sourceMappingURL=AnimationsPresenceDemo.js.map

package/dist/esm/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": "AAkCI,SAGM,KAHN;AAlCJ,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,qBAAC,UAAO,UAAS,UAAS,iBAAgB,QAAO,UAAS,YAAW,QAAQ,KAAK,OAAM,QAAO,YAAW,UACxG;AAAA,wBAAC,mBAAgB,cAA4B,aAC3C,8BAAC,mBAA2B,WAAU,UAAS,YAAU,MAAC,GAAG,GAAG,SAAS,GACvE,8BAAC,SAAM,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,KAAK,KADrC,IAEtB,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,IAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAS;AAAA,QACT,OAAM;AAAA,QACN,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,CAAC;AAAA;AAAA,IAC3B;AAAA,KACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
-  "names": []
+  "mappings": "AAkCI,OAGM,OAAAA,EAHN,QAAAC,MAAA,oBAlCJ,OAAS,mBAAAC,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,EAKA,OACEvB,EAACO,EAAA,CAAO,SAAS,SAAS,gBAAgB,OAAO,SAAS,WAAW,OAAQ,IAAK,MAAM,OAAO,WAAW,SACxG,UAAAR,EAACE,EAAA,CAAgB,aALAiB,IAAc,GAAKA,IAAc,EAAI,UAAY,SAKrB,YAJ7BA,IAAc,EAAI,SAAW,UAK3C,SAAAnB,EAACgB,EAAA,CAA2B,UAAU,SAAS,WAAU,GAAC,EAAG,EAAG,QAAS,EACvE,SAAAhB,EAACO,EAAA,CAAM,IAAKO,EAAOO,CAAU,EAAG,MAAO,IAAK,OAAQ,IAAK,GADrCH,CAEtB,EACF,EAEAlB,EAACM,EAAA,CACC,mBAAmB,gBACnB,KAAMH,EACN,KAAK,KACL,SAAS,WACT,KAAK,KACL,SAAQ,GACR,QAAO,GACP,QAAS,IAAMoB,EAAS,EAAE,EAC5B,EACAvB,EAACM,EAAA,CACC,mBAAmB,iBACnB,KAAMF,EACN,KAAK,KACL,SAAS,WACT,MAAM,KACN,SAAQ,GACR,QAAO,GACP,QAAS,IAAMmB,EAAS,CAAC,EAC3B,GACF,CAEJ,CAEA,MAAMD,EAAO,CAACG,EAAaC,EAAaC,IAAc,CACpD,MAAMC,EAAYF,EAAMD,EACxB,QAAWE,EAAIF,GAAOG,EAAaA,GAAaA,EAAaH,CAC/D",
+  "names": ["jsx", "jsxs", "AnimatePresence", "ArrowLeft", "ArrowRight", "useState", "Button", "Image", "XStack", "YStack", "styled", "photo1", "photo2", "photo3", "images", "x", "YStackEnterable", "AnimationsPresenceDemo", "page", "direction", "setPage", "imageIndex", "wrap", "paginate", "newDirection", "min", "max", "v", "rangeSize"]
 }

package/dist/esm/AnimationsPresenceDemo.mjs

@@ -1,62 +1,2 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsxs(XStack, { overflow: "hidden", backgroundColor: "#000", position: "relative", height: 300, width: "100%", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { enterVariant, exitVariant, children: /* @__PURE__ */ jsx(YStackEnterable, { animation: "bouncy", fullscreen: true, x: 0, opacity: 1, children: /* @__PURE__ */ jsx(Image, { src: images[imageIndex], width: 780, height: 300 }) }, page) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        accessibilityLabel: "Carousel left",
-        icon: ArrowLeft,
-        size: "$5",
-        position: "absolute",
-        left: "$4",
-        circular: true,
-        elevate: true,
-        onPress: () => paginate(-1)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        accessibilityLabel: "Carousel right",
-        icon: ArrowRight,
-        size: "$5",
-        position: "absolute",
-        right: "$4",
-        circular: true,
-        elevate: true,
-        onPress: () => paginate(1)
-      }
-    )
-  ] });
-}
-const wrap = (min, max, v) => {
-  const rangeSize = max - min;
-  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
-};
-export {
-  AnimationsPresenceDemo,
-  images
-};
+import{jsx as r,jsxs as L}from"react/jsx-runtime";import{AnimatePresence as m}from"@tamagui/animate-presence";import{ArrowLeft as l,ArrowRight as p}from"@tamagui/lucide-icons";import{useState as u}from"react";import{Button as s,Image as g,XStack as h,YStack as f,styled as b}from"tamagui";import d from"../../public/photo1.jpg";import y from"../../public/photo2.jpg";import k from"../../public/photo3.jpg";const c=[d,y,k].map(t=>t.src||t),x=b(f,{variants:{isLeft:{true:{x:-300,opacity:0}},isRight:{true:{x:300,opacity:0}}}});function I(){const[[t,e],o]=u([0,0]),i=S(0,c.length,t),a=n=>{o([t+n,n])};return L(h,{overflow:"hidden",backgroundColor:"#000",position:"relative",height:300,width:"100%",alignItems:"center",children:[r(m,{enterVariant:e===1||e===0?"isRight":"isLeft",exitVariant:e===1?"isLeft":"isRight",children:r(x,{animation:"bouncy",fullscreen:!0,x:0,opacity:1,children:r(g,{src:c[i],width:780,height:300})},t)}),r(s,{accessibilityLabel:"Carousel left",icon:l,size:"$5",position:"absolute",left:"$4",circular:!0,elevate:!0,onPress:()=>a(-1)}),r(s,{accessibilityLabel:"Carousel right",icon:p,size:"$5",position:"absolute",right:"$4",circular:!0,elevate:!0,onPress:()=>a(1)})]})}const S=(t,e,o)=>{const i=e-t;return((o-t)%i+i)%i+t};export{I as AnimationsPresenceDemo,c as images};
 //# sourceMappingURL=AnimationsPresenceDemo.mjs.map

package/dist/esm/AnimationsPresenceDemo.mjs.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": "AAkCI,SAGM,KAHN;AAlCJ,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,qBAAC,UAAO,UAAS,UAAS,iBAAgB,QAAO,UAAS,YAAW,QAAQ,KAAK,OAAM,QAAO,YAAW,UACxG;AAAA,wBAAC,mBAAgB,cAA4B,aAC3C,8BAAC,mBAA2B,WAAU,UAAS,YAAU,MAAC,GAAG,GAAG,SAAS,GACvE,8BAAC,SAAM,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,KAAK,KADrC,IAEtB,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,IAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAS;AAAA,QACT,OAAM;AAAA,QACN,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,CAAC;AAAA;AAAA,IAC3B;AAAA,KACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
-  "names": []
+  "mappings": "AAkCI,OAGM,OAAAA,EAHN,QAAAC,MAAA,oBAlCJ,OAAS,mBAAAC,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,EAKA,OACEvB,EAACO,EAAA,CAAO,SAAS,SAAS,gBAAgB,OAAO,SAAS,WAAW,OAAQ,IAAK,MAAM,OAAO,WAAW,SACxG,UAAAR,EAACE,EAAA,CAAgB,aALAiB,IAAc,GAAKA,IAAc,EAAI,UAAY,SAKrB,YAJ7BA,IAAc,EAAI,SAAW,UAK3C,SAAAnB,EAACgB,EAAA,CAA2B,UAAU,SAAS,WAAU,GAAC,EAAG,EAAG,QAAS,EACvE,SAAAhB,EAACO,EAAA,CAAM,IAAKO,EAAOO,CAAU,EAAG,MAAO,IAAK,OAAQ,IAAK,GADrCH,CAEtB,EACF,EAEAlB,EAACM,EAAA,CACC,mBAAmB,gBACnB,KAAMH,EACN,KAAK,KACL,SAAS,WACT,KAAK,KACL,SAAQ,GACR,QAAO,GACP,QAAS,IAAMoB,EAAS,EAAE,EAC5B,EACAvB,EAACM,EAAA,CACC,mBAAmB,iBACnB,KAAMF,EACN,KAAK,KACL,SAAS,WACT,MAAM,KACN,SAAQ,GACR,QAAO,GACP,QAAS,IAAMmB,EAAS,CAAC,EAC3B,GACF,CAEJ,CAEA,MAAMD,EAAO,CAACG,EAAaC,EAAaC,IAAc,CACpD,MAAMC,EAAYF,EAAMD,EACxB,QAAWE,EAAIF,GAAOG,EAAaA,GAAaA,EAAaH,CAC/D",
+  "names": ["jsx", "jsxs", "AnimatePresence", "ArrowLeft", "ArrowRight", "useState", "Button", "Image", "XStack", "YStack", "styled", "photo1", "photo2", "photo3", "images", "x", "YStackEnterable", "AnimationsPresenceDemo", "page", "direction", "setPage", "imageIndex", "wrap", "paginate", "newDirection", "min", "max", "v", "rangeSize"]
 }

package/dist/esm/AnimationsTimingDemo.js

@@ -1,26 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-import { LogoIcon } from "@tamagui/logo";
-import { Square } from "tamagui";
-function AnimationsTimingDemo() {
-  return /* @__PURE__ */ jsx(
-    Square,
-    {
-      backgroundColor: "$pink10",
-      animation: "100ms",
-      elevation: "$4",
-      size: 110,
-      borderRadius: "$9",
-      hoverStyle: {
-        scale: 1.2
-      },
-      pressStyle: {
-        scale: 0.9
-      },
-      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-    }
-  );
-}
-export {
-  AnimationsTimingDemo
-};
+import{jsx as o}from"react/jsx-runtime";import{LogoIcon as e}from"@tamagui/logo";import{Square as r}from"tamagui";function a(){return o(r,{backgroundColor:"$pink10",animation:"100ms",elevation:"$4",size:110,borderRadius:"$9",hoverStyle:{scale:1.2},pressStyle:{scale:.9},children:o(e,{downscale:.75})})}export{a as AnimationsTimingDemo};
 //# sourceMappingURL=AnimationsTimingDemo.js.map

package/dist/esm/AnimationsTimingDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsTimingDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      backgroundColor=\"$pink10\"\n      animation=\"100ms\"\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": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,uBAAuB;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,8BAAC,YAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
-  "names": []
+  "mappings": "AAkBM,cAAAA,MAAA,oBAlBN,OAAS,YAAAC,MAAgB,gBACzB,OAAS,UAAAC,MAAc,UAEhB,SAASC,GAAuB,CACrC,OACEH,EAACE,EAAA,CACC,gBAAgB,UAChB,UAAU,QACV,UAAU,KACV,KAAM,IACN,aAAa,KACb,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,EAEA,SAAAF,EAACC,EAAA,CAAS,UAAW,IAAM,EAC7B,CAEJ",
+  "names": ["jsx", "LogoIcon", "Square", "AnimationsTimingDemo"]
 }

package/dist/esm/AnimationsTimingDemo.mjs

@@ -1,26 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-import { LogoIcon } from "@tamagui/logo";
-import { Square } from "tamagui";
-function AnimationsTimingDemo() {
-  return /* @__PURE__ */ jsx(
-    Square,
-    {
-      backgroundColor: "$pink10",
-      animation: "100ms",
-      elevation: "$4",
-      size: 110,
-      borderRadius: "$9",
-      hoverStyle: {
-        scale: 1.2
-      },
-      pressStyle: {
-        scale: 0.9
-      },
-      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-    }
-  );
-}
-export {
-  AnimationsTimingDemo
-};
+import{jsx as o}from"react/jsx-runtime";import{LogoIcon as e}from"@tamagui/logo";import{Square as r}from"tamagui";function a(){return o(r,{backgroundColor:"$pink10",animation:"100ms",elevation:"$4",size:110,borderRadius:"$9",hoverStyle:{scale:1.2},pressStyle:{scale:.9},children:o(e,{downscale:.75})})}export{a as AnimationsTimingDemo};
 //# sourceMappingURL=AnimationsTimingDemo.mjs.map

package/dist/esm/AnimationsTimingDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/AnimationsTimingDemo.tsx"],
   "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      backgroundColor=\"$pink10\"\n      animation=\"100ms\"\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": "AAkBM;AAlBN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,uBAAuB;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,8BAAC,YAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
-  "names": []
+  "mappings": "AAkBM,cAAAA,MAAA,oBAlBN,OAAS,YAAAC,MAAgB,gBACzB,OAAS,UAAAC,MAAc,UAEhB,SAASC,GAAuB,CACrC,OACEH,EAACE,EAAA,CACC,gBAAgB,UAChB,UAAU,QACV,UAAU,KACV,KAAM,IACN,aAAa,KACb,WAAY,CACV,MAAO,GACT,EACA,WAAY,CACV,MAAO,EACT,EAEA,SAAAF,EAACC,EAAA,CAAS,UAAW,IAAM,EAC7B,CAEJ",
+  "names": ["jsx", "LogoIcon", "Square", "AnimationsTimingDemo"]
 }