@tamagui/demos 1.0.1-beta.68 → 1.0.1-beta.69

package/dist/cjs/AnimationsDemo.js

@@ -56,6 +56,7 @@ var AnimationsDemo_default = /* @__PURE__ */ __name((props) => {
     });
   }, "next");
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Square, __spreadValues({
+    focusable: false,
     animation: props.animation || "bouncy",
     onPress: () => next(),
     size: 110,

package/dist/cjs/AnimationsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
-  "sourcesContent": ["import { Play } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Square, useControllableState } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport default (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 next = (to = 1) => {\n    setPositionI((x) => {\n      return (x + to) % positions.length\n    })\n  }\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={() => next()}\n        size={110}\n        bc=\"$pink10\"\n        br=\"$9\"\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        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={() => next()}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqB;AACrB,mBAAkB;AAClB,qBAAqD;AAErD,yBAAyB;AAEzB,IAAO,yBAAQ,wBAAC,UAAU;AACxB,QAAM,CAAC,WAAW,gBAAgB,yCAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,wBAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH,GAJa;AAMb,SACE,wFACE,mDAAC;AAAA,IACC,WAAW,MAAM,aAAa;AAAA,IAC9B,SAAS,MAAM,KAAK;AAAA,IACpB,MAAM;AAAA,IACN,IAAG;AAAA,IACH,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,KACI,WAEH,MAAM,YAAY,mDAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAChD,GAEA,mDAAC;AAAA,IACC,KAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,IACN,OAAO,MAAM;AAAA,IACb,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,SAAS,MAAM,KAAK;AAAA,GACtB,CACF;AAEJ,GA5Ce;AA8CR,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;",
+  "sourcesContent": ["import { Play } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Square, useControllableState } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport default (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 next = (to = 1) => {\n    setPositionI((x) => {\n      return (x + to) % positions.length\n    })\n  }\n\n  return (\n    <>\n      <Square\n        focusable={false}\n        animation={props.animation || 'bouncy'}\n        onPress={() => next()}\n        size={110}\n        bc=\"$pink10\"\n        br=\"$9\"\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        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={() => next()}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqB;AACrB,mBAAkB;AAClB,qBAAqD;AAErD,yBAAyB;AAEzB,IAAO,yBAAQ,wBAAC,UAAU;AACxB,QAAM,CAAC,WAAW,gBAAgB,yCAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,wBAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH,GAJa;AAMb,SACE,wFACE,mDAAC;AAAA,IACC,WAAW;AAAA,IACX,WAAW,MAAM,aAAa;AAAA,IAC9B,SAAS,MAAM,KAAK;AAAA,IACpB,MAAM;AAAA,IACN,IAAG;AAAA,IACH,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,KACI,WAEH,MAAM,YAAY,mDAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAChD,GAEA,mDAAC;AAAA,IACC,KAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,IACN,OAAO,MAAM;AAAA,IACb,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,SAAS,MAAM,KAAK;AAAA,GACtB,CACF;AAEJ,GA7Ce;AA+CR,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/cjs/AnimationsPresenceDemo.js

@@ -71,18 +71,20 @@ var AnimationsPresenceDemo_default = /* @__PURE__ */ __name(() => {
   }))), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
     accessibilityLabel: "Carousel left",
     icon: import_feather_icons.ArrowLeft,
-    circular: true,
     size: "$5",
     pos: "absolute",
     l: "$4",
+    circular: true,
+    elevate: true,
     onPress: () => paginate(-1)
   }), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, {
     accessibilityLabel: "Carousel right",
     icon: import_feather_icons.ArrowRight,
-    circular: true,
     size: "$5",
     pos: "absolute",
     r: "$4",
+    circular: true,
+    elevate: true,
     onPress: () => paginate(1)
   }));
 }, "default");

