@tamagui/demos 1.0.1-beta.100

package/dist/jsx/AnimationsEnterDemo.js

@@ -0,0 +1,24 @@
+import { useRef, useState } from "react";
+import { Button, Square, YStack } from "tamagui";
+import { LogoIcon } from "./TamaguiLogo";
+import { useIsIntersecting } from "./useOnIntersecting";
+function AnimationsEnterDemo() {
+  const ref = useRef(null);
+  const hasIntersected = useIsIntersecting(ref, { once: true });
+  const [key, setKey] = useState(0);
+  if (!hasIntersected) {
+    return <YStack ref={ref} />;
+  }
+  return <>
+    <Square key={key} enterStyle={{
+      scale: 1.5,
+      y: -10,
+      opacity: 0
+    }} animation="bouncy" elevation="$4" size={110} opacity={1} scale={1} y={0} bc="$pink10" br="$9"><LogoIcon downscale={0.75} /></Square>
+    <Button size="$3" mt="$4" onPress={() => setKey(Math.random())}>Re-mount</Button>
+  </>;
+}
+export {
+  AnimationsEnterDemo
+};
+//# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/jsx/AnimationsEnterDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsEnterDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo() {\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        bc=\"$pink10\"\n        br=\"$9\"\n      >\n        <LogoIcon downscale={0.75} />\n      </Square>\n\n      <Button size=\"$3\" mt=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
+  "mappings": "AACA;AACA;AAEA;AACA;AAEO,+BAA+B;AACpC,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,UAAU,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,CAAC,OAAO,KAAK,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IACE,CAAC,OACC,KAAK,KACL,YAAY;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,SAAS;AAAA,IACX,GACA,UAAU,SACV,UAAU,KACV,MAAM,KACN,SAAS,GACT,OAAO,GACP,GAAG,GACH,GAAG,UACH,GAAG,KAEH,CAAC,SAAS,WAAW,MAAM,EAC7B,EAjBC;AAAA,IAmBD,CAAC,OAAO,KAAK,KAAK,GAAG,KAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,QAEhE,EAFC;AAAA,EAGH;AAEJ;",
+  "names": []
+}

package/dist/jsx/AnimationsHoverDemo.js

@@ -0,0 +1,13 @@
+import { Square } from "tamagui";
+import { LogoIcon } from "./TamaguiLogo";
+function AnimationsHoverDemo() {
+  return <Square bc="$pink10" animation="bouncy" elevation="$4" size={110} br="$9" hoverStyle={{
+    scale: 1.2
+  }} pressStyle={{
+    scale: 0.9
+  }}><LogoIcon downscale={0.75} /></Square>;
+}
+export {
+  AnimationsHoverDemo
+};
+//# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/jsx/AnimationsHoverDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsHoverDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Square } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      br=\"$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": "AACA;AAEA;AAEO,+BAA+B;AACpC,SACE,CAAC,OACC,GAAG,UACH,UAAU,SACV,UAAU,KACV,MAAM,KACN,GAAG,KACH,YAAY;AAAA,IACV,OAAO;AAAA,EACT,GACA,YAAY;AAAA,IACV,OAAO;AAAA,EACT,GAEA,CAAC,SAAS,WAAW,MAAM,EAC7B,EAdC;AAgBL;",
+  "names": []
+}

package/dist/jsx/AnimationsPresenceDemo.js

@@ -0,0 +1,37 @@
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { ArrowLeft, ArrowRight } from "@tamagui/feather-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.src, photo2.src, photo3.src];
+const YStackEnterable = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -300, opacity: 0 } },
+    isRight: { true: { x: 300, opacity: 0 } }
+  }
+});
+function AnimationsPresenceDemo() {
+  const [[page, direction], setPage] = useState([0, 0]);
+  const imageIndex = wrap(0, images.length, page);
+  const paginate = (newDirection) => {
+    setPage([page + newDirection, newDirection]);
+  };
+  const enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft";
+  const exitVariant = direction === 1 ? "isLeft" : "isRight";
+  return <XStack 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={780} height={300} /></YStackEnterable></AnimatePresence>
+    <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>;
+}
+const wrap = (min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+};
+export {
+  AnimationsPresenceDemo,
+  images
+};
+//# sourceMappingURL=AnimationsPresenceDemo.js.map

