@tamagui/demos 1.0.1-beta.100

package/dist/jsx/TextDemo.js

@@ -0,0 +1,17 @@
+import { Paragraph, SizableText, Text, XStack, YStack } from "tamagui";
+function TextDemo() {
+  return <YStack space="$2" ai="center">
+    <Text>Text</Text>
+    <SizableText size="$3">SizableText</SizableText>
+    <XStack space>
+      <SizableText theme="alt1" size="$3">alt1</SizableText>
+      <SizableText theme="alt2" size="$3">alt2</SizableText>
+      <SizableText theme="alt3" size="$3">alt3</SizableText>
+    </XStack>
+    <Paragraph size="$2" fow="800">Paragraph</Paragraph>
+  </YStack>;
+}
+export {
+  TextDemo
+};
+//# sourceMappingURL=TextDemo.js.map

package/dist/jsx/TextDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TextDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" ai=\"center\">\n      <Text>Text</Text>\n      <SizableText size=\"$3\">SizableText</SizableText>\n      <XStack space>\n        <SizableText theme=\"alt1\" size=\"$3\">\n          alt1\n        </SizableText>\n        <SizableText theme=\"alt2\" size=\"$3\">\n          alt2\n        </SizableText>\n        <SizableText theme=\"alt3\" size=\"$3\">\n          alt3\n        </SizableText>\n      </XStack>\n      <Paragraph size=\"$2\" fow=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,oBAAoB;AACzB,SACE,CAAC,OAAO,MAAM,KAAK,GAAG;AAAA,IACpB,CAAC,KAAK,IAAI,EAAT;AAAA,IACD,CAAC,YAAY,KAAK,KAAK,WAAW,EAAjC;AAAA,IACD,CAAC,OAAO;AAAA,MACN,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,IAGH,EAVC;AAAA,IAWD,CAAC,UAAU,KAAK,KAAK,IAAI,MAAM,SAE/B,EAFC;AAAA,EAGH,EAjBC;AAmBL;",
+  "names": []
+}

package/dist/jsx/ThemeInverseDemo.js

@@ -0,0 +1,20 @@
+import { ThemeInverse } from "@tamagui/core";
+import { Button, Theme, XStack, YStack } from "tamagui";
+function ThemeInverseDemo() {
+  return <XStack space>
+    <Buttons />
+    <ThemeInverse><Buttons /></ThemeInverse>
+  </XStack>;
+}
+function Buttons() {
+  return <YStack bc="$background" p="$3" br="$3" space>
+    <Button>Dark</Button>
+    <Button themeInverse>Inversed</Button>
+    <Button theme="alt1">Alt1 Dark</Button>
+    <Theme name="yellow"><Button>Yellow dark</Button></Theme>
+  </YStack>;
+}
+export {
+  ThemeInverseDemo
+};
+//# sourceMappingURL=ThemeInverseDemo.js.map

package/dist/jsx/ThemeInverseDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ThemeInverseDemo.tsx"],
+  "sourcesContent": ["import { ThemeInverse } from '@tamagui/core'\nimport React from 'react'\nimport { Button, Theme, XStack, YStack } from 'tamagui'\n\nexport function ThemeInverseDemo() {\n  return (\n    <XStack space>\n      <Buttons />\n      <ThemeInverse>\n        <Buttons />\n      </ThemeInverse>\n    </XStack>\n  )\n}\n\nfunction Buttons() {\n  return (\n    <YStack bc=\"$background\" p=\"$3\" br=\"$3\" space>\n      <Button>Dark</Button>\n      <Button themeInverse>Inversed</Button>\n      <Button theme=\"alt1\">Alt1 Dark</Button>\n      <Theme name=\"yellow\">\n        <Button>Yellow dark</Button>\n      </Theme>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,4BAA4B;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,aACC,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,mBAAmB;AACjB,SACE,CAAC,OAAO,GAAG,cAAc,EAAE,KAAK,GAAG,KAAK;AAAA,IACtC,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
+  "names": []
+}

package/dist/jsx/TooltipDemo.js

