@tamagui/demos 1.0.1-beta.100

package/dist/esm/demos/StacksDemo.js

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React from "react";
+import { XStack, YStack, ZStack } from "tamagui";
+function StacksDemo() {
+  return /* @__PURE__ */ React.createElement(XStack, {
+    als: "center",
+    space: true
+  }, /* @__PURE__ */ React.createElement(YStack, {
+    flex: 1,
+    space: "$2",
+    bw: 2,
+    boc: "$color",
+    br: "$4",
+    p: "$2"
+  }, /* @__PURE__ */ React.createElement(YStack, {
+    bc: "$color",
+    br: "$3",
+    p: "$2"
+  }), /* @__PURE__ */ React.createElement(YStack, {
+    bc: "$color",
+    br: "$3",
+    p: "$2"
+  }), /* @__PURE__ */ React.createElement(YStack, {
+    bc: "$color",
+    br: "$3",
+    p: "$2"
+  })), /* @__PURE__ */ React.createElement(XStack, {
+    flex: 1,
+    space: "$2",
+    bw: 2,
+    boc: "$color",
+    br: "$4",
+    p: "$2"
+  }, /* @__PURE__ */ React.createElement(YStack, {
+    bc: "$color",
+    br: "$3",
+    p: "$2"
+  }), /* @__PURE__ */ React.createElement(YStack, {
+    bc: "$color",
+    br: "$3",
+    p: "$2"
+  }), /* @__PURE__ */ React.createElement(YStack, {
+    bc: "$color",
+    br: "$3",
+    p: "$2"
+  })), /* @__PURE__ */ React.createElement(ZStack, {
+    maw: 50,
+    mah: 85,
+    w: 100,
+    flex: 1
+  }, /* @__PURE__ */ React.createElement(YStack, {
+    fullscreen: true,
+    bw: 2,
+    br: "$4",
+    p: "$2"
+  }), /* @__PURE__ */ React.createElement(YStack, {
+    fullscreen: true,
+    y: 10,
+    x: 10,
+    bw: 2,
+    br: "$4",
+    p: "$2"
+  }), /* @__PURE__ */ React.createElement(YStack, {
+    fullscreen: true,
+    y: 20,
+    x: 20,
+    bw: 2,
+    bc: "$color",
+    br: "$4",
+    p: "$2"
+  })));
+}
+__name(StacksDemo, "StacksDemo");
+export {
+  StacksDemo as default
+};
+//# sourceMappingURL=StacksDemo.js.map