package/dist/jsx/AnimationsPresenceDemo.js.map

@@ -0,0 +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 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 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={780} 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;AAEA;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;AAEM,kCAAkC;AACvC,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,IAAI,WAAW,GAAG,KAAK,EAAE,OAAO,GAAG;AAAA,IAC/D,CAAC,gBAAgB,cAAc,cAAc,aAAa,aACxD,CAAC,gBAAgB,KAAK,MAAM,UAAU,SAAS,WAAW,GAAG,GAAG,GAAG,GACjE,CAAC,MAAM,KAAK,OAAO,aAAa,OAAO,KAAK,QAAQ,KAAK,EAC3D,EAFC,gBAGH,EAJC;AAAA,IAMD,CAAC,OACC,mBAAmB,gBACnB,MAAM,WACN,KAAK,KACL,IAAI,WACJ,EAAE,KACF,SACA,QACA,SAAS,MAAM,SAAS,EAAE,GAC5B;AAAA,IACA,CAAC,OACC,mBAAmB,iBACnB,MAAM,YACN,KAAK,KACL,IAAI,WACJ,EAAE,KACF,SACA,QACA,SAAS,MAAM,SAAS,CAAC,GAC3B;AAAA,EACF,EA3BC;AA6BL;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
+  "names": []
+}

package/dist/jsx/AvatarDemo.js

@@ -0,0 +1,17 @@
+import { Avatar, XStack } from "tamagui";
+function AvatarDemo() {
+  return <XStack ai="center" space="$6">
+    <Avatar circular size="$10">
+      <Avatar.Image accessibilityLabel="Cam" src={"https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"} />
+      <Avatar.Fallback backgroundColor="$blue10" />
+    </Avatar>
+    <Avatar circular size="$8">
+      <Avatar.Image accessibilityLabel="Nate Wienert" src={"https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"} />
+      <Avatar.Fallback delayMs={600} backgroundColor="$blue10" />
+    </Avatar>
+  </XStack>;
+}
+export {
+  AvatarDemo
+};
+//# sourceMappingURL=AvatarDemo.js.map

package/dist/jsx/AvatarDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AvatarDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Avatar, XStack } from 'tamagui'\n\nexport function AvatarDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$6\">\n      <Avatar circular size=\"$10\">\n        <Avatar.Image\n          accessibilityLabel=\"Cam\"\n          src=\"https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80\"\n        />\n        <Avatar.Fallback backgroundColor=\"$blue10\" />\n      </Avatar>\n\n      <Avatar circular size=\"$8\">\n        <Avatar.Image\n          accessibilityLabel=\"Nate Wienert\"\n          src=\"https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80\"\n        />\n        <Avatar.Fallback delayMs={600} backgroundColor=\"$blue10\" />\n      </Avatar>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,SAAS,KAAK;AAAA,MACpB,CAAC,OAAO,MACN,mBAAmB,MACnB,KAAI,qFACN;AAAA,MACA,CAAC,OAAO,SAAS,gBAAgB,UAAU;AAAA,IAC7C,EANC;AAAA,IAQD,CAAC,OAAO,SAAS,KAAK;AAAA,MACpB,CAAC,OAAO,MACN,mBAAmB,eACnB,KAAI,wFACN;AAAA,MACA,CAAC,OAAO,SAAS,SAAS,KAAK,gBAAgB,UAAU;AAAA,IAC3D,EANC;AAAA,EAOH,EAhBC;AAkBL;",
+  "names": []
+}

package/dist/jsx/ButtonDemo.js

@@ -0,0 +1,24 @@
+import { Activity, Airplay } from "@tamagui/feather-icons";
+import { Button, Group, XStack, YStack } from "tamagui";
+function ButtonDemo(props) {
+  return <YStack p="$3" space {...props}>
+    <Button>Plain</Button>
+    <Button als="center" icon={Airplay} size="$6">Large</Button>
+    <Group>
+      <Button w="50%" size="$3" theme="alt2">Alt2</Button>
+      <Button w="50%" size="$3" theme="yellow">Yellow</Button>
+    </Group>
+    <XStack space="$2">
+      <Button themeInverse size="$3">Small Inverse</Button>
+      <Button iconAfter={Activity} size="$3">After</Button>
+    </XStack>
+    <Group>
+      <Button w="50%" size="$2" disabled>disabled</Button>
+      <Button w="50%" size="$2" chromeless>chromeless</Button>
+    </Group>
+  </YStack>;
+}
+export {
+  ButtonDemo
+};
+//# sourceMappingURL=ButtonDemo.js.map