@@ -0,0 +1,35 @@
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle } from "@tamagui/feather-icons";
+import { Button, Paragraph, Tooltip, TooltipGroup, XStack, YStack } from "tamagui";
+function TooltipDemo() {
+  return <TooltipGroup delay={{ open: 3e3, close: 100 }}><YStack space="$2" als="center">
+    <XStack space="$2">
+      <Demo groupId="0" placement="top-end" Icon={Circle} />
+      <Demo groupId="1" placement="top" Icon={ChevronUp} />
+      <Demo groupId="2" placement="top-start" Icon={Circle} />
+    </XStack>
+    <XStack space="$2">
+      <Demo groupId="3" placement="left" Icon={ChevronLeft} />
+      <YStack f={1} />
+      <Demo groupId="4" placement="right" Icon={ChevronRight} />
+    </XStack>
+    <XStack space="$2">
+      <Demo groupId="5" placement="bottom-end" Icon={Circle} />
+      <Demo groupId="6" placement="bottom" Icon={ChevronDown} />
+      <Demo groupId="7" placement="bottom-start" Icon={Circle} />
+    </XStack>
+  </YStack></TooltipGroup>;
+}
+function Demo({ Icon, ...props }) {
+  return <Tooltip {...props}>
+    <Tooltip.Trigger><Button icon={Icon} circular /></Tooltip.Trigger>
+    <Tooltip.Content enterStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }} exitStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }} scale={1} x={0} y={0} o={1} animation="bouncy">
+      <Tooltip.Arrow />
+      <Paragraph size="$2" lineHeight="$1">Hello world</Paragraph>
+    </Tooltip.Content>
+  </Tooltip>;
+}
+export {
+  Demo,
+  TooltipDemo
+};
+//# sourceMappingURL=TooltipDemo.js.map