package/dist/cjs/AnimationsPresenceDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
-  "sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\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.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  },\n})\n\nexport default () => {\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 ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n          <Image src={images[imageIndex]} width={700} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        circular\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        circular\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$4\"\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,8BAAgC;AAChC,2BAAsC;AACtC,mBAAkB;AAClB,oBAAyB;AACzB,qBAAsD;AAGtD,oBAAmB;AAEnB,oBAAmB;AAEnB,oBAAmB;AAEZ,MAAM,SAAS,CAAC,sBAAO,KAAK,sBAAO,KAAK,sBAAO,GAAG;AAEzD,MAAM,kBAAkB,2BAAO,uBAAQ;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;AAED,IAAO,iCAAQ,6BAAM;AACnB,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,4BAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,wBAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C,GAFiB;AAIjB,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAO,KAAI;AAAA,IAAW,GAAG;AAAA,IAAK,GAAE;AAAA,IAAO,IAAG;AAAA,KAC/D,mDAAC;AAAA,IAAgB;AAAA,IAA4B;AAAA,KAC3C,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAM,WAAU;AAAA,IAAS,YAAU;AAAA,IAAC,GAAG;AAAA,IAAG,GAAG;AAAA,KACjE,mDAAC;AAAA,IAAM,KAAK,OAAO;AAAA,IAAa,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK,CAC3D,CACF,GAEA,mDAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,UAAQ;AAAA,IACR,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,SAAS,MAAM,SAAS,EAAE;AAAA,GAC5B,GACA,mDAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,UAAQ;AAAA,IACR,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,SAAS,MAAM,SAAS,CAAC;AAAA,GAC3B,CACF;AAEJ,GAxCe;AA0Cf,MAAM,OAAO,wBAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D,GAHa;",
+  "sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\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.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  },\n})\n\nexport default () => {\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 ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n          <Image src={images[imageIndex]} width={700} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$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;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,8BAAgC;AAChC,2BAAsC;AACtC,mBAAkB;AAClB,oBAAyB;AACzB,qBAAsD;AAGtD,oBAAmB;AAEnB,oBAAmB;AAEnB,oBAAmB;AAEZ,MAAM,SAAS,CAAC,sBAAO,KAAK,sBAAO,KAAK,sBAAO,GAAG;AAEzD,MAAM,kBAAkB,2BAAO,uBAAQ;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;AAED,IAAO,iCAAQ,6BAAM;AACnB,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,4BAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,wBAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C,GAFiB;AAIjB,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAO,KAAI;AAAA,IAAW,GAAG;AAAA,IAAK,GAAE;AAAA,IAAO,IAAG;AAAA,KAC/D,mDAAC;AAAA,IAAgB;AAAA,IAA4B;AAAA,KAC3C,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAM,WAAU;AAAA,IAAS,YAAU;AAAA,IAAC,GAAG;AAAA,IAAG,GAAG;AAAA,KACjE,mDAAC;AAAA,IAAM,KAAK,OAAO;AAAA,IAAa,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK,CAC3D,CACF,GAEA,mDAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,SAAS,MAAM,SAAS,EAAE;AAAA,GAC5B,GACA,mDAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,SAAS,MAAM,SAAS,CAAC;AAAA,GAC3B,CACF;AAEJ,GA1Ce;AA4Cf,MAAM,OAAO,wBAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D,GAHa;",
   "names": []
 }

package/dist/cjs/CardDemo.js