package/dist/jsx/ButtonDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ButtonDemo.tsx"],
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Group, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n  return (\n    <YStack p=\"$3\" space {...props}>\n      <Button>Plain</Button>\n      <Button als=\"center\" icon={Airplay} size=\"$6\">\n        Large\n      </Button>\n      <Group>\n        <Button w=\"50%\" size=\"$3\" theme=\"alt2\">\n          Alt2\n        </Button>\n        <Button w=\"50%\" size=\"$3\" theme=\"yellow\">\n          Yellow\n        </Button>\n      </Group>\n      <XStack space=\"$2\">\n        <Button themeInverse size=\"$3\">\n          Small Inverse\n        </Button>\n        <Button iconAfter={Activity} size=\"$3\">\n          After\n        </Button>\n      </XStack>\n      <Group>\n        <Button w=\"50%\" size=\"$2\" disabled>\n          disabled\n        </Button>\n        <Button w=\"50%\" size=\"$2\" chromeless>\n          chromeless\n        </Button>\n      </Group>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,oBAAoB,OAAO;AAChC,SACE,CAAC,OAAO,EAAE,KAAK,UAAU;AAAA,IACvB,CAAC,OAAO,KAAK,EAAZ;AAAA,IACD,CAAC,OAAO,IAAI,SAAS,MAAM,SAAS,KAAK,KAAK,KAE9C,EAFC;AAAA,IAGD,CAAC;AAAA,MACC,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,MAAM,OAAO,IAEvC,EAFC;AAAA,MAGD,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,MAAM,SAAS,MAEzC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,OAAO,aAAa,KAAK,KAAK,aAE/B,EAFC;AAAA,MAGD,CAAC,OAAO,WAAW,UAAU,KAAK,KAAK,KAEvC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC;AAAA,MACC,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,SAAS,QAEnC,EAFC;AAAA,MAGD,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,WAAW,UAErC,EAFC;AAAA,IAGH,EAPC;AAAA,EAQH,EA7BC;AA+BL;",
+  "names": []
+}

package/dist/jsx/CardDemo.js

@@ -0,0 +1,25 @@
+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.925 }} pressStyle={{ scale: 0.875 }} />
+    <DemoCard size="$5" w={250} h={300} />
+  </XStack>;
+}
+function DemoCard(props) {
+  return <Card theme="dark" elevate size="$4" bordered {...props}>
+    <Card.Header padded>
+      <H2>Sony A7IV</H2>
+      <Paragraph theme="alt2">Now available</Paragraph>
+    </Card.Header>
+    <Card.Footer padded>
+      <XStack f={1} />
+      <Button br="$10">Purchase</Button>
+    </Card.Footer>
+    <Card.Background><Image pos="absolute" width={300} height={500} resizeMode="cover" src={camera.src} /></Card.Background>
+  </Card>;
+}
+export {
+  CardDemo
+};
+//# sourceMappingURL=CardDemo.js.map

package/dist/jsx/CardDemo.js.map