package/dist/jsx/TooltipDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TooltipDemo.tsx"],
+  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Paragraph, Tooltip, TooltipGroup, TooltipProps, XStack, YStack } from 'tamagui'\n\nexport function TooltipDemo() {\n  return (\n    <TooltipGroup delay={{ open: 3000, close: 100 }}>\n      <YStack space=\"$2\" als=\"center\">\n        <XStack space=\"$2\">\n          <Demo groupId=\"0\" placement=\"top-end\" Icon={Circle} />\n          <Demo groupId=\"1\" placement=\"top\" Icon={ChevronUp} />\n          <Demo groupId=\"2\" placement=\"top-start\" Icon={Circle} />\n        </XStack>\n        <XStack space=\"$2\">\n          <Demo groupId=\"3\" placement=\"left\" Icon={ChevronLeft} />\n          <YStack f={1} />\n          <Demo groupId=\"4\" placement=\"right\" Icon={ChevronRight} />\n        </XStack>\n        <XStack space=\"$2\">\n          <Demo groupId=\"5\" placement=\"bottom-end\" Icon={Circle} />\n          <Demo groupId=\"6\" placement=\"bottom\" Icon={ChevronDown} />\n          <Demo groupId=\"7\" placement=\"bottom-start\" Icon={Circle} />\n        </XStack>\n      </YStack>\n    </TooltipGroup>\n  )\n}\n\nexport function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {\n  return (\n    <Tooltip {...props}>\n      <Tooltip.Trigger>\n        <Button icon={Icon} circular />\n      </Tooltip.Trigger>\n      <Tooltip.Content\n        enterStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}\n        exitStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}\n        scale={1}\n        x={0}\n        y={0}\n        o={1}\n        animation=\"bouncy\"\n      >\n        <Tooltip.Arrow />\n        <Paragraph size=\"$2\" lineHeight=\"$1\">\n          Hello world\n        </Paragraph>\n      </Tooltip.Content>\n    </Tooltip>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,uBAAuB;AAC5B,SACE,CAAC,aAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,CAAC,OAAO,MAAM,KAAK,IAAI;AAAA,IACrB,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,UAAU,MAAM,QAAQ;AAAA,MACpD,CAAC,KAAK,QAAQ,IAAI,UAAU,MAAM,MAAM,WAAW;AAAA,MACnD,CAAC,KAAK,QAAQ,IAAI,UAAU,YAAY,MAAM,QAAQ;AAAA,IACxD,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,OAAO,MAAM,aAAa;AAAA,MACtD,CAAC,OAAO,GAAG,GAAG;AAAA,MACd,CAAC,KAAK,QAAQ,IAAI,UAAU,QAAQ,MAAM,cAAc;AAAA,IAC1D,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,aAAa,MAAM,QAAQ;AAAA,MACvD,CAAC,KAAK,QAAQ,IAAI,UAAU,SAAS,MAAM,aAAa;AAAA,MACxD,CAAC,KAAK,QAAQ,IAAI,UAAU,eAAe,MAAM,QAAQ;AAAA,IAC3D,EAJC;AAAA,EAKH,EAhBC,OAiBH,EAlBC;AAoBL;AAEO,cAAc,EAAE,SAAS,SAAwC;AACtE,SACE,CAAC,YAAY;AAAA,IACX,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,SAAS,EAC/B,EAFC,QAAQ;AAAA,IAGT,CAAC,QAAQ,QACP,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI,GAC5C,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI,GAC3C,OAAO,GACP,GAAG,GACH,GAAG,GACH,GAAG,GACH,UAAU;AAAA,MAEV,CAAC,QAAQ,MAAM;AAAA,MACf,CAAC,UAAU,KAAK,KAAK,WAAW,KAAK,WAErC,EAFC;AAAA,IAGH,EAbC,QAAQ;AAAA,EAcX,EAlBC;AAoBL;",
+  "names": []
+}

package/dist/jsx/conf.js

@@ -0,0 +1 @@
+//# sourceMappingURL=conf.js.map

package/dist/jsx/conf.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/jsx/index.js

@@ -0,0 +1,63 @@
+import { AnimationsDemo } from "./AnimationsDemo";
+import { AnimationsEnterDemo } from "./AnimationsEnterDemo";
+import { AnimationsHoverDemo } from "./AnimationsHoverDemo";
+import { AnimationsPresenceDemo } from "./AnimationsPresenceDemo";
+import { AvatarDemo } from "./AvatarDemo";
+import { ButtonDemo } from "./ButtonDemo";
+import { CardDemo } from "./CardDemo";
+import { DialogDemo } from "./DialogDemo";
+import { SheetDemo } from "./SheetDemo";
+import { FeatherIconsDemo } from "./FeatherIconsDemo";
+import { FormsDemo } from "./FormsDemo";
+import { GroupDemo } from "./GroupDemo";
+import { HeadingsDemo } from "./HeadingsDemo";
+import { ImageDemo } from "./ImageDemo";
+import { LabelDemo } from "./LabelDemo";
+import { LinearGradientDemo } from "./LinearGradientDemo";
+import { ListItemDemo } from "./ListItemDemo";
+import { PopoverDemo } from "./PopoverDemo";
+import { ProgressDemo } from "./ProgressDemo";
+import { SelectDemo } from "./SelectDemo";
+import { SeparatorDemo } from "./SeparatorDemo";
+import { ShapesDemo } from "./ShapesDemo";
+import { SliderDemo } from "./SliderDemo";
+import { SpinnerDemo } from "./SpinnerDemo";
+import { StacksDemo } from "./StacksDemo";
+import { SwitchDemo } from "./SwitchDemo";
+import { TextDemo } from "./TextDemo";
+import { ThemeInverseDemo } from "./ThemeInverseDemo";
+import { TooltipDemo } from "./TooltipDemo";
+export * from "./useOnIntersecting";
+export * from "./TamaguiLogo";
+export {
+  AnimationsDemo,
+  AnimationsEnterDemo,
+  AnimationsHoverDemo,
+  AnimationsPresenceDemo,
+  AvatarDemo,
+  ButtonDemo,
+  CardDemo,
+  DialogDemo,
+  FeatherIconsDemo,
+  FormsDemo,
+  GroupDemo,
+  HeadingsDemo,
+  ImageDemo,
+  LabelDemo,
+  LinearGradientDemo,
+  ListItemDemo,
+  PopoverDemo,
+  ProgressDemo,
+  SelectDemo,
+  SeparatorDemo,
+  ShapesDemo,
+  SheetDemo,
+  SliderDemo,
+  SpinnerDemo,
+  StacksDemo,
+  SwitchDemo,
+  TextDemo,
+  ThemeInverseDemo,
+  TooltipDemo
+};
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["// export { DrawerDemo } from './DrawerDemo'\n// export { MenuDemo } from './MenuDemo'\n// gorhom bottom-sheet giving kitchen-sink problems\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { FeatherIconsDemo } from './FeatherIconsDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport * from './useOnIntersecting'\nexport * from './TamaguiLogo'\n"],
+  "mappings": "AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "names": []
+}