package/dist/esm/demos/StacksDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/StacksDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport default function StacksDemo() {\n  return (\n    <XStack als=\"center\" space>\n      <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n      </YStack>\n\n      <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n      </XStack>\n\n      <ZStack maw={50} mah={85} w={100} flex={1}>\n        <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n        <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n        <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n      </ZStack>\n    </XStack>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,KAAI;AAAA,IAAS,OAAK;AAAA,KACxB,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAG,OAAM;AAAA,IAAK,IAAI;AAAA,IAAG,KAAI;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,KACxD,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrC,GAEA,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAG,OAAM;AAAA,IAAK,IAAI;AAAA,IAAG,KAAI;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,KACxD,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACnC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrC,GAEA,oCAAC;AAAA,IAAO,KAAK;AAAA,IAAI,KAAK;AAAA,IAAI,GAAG;AAAA,IAAK,MAAM;AAAA,KACtC,oCAAC;AAAA,IAAO,YAAU;AAAA,IAAC,IAAI;AAAA,IAAG,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACzC,oCAAC;AAAA,IAAO,YAAU;AAAA,IAAC,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,IAAI;AAAA,IAAG,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,GACvD,oCAAC;AAAA,IAAO,YAAU;AAAA,IAAC,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,IAAI;AAAA,IAAG,IAAG;AAAA,IAAS,IAAG;AAAA,IAAK,GAAE;AAAA,GAAK,CACrE,CACF;AAEJ;AAtBwB;",
+  "names": []
+}

package/dist/esm/demos/SwitchDemo.js

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Label, Switch, XStack, YStack } from "tamagui";
+function SwitchDemo() {
+  return /* @__PURE__ */ React.createElement(YStack, {
+    w: 300,
+    ai: "center",
+    space: "$1"
+  }, /* @__PURE__ */ React.createElement(XStack, {
+    ai: "center",
+    space: "$2"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    size: "$2",
+    htmlFor: "switch-1"
+  }, "Dark mode"), /* @__PURE__ */ React.createElement(Switch, {
+    id: "switch-1",
+    size: "$2"
+  }, /* @__PURE__ */ React.createElement(Switch.Thumb, {
+    animation: "bouncy"
+  }))), /* @__PURE__ */ React.createElement(XStack, {
+    ai: "center",
+    space: "$2"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    size: "$3",
+    htmlFor: "switch-2"
+  }, "Dark mode"), /* @__PURE__ */ React.createElement(Switch, {
+    id: "switch-2",
+    size: "$3"
+  }, /* @__PURE__ */ React.createElement(Switch.Thumb, {
+    animation: "bouncy"
+  }))), /* @__PURE__ */ React.createElement(XStack, {
+    ai: "center",
+    space: "$2"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    size: "$4",
+    htmlFor: "switch-3"
+  }, "Dark mode"), /* @__PURE__ */ React.createElement(Switch, {
+    id: "switch-3",
+    size: "$4"
+  }, /* @__PURE__ */ React.createElement(Switch.Thumb, {
+    animation: "bouncy"
+  }))), /* @__PURE__ */ React.createElement(XStack, {
+    ai: "center"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    size: "$5",
+    htmlFor: "switch-4"
+  }, "Dark mode"), /* @__PURE__ */ React.createElement(Switch, {
+    id: "switch-4",
+    size: "$5"
+  }, /* @__PURE__ */ React.createElement(Switch.Thumb, {
+    animation: "bouncy"
+  }))));
+}
+__name(SwitchDemo, "SwitchDemo");
+export {
+  SwitchDemo as default
+};
+//# sourceMappingURL=SwitchDemo.js.map

package/dist/esm/demos/SwitchDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/SwitchDemo.tsx"],
+  "sourcesContent": ["import { Label, Switch, XStack, YStack } from 'tamagui'\n\nexport default function SwitchDemo() {\n  return (\n    <YStack w={300} ai=\"center\" space=\"$1\">\n      <XStack ai=\"center\" space=\"$2\">\n        <Label size=\"$2\" htmlFor=\"switch-1\">\n          Dark mode\n        </Label>\n        <Switch id=\"switch-1\" size=\"$2\">\n          <Switch.Thumb animation=\"bouncy\" />\n        </Switch>\n      </XStack>\n\n      <XStack ai=\"center\" space=\"$2\">\n        <Label size=\"$3\" htmlFor=\"switch-2\">\n          Dark mode\n        </Label>\n        <Switch id=\"switch-2\" size=\"$3\">\n          <Switch.Thumb animation=\"bouncy\" />\n        </Switch>\n      </XStack>\n\n      <XStack ai=\"center\" space=\"$2\">\n        <Label size=\"$4\" htmlFor=\"switch-3\">\n          Dark mode\n        </Label>\n        <Switch id=\"switch-3\" size=\"$4\">\n          <Switch.Thumb animation=\"bouncy\" />\n        </Switch>\n      </XStack>\n\n      <XStack ai=\"center\">\n        <Label size=\"$5\" htmlFor=\"switch-4\">\n          Dark mode\n        </Label>\n        <Switch id=\"switch-4\" size=\"$5\">\n          <Switch.Thumb animation=\"bouncy\" />\n        </Switch>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;AAAA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,OAAM;AAAA,KAChC,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,OAAM;AAAA,KACxB,oCAAC;AAAA,IAAM,MAAK;AAAA,IAAK,SAAQ;AAAA,KAAW,WAEpC,GACA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAW,MAAK;AAAA,KACzB,oCAAC,OAAO,OAAP;AAAA,IAAa,WAAU;AAAA,GAAS,CACnC,CACF,GAEA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,OAAM;AAAA,KACxB,oCAAC;AAAA,IAAM,MAAK;AAAA,IAAK,SAAQ;AAAA,KAAW,WAEpC,GACA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAW,MAAK;AAAA,KACzB,oCAAC,OAAO,OAAP;AAAA,IAAa,WAAU;AAAA,GAAS,CACnC,CACF,GAEA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,OAAM;AAAA,KACxB,oCAAC;AAAA,IAAM,MAAK;AAAA,IAAK,SAAQ;AAAA,KAAW,WAEpC,GACA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAW,MAAK;AAAA,KACzB,oCAAC,OAAO,OAAP;AAAA,IAAa,WAAU;AAAA,GAAS,CACnC,CACF,GAEA,oCAAC;AAAA,IAAO,IAAG;AAAA,KACT,oCAAC;AAAA,IAAM,MAAK;AAAA,IAAK,SAAQ;AAAA,KAAW,WAEpC,GACA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAW,MAAK;AAAA,KACzB,oCAAC,OAAO,OAAP;AAAA,IAAa,WAAU;AAAA,GAAS,CACnC,CACF,CACF;AAEJ;AAxCwB;",
+  "names": []
+}