@@ -0,0 +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 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": "AACA;AAGA;AAEO,oBAAoB;AACzB,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,GAAG,KAAK;AAAA,IAChD,CAAC,SACC,UAAU,SACV,KAAK,KACL,GAAG,KACH,GAAG,KACH,OAAO,KACP,YAAY,EAAE,OAAO,MAAM,GAC3B,YAAY,EAAE,OAAO,MAAM,GAC7B;AAAA,IACA,CAAC,SAAS,KAAK,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,EACtC,EAXC;AAaL;AAEA,kBAAkB,OAAkB;AAClC,SACE,CAAC,KAAK,MAAM,OAAO,QAAQ,KAAK,KAAK,aAAa;AAAA,IAChD,CAAC,KAAK,OAAO;AAAA,MACX,CAAC,GAAG,SAAS,EAAZ;AAAA,MACD,CAAC,UAAU,MAAM,OAAO,aAAa,EAApC;AAAA,IACH,EAHC,KAAK;AAAA,IAIN,CAAC,KAAK,OAAO;AAAA,MACX,CAAC,OAAO,GAAG,GAAG;AAAA,MACd,CAAC,OAAO,GAAG,MAAM,QAAQ,EAAxB;AAAA,IACH,EAHC,KAAK;AAAA,IAIN,CAAC,KAAK,WACJ,CAAC,MAAM,IAAI,WAAW,OAAO,KAAK,QAAQ,KAAK,WAAW,QAAQ,KAAK,OAAO,KAAK,EACrF,EAFC,KAAK;AAAA,EAGR,EAZC;AAcL;",
+  "names": []
+}

package/dist/jsx/Demos.js

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Check, X } from "@tamagui/feather-icons";
+import {
+  Avatar,
+  Button,
+  Group,
+  ListItem,
+  Paragraph,
+  Separator,
+  Square,
+  TooltipSimple,
+  XStack,
+  YStack
+} from "tamagui";
+function Demos() {
+  return <YStack space />;
+}
+__name(Demos, "Demos");
+function ButtonDemo() {
+  return <Button alignSelf="center" size="$2" icon={Check} iconAfter={X}>Hello wrold</Button>;
+}
+__name(ButtonDemo, "ButtonDemo");
+function TooltipDemo() {
+  return <TooltipSimple label="test tooltip"><Button size="$6" icon={Check} iconAfter={X}>Hello wrold</Button></TooltipSimple>;
+}
+__name(TooltipDemo, "TooltipDemo");
+function GroupListItemDemo() {
+  return <Group width={250} size="$4" vertical separator={<Separator marginLeft="$4" />}>
+    <ListItem icon={Check} subTitle="test 123">Bye world</ListItem>
+    <ListItem iconAfter={Check}>Hello world</ListItem>
+    <ListItem iconAfter={Check}>Hello world</ListItem>
+    <ListItem iconAfter={Check}>Hello world</ListItem>
+  </Group>;
+}
+__name(GroupListItemDemo, "GroupListItemDemo");
+function AvatarDemo() {
+  return <Avatar circular size="$10">
+    <Avatar.Image src="http://placekitten.com/150/150" width={150} height={150} />
+    <Avatar.Fallback backgroundColor="red" />
+  </Avatar>;
+}
+__name(AvatarDemo, "AvatarDemo");
+function ShapesDemo() {
+  return <><Square size="$8" /></>;
+}
+__name(ShapesDemo, "ShapesDemo");
+function SeparatorDemo() {
+  return <YStack width="100%" maxWidth={300} marginHorizontal={15}>
+    <Paragraph fontWeight="800">Tamagui</Paragraph>
+    <Paragraph>An cross-platform component library.</Paragraph>
+    <Separator marginVertical={15} />
+    <XStack height={20} alignItems="center" space separator={<Separator debug="verbose" alignSelf="stretch" vertical />}>
+      <Paragraph>Blog</Paragraph>
+      <Paragraph>Docs</Paragraph>
+      <Paragraph>Source</Paragraph>
+    </XStack>
+  </YStack>;
+}
+__name(SeparatorDemo, "SeparatorDemo");
+export {
+  AvatarDemo,
+  ButtonDemo,
+  Demos,
+  GroupListItemDemo,
+  SeparatorDemo,
+  ShapesDemo,
+  TooltipDemo
+};

package/dist/jsx/DialogDemo.js