package/dist/jsx/useOnIntersecting.js

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from "react";
+import { debounce } from "tamagui";
+const useIsIntersecting = (ref, { once } = {}) => {
+  const [val, setVal] = useState(false);
+  useOnIntersecting(ref, ({ isIntersecting }) => {
+    if (once && isIntersecting || !once) {
+      setVal(isIntersecting);
+    }
+  });
+  return val;
+};
+const useOnIntersecting = (ref, incomingCb, options = {
+  threshold: 1
+}, mountArgs = []) => {
+  const cb = useRef();
+  useEffect(() => {
+    cb.current = incomingCb;
+  }, [incomingCb]);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node)
+      return;
+    let dispose = null;
+    let lastEntry;
+    const io = new IntersectionObserver(([entry]) => {
+      var _a;
+      if (entry.isIntersecting) {
+        lastEntry = new Proxy(entry, {
+          get(target, key) {
+            if (key === "dispose") {
+              return dispose;
+            }
+            return Reflect.get(target, key);
+          }
+        });
+        dispose == null ? void 0 : dispose();
+        dispose = ((_a = cb.current) == null ? void 0 : _a.call(cb, lastEntry)) || null;
+      } else {
+        dispose == null ? void 0 : dispose();
+      }
+    }, options);
+    const ro = new ResizeObserver(debounce(() => {
+      var _a;
+      if (!lastEntry) {
+        return;
+      }
+      dispose = ((_a = cb.current) == null ? void 0 : _a.call(cb, lastEntry, true)) || null;
+    }, 150));
+    ro.observe(document.body);
+    io.observe(node);
+    return () => {
+      dispose == null ? void 0 : dispose();
+      ro.disconnect();
+      io.disconnect();
+    };
+  }, [ref.current, ...mountArgs]);
+};
+export {
+  useIsIntersecting,
+  useOnIntersecting
+};
+//# sourceMappingURL=useOnIntersecting.js.map