package/dist/esm/demos/TextDemo.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React from "react";
+import { Paragraph, SizableText, Text, XStack, YStack } from "tamagui";
+function TextDemo() {
+  return /* @__PURE__ */ React.createElement(YStack, {
+    space: "$2",
+    ai: "center"
+  }, /* @__PURE__ */ React.createElement(Text, null, "Text"), /* @__PURE__ */ React.createElement(SizableText, {
+    size: "$3"
+  }, "SizableText"), /* @__PURE__ */ React.createElement(XStack, {
+    space: true
+  }, /* @__PURE__ */ React.createElement(SizableText, {
+    theme: "alt1",
+    size: "$3"
+  }, "alt1"), /* @__PURE__ */ React.createElement(SizableText, {
+    theme: "alt2",
+    size: "$3"
+  }, "alt2"), /* @__PURE__ */ React.createElement(SizableText, {
+    theme: "alt3",
+    size: "$3"
+  }, "alt3")), /* @__PURE__ */ React.createElement(Paragraph, {
+    size: "$2",
+    fow: "800"
+  }, "Paragraph"));
+}
+__name(TextDemo, "TextDemo");
+export {
+  TextDemo as default
+};
+//# sourceMappingURL=TextDemo.js.map

package/dist/esm/demos/TextDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/TextDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport default 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": ";;AAAA;AACA;AAEe,oBAAoB;AACjC,SACE,oCAAC;AAAA,IAAO,OAAM;AAAA,IAAK,IAAG;AAAA,KACpB,oCAAC,YAAK,MAAI,GACV,oCAAC;AAAA,IAAY,MAAK;AAAA,KAAK,aAAW,GAClC,oCAAC;AAAA,IAAO,OAAK;AAAA,KACX,oCAAC;AAAA,IAAY,OAAM;AAAA,IAAO,MAAK;AAAA,KAAK,MAEpC,GACA,oCAAC;AAAA,IAAY,OAAM;AAAA,IAAO,MAAK;AAAA,KAAK,MAEpC,GACA,oCAAC;AAAA,IAAY,OAAM;AAAA,IAAO,MAAK;AAAA,KAAK,MAEpC,CACF,GACA,oCAAC;AAAA,IAAU,MAAK;AAAA,IAAK,KAAI;AAAA,KAAM,WAE/B,CACF;AAEJ;AArBwB;",
+  "names": []
+}