@@ -0,0 +1,35 @@
+import { X } from "@tamagui/feather-icons";
+import { Button, Dialog, Fieldset, Input, Label, Unspaced, YStack } from "tamagui";
+function DialogDemo() {
+  return <Dialog modal>
+    <Dialog.Trigger asChild><Button>Edit Profile</Button></Dialog.Trigger>
+    <Dialog.Portal>
+      <Dialog.Overlay key="overlay" animation="quick" o={0.5} enterStyle={{ o: 0 }} exitStyle={{ o: 0 }} />
+      <Dialog.Content bordered elevate key="content" space animation={[
+        "quick",
+        {
+          opacity: {
+            overshootClamping: true
+          }
+        }
+      ]} enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }} exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }} x={0} scale={1} opacity={1} y={0}>
+        <Dialog.Title>Edit profile</Dialog.Title>
+        <Dialog.Description>Make changes to your profile here. Click save when you're done.</Dialog.Description>
+        <Fieldset space="$4" horizontal>
+          <Label w={160} justifyContent="flex-end" htmlFor="name">Name</Label>
+          <Input f={1} id="name" defaultValue="Nate Wienert" />
+        </Fieldset>
+        <Fieldset space="$4" horizontal>
+          <Label w={160} justifyContent="flex-end" htmlFor="username">Username</Label>
+          <Input f={1} id="username" defaultValue="@natebirdman" />
+        </Fieldset>
+        <YStack ai="flex-end" mt="$2"><Dialog.Close asChild><Button theme="alt1" aria-label="Close">Save changes</Button></Dialog.Close></YStack>
+        <Unspaced><Dialog.Close asChild><Button pos="absolute" t="$4" r="$4" circular icon={X} /></Dialog.Close></Unspaced>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog>;
+}
+export {
+  DialogDemo
+};
+//# sourceMappingURL=DialogDemo.js.map

package/dist/jsx/DialogDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DialogDemo.tsx"],
+  "sourcesContent": ["import { X } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Dialog, Fieldset, Input, Label, Unspaced, YStack } from 'tamagui'\n\nexport function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          o={0.5}\n          enterStyle={{ o: 0 }}\n          exitStyle={{ o: 0 }}\n        />\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          space\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <Dialog.Title>Edit profile</Dialog.Title>\n          <Dialog.Description>\n            Make changes to your profile here. Click save when you're done.\n          </Dialog.Description>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n          </Fieldset>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              Username\n            </Label>\n            <Input f={1} id=\"username\" defaultValue=\"@natebirdman\" />\n          </Fieldset>\n\n          <YStack ai=\"flex-end\" mt=\"$2\">\n            <Dialog.Close asChild>\n              <Button theme=\"alt1\" aria-label=\"Close\">\n                Save changes\n              </Button>\n            </Dialog.Close>\n          </YStack>\n\n          <Unspaced>\n            <Dialog.Close asChild>\n              <Button pos=\"absolute\" t=\"$4\" r=\"$4\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,QACN,IAAI,UACJ,UAAU,QACV,GAAG,KACH,YAAY,EAAE,GAAG,EAAE,GACnB,WAAW,EAAE,GAAG,EAAE,GACpB;AAAA,MACA,CAAC,OAAO,QACN,SACA,QACA,IAAI,UACJ,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF,GACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI,GACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK,GAClD,GAAG,GACH,OAAO,GACP,SAAS,GACT,GAAG;AAAA,QAEH,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,OAAO,IAExD,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACrD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,WAAW,QAE5D,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,WAAW,aAAa,eAAe;AAAA,QACzD,EALC;AAAA,QAOD,CAAC,OAAO,GAAG,WAAW,GAAG,KACvB,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,SAAS,MAAM,GAAG,EACzD,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAlDC,OAAO;AAAA,IAmDV,EA3DC,OAAO;AAAA,EA4DV,EAhEC;AAkEL;",
+  "names": []
+}

package/dist/jsx/DrawerDemo.js

@@ -0,0 +1,18 @@
+import { Drawer } from "@tamagui/drawer";
+import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
+import { useState } from "react";
+import { Button, Paragraph, YStack } from "tamagui";
+function DrawerDemo() {
+  const [show, setShow] = useState(false);
+  return <YStack minWidth={230} w="100%" h="100%" ai="center" jc="center" position="relative"><Drawer.Provider>
+    <Button size="$6" icon={show ? ChevronDown : ChevronUp} circular onPress={() => setShow((x) => !x)} elevation="$2" />
+    <Drawer open={show} onChangeOpen={setShow}><Drawer.Frame h={200} ai="center" jc="center" p="$6" space>
+      <Paragraph selectable={false}>Hello.</Paragraph>
+      <Button size="$6" icon={show ? ChevronDown : ChevronUp} circular onPress={() => setShow((x) => !x)} elevation="$2" />
+    </Drawer.Frame></Drawer>
+  </Drawer.Provider></YStack>;
+}
+export {
+  DrawerDemo
+};
+//# sourceMappingURL=DrawerDemo.js.map