package/dist/jsx/useOnIntersecting.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useOnIntersecting.tsx"],
+  "sourcesContent": ["import { MutableRefObject, useEffect, useRef, useState } from 'react'\nimport { debounce } from 'tamagui'\n\ntype DisposeFn = () => void\ntype IntersectFn = (\n  props: IntersectionObserverEntry & { dispose?: DisposeFn | null },\n  didResize?: boolean\n) => void | DisposeFn\n\nexport const useIsIntersecting = (\n  ref: MutableRefObject<HTMLElement | null>,\n  { once }: { once?: boolean } = {}\n) => {\n  const [val, setVal] = useState(false)\n  useOnIntersecting(ref, ({ isIntersecting }) => {\n    if ((once && isIntersecting) || !once) {\n      setVal(isIntersecting)\n    }\n  })\n  return val\n}\n\nexport const useOnIntersecting = (\n  ref: MutableRefObject<HTMLElement | null>,\n  incomingCb: IntersectFn,\n  options: IntersectionObserverInit = {\n    threshold: 1,\n  },\n  mountArgs: any[] = []\n) => {\n  const cb = useRef<IntersectFn>()\n\n  useEffect(() => {\n    cb.current = incomingCb\n  }, [incomingCb])\n\n  // arrow keys\n  useEffect(() => {\n    const node = ref.current\n    if (!node) return\n    // only when carousel is fully in viewport\n    let dispose: DisposeFn | null = null\n    let lastEntry: any\n\n    const io = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        lastEntry = new Proxy(entry, {\n          get(target, key) {\n            if (key === 'dispose') {\n              return dispose\n            }\n            return Reflect.get(target, key)\n          },\n        })\n        dispose?.()\n        dispose = cb.current?.(lastEntry) || null\n      } else {\n        dispose?.()\n      }\n    }, options)\n\n    const ro = new ResizeObserver(\n      debounce(() => {\n        if (!lastEntry) {\n          return\n        }\n        dispose = cb.current?.(lastEntry, true) || null\n      }, 150)\n    )\n\n    ro.observe(document.body)\n    io.observe(node)\n\n    return () => {\n      dispose?.()\n      ro.disconnect()\n      io.disconnect()\n    }\n  }, [ref.current, ...mountArgs])\n}\n"],
+  "mappings": "AAAA;AACA;AAQO,MAAM,oBAAoB,CAC/B,KACA,EAAE,SAA6B,CAAC,MAC7B;AACH,QAAM,CAAC,KAAK,UAAU,SAAS,KAAK;AACpC,oBAAkB,KAAK,CAAC,EAAE,qBAAqB;AAC7C,QAAK,QAAQ,kBAAmB,CAAC,MAAM;AACrC,aAAO,cAAc;AAAA,IACvB;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAC/B,KACA,YACA,UAAoC;AAAA,EAClC,WAAW;AACb,GACA,YAAmB,CAAC,MACjB;AACH,QAAM,KAAK,OAAoB;AAE/B,YAAU,MAAM;AACd,OAAG,UAAU;AAAA,EACf,GAAG,CAAC,UAAU,CAAC;AAGf,YAAU,MAAM;AACd,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC;AAAM;AAEX,QAAI,UAA4B;AAChC,QAAI;AAEJ,UAAM,KAAK,IAAI,qBAAqB,CAAC,CAAC,WAAW;AA5CrD;AA6CM,UAAI,MAAM,gBAAgB;AACxB,oBAAY,IAAI,MAAM,OAAO;AAAA,UAC3B,IAAI,QAAQ,KAAK;AACf,gBAAI,QAAQ,WAAW;AACrB,qBAAO;AAAA,YACT;AACA,mBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,UAChC;AAAA,QACF,CAAC;AACD;AACA,kBAAU,UAAG,YAAH,4BAAa,eAAc;AAAA,MACvC,OAAO;AACL;AAAA,MACF;AAAA,IACF,GAAG,OAAO;AAEV,UAAM,KAAK,IAAI,eACb,SAAS,MAAM;AA9DrB;AA+DQ,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AACA,gBAAU,UAAG,YAAH,4BAAa,WAAW,UAAS;AAAA,IAC7C,GAAG,GAAG,CACR;AAEA,OAAG,QAAQ,SAAS,IAAI;AACxB,OAAG,QAAQ,IAAI;AAEf,WAAO,MAAM;AACX;AACA,SAAG,WAAW;AACd,SAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,IAAI,SAAS,GAAG,SAAS,CAAC;AAChC;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@tamagui/demos",
+  "version": "1.0.1-beta.100",
+  "sideEffects": false,
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@tamagui/avatar": "^1.0.1-beta.100",
+    "@tamagui/button": "^1.0.1-beta.100",
+    "@tamagui/config-base": "^1.0.1-beta.100",
+    "@tamagui/core": "^1.0.1-beta.100",
+    "@tamagui/drawer": "^1.0.1-beta.100",
+    "@tamagui/list-item": "^1.0.1-beta.100",
+    "@tamagui/menu": "^1.0.1-beta.100",
+    "@tamagui/popover": "^1.0.1-beta.100",
+    "@tamagui/progress": "^1.0.1-beta.100",
+    "@tamagui/select": "^1.0.1-beta.100",
+    "@tamagui/sheet": "^1.0.1-beta.100",
+    "@tamagui/slider": "^1.0.1-beta.100",
+    "@tamagui/stacks": "^1.0.1-beta.100",
+    "tamagui": "^1.0.1-beta.100"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.100",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/AnimationsDemo.tsx