package/dist/esm/demos/ThemeInverseDemo.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { ThemeInverse } from "@tamagui/core";
+import React from "react";
+import { Button, Theme, XStack, YStack } from "tamagui";
+function ThemeInverseDemo() {
+  return /* @__PURE__ */ React.createElement(XStack, {
+    space: true
+  }, /* @__PURE__ */ React.createElement(Buttons, null), /* @__PURE__ */ React.createElement(ThemeInverse, null, /* @__PURE__ */ React.createElement(Buttons, null)));
+}
+__name(ThemeInverseDemo, "ThemeInverseDemo");
+function Buttons() {
+  return /* @__PURE__ */ React.createElement(YStack, {
+    bc: "$background",
+    p: "$3",
+    br: "$3",
+    space: true
+  }, /* @__PURE__ */ React.createElement(Button, null, "Dark"), /* @__PURE__ */ React.createElement(Button, {
+    themeInverse: true
+  }, "Inversed"), /* @__PURE__ */ React.createElement(Button, {
+    theme: "alt1"
+  }, "Alt1 Dark"), /* @__PURE__ */ React.createElement(Theme, {
+    name: "yellow"
+  }, /* @__PURE__ */ React.createElement(Button, null, "Yellow dark")));
+}
+__name(Buttons, "Buttons");
+export {
+  ThemeInverseDemo as default
+};
+//# sourceMappingURL=ThemeInverseDemo.js.map

package/dist/esm/demos/ThemeInverseDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/ThemeInverseDemo.tsx"],
+  "sourcesContent": ["import { ThemeInverse } from '@tamagui/core'\nimport React from 'react'\nimport { Button, Theme, XStack, YStack } from 'tamagui'\n\nexport default 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;AACA;AACA;AAEe,4BAA4B;AACzC,SACE,oCAAC;AAAA,IAAO,OAAK;AAAA,KACX,oCAAC,aAAQ,GACT,oCAAC,oBACC,oCAAC,aAAQ,CACX,CACF;AAEJ;AATwB;AAWxB,mBAAmB;AACjB,SACE,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAc,GAAE;AAAA,IAAK,IAAG;AAAA,IAAK,OAAK;AAAA,KAC3C,oCAAC,cAAO,MAAI,GACZ,oCAAC;AAAA,IAAO,cAAY;AAAA,KAAC,UAAQ,GAC7B,oCAAC;AAAA,IAAO,OAAM;AAAA,KAAO,WAAS,GAC9B,oCAAC;AAAA,IAAM,MAAK;AAAA,KACV,oCAAC,cAAO,aAAW,CACrB,CACF;AAEJ;AAXS;",
+  "names": []
+}

package/dist/esm/demos/TooltipDemo.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle } from "@tamagui/feather-icons";
+import { Button, Paragraph, Tooltip, TooltipGroup, XStack, YStack } from "tamagui";
+function TooltipDemo() {
+  return /* @__PURE__ */ React.createElement(TooltipGroup, {
+    delay: { open: 3e3, close: 100 }
+  }, /* @__PURE__ */ React.createElement(YStack, {
+    space: "$2",
+    als: "center"
+  }, /* @__PURE__ */ React.createElement(XStack, {
+    space: "$2"
+  }, /* @__PURE__ */ React.createElement(Demo, {
+    groupId: "0",
+    placement: "top-end",
+    Icon: Circle
+  }), /* @__PURE__ */ React.createElement(Demo, {
+    groupId: "1",
+    placement: "top",
+    Icon: ChevronUp
+  }), /* @__PURE__ */ React.createElement(Demo, {
+    groupId: "2",
+    placement: "top-start",
+    Icon: Circle
+  })), /* @__PURE__ */ React.createElement(XStack, {
+    space: "$2"
+  }, /* @__PURE__ */ React.createElement(Demo, {
+    groupId: "3",
+    placement: "left",
+    Icon: ChevronLeft
+  }), /* @__PURE__ */ React.createElement(YStack, {
+    f: 1
+  }), /* @__PURE__ */ React.createElement(Demo, {
+    groupId: "4",
+    placement: "right",
+    Icon: ChevronRight
+  })), /* @__PURE__ */ React.createElement(XStack, {
+    space: "$2"
+  }, /* @__PURE__ */ React.createElement(Demo, {
+    groupId: "5",
+    placement: "bottom-end",
+    Icon: Circle
+  }), /* @__PURE__ */ React.createElement(Demo, {
+    groupId: "6",
+    placement: "bottom",
+    Icon: ChevronDown
+  }), /* @__PURE__ */ React.createElement(Demo, {
+    groupId: "7",
+    placement: "bottom-start",
+    Icon: Circle
+  }))));
+}
+__name(TooltipDemo, "TooltipDemo");
+function Demo({ Icon, ...props }) {
+  return /* @__PURE__ */ React.createElement(Tooltip, {
+    ...props
+  }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, null, /* @__PURE__ */ React.createElement(Button, {
+    icon: Icon,
+    circular: true
+  })), /* @__PURE__ */ React.createElement(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"
+  }, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React.createElement(Paragraph, null, "Hello world")));
+}
+__name(Demo, "Demo");
+export {
+  Demo,
+  TooltipDemo as default
+};
+//# sourceMappingURL=TooltipDemo.js.map