package/dist/jsx/DrawerDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DrawerDemo.tsx"],
+  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onChangeOpen={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AAEA;AACA;AAEO,sBAAsB;AAC3B,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AACtC,SACE,CAAC,OAAO,UAAU,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,SAAS,WACxE,CAAC,OAAO;AAAA,IACN,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACA,CAAC,OAAO,MAAM,MAAM,cAAc,SAChC,CAAC,OAAO,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK;AAAA,MACnD,CAAC,UAAU,YAAY,OAAO,MAAM,EAAnC;AAAA,MACD,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACF,EATC,OAAO,MAUV,EAXC;AAAA,EAYH,EApBC,OAAO,SAqBV,EAtBC;AAwBL;",
+  "names": []
+}

package/dist/jsx/DrawerSimpleDemo.js

@@ -0,0 +1,20 @@
+import { Drawer } from "@tamagui/drawer-simple";
+import { ChevronDown } from "@tamagui/feather-icons";
+import { useState } from "react";
+import { Button } from "tamagui";
+const DrawerSimpleDemo = () => {
+  const [position, setPosition] = useState(0);
+  return <Drawer snapPoints={[80, 10]} position={position} onChangePosition={setPosition}>
+    <Drawer.Backdrop />
+    <Drawer.Frame ai="center" jc="center">
+      <Drawer.Handle />
+      <Button size="$6" circular icon={ChevronDown} onPress={() => {
+        setPosition(1);
+      }} />
+    </Drawer.Frame>
+  </Drawer>;
+};
+export {
+  DrawerSimpleDemo
+};
+//# sourceMappingURL=DrawerSimpleDemo.js.map

package/dist/jsx/DrawerSimpleDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DrawerSimpleDemo.tsx"],
+  "sourcesContent": ["import { Drawer } from '@tamagui/drawer-simple'\nimport { ChevronDown } from '@tamagui/feather-icons'\nimport React, { useState } from 'react'\nimport { Button, H1 } from 'tamagui'\n\nexport const DrawerSimpleDemo = () => {\n  const [position, setPosition] = useState(0)\n\n  return (\n    <Drawer snapPoints={[80, 10]} position={position} onChangePosition={setPosition}>\n      <Drawer.Backdrop />\n      <Drawer.Frame ai=\"center\" jc=\"center\">\n        <Drawer.Handle />\n        <Button\n          size=\"$6\"\n          circular\n          icon={ChevronDown}\n          onPress={() => {\n            setPosition(1)\n          }}\n        />\n      </Drawer.Frame>\n    </Drawer>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,UAAU,eAAe,SAAS,CAAC;AAE1C,SACE,CAAC,OAAO,YAAY,CAAC,IAAI,EAAE,GAAG,UAAU,UAAU,kBAAkB;AAAA,IAClE,CAAC,OAAO,SAAS;AAAA,IACjB,CAAC,OAAO,MAAM,GAAG,SAAS,GAAG;AAAA,MAC3B,CAAC,OAAO,OAAO;AAAA,MACf,CAAC,OACC,KAAK,KACL,SACA,MAAM,aACN,SAAS,MAAM;AACb,oBAAY,CAAC;AAAA,MACf,GACF;AAAA,IACF,EAVC,OAAO;AAAA,EAWV,EAbC;AAeL;",
+  "names": []
+}

package/dist/jsx/FeatherIconsDemo.js