@@ -52,8 +52,8 @@ function CardDemo() {
     w: 250,
     h: 300,
     scale: 0.9,
-    hoverStyle: { scale: 0.95 },
-    pressStyle: { scale: 0.85 }
+    hoverStyle: { scale: 0.925 },
+    pressStyle: { scale: 0.875 }
   }), /* @__PURE__ */ import_react.default.createElement(DemoCard, {
     size: "$5",
     w: 250,
@@ -65,7 +65,8 @@ function DemoCard(props) {
   return /* @__PURE__ */ import_react.default.createElement(import_tamagui.Card, __spreadValues({
     theme: "dark",
     elevate: true,
-    size: "$4"
+    size: "$4",
+    bordered: true
   }, props), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Card.Header, {
     padded: true
   }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.H2, null, "Sony A7IV"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Paragraph, {

package/dist/cjs/CardDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/CardDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Button, Card, CardProps, H2, H3, Image, Paragraph, XStack } from 'tamagui'\n\n// @ts-ignore\nimport camera from '../../public/camera.jpg'\n\nexport default function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        w={250}\n        h={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.95 }}\n        pressStyle={{ scale: 0.85 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack f={1} />\n        <Button br=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image pos=\"absolute\" width={300} height={500} resizeMode=\"cover\" src={camera.src} />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAA0E;AAG1E,oBAAmB;AAEJ,oBAAoB;AACjC,SACE,mDAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,mDAAC;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY,EAAE,OAAO,KAAK;AAAA,IAC1B,YAAY,EAAE,OAAO,KAAK;AAAA,GAC5B,GACA,mDAAC;AAAA,IAAS,MAAK;AAAA,IAAK,GAAG;AAAA,IAAK,GAAG;AAAA,GAAK,CACtC;AAEJ;AAfwB;AAiBxB,kBAAkB,OAAkB;AAClC,SACE,mDAAC;AAAA,IAAK,OAAM;AAAA,IAAO,SAAO;AAAA,IAAC,MAAK;AAAA,KAAS,QACvC,mDAAC,oBAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,mDAAC,yBAAG,WAAS,GACb,mDAAC;AAAA,IAAU,OAAM;AAAA,KAAO,eAAa,CACvC,GACA,mDAAC,oBAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,mDAAC;AAAA,IAAO,GAAG;AAAA,GAAG,GACd,mDAAC;AAAA,IAAO,IAAG;AAAA,KAAM,UAAQ,CAC3B,GACA,mDAAC,oBAAK,YAAL,MACC,mDAAC;AAAA,IAAM,KAAI;AAAA,IAAW,OAAO;AAAA,IAAK,QAAQ;AAAA,IAAK,YAAW;AAAA,IAAQ,KAAK,sBAAO;AAAA,GAAK,CACrF,CACF;AAEJ;AAhBS;",
+  "sourcesContent": ["import React from 'react'\nimport { Button, Card, CardProps, H2, H3, Image, Paragraph, XStack } from 'tamagui'\n\n// @ts-ignore\nimport camera from '../../public/camera.jpg'\n\nexport default function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        w={250}\n        h={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.925 }}\n        pressStyle={{ scale: 0.875 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" bordered {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack f={1} />\n        <Button br=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image pos=\"absolute\" width={300} height={500} resizeMode=\"cover\" src={camera.src} />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAA0E;AAG1E,oBAAmB;AAEJ,oBAAoB;AACjC,SACE,mDAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,mDAAC;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY,EAAE,OAAO,MAAM;AAAA,IAC3B,YAAY,EAAE,OAAO,MAAM;AAAA,GAC7B,GACA,mDAAC;AAAA,IAAS,MAAK;AAAA,IAAK,GAAG;AAAA,IAAK,GAAG;AAAA,GAAK,CACtC;AAEJ;AAfwB;AAiBxB,kBAAkB,OAAkB;AAClC,SACE,mDAAC;AAAA,IAAK,OAAM;AAAA,IAAO,SAAO;AAAA,IAAC,MAAK;AAAA,IAAK,UAAQ;AAAA,KAAK,QAChD,mDAAC,oBAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,mDAAC,yBAAG,WAAS,GACb,mDAAC;AAAA,IAAU,OAAM;AAAA,KAAO,eAAa,CACvC,GACA,mDAAC,oBAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,mDAAC;AAAA,IAAO,GAAG;AAAA,GAAG,GACd,mDAAC;AAAA,IAAO,IAAG;AAAA,KAAM,UAAQ,CAC3B,GACA,mDAAC,oBAAK,YAAL,MACC,mDAAC;AAAA,IAAM,KAAI;AAAA,IAAW,OAAO;AAAA,IAAK,QAAQ;AAAA,IAAK,YAAW;AAAA,IAAQ,KAAK,sBAAO;AAAA,GAAK,CACrF,CACF;AAEJ;AAhBS;",
   "names": []
 }

package/dist/cjs/SeparatorDemo.js

@@ -26,6 +26,7 @@ __export(SeparatorDemo_exports, {
 module.exports = __toCommonJS(SeparatorDemo_exports);
 var import_react = __toESM(require("react"));
 var import_tamagui = require("tamagui");
+//! debug
 function SeparatorDemo() {
   return /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, {
     w: "100%",

package/dist/cjs/SeparatorDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SeparatorDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport default function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAqD;AAEtC,yBAAyB;AACtC,SACE,mDAAC;AAAA,IAAO,GAAE;AAAA,IAAO,KAAK;AAAA,IAAK,IAAI;AAAA,KAC7B,mDAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,mDAAC,gCAAU,qCAAmC,GAC9C,mDAAC;AAAA,IAAU,IAAI;AAAA,GAAI,GACnB,mDAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,KAChB,mDAAC,gCAAU,MAAI,GACf,mDAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,mDAAC,gCAAU,MAAI,GACf,mDAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,mDAAC,gCAAU,QAAM,CACnB,CACF;AAEJ;AAfwB;",
+  "sourcesContent": ["//! debug\nimport React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport default function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAClB,qBAAqD;AAFrD;AAIe,yBAAyB;AACtC,SACE,mDAAC;AAAA,IAAO,GAAE;AAAA,IAAO,KAAK;AAAA,IAAK,IAAI;AAAA,KAC7B,mDAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,mDAAC,gCAAU,qCAAmC,GAC9C,mDAAC;AAAA,IAAU,IAAI;AAAA,GAAI,GACnB,mDAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,KAChB,mDAAC,gCAAU,MAAI,GACf,mDAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,mDAAC,gCAAU,MAAI,GACf,mDAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,mDAAC,gCAAU,QAAM,CACnB,CACF;AAEJ;AAfwB;",
   "names": []
 }

package/dist/cjs/SliderDemo.js

@@ -1,9 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -43,36 +41,33 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SliderDemo_exports = {};
 __export(SliderDemo_exports, {
   default: () => SliderDemo
 });
 module.exports = __toCommonJS(SliderDemo_exports);
-var import_react = __toESM(require("react"));
 var import_tamagui = require("tamagui");
 function SliderDemo() {
-  return /* @__PURE__ */ import_react.default.createElement(import_tamagui.XStack, {
+  return /* @__PURE__ */ React.createElement(import_tamagui.XStack, {
     height: 200,
     ai: "center",
     space: "$8"
-  }, /* @__PURE__ */ import_react.default.createElement(SimpleSlider, {
+  }, /* @__PURE__ */ React.createElement(SimpleSlider, {
     height: 200,
     orientation: "vertical"
-  }), /* @__PURE__ */ import_react.default.createElement(SimpleSlider, {
+  }), /* @__PURE__ */ React.createElement(SimpleSlider, {
     width: 200
   }));
 }
 __name(SliderDemo, "SliderDemo");
 function SimpleSlider(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react.default.createElement(import_tamagui.Slider, __spreadValues({
+  return /* @__PURE__ */ React.createElement(import_tamagui.Slider, __spreadValues({
     defaultValue: [50],
     max: 100,
     step: 1
-  }, props), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Slider.Track, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Slider.TrackActive, null)), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Slider.Thumb, {
-    hoverable: true,
+  }, props), /* @__PURE__ */ React.createElement(import_tamagui.Slider.Track, null, /* @__PURE__ */ React.createElement(import_tamagui.Slider.TrackActive, null)), /* @__PURE__ */ React.createElement(import_tamagui.Slider.Thumb, {
     bordered: true,
     circular: true,
     elevate: true,

package/dist/cjs/SliderDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { SizeTokens, Slider, SliderProps, Spacer, XStack, YStack } from 'tamagui'\n\nexport default function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb hoverable bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAwE;AAEzD,sBAAsB;AACnC,SACE,mDAAC;AAAA,IAAO,QAAQ;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KACrC,mDAAC;AAAA,IAAa,QAAQ;AAAA,IAAK,aAAY;AAAA,GAAW,GAClD,mDAAC;AAAA,IAAa,OAAO;AAAA,GAAK,CAC5B;AAEJ;AAPwB;AASxB,sBAAsB,IAAqC;AAArC,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtB,SACE,mDAAC;AAAA,IAAO,cAAc,CAAC,EAAE;AAAA,IAAG,KAAK;AAAA,IAAK,MAAM;AAAA,KAAO,QACjD,mDAAC,sBAAO,OAAP,MACC,mDAAC,sBAAO,aAAP,IAAmB,CACtB,GACA,mDAAC,sBAAO,OAAP;AAAA,IAAa,WAAS;AAAA,IAAC,UAAQ;AAAA,IAAC,UAAQ;AAAA,IAAC,SAAO;AAAA,IAAC,OAAO;AAAA,GAAG,GAC3D,QACH;AAEJ;AAVS;",
+  "sourcesContent": ["import { Slider, SliderProps, XStack } from 'tamagui'\n\nexport default function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA4C;AAE7B,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,QAAQ;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KACrC,oCAAC;AAAA,IAAa,QAAQ;AAAA,IAAK,aAAY;AAAA,GAAW,GAClD,oCAAC;AAAA,IAAa,OAAO;AAAA,GAAK,CAC5B;AAEJ;AAPwB;AASxB,sBAAsB,IAAqC;AAArC,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtB,SACE,oCAAC;AAAA,IAAO,cAAc,CAAC,EAAE;AAAA,IAAG,KAAK;AAAA,IAAK,MAAM;AAAA,KAAO,QACjD,oCAAC,sBAAO,OAAP,MACC,oCAAC,sBAAO,aAAP,IAAmB,CACtB,GACA,oCAAC,sBAAO,OAAP;AAAA,IAAa,UAAQ;AAAA,IAAC,UAAQ;AAAA,IAAC,SAAO;AAAA,IAAC,OAAO;AAAA,GAAG,GACjD,QACH;AAEJ;AAVS;",
   "names": []
 }

package/dist/esm/AnimationsDemo.js

@@ -17,6 +17,7 @@ var AnimationsDemo_default = /* @__PURE__ */ __name((props) => {
     });
   }, "next");
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Square, {
+    focusable: false,
     animation: props.animation || "bouncy",
     onPress: () => next(),
     size: 110,

package/dist/esm/AnimationsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
-  "sourcesContent": ["import { Play } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Square, useControllableState } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport default (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 next = (to = 1) => {\n    setPositionI((x) => {\n      return (x + to) % positions.length\n    })\n  }\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={() => next()}\n        size={110}\n        bc=\"$pink10\"\n        br=\"$9\"\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        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={() => next()}\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;AACA;AACA;AAEA;AAEA,IAAO,yBAAQ,wBAAC,UAAU;AACxB,QAAM,CAAC,WAAW,gBAAgB,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,wBAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH,GAJa;AAMb,SACE,0DACE,oCAAC;AAAA,IACC,WAAW,MAAM,aAAa;AAAA,IAC9B,SAAS,MAAM,KAAK;AAAA,IACpB,MAAM;AAAA,IACN,IAAG;AAAA,IACH,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACC,GAAG;AAAA,KAEH,MAAM,YAAY,oCAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAChD,GAEA,oCAAC;AAAA,IACC,KAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,IACN,OAAO,MAAM;AAAA,IACb,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,SAAS,MAAM,KAAK;AAAA,GACtB,CACF;AAEJ,GA5Ce;AA8CR,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;",
+  "sourcesContent": ["import { Play } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Square, useControllableState } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport default (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 next = (to = 1) => {\n    setPositionI((x) => {\n      return (x + to) % positions.length\n    })\n  }\n\n  return (\n    <>\n      <Square\n        focusable={false}\n        animation={props.animation || 'bouncy'}\n        onPress={() => next()}\n        size={110}\n        bc=\"$pink10\"\n        br=\"$9\"\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        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={() => next()}\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;AACA;AACA;AAEA;AAEA,IAAO,yBAAQ,wBAAC,UAAU;AACxB,QAAM,CAAC,WAAW,gBAAgB,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,wBAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH,GAJa;AAMb,SACE,0DACE,oCAAC;AAAA,IACC,WAAW;AAAA,IACX,WAAW,MAAM,aAAa;AAAA,IAC9B,SAAS,MAAM,KAAK;AAAA,IACpB,MAAM;AAAA,IACN,IAAG;AAAA,IACH,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACC,GAAG;AAAA,KAEH,MAAM,YAAY,oCAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAChD,GAEA,oCAAC;AAAA,IACC,KAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,IACN,OAAO,MAAM;AAAA,IACb,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,SAAS,MAAM,KAAK;AAAA,GACtB,CACF;AAEJ,GA7Ce;AA+CR,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/esm/AnimationsPresenceDemo.js

@@ -46,18 +46,20 @@ var AnimationsPresenceDemo_default = /* @__PURE__ */ __name(() => {
   }))), /* @__PURE__ */ React.createElement(Button, {
     accessibilityLabel: "Carousel left",
     icon: ArrowLeft,
-    circular: true,
     size: "$5",
     pos: "absolute",
     l: "$4",
+    circular: true,
+    elevate: true,
     onPress: () => paginate(-1)
   }), /* @__PURE__ */ React.createElement(Button, {
     accessibilityLabel: "Carousel right",
     icon: ArrowRight,
-    circular: true,
     size: "$5",
     pos: "absolute",
     r: "$4",
+    circular: true,
+    elevate: true,
     onPress: () => paginate(1)
   }));
 }, "default");

package/dist/esm/AnimationsPresenceDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
-  "sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\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.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  },\n})\n\nexport default () => {\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 ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n          <Image src={images[imageIndex]} width={700} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        circular\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        circular\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$4\"\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": ";;AAGA;AACA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAEO,MAAM,SAAS,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,GAAG;AAEzD,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;AAED,IAAO,iCAAQ,6BAAM;AACnB,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,wBAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C,GAFiB;AAIjB,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAO,KAAI;AAAA,IAAW,GAAG;AAAA,IAAK,GAAE;AAAA,IAAO,IAAG;AAAA,KAC/D,oCAAC;AAAA,IAAgB;AAAA,IAA4B;AAAA,KAC3C,oCAAC;AAAA,IAAgB,KAAK;AAAA,IAAM,WAAU;AAAA,IAAS,YAAU;AAAA,IAAC,GAAG;AAAA,IAAG,GAAG;AAAA,KACjE,oCAAC;AAAA,IAAM,KAAK,OAAO;AAAA,IAAa,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK,CAC3D,CACF,GAEA,oCAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,UAAQ;AAAA,IACR,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,SAAS,MAAM,SAAS,EAAE;AAAA,GAC5B,GACA,oCAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,UAAQ;AAAA,IACR,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,SAAS,MAAM,SAAS,CAAC;AAAA,GAC3B,CACF;AAEJ,GAxCe;AA0Cf,MAAM,OAAO,wBAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D,GAHa;",
+  "sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\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.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  },\n})\n\nexport default () => {\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 ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n          <Image src={images[imageIndex]} width={700} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$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": ";;AAGA;AACA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAEO,MAAM,SAAS,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,GAAG;AAEzD,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;AAED,IAAO,iCAAQ,6BAAM;AACnB,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,wBAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C,GAFiB;AAIjB,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAO,KAAI;AAAA,IAAW,GAAG;AAAA,IAAK,GAAE;AAAA,IAAO,IAAG;AAAA,KAC/D,oCAAC;AAAA,IAAgB;AAAA,IAA4B;AAAA,KAC3C,oCAAC;AAAA,IAAgB,KAAK;AAAA,IAAM,WAAU;AAAA,IAAS,YAAU;AAAA,IAAC,GAAG;AAAA,IAAG,GAAG;AAAA,KACjE,oCAAC;AAAA,IAAM,KAAK,OAAO;AAAA,IAAa,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK,CAC3D,CACF,GAEA,oCAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,SAAS,MAAM,SAAS,EAAE;AAAA,GAC5B,GACA,oCAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,SAAS,MAAM,SAAS,CAAC;AAAA,GAC3B,CACF;AAEJ,GA1Ce;AA4Cf,MAAM,OAAO,wBAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D,GAHa;",
   "names": []
 }

package/dist/esm/CardDemo.js

@@ -14,8 +14,8 @@ function CardDemo() {
     w: 250,
     h: 300,
     scale: 0.9,
-    hoverStyle: { scale: 0.95 },
-    pressStyle: { scale: 0.85 }
+    hoverStyle: { scale: 0.925 },
+    pressStyle: { scale: 0.875 }
   }), /* @__PURE__ */ React.createElement(DemoCard, {
     size: "$5",
     w: 250,
@@ -28,6 +28,7 @@ function DemoCard(props) {
     theme: "dark",
     elevate: true,
     size: "$4",
+    bordered: true,
     ...props
   }, /* @__PURE__ */ React.createElement(Card.Header, {
     padded: true

package/dist/esm/CardDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/CardDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Button, Card, CardProps, H2, H3, Image, Paragraph, XStack } from 'tamagui'\n\n// @ts-ignore\nimport camera from '../../public/camera.jpg'\n\nexport default function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        w={250}\n        h={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.95 }}\n        pressStyle={{ scale: 0.85 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack f={1} />\n        <Button br=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image pos=\"absolute\" width={300} height={500} resizeMode=\"cover\" src={camera.src} />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
-  "mappings": ";;AAAA;AACA;AAGA;AAEe,oBAAoB;AACjC,SACE,oCAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,oCAAC;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY,EAAE,OAAO,KAAK;AAAA,IAC1B,YAAY,EAAE,OAAO,KAAK;AAAA,GAC5B,GACA,oCAAC;AAAA,IAAS,MAAK;AAAA,IAAK,GAAG;AAAA,IAAK,GAAG;AAAA,GAAK,CACtC;AAEJ;AAfwB;AAiBxB,kBAAkB,OAAkB;AAClC,SACE,oCAAC;AAAA,IAAK,OAAM;AAAA,IAAO,SAAO;AAAA,IAAC,MAAK;AAAA,IAAM,GAAG;AAAA,KACvC,oCAAC,KAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,oCAAC,UAAG,WAAS,GACb,oCAAC;AAAA,IAAU,OAAM;AAAA,KAAO,eAAa,CACvC,GACA,oCAAC,KAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,oCAAC;AAAA,IAAO,GAAG;AAAA,GAAG,GACd,oCAAC;AAAA,IAAO,IAAG;AAAA,KAAM,UAAQ,CAC3B,GACA,oCAAC,KAAK,YAAL,MACC,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAW,OAAO;AAAA,IAAK,QAAQ;AAAA,IAAK,YAAW;AAAA,IAAQ,KAAK,OAAO;AAAA,GAAK,CACrF,CACF;AAEJ;AAhBS;",
+  "sourcesContent": ["import React from 'react'\nimport { Button, Card, CardProps, H2, H3, Image, Paragraph, XStack } from 'tamagui'\n\n// @ts-ignore\nimport camera from '../../public/camera.jpg'\n\nexport default function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        w={250}\n        h={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.925 }}\n        pressStyle={{ scale: 0.875 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" bordered {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack f={1} />\n        <Button br=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image pos=\"absolute\" width={300} height={500} resizeMode=\"cover\" src={camera.src} />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAGA;AAEe,oBAAoB;AACjC,SACE,oCAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,oCAAC;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY,EAAE,OAAO,MAAM;AAAA,IAC3B,YAAY,EAAE,OAAO,MAAM;AAAA,GAC7B,GACA,oCAAC;AAAA,IAAS,MAAK;AAAA,IAAK,GAAG;AAAA,IAAK,GAAG;AAAA,GAAK,CACtC;AAEJ;AAfwB;AAiBxB,kBAAkB,OAAkB;AAClC,SACE,oCAAC;AAAA,IAAK,OAAM;AAAA,IAAO,SAAO;AAAA,IAAC,MAAK;AAAA,IAAK,UAAQ;AAAA,IAAE,GAAG;AAAA,KAChD,oCAAC,KAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,oCAAC,UAAG,WAAS,GACb,oCAAC;AAAA,IAAU,OAAM;AAAA,KAAO,eAAa,CACvC,GACA,oCAAC,KAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,oCAAC;AAAA,IAAO,GAAG;AAAA,GAAG,GACd,oCAAC;AAAA,IAAO,IAAG;AAAA,KAAM,UAAQ,CAC3B,GACA,oCAAC,KAAK,YAAL,MACC,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAW,OAAO;AAAA,IAAK,QAAQ;AAAA,IAAK,YAAW;AAAA,IAAQ,KAAK,OAAO;AAAA,GAAK,CACrF,CACF;AAEJ;AAhBS;",
   "names": []
 }

package/dist/esm/SeparatorDemo.js

@@ -1,5 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+//! debug
 import React from "react";
 import { Paragraph, Separator, XStack, YStack } from "tamagui";
 function SeparatorDemo() {

package/dist/esm/SeparatorDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SeparatorDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport default function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;AAAA;AACA;AAEe,yBAAyB;AACtC,SACE,oCAAC;AAAA,IAAO,GAAE;AAAA,IAAO,KAAK;AAAA,IAAK,IAAI;AAAA,KAC7B,oCAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,oCAAC,iBAAU,qCAAmC,GAC9C,oCAAC;AAAA,IAAU,IAAI;AAAA,GAAI,GACnB,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,KAChB,oCAAC,iBAAU,MAAI,GACf,oCAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,oCAAC,iBAAU,MAAI,GACf,oCAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,oCAAC,iBAAU,QAAM,CACnB,CACF;AAEJ;AAfwB;",
+  "sourcesContent": ["//! debug\nimport React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport default function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AACA;AAEe,yBAAyB;AACtC,SACE,oCAAC;AAAA,IAAO,GAAE;AAAA,IAAO,KAAK;AAAA,IAAK,IAAI;AAAA,KAC7B,oCAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,oCAAC,iBAAU,qCAAmC,GAC9C,oCAAC;AAAA,IAAU,IAAI;AAAA,GAAI,GACnB,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,KAChB,oCAAC,iBAAU,MAAI,GACf,oCAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,oCAAC,iBAAU,MAAI,GACf,oCAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,oCAAC,iBAAU,QAAM,CACnB,CACF;AAEJ;AAfwB;",
   "names": []
 }

package/dist/esm/SliderDemo.js

@@ -1,6 +1,5 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React from "react";
 import { Slider, XStack } from "tamagui";
 function SliderDemo() {
   return /* @__PURE__ */ React.createElement(XStack, {
@@ -22,7 +21,6 @@ function SimpleSlider({ children, ...props }) {
     step: 1,
     ...props
   }, /* @__PURE__ */ React.createElement(Slider.Track, null, /* @__PURE__ */ React.createElement(Slider.TrackActive, null)), /* @__PURE__ */ React.createElement(Slider.Thumb, {
-    hoverable: true,
     bordered: true,
     circular: true,
     elevate: true,

package/dist/esm/SliderDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { SizeTokens, Slider, SliderProps, Spacer, XStack, YStack } from 'tamagui'\n\nexport default function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb hoverable bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
-  "mappings": ";;AAAA;AACA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,QAAQ;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KACrC,oCAAC;AAAA,IAAa,QAAQ;AAAA,IAAK,aAAY;AAAA,GAAW,GAClD,oCAAC;AAAA,IAAa,OAAO;AAAA,GAAK,CAC5B;AAEJ;AAPwB;AASxB,sBAAsB,EAAE,aAAa,SAAsB;AACzD,SACE,oCAAC;AAAA,IAAO,cAAc,CAAC,EAAE;AAAA,IAAG,KAAK;AAAA,IAAK,MAAM;AAAA,IAAI,GAAG;AAAA,KACjD,oCAAC,OAAO,OAAP,MACC,oCAAC,OAAO,aAAP,IAAmB,CACtB,GACA,oCAAC,OAAO,OAAP;AAAA,IAAa,WAAS;AAAA,IAAC,UAAQ;AAAA,IAAC,UAAQ;AAAA,IAAC,SAAO;AAAA,IAAC,OAAO;AAAA,GAAG,GAC3D,QACH;AAEJ;AAVS;",
+  "sourcesContent": ["import { Slider, SliderProps, XStack } from 'tamagui'\n\nexport default function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
+  "mappings": ";;AAAA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,QAAQ;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KACrC,oCAAC;AAAA,IAAa,QAAQ;AAAA,IAAK,aAAY;AAAA,GAAW,GAClD,oCAAC;AAAA,IAAa,OAAO;AAAA,GAAK,CAC5B;AAEJ;AAPwB;AASxB,sBAAsB,EAAE,aAAa,SAAsB;AACzD,SACE,oCAAC;AAAA,IAAO,cAAc,CAAC,EAAE;AAAA,IAAG,KAAK;AAAA,IAAK,MAAM;AAAA,IAAI,GAAG;AAAA,KACjD,oCAAC,OAAO,OAAP,MACC,oCAAC,OAAO,aAAP,IAAmB,CACtB,GACA,oCAAC,OAAO,OAAP;AAAA,IAAa,UAAQ;AAAA,IAAC,UAAQ;AAAA,IAAC,SAAO;AAAA,IAAC,OAAO;AAAA,GAAG,GACjD,QACH;AAEJ;AAVS;",
   "names": []
 }

package/dist/jsx/AnimationsDemo.js

@@ -16,7 +16,7 @@ var AnimationsDemo_default = /* @__PURE__ */ __name((props) => {
     });
   }, "next");
   return <>
-    <Square animation={props.animation || "bouncy"} onPress={() => next()} size={110} bc="$pink10" br="$9" hoverStyle={{
+    <Square focusable={false} animation={props.animation || "bouncy"} onPress={() => next()} size={110} bc="$pink10" br="$9" hoverStyle={{
       scale: 1.1
     }} pressStyle={{
       scale: 0.9

package/dist/jsx/AnimationsPresenceDemo.js

@@ -24,8 +24,8 @@ var AnimationsPresenceDemo_default = /* @__PURE__ */ __name(() => {
   const exitVariant = direction === 1 ? "isLeft" : "isRight";
   return <XStack ov="hidden" bc="#000" pos="relative" h={300} w="100%" ai="center">
     <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}><YStackEnterable key={page} animation="bouncy" fullscreen x={0} o={1}><Image src={images[imageIndex]} width={700} height={300} /></YStackEnterable></AnimatePresence>
-    <Button accessibilityLabel="Carousel left" icon={ArrowLeft} circular size="$5" pos="absolute" l="$4" onPress={() => paginate(-1)} />
-    <Button accessibilityLabel="Carousel right" icon={ArrowRight} circular size="$5" pos="absolute" r="$4" onPress={() => paginate(1)} />
+    <Button accessibilityLabel="Carousel left" icon={ArrowLeft} size="$5" pos="absolute" l="$4" circular elevate onPress={() => paginate(-1)} />
+    <Button accessibilityLabel="Carousel right" icon={ArrowRight} size="$5" pos="absolute" r="$4" circular elevate onPress={() => paginate(1)} />
   </XStack>;
 }, "default");
 const wrap = /* @__PURE__ */ __name((min, max, v) => {

package/dist/jsx/CardDemo.js

@@ -4,13 +4,13 @@ import { Button, Card, H2, Image, Paragraph, XStack } from "tamagui";
 import camera from "../../public/camera.jpg";
 function CardDemo() {
   return <XStack $sm={{ flexDirection: "column" }} px="$4" space>
-    <DemoCard animation="bouncy" size="$4" w={250} h={300} scale={0.9} hoverStyle={{ scale: 0.95 }} pressStyle={{ scale: 0.85 }} />
+    <DemoCard animation="bouncy" size="$4" w={250} h={300} scale={0.9} hoverStyle={{ scale: 0.925 }} pressStyle={{ scale: 0.875 }} />
     <DemoCard size="$5" w={250} h={300} />
   </XStack>;
 }
 __name(CardDemo, "CardDemo");
 function DemoCard(props) {
-  return <Card theme="dark" elevate size="$4" {...props}>
+  return <Card theme="dark" elevate size="$4" bordered {...props}>
     <Card.Header padded>
       <H2>Sony A7IV</H2>
       <Paragraph theme="alt2">Now available</Paragraph>

package/dist/jsx/SeparatorDemo.js

@@ -1,5 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+//! debug
 import { Paragraph, Separator, XStack, YStack } from "tamagui";
 function SeparatorDemo() {
   return <YStack w="100%" maw={300} mx={15}>

package/dist/jsx/SliderDemo.js

@@ -11,7 +11,7 @@ __name(SliderDemo, "SliderDemo");
 function SimpleSlider({ children, ...props }) {
   return <Slider defaultValue={[50]} max={100} step={1} {...props}>
     <Slider.Track><Slider.TrackActive /></Slider.Track>
-    <Slider.Thumb hoverable bordered circular elevate index={0} />
+    <Slider.Thumb bordered circular elevate index={0} />
     {children}
   </Slider>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.0.1-beta.68",
+  "version": "1.0.1-beta.69",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -17,16 +17,16 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/config-base": "^1.0.1-beta.68",
-    "@tamagui/core": "^1.0.1-beta.68",
-    "tamagui": "^1.0.1-beta.68"
+    "@tamagui/config-base": "^1.0.1-beta.69",
+    "@tamagui/core": "^1.0.1-beta.69",
+    "tamagui": "^1.0.1-beta.69"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.68",
+    "@tamagui/build": "^1.0.1-beta.69",
     "react": "*",
     "react-dom": "*"
   },

package/src/AnimationsDemo.tsx

@@ -20,6 +20,7 @@ export default (props) => {
   return (
     <>
       <Square
+        focusable={false}
         animation={props.animation || 'bouncy'}
         onPress={() => next()}
         size={110}

package/src/AnimationsPresenceDemo.tsx

@@ -46,19 +46,21 @@ export default () => {
       <Button
         accessibilityLabel="Carousel left"
         icon={ArrowLeft}
-        circular
         size="$5"
         pos="absolute"
         l="$4"
+        circular
+        elevate
         onPress={() => paginate(-1)}
       />
       <Button
         accessibilityLabel="Carousel right"
         icon={ArrowRight}
-        circular
         size="$5"
         pos="absolute"
         r="$4"
+        circular
+        elevate
         onPress={() => paginate(1)}
       />
     </XStack>

package/src/CardDemo.tsx

@@ -13,8 +13,8 @@ export default function CardDemo() {
         w={250}
         h={300}
         scale={0.9}
-        hoverStyle={{ scale: 0.95 }}
-        pressStyle={{ scale: 0.85 }}
+        hoverStyle={{ scale: 0.925 }}
+        pressStyle={{ scale: 0.875 }}
       />
       <DemoCard size="$5" w={250} h={300} />
     </XStack>
@@ -23,7 +23,7 @@ export default function CardDemo() {
 
 function DemoCard(props: CardProps) {
   return (
-    <Card theme="dark" elevate size="$4" {...props}>
+    <Card theme="dark" elevate size="$4" bordered {...props}>
       <Card.Header padded>
         <H2>Sony A7IV</H2>
         <Paragraph theme="alt2">Now available</Paragraph>

package/src/SeparatorDemo.tsx

@@ -1,3 +1,4 @@
+//! debug
 import React from 'react'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 

package/src/SliderDemo.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { SizeTokens, Slider, SliderProps, Spacer, XStack, YStack } from 'tamagui'
+import { Slider, SliderProps, XStack } from 'tamagui'
 
 export default function SliderDemo() {
   return (
@@ -16,7 +15,7 @@ function SimpleSlider({ children, ...props }: SliderProps) {
       <Slider.Track>
         <Slider.TrackActive />
       </Slider.Track>
-      <Slider.Thumb hoverable bordered circular elevate index={0} />
+      <Slider.Thumb bordered circular elevate index={0} />
       {children}
     </Slider>
   )

package/types/AnimationsDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationsDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsDemo.tsx"],"names":[],"mappings":";;AAMA,wBA4CC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;IA+BrB,CAAA"}
+{"version":3,"file":"AnimationsDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsDemo.tsx"],"names":[],"mappings":";;AAMA,wBA6CC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;IA+BrB,CAAA"}

package/types/AnimationsPresenceDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationsPresenceDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsPresenceDemo.tsx"],"names":[],"mappings":";AAgBA,eAAO,MAAM,MAAM,OAAuC,CAAA;;AAS1D,wBAwCC"}
+{"version":3,"file":"AnimationsPresenceDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsPresenceDemo.tsx"],"names":[],"mappings":";AAgBA,eAAO,MAAM,MAAM,OAAuC,CAAA;;AAS1D,wBA0CC"}

package/types/SeparatorDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeparatorDemo.d.ts","sourceRoot":"","sources":["../src/SeparatorDemo.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,aAAa,gBAepC"}
+{"version":3,"file":"SeparatorDemo.d.ts","sourceRoot":"","sources":["../src/SeparatorDemo.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,aAAa,gBAepC"}

package/types/SliderDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderDemo.d.ts","sourceRoot":"","sources":["../src/SliderDemo.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,gBAOjC"}
+{"version":3,"file":"SliderDemo.d.ts","sourceRoot":"","sources":["../src/SliderDemo.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,UAAU,gBAOjC"}