package/dist/esm/demos/TooltipDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/TooltipDemo.tsx"],
+  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle } from '@tamagui/feather-icons'\nimport { Button, Paragraph, Tooltip, TooltipGroup, TooltipProps, XStack, YStack } from 'tamagui'\n\nexport default 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>Hello world</Paragraph>\n      </Tooltip.Content>\n    </Tooltip>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEe,uBAAuB;AACpC,SACE,oCAAC;AAAA,IAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI;AAAA,KAC5C,oCAAC;AAAA,IAAO,OAAM;AAAA,IAAK,KAAI;AAAA,KACrB,oCAAC;AAAA,IAAO,OAAM;AAAA,KACZ,oCAAC;AAAA,IAAK,SAAQ;AAAA,IAAI,WAAU;AAAA,IAAU,MAAM;AAAA,GAAQ,GACpD,oCAAC;AAAA,IAAK,SAAQ;AAAA,IAAI,WAAU;AAAA,IAAM,MAAM;AAAA,GAAW,GACnD,oCAAC;AAAA,IAAK,SAAQ;AAAA,IAAI,WAAU;AAAA,IAAY,MAAM;AAAA,GAAQ,CACxD,GACA,oCAAC;AAAA,IAAO,OAAM;AAAA,KACZ,oCAAC;AAAA,IAAK,SAAQ;AAAA,IAAI,WAAU;AAAA,IAAO,MAAM;AAAA,GAAa,GACtD,oCAAC;AAAA,IAAO,GAAG;AAAA,GAAG,GACd,oCAAC;AAAA,IAAK,SAAQ;AAAA,IAAI,WAAU;AAAA,IAAQ,MAAM;AAAA,GAAc,CAC1D,GACA,oCAAC;AAAA,IAAO,OAAM;AAAA,KACZ,oCAAC;AAAA,IAAK,SAAQ;AAAA,IAAI,WAAU;AAAA,IAAa,MAAM;AAAA,GAAQ,GACvD,oCAAC;AAAA,IAAK,SAAQ;AAAA,IAAI,WAAU;AAAA,IAAS,MAAM;AAAA,GAAa,GACxD,oCAAC;AAAA,IAAK,SAAQ;AAAA,IAAI,WAAU;AAAA,IAAe,MAAM;AAAA,GAAQ,CAC3D,CACF,CACF;AAEJ;AAtBwB;AAwBjB,cAAc,EAAE,SAAS,SAAwC;AACtE,SACE,oCAAC;AAAA,IAAS,GAAG;AAAA,KACX,oCAAC,QAAQ,SAAR,MACC,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAM,UAAQ;AAAA,GAAC,CAC/B,GACA,oCAAC,QAAQ,SAAR;AAAA,IACC,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI;AAAA,IAC5C,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI;AAAA,IAC3C,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,WAAU;AAAA,KAEV,oCAAC,QAAQ,OAAR,IAAc,GACf,oCAAC,iBAAU,aAAW,CACxB,CACF;AAEJ;AApBgB;",
+  "names": []
+}

package/dist/esm/demos/index.js