@@ -0,0 +1,85 @@
+import { Play } from '@tamagui/feather-icons'
+import React from 'react'
+import { Button, Square, useControllableState } from 'tamagui'
+
+import { LogoIcon } from './TamaguiLogo'
+
+export function AnimationsDemo(props) {
+  const [positionI, setPositionI] = useControllableState({
+    strategy: 'most-recent-wins',
+    prop: props.position,
+    defaultProp: 0,
+  })
+  const position = positions[positionI]
+  const next = (to = 1) => {
+    setPositionI((x) => {
+      return (x + to) % positions.length
+    })
+  }
+
+  return (
+    <>
+      <Square
+        focusable={false}
+        animation={props.animation || 'bouncy'}
+        onPress={() => next()}
+        size={110}
+        bc="$pink10"
+        br="$9"
+        hoverStyle={{
+          scale: 1.1,
+        }}
+        pressStyle={{
+          scale: 0.9,
+        }}
+        {...position}
+      >
+        {props.children || <LogoIcon downscale={0.75} />}
+      </Square>
+
+      <Button
+        pos="absolute"
+        b={20}
+        l={20}
+        icon={Play}
+        theme={props.tint}
+        size="$5"
+        circular
+        onPress={() => next()}
+      />
+    </>
+  )
+}
+
+export const positions = [
+  {
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotate: '0deg',
+  },
+  {
+    x: -50,
+    y: -50,
+    scale: 0.5,
+    rotate: '-45deg',
+    hoverStyle: {
+      scale: 0.6,
+    },
+    pressStyle: {
+      scale: 0.4,
+    },
+  },
+  {
+    x: 50,
+    y: 50,
+    scale: 1,
+    rotate: '180deg',
+    hoverStyle: {
+      scale: 1.1,
+    },
+    pressStyle: {
+      scale: 0.9,
+    },
+  },
+]

package/src/AnimationsEnterDemo.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useRef, useState } from 'react'
+import { Button, Square, YStack } from 'tamagui'
+
+import { LogoIcon } from './TamaguiLogo'
+import { useIsIntersecting } from './useOnIntersecting'
+
+export function AnimationsEnterDemo() {
+  const ref = useRef<HTMLElement>(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>
+    </>
+  )
+}

package/src/AnimationsHoverDemo.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Square } from 'tamagui'
+
+import { LogoIcon } from './TamaguiLogo'
+
+export 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>
+  )
+}

package/src/AnimationsPresenceDemo.tsx

@@ -0,0 +1,73 @@
+// adapted from Framer Motion
+// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470
+
+import { AnimatePresence } from '@tamagui/animate-presence'
+import { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'
+import React from 'react'
+import { useState } from 'react'
+import { Button, Image, XStack, YStack, styled } from 'tamagui'
+
+// @ts-ignore
+import photo1 from '../../public/photo1.jpg'
+// @ts-ignore
+import photo2 from '../../public/photo2.jpg'
+// @ts-ignore
+import photo3 from '../../public/photo3.jpg'
+
+export 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 } },
+  },
+})
+
+export function AnimationsPresenceDemo() {
+  const [[page, direction], setPage] = useState([0, 0])
+
+  const imageIndex = wrap(0, images.length, page)
+
+  const paginate = (newDirection: number) => {
+    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: number, max: number, v: number) => {
+  const rangeSize = max - min
+  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min
+}

package/src/AvatarDemo.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Avatar, XStack } from 'tamagui'
+
+export 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>
+  )
+}

package/src/ButtonDemo.tsx

@@ -0,0 +1,38 @@
+import { Activity, Airplay } from '@tamagui/feather-icons'
+import React from 'react'
+import { Button, Group, XStack, YStack } from 'tamagui'
+
+export 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>
+  )
+}

package/src/CardDemo.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Button, Card, CardProps, H2, H3, Image, Paragraph, XStack } from 'tamagui'
+
+// @ts-ignore
+import camera from '../../public/camera.jpg'
+
+export 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: CardProps) {
+  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>
+  )
+}