@@ -0,0 +1,32 @@
+import * as FeatherIcons from "@tamagui/feather-icons";
+import { useMemo, useState } from "react";
+import { ScrollView } from "react-native";
+import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
+const featherIcons = Object.keys(FeatherIcons).map((name) => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: FeatherIcons[name]
+}));
+function FeatherIconsDemo() {
+  const [searchRaw, setSearch] = useState("");
+  const search = useDebounceValue(searchRaw, 400);
+  const size = 100;
+  const iconsMemo = useMemo(() => {
+    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
+    return icons.map(({ Icon, name }) => {
+      return <YStack h={size} ai="center" jc="center" key={name}>
+        <Icon size={size * 0.25} />
+        <Spacer />
+        <Paragraph size="$2" o={0.5}>{name}</Paragraph>
+      </YStack>;
+    });
+  }, [search]);
+  return <YStack als="stretch" p="$4" pb="$0" space>
+    <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
+    <YStack h={420}><ScrollView><Grid itemMinWidth={size}>{iconsMemo}</Grid></ScrollView></YStack>
+  </YStack>;
+}
+export {
+  FeatherIconsDemo
+};
+//# sourceMappingURL=FeatherIconsDemo.js.map

package/dist/jsx/FeatherIconsDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/FeatherIconsDemo.tsx"],
+  "sourcesContent": ["import * as FeatherIcons from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: FeatherIcons[name],\n}))\n\nexport function FeatherIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.map(({ Icon, name }) => {\n      return (\n        <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AACA;AACA;AAEA,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,SAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa;AACrB,EAAE;AAEK,4BAA4B;AACjC,QAAM,CAAC,WAAW,aAAa,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,WAAW;AACnC,aACE,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK;AAAA,QAC5C,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,QACzB,CAAC,OAAO;AAAA,QACR,CAAC,UAAU,KAAK,KAAK,GAAG,MACrB,KACH,EAFC;AAAA,MAGH,EANC;AAAA,IAQL,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,IAAI,UAAU,EAAE,KAAK,GAAG,KAAK;AAAA,IACnC,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,GAAG,KACT,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
+  "names": []
+}

package/dist/jsx/FormsDemo.js

@@ -0,0 +1,19 @@
+import { Button, Input, TextArea, XStack, YStack } from "tamagui";
+function FormsDemo() {
+  return <YStack w={200} mih={250} overflow="hidden" space="$2" m="$3" p="$2">
+    <FormDemo size="$2" />
+    <FormDemo size="$3" />
+    <FormDemo size="$4" />
+    <TextArea numberOfLines={4} />
+  </YStack>;
+}
+function FormDemo(props) {
+  return <XStack ai="center" space="$2">
+    <Input f={1} w="0%" size={props.size} placeholder={`Size ${props.size}...`} />
+    <Button size={props.size}>Go</Button>
+  </XStack>;
+}
+export {
+  FormsDemo
+};
+//# sourceMappingURL=FormsDemo.js.map