@@ -0,0 +1,62 @@
+import dynamic from "next/dynamic";
+import { default as default2 } from "./StacksDemo";
+import { default as default3 } from "./ShapesDemo";
+import { default as default4 } from "./TextDemo";
+import { default as default5 } from "./ButtonDemo";
+import { default as default6 } from "./ThemeInverseDemo";
+import { default as default7 } from "./FormsDemo";
+import { default as default8 } from "./LinearGradientDemo";
+import { default as default9 } from "./HeadingsDemo";
+import { default as default10 } from "./SeparatorDemo";
+import { default as default11 } from "./ImageDemo";
+import { default as default12 } from "./AnimationsDemo";
+import { default as default13 } from "./LabelDemo";
+import { default as default14 } from "./GroupDemo";
+import { default as default15 } from "./CardDemo";
+import { default as default16 } from "./AvatarDemo";
+import { default as default17 } from "./ProgressDemo";
+import { default as default18 } from "./ListItemDemo";
+const TooltipDemo = dynamic(() => import("./TooltipDemo"));
+const DrawerDemo = dynamic(() => import("./DrawerDemo"));
+const MenuDemo = dynamic(() => import("./MenuDemo"));
+const PopoverDemo = dynamic(() => import("./PopoverDemo"));
+const DialogDemo = dynamic(() => import("./DialogDemo"));
+const AnimationsHoverDemo = dynamic(() => import("./AnimationsHoverDemo"));
+const AnimationsEnterDemo = dynamic(() => import("./AnimationsEnterDemo"));
+const AnimationsPresenceDemo = dynamic(() => import("./AnimationsPresenceDemo"));
+const SwitchDemo = dynamic(() => import("./SwitchDemo"));
+const SliderDemo = dynamic(() => import("./SliderDemo"));
+const SpinnerDemo = dynamic(() => import("./SpinnerDemo"));
+const FeatherIconsDemo = dynamic(() => import("./FeatherIconsDemo"));
+export {
+  default12 as AnimationsDemo,
+  AnimationsEnterDemo,
+  AnimationsHoverDemo,
+  AnimationsPresenceDemo,
+  default16 as AvatarDemo,
+  default5 as ButtonDemo,
+  default15 as CardDemo,
+  DialogDemo,
+  DrawerDemo,
+  FeatherIconsDemo,
+  default7 as FormsDemo,
+  default14 as GroupDemo,
+  default9 as HeadingsDemo,
+  default11 as ImageDemo,
+  default13 as LabelDemo,
+  default8 as LinearGradientDemo,
+  default18 as ListItemDemo,
+  MenuDemo,
+  PopoverDemo,
+  default17 as ProgressDemo,
+  default10 as SeparatorDemo,
+  default3 as ShapesDemo,
+  SliderDemo,
+  SpinnerDemo,
+  default2 as StacksDemo,
+  SwitchDemo,
+  default4 as TextDemo,
+  default6 as ThemeInverseDemo,
+  TooltipDemo
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/demos/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/index.tsx"],
+  "sourcesContent": ["import dynamic from 'next/dynamic'\n\nexport { default as StacksDemo } from './StacksDemo'\nexport { default as ShapesDemo } from './ShapesDemo'\nexport { default as TextDemo } from './TextDemo'\nexport { default as ButtonDemo } from './ButtonDemo'\nexport { default as ThemeInverseDemo } from './ThemeInverseDemo'\nexport { default as FormsDemo } from './FormsDemo'\nexport { default as LinearGradientDemo } from './LinearGradientDemo'\nexport { default as HeadingsDemo } from './HeadingsDemo'\nexport { default as SeparatorDemo } from './SeparatorDemo'\nexport { default as ImageDemo } from './ImageDemo'\nexport { default as AnimationsDemo } from './AnimationsDemo'\nexport { default as LabelDemo } from './LabelDemo'\nexport { default as GroupDemo } from './GroupDemo'\nexport { default as CardDemo } from './CardDemo'\nexport { default as AvatarDemo } from './AvatarDemo'\nexport { default as ProgressDemo } from './ProgressDemo'\nexport { default as ListItemDemo } from './ListItemDemo'\n\nexport const TooltipDemo = dynamic(() => import('./TooltipDemo'))\nexport const DrawerDemo = dynamic(() => import('./DrawerDemo'))\nexport const MenuDemo = dynamic(() => import('./MenuDemo'))\nexport const PopoverDemo = dynamic(() => import('./PopoverDemo'))\nexport const DialogDemo = dynamic(() => import('./DialogDemo'))\nexport const AnimationsHoverDemo = dynamic(() => import('./AnimationsHoverDemo'))\nexport const AnimationsEnterDemo = dynamic(() => import('./AnimationsEnterDemo'))\nexport const AnimationsPresenceDemo = dynamic(() => import('./AnimationsPresenceDemo'))\nexport const SwitchDemo = dynamic(() => import('./SwitchDemo'))\nexport const SliderDemo = dynamic(() => import('./SliderDemo'))\nexport const SpinnerDemo = dynamic(() => import('./SpinnerDemo'))\nexport const FeatherIconsDemo = dynamic(() => import('./FeatherIconsDemo'))\n"],
+  "mappings": "AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,QAAQ,MAAM,OAAO,gBAAgB;AACzD,MAAM,aAAa,QAAQ,MAAM,OAAO,eAAe;AACvD,MAAM,WAAW,QAAQ,MAAM,OAAO,aAAa;AACnD,MAAM,cAAc,QAAQ,MAAM,OAAO,gBAAgB;AACzD,MAAM,aAAa,QAAQ,MAAM,OAAO,eAAe;AACvD,MAAM,sBAAsB,QAAQ,MAAM,OAAO,wBAAwB;AACzE,MAAM,sBAAsB,QAAQ,MAAM,OAAO,wBAAwB;AACzE,MAAM,yBAAyB,QAAQ,MAAM,OAAO,2BAA2B;AAC/E,MAAM,aAAa,QAAQ,MAAM,OAAO,eAAe;AACvD,MAAM,aAAa,QAAQ,MAAM,OAAO,eAAe;AACvD,MAAM,cAAc,QAAQ,MAAM,OAAO,gBAAgB;AACzD,MAAM,mBAAmB,QAAQ,MAAM,OAAO,qBAAqB;",
+  "names": []
+}

package/dist/esm/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/esm/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/esm/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/esm/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/dist/jsx/AnimationsDemo.js

@@ -0,0 +1,61 @@
+import { Play } from "@tamagui/feather-icons";
+import { Button, Square, useControllableState } from "tamagui";
+import { LogoIcon } from "./TamaguiLogo";
+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()} />
+  </>;
+}
+const positions = [
+  {
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotate: "0deg"
+  },
+  {
+    x: -50,
+    y: -50,
+    scale: 0.5,
+    rotate: "-45deg",
+    hoverStyle: {
+      scale: 0.6
+    },
+    pressStyle: {
+      scale: 0.4
+    }
+  },
+  {
+    x: 50,
+    y: 50,
+    scale: 1,
+    rotate: "180deg",
+    hoverStyle: {
+      scale: 1.1
+    },
+    pressStyle: {
+      scale: 0.9
+    }
+  }
+];
+export {
+  AnimationsDemo,
+  positions
+};
+//# sourceMappingURL=AnimationsDemo.js.map

package/dist/jsx/AnimationsDemo.js.map

@@ -0,0 +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 function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const 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;AAEA;AAEA;AAEO,wBAAwB,OAAO;AACpC,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,CAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IACE,CAAC,OACC,WAAW,OACX,WAAW,MAAM,aAAa,UAC9B,SAAS,MAAM,KAAK,GACpB,MAAM,KACN,GAAG,UACH,GAAG,KACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT,GACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT,OACI,WAEH,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAhBC;AAAA,IAkBD,CAAC,OACC,IAAI,WACJ,GAAG,IACH,GAAG,IACH,MAAM,MACN,OAAO,MAAM,MACb,KAAK,KACL,SACA,SAAS,MAAM,KAAK,GACtB;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "names": []
+}