package/dist/jsx/FormsDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/FormsDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo() {\n  return (\n    <YStack w={200} mih={250} overflow=\"hidden\" space=\"$2\" m=\"$3\" p=\"$2\">\n      <FormDemo size=\"$2\" />\n      <FormDemo size=\"$3\" />\n      <FormDemo size=\"$4\" />\n      <TextArea numberOfLines={4} />\n    </YStack>\n  )\n}\n\nfunction FormDemo(props: { size: SizeTokens }) {\n  return (\n    <XStack ai=\"center\" space=\"$2\">\n      <Input f={1} w=\"0%\" size={props.size} placeholder={`Size ${props.size}...`} />\n      <Button size={props.size}>Go</Button>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,qBAAqB;AAC1B,SACE,CAAC,OAAO,GAAG,KAAK,KAAK,KAAK,SAAS,SAAS,MAAM,KAAK,EAAE,KAAK,EAAE;AAAA,IAC9D,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,eAAe,GAAG;AAAA,EAC9B,EALC;AAOL;AAEA,kBAAkB,OAA6B;AAC7C,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,MAAM,GAAG,GAAG,EAAE,KAAK,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IAC5E,CAAC,OAAO,MAAM,MAAM,MAAM,EAAE,EAA3B;AAAA,EACH,EAHC;AAKL;",
+  "names": []
+}

package/dist/jsx/GroupDemo.js

@@ -0,0 +1,24 @@
+import { Activity, Airplay } from "@tamagui/feather-icons";
+import { Button, Group, ListItem, Separator, YStack } from "tamagui";
+function GroupDemo() {
+  return <YStack p="$3" space="$2" ai="center">
+    <Group size="$3">
+      <Button>First</Button>
+      <Button>Second</Button>
+      <Button>Third</Button>
+    </Group>
+    <Group size="$5">
+      <Button icon={Activity}>First</Button>
+      <Button icon={Airplay}>Second</Button>
+    </Group>
+    <Group size="$3" vertical separator={<Separator />}>
+      <ListItem>First</ListItem>
+      <ListItem>Second</ListItem>
+      <ListItem>Third</ListItem>
+    </Group>
+  </YStack>;
+}
+export {
+  GroupDemo
+};
+//# sourceMappingURL=GroupDemo.js.map

package/dist/jsx/GroupDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/GroupDemo.tsx"],
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Group, ListItem, Separator, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n      <Group size=\"$3\">\n        <Button>First</Button>\n        <Button>Second</Button>\n        <Button>Third</Button>\n      </Group>\n\n      <Group size=\"$5\">\n        <Button icon={Activity}>First</Button>\n        <Button icon={Airplay}>Second</Button>\n      </Group>\n\n      <Group size=\"$3\" vertical separator={<Separator />}>\n        <ListItem>First</ListItem>\n        <ListItem>Second</ListItem>\n        <ListItem>Third</ListItem>\n      </Group>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,qBAAqB;AAC1B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG;AAAA,IAC3B,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,OAAO,KAAK,EAAZ;AAAA,MACD,CAAC,OAAO,MAAM,EAAb;AAAA,MACD,CAAC,OAAO,KAAK,EAAZ;AAAA,IACH,EAJC;AAAA,IAMD,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,OAAO,MAAM,UAAU,KAAK,EAA5B;AAAA,MACD,CAAC,OAAO,MAAM,SAAS,MAAM,EAA5B;AAAA,IACH,EAHC;AAAA,IAKD,CAAC,MAAM,KAAK,KAAK,SAAS,WAAW,CAAC,UAAU;AAAA,MAC9C,CAAC,SAAS,KAAK,EAAd;AAAA,MACD,CAAC,SAAS,MAAM,EAAf;AAAA,MACD,CAAC,SAAS,KAAK,EAAd;AAAA,IACH,EAJC;AAAA,EAKH,EAjBC;AAmBL;",
+  "names": []
+}

package/dist/jsx/HeadingsDemo.js

@@ -0,0 +1,15 @@
+import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
+function HeadingsDemo() {
+  return <YStack als="center">
+    <H1>Heading 1</H1>
+    <H2>Heading 2</H2>
+    <H3>Heading 3</H3>
+    <H4>Heading 4</H4>
+    <H5>Heading 5</H5>
+    <H6>Heading 6</H6>
+  </YStack>;
+}
+export {
+  HeadingsDemo
+};
+//# sourceMappingURL=HeadingsDemo.js.map

package/dist/jsx/HeadingsDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/HeadingsDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport function HeadingsDemo() {\n  return (\n    <YStack als=\"center\">\n      <H1>Heading 1</H1>\n      <H2>Heading 2</H2>\n      <H3>Heading 3</H3>\n      <H4>Heading 4</H4>\n      <H5>Heading 5</H5>\n      <H6>Heading 6</H6>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,wBAAwB;AAC7B,SACE,CAAC,OAAO,IAAI;AAAA,IACV,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,EACH,EAPC;AASL;",
+  "names": []
+}

package/dist/jsx/ImageDemo.js

@@ -0,0 +1,8 @@
+import { Image } from "tamagui";
+function ImageDemo() {
+  return <Image src="http://placekitten.com/200/300" width={200} height={300} />;
+}
+export {
+  ImageDemo
+};
+//# sourceMappingURL=ImageDemo.js.map

package/dist/jsx/ImageDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ImageDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Image } from 'tamagui'\n\nexport function ImageDemo() {\n  return <Image src=\"http://placekitten.com/200/300\" width={200} height={300} />\n}\n"],
+  "mappings": "AACA;AAEO,qBAAqB;AAC1B,SAAO,CAAC,MAAM,IAAI,iCAAiC,OAAO,KAAK,QAAQ,KAAK;AAC9E;",
+  "names": []
+}