@tamagui/demos 1.0.1-beta.100

package/dist/esm/KitchenSink.js

@@ -0,0 +1,110 @@
+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 KitchenSink() {
+  return /* @__PURE__ */ React.createElement(YStack, {
+    space: true
+  });
+}
+__name(KitchenSink, "KitchenSink");
+function ButtonDemo() {
+  return /* @__PURE__ */ React.createElement(Button, {
+    alignSelf: "center",
+    size: "$2",
+    icon: Check,
+    iconAfter: X
+  }, "Hello wrold");
+}
+__name(ButtonDemo, "ButtonDemo");
+function TooltipDemo() {
+  return /* @__PURE__ */ React.createElement(TooltipSimple, {
+    label: "test tooltip"
+  }, /* @__PURE__ */ React.createElement(Button, {
+    size: "$6",
+    icon: Check,
+    iconAfter: X
+  }, "Hello wrold"));
+}
+__name(TooltipDemo, "TooltipDemo");
+function GroupListItemDemo() {
+  return /* @__PURE__ */ React.createElement(Group, {
+    width: 250,
+    size: "$4",
+    vertical: true,
+    separator: /* @__PURE__ */ React.createElement(Separator, {
+      marginLeft: "$4"
+    })
+  }, /* @__PURE__ */ React.createElement(ListItem, {
+    icon: Check,
+    subTitle: "test 123"
+  }, "Bye world"), /* @__PURE__ */ React.createElement(ListItem, {
+    iconAfter: Check
+  }, "Hello world"), /* @__PURE__ */ React.createElement(ListItem, {
+    iconAfter: Check
+  }, "Hello world"), /* @__PURE__ */ React.createElement(ListItem, {
+    iconAfter: Check
+  }, "Hello world"));
+}
+__name(GroupListItemDemo, "GroupListItemDemo");
+function AvatarDemo() {
+  return /* @__PURE__ */ React.createElement(Avatar, {
+    circular: true,
+    size: "$10"
+  }, /* @__PURE__ */ React.createElement(Avatar.Image, {
+    src: "http://placekitten.com/150/150",
+    width: 150,
+    height: 150
+  }), /* @__PURE__ */ React.createElement(Avatar.Fallback, {
+    backgroundColor: "red"
+  }));
+}
+__name(AvatarDemo, "AvatarDemo");
+function ShapesDemo() {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Square, {
+    size: "$8"
+  }));
+}
+__name(ShapesDemo, "ShapesDemo");
+function SeparatorDemo() {
+  return /* @__PURE__ */ React.createElement(YStack, {
+    width: "100%",
+    maxWidth: 300,
+    marginHorizontal: 15
+  }, /* @__PURE__ */ React.createElement(Paragraph, {
+    fontWeight: "800"
+  }, "Tamagui"), /* @__PURE__ */ React.createElement(Paragraph, null, "An cross-platform component library."), /* @__PURE__ */ React.createElement(Separator, {
+    marginVertical: 15
+  }), /* @__PURE__ */ React.createElement(XStack, {
+    height: 20,
+    alignItems: "center",
+    space: true,
+    separator: /* @__PURE__ */ React.createElement(Separator, {
+      debug: "verbose",
+      alignSelf: "stretch",
+      vertical: true
+    })
+  }, /* @__PURE__ */ React.createElement(Paragraph, null, "Blog"), /* @__PURE__ */ React.createElement(Paragraph, null, "Docs"), /* @__PURE__ */ React.createElement(Paragraph, null, "Source")));
+}
+__name(SeparatorDemo, "SeparatorDemo");
+export {
+  AvatarDemo,
+  ButtonDemo,
+  GroupListItemDemo,
+  KitchenSink,
+  SeparatorDemo,
+  ShapesDemo,
+  TooltipDemo
+};
+//# sourceMappingURL=KitchenSink.js.map

package/dist/esm/KitchenSink.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/KitchenSink.tsx"],
+  "sourcesContent": ["import { Check, X } from '@tamagui/feather-icons'\nimport {\n  Avatar,\n  Button,\n  Group,\n  ListItem,\n  Paragraph,\n  Separator,\n  Square,\n  TooltipSimple,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nexport function KitchenSink() {\n  return <YStack space></YStack>\n}\n\nexport function ButtonDemo() {\n  return (\n    <Button alignSelf=\"center\" size=\"$2\" icon={Check} iconAfter={X}>\n      Hello wrold\n    </Button>\n  )\n}\n\nexport function TooltipDemo() {\n  return (\n    <TooltipSimple label=\"test tooltip\">\n      <Button size=\"$6\" icon={Check} iconAfter={X}>\n        Hello wrold\n      </Button>\n    </TooltipSimple>\n  )\n}\n\nexport function GroupListItemDemo() {\n  return (\n    <Group width={250} size=\"$4\" vertical separator={<Separator marginLeft=\"$4\" />}>\n      <ListItem icon={Check} subTitle=\"test 123\">\n        Bye world\n      </ListItem>\n      <ListItem iconAfter={Check}>Hello world</ListItem>\n      <ListItem iconAfter={Check}>Hello world</ListItem>\n      <ListItem iconAfter={Check}>Hello world</ListItem>\n    </Group>\n  )\n}\n\nexport function AvatarDemo() {\n  return (\n    <Avatar circular size=\"$10\">\n      <Avatar.Image src=\"http://placekitten.com/150/150\" width={150} height={150} />\n      <Avatar.Fallback backgroundColor=\"red\" />\n    </Avatar>\n  )\n}\n\nexport function ShapesDemo() {\n  return (\n    <>\n      <Square size=\"$8\" />\n    </>\n  )\n}\n\nexport function SeparatorDemo() {\n  return (\n    <YStack width=\"100%\" maxWidth={300} marginHorizontal={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>An cross-platform component library.</Paragraph>\n      <Separator marginVertical={15} />\n      <XStack\n        height={20}\n        alignItems=\"center\"\n        space\n        separator={<Separator debug=\"verbose\" alignSelf=\"stretch\" vertical />}\n      >\n        <Paragraph>Blog</Paragraph>\n        <Paragraph>Docs</Paragraph>\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaO,uBAAuB;AAC5B,SAAO,oCAAC;AAAA,IAAO,OAAK;AAAA,GAAC;AACvB;AAFgB;AAIT,sBAAsB;AAC3B,SACE,oCAAC;AAAA,IAAO,WAAU;AAAA,IAAS,MAAK;AAAA,IAAK,MAAM;AAAA,IAAO,WAAW;AAAA,KAAG,aAEhE;AAEJ;AANgB;AAQT,uBAAuB;AAC5B,SACE,oCAAC;AAAA,IAAc,OAAM;AAAA,KACnB,oCAAC;AAAA,IAAO,MAAK;AAAA,IAAK,MAAM;AAAA,IAAO,WAAW;AAAA,KAAG,aAE7C,CACF;AAEJ;AARgB;AAUT,6BAA6B;AAClC,SACE,oCAAC;AAAA,IAAM,OAAO;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,IAAC,WAAW,oCAAC;AAAA,MAAU,YAAW;AAAA,KAAK;AAAA,KAC1E,oCAAC;AAAA,IAAS,MAAM;AAAA,IAAO,UAAS;AAAA,KAAW,WAE3C,GACA,oCAAC;AAAA,IAAS,WAAW;AAAA,KAAO,aAAW,GACvC,oCAAC;AAAA,IAAS,WAAW;AAAA,KAAO,aAAW,GACvC,oCAAC;AAAA,IAAS,WAAW;AAAA,KAAO,aAAW,CACzC;AAEJ;AAXgB;AAaT,sBAAsB;AAC3B,SACE,oCAAC;AAAA,IAAO,UAAQ;AAAA,IAAC,MAAK;AAAA,KACpB,oCAAC,OAAO,OAAP;AAAA,IAAa,KAAI;AAAA,IAAiC,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK,GAC5E,oCAAC,OAAO,UAAP;AAAA,IAAgB,iBAAgB;AAAA,GAAM,CACzC;AAEJ;AAPgB;AAST,sBAAsB;AAC3B,SACE,0DACE,oCAAC;AAAA,IAAO,MAAK;AAAA,GAAK,CACpB;AAEJ;AANgB;AAQT,yBAAyB;AAC9B,SACE,oCAAC;AAAA,IAAO,OAAM;AAAA,IAAO,UAAU;AAAA,IAAK,kBAAkB;AAAA,KACpD,oCAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,oCAAC,iBAAU,sCAAoC,GAC/C,oCAAC;AAAA,IAAU,gBAAgB;AAAA,GAAI,GAC/B,oCAAC;AAAA,IACC,QAAQ;AAAA,IACR,YAAW;AAAA,IACX,OAAK;AAAA,IACL,WAAW,oCAAC;AAAA,MAAU,OAAM;AAAA,MAAU,WAAU;AAAA,MAAU,UAAQ;AAAA,KAAC;AAAA,KAEnE,oCAAC,iBAAU,MAAI,GACf,oCAAC,iBAAU,MAAI,GACf,oCAAC,iBAAU,QAAM,CACnB,CACF;AAEJ;AAlBgB;",
+  "names": []
+}

package/dist/esm/LabelDemo.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Input, Label, XStack } from "tamagui";
+function LabelDemo() {
+  return /* @__PURE__ */ React.createElement(XStack, {
+    miw: 300,
+    p: "$3",
+    space: "$4"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    htmlFor: "name"
+  }, "Name"), /* @__PURE__ */ React.createElement(Input, {
+    f: 1,
+    id: "name",
+    defaultValue: "Nate Wienert"
+  }));
+}
+export {
+  LabelDemo
+};
+//# sourceMappingURL=LabelDemo.js.map

package/dist/esm/LabelDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/LabelDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Input, Label, XStack } from 'tamagui'\n\nexport function LabelDemo() {\n  return (\n    <XStack miw={300} p=\"$3\" space=\"$4\">\n      <Label htmlFor=\"name\">Name</Label>\n      <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AAEO,qBAAqB;AAC1B,SACE,oCAAC;AAAA,IAAO,KAAK;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,KAC7B,oCAAC;AAAA,IAAM,SAAQ;AAAA,KAAO,MAAI,GAC1B,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAO,cAAa;AAAA,GAAe,CACrD;AAEJ;",
+  "names": []
+}

package/dist/esm/LinearGradientDemo.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { LinearGradient } from "tamagui";
+function LinearGradientDemo() {
+  return /* @__PURE__ */ React.createElement(LinearGradient, {
+    als: "center",
+    width: 100,
+    height: 100,
+    colors: ["$red10", "$yellow10"],
+    start: [0, 1],
+    br: "$4",
+    end: [0, 0]
+  });
+}
+export {
+  LinearGradientDemo
+};
+//# sourceMappingURL=LinearGradientDemo.js.map

package/dist/esm/LinearGradientDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/LinearGradientDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { LinearGradient } from 'tamagui'\n\nexport function LinearGradientDemo() {\n  return (\n    <LinearGradient\n      als=\"center\"\n      width={100}\n      height={100}\n      colors={['$red10', '$yellow10']}\n      start={[0, 1]}\n      br=\"$4\"\n      end={[0, 0]}\n    />\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AAEO,8BAA8B;AACnC,SACE,oCAAC;AAAA,IACC,KAAI;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,CAAC,UAAU,WAAW;AAAA,IAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,IACZ,IAAG;AAAA,IACH,KAAK,CAAC,GAAG,CAAC;AAAA,GACZ;AAEJ;",
+  "names": []
+}

package/dist/esm/ListItemDemo.js

@@ -0,0 +1,57 @@
+import { ChevronRight, Cloud, Moon, Star, Sun } from "@tamagui/feather-icons";
+import React from "react";
+import { Group, ListItem, Separator, XStack } from "tamagui";
+function ListItemDemo() {
+  return /* @__PURE__ */ React.createElement(XStack, {
+    $sm: { flexDirection: "column" },
+    px: "$4",
+    space: true
+  }, /* @__PURE__ */ React.createElement(ListItemDemo1, null), /* @__PURE__ */ React.createElement(ListItemDemo2, null));
+}
+function ListItemDemo1() {
+  return /* @__PURE__ */ React.createElement(Group, {
+    als: "center",
+    bordered: true,
+    w: 240,
+    size: "$4",
+    vertical: true
+  }, /* @__PURE__ */ React.createElement(ListItem, {
+    hoverTheme: true,
+    icon: Star
+  }, "Star"), /* @__PURE__ */ React.createElement(ListItem, {
+    hoverTheme: true,
+    icon: Moon
+  }, "Moon"), /* @__PURE__ */ React.createElement(ListItem, {
+    hoverTheme: true,
+    icon: Sun
+  }, "Sun"), /* @__PURE__ */ React.createElement(ListItem, {
+    hoverTheme: true,
+    icon: Cloud
+  }, "Cloud"));
+}
+function ListItemDemo2() {
+  return /* @__PURE__ */ React.createElement(Group, {
+    als: "center",
+    bordered: true,
+    w: 240,
+    size: "$6",
+    vertical: true,
+    separator: /* @__PURE__ */ React.createElement(Separator, null)
+  }, /* @__PURE__ */ React.createElement(ListItem, {
+    hoverTheme: true,
+    title: "Star",
+    subTitle: "Subtitle",
+    icon: Star,
+    iconAfter: ChevronRight
+  }), /* @__PURE__ */ React.createElement(ListItem, {
+    hoverTheme: true,
+    title: "Moon",
+    subTitle: "Subtitle",
+    icon: Moon,
+    iconAfter: ChevronRight
+  }));
+}
+export {
+  ListItemDemo
+};
+//# sourceMappingURL=ListItemDemo.js.map

package/dist/esm/ListItemDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ListItemDemo.tsx"],
+  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Group, ListItem, Separator, XStack } from 'tamagui'\n\nexport function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <Group als=\"center\" bordered w={240} size=\"$4\" vertical>\n      <ListItem hoverTheme icon={Star}>\n        Star\n      </ListItem>\n      <ListItem hoverTheme icon={Moon}>\n        Moon\n      </ListItem>\n      <ListItem hoverTheme icon={Sun}>\n        Sun\n      </ListItem>\n      <ListItem hoverTheme icon={Cloud}>\n        Cloud\n      </ListItem>\n    </Group>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <Group als=\"center\" bordered w={240} size=\"$6\" vertical separator={<Separator />}>\n      <ListItem hoverTheme title=\"Star\" subTitle=\"Subtitle\" icon={Star} iconAfter={ChevronRight} />\n      <ListItem hoverTheme title=\"Moon\" subTitle=\"Subtitle\" icon={Moon} iconAfter={ChevronRight} />\n    </Group>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AACA;AAEO,wBAAwB;AAC7B,SACE,oCAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,oCAAC,mBAAc,GACf,oCAAC,mBAAc,CACjB;AAEJ;AAEA,yBAAyB;AACvB,SACE,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,KACrD,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAM,MAEjC,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAM,MAEjC,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAK,KAEhC,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAO,OAElC,CACF;AAEJ;AAEA,yBAAyB;AACvB,SACE,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,IAAC,WAAW,oCAAC,eAAU;AAAA,KAC5E,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,GAC3F,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,CAC7F;AAEJ;",
+  "names": []
+}

package/dist/esm/MenuDemo.js

@@ -0,0 +1,24 @@
+import { Menu as MenuIcon } from "@tamagui/feather-icons";
+import { Menu } from "@tamagui/menu";
+import React, { useState } from "react";
+import { Button, H4, Paragraph, YStack } from "tamagui";
+function MenuDemo() {
+  const [show, setShow] = useState(false);
+  return /* @__PURE__ */ React.createElement(Menu.Provider, null, /* @__PURE__ */ React.createElement(Menu, {
+    open: show,
+    onChangeOpen: setShow,
+    trigger: /* @__PURE__ */ React.createElement(Button, {
+      size: "$6",
+      icon: MenuIcon,
+      theme: show ? "active" : null,
+      circular: true,
+      onPress: () => setShow((x) => !x)
+    })
+  }, /* @__PURE__ */ React.createElement(Menu.Item, null, /* @__PURE__ */ React.createElement(YStack, {
+    p: "$2"
+  }, /* @__PURE__ */ React.createElement(H4, null, "Menu contents"), /* @__PURE__ */ React.createElement(Paragraph, null, "Lorem ipsum dolor sit amet.")))));
+}
+export {
+  MenuDemo
+};
+//# sourceMappingURL=MenuDemo.js.map

package/dist/esm/MenuDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/MenuDemo.tsx"],
+  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onChangeOpen={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AAEO,oBAAoB;AACzB,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,SACE,oCAAC,KAAK,UAAL,MACC,oCAAC;AAAA,IACC,MAAM;AAAA,IACN,cAAc;AAAA,IACd,SACE,oCAAC;AAAA,MACC,MAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,OAAO,WAAW;AAAA,MACzB,UAAQ;AAAA,MACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,KAClC;AAAA,KAGF,oCAAC,KAAK,MAAL,MACC,oCAAC;AAAA,IAAO,GAAE;AAAA,KACR,oCAAC,UAAG,eAAa,GACjB,oCAAC,iBAAU,6BAA2B,CACxC,CACF,CACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/esm/PopoverDemo.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { ChevronDown, ChevronLeft, ChevronRight } from "@tamagui/feather-icons";
+import React from "react";
+import { Button, Input, Label, Popover, XStack } from "tamagui";
+function PopoverDemo() {
+  return /* @__PURE__ */ React.createElement(XStack, {
+    space: "$2"
+  }, /* @__PURE__ */ React.createElement(Demo, {
+    placement: "left",
+    Icon: ChevronLeft
+  }), /* @__PURE__ */ React.createElement(Demo, {
+    placement: "bottom",
+    Icon: ChevronDown
+  }), /* @__PURE__ */ React.createElement(Demo, {
+    placement: "right",
+    Icon: ChevronRight
+  }));
+}
+function Demo(_a) {
+  var _b = _a, { Icon } = _b, props = __objRest(_b, ["Icon"]);
+  return /* @__PURE__ */ React.createElement(Popover, __spreadValues({
+    size: "$5"
+  }, props), /* @__PURE__ */ React.createElement(Popover.Trigger, null, /* @__PURE__ */ React.createElement(Button, {
+    icon: Icon
+  })), /* @__PURE__ */ React.createElement(Popover.Content, {
+    enterStyle: { x: 0, y: -10, o: 0 },
+    exitStyle: { x: 0, y: -10, o: 0 },
+    x: 0,
+    y: 0,
+    o: 1,
+    animation: "bouncy",
+    elevate: true
+  }, /* @__PURE__ */ React.createElement(Popover.Arrow, null), /* @__PURE__ */ React.createElement(XStack, {
+    space: "$3"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    size: "$3",
+    htmlFor: "name"
+  }, "Name"), /* @__PURE__ */ React.createElement(Input, {
+    size: "$3",
+    id: "name"
+  }))));
+}
+export {
+  Demo,
+  PopoverDemo
+};
+//# sourceMappingURL=PopoverDemo.js.map

package/dist/esm/PopoverDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/PopoverDemo.tsx"],
+  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\">\n      <Demo placement=\"left\" Icon={ChevronLeft} />\n      <Demo placement=\"bottom\" Icon={ChevronDown} />\n      <Demo placement=\"right\" Icon={ChevronRight} />\n    </XStack>\n  )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n      <Popover.Content\n        enterStyle={{ x: 0, y: -10, o: 0 }}\n        exitStyle={{ x: 0, y: -10, o: 0 }}\n        x={0}\n        y={0}\n        o={1}\n        animation=\"bouncy\"\n        elevate\n      >\n        <Popover.Arrow />\n\n        <XStack space=\"$3\">\n          <Label size=\"$3\" htmlFor=\"name\">\n            Name\n          </Label>\n          <Input size=\"$3\" id=\"name\" />\n        </XStack>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEO,uBAAuB;AAC5B,SACE,oCAAC;AAAA,IAAO,OAAM;AAAA,KACZ,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAO,MAAM;AAAA,GAAa,GAC1C,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAS,MAAM;AAAA,GAAa,GAC5C,oCAAC;AAAA,IAAK,WAAU;AAAA,IAAQ,MAAM;AAAA,GAAc,CAC9C;AAEJ;AAEO,cAAc,IAAmD;AAAnD,eAAE,WAAF,IAAW,kBAAX,IAAW,CAAT;AACrB,SACE,oCAAC;AAAA,IAAQ,MAAK;AAAA,KAAS,QACrB,oCAAC,QAAQ,SAAR,MACC,oCAAC;AAAA,IAAO,MAAM;AAAA,GAAM,CACtB,GACA,oCAAC,QAAQ,SAAR;AAAA,IACC,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,IACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,IAChC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,WAAU;AAAA,IACV,SAAO;AAAA,KAEP,oCAAC,QAAQ,OAAR,IAAc,GAEf,oCAAC;AAAA,IAAO,OAAM;AAAA,KACZ,oCAAC;AAAA,IAAM,MAAK;AAAA,IAAK,SAAQ;AAAA,KAAO,MAEhC,GACA,oCAAC;AAAA,IAAM,MAAK;AAAA,IAAK,IAAG;AAAA,GAAO,CAC7B,CACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/esm/ProgressDemo.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
+function ProgressDemo() {
+  const [size, setSize] = useState(4);
+  const [progress, setProgress] = useState(20);
+  const sizeProp = `$${size}`;
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(60), 1e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(YStack, {
+    h: 60,
+    ai: "center",
+    space: true
+  }, /* @__PURE__ */ React.createElement(Paragraph, {
+    h: 30,
+    o: 0.5
+  }, "Size: ", size), /* @__PURE__ */ React.createElement(Progress, {
+    size: sizeProp,
+    value: progress
+  }, /* @__PURE__ */ React.createElement(Progress.Indicator, {
+    animation: "bouncy"
+  }))), /* @__PURE__ */ React.createElement(XStack, {
+    ai: "center",
+    space: true,
+    pos: "absolute",
+    b: 10,
+    l: 20,
+    $sm: { disp: "none" }
+  }, /* @__PURE__ */ React.createElement(Slider, {
+    size: "$2",
+    w: 130,
+    defaultValue: [4],
+    min: 2,
+    max: 6,
+    step: 1,
+    onValueChange: ([val]) => {
+      setSize(val);
+    }
+  }, /* @__PURE__ */ React.createElement(Slider.Track, null, /* @__PURE__ */ React.createElement(Slider.TrackActive, null)), /* @__PURE__ */ React.createElement(Slider.Thumb, {
+    circular: true,
+    index: 0
+  })), /* @__PURE__ */ React.createElement(Button, {
+    size: "$2",
+    onPress: () => setProgress((prev) => (prev + 20) % 100)
+  }, "Load")));
+}
+export {
+  ProgressDemo
+};
+//# sourceMappingURL=ProgressDemo.js.map

package/dist/esm/ProgressDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ProgressDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b={10} l={20} $sm={{ disp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track>\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AACA;AAEO,wBAAwB;AAC7B,QAAM,CAAC,MAAM,WAAW,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,eAAe,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,0DACE,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,IAAS,OAAK;AAAA,KAC9B,oCAAC;AAAA,IAAU,GAAG;AAAA,IAAI,GAAG;AAAA,KAAK,UACjB,IACT,GACA,oCAAC;AAAA,IAAS,MAAM;AAAA,IAAU,OAAO;AAAA,KAC/B,oCAAC,SAAS,WAAT;AAAA,IAAmB,WAAU;AAAA,GAAS,CACzC,CACF,GAEA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,OAAK;AAAA,IAAC,KAAI;AAAA,IAAW,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,KAAK,EAAE,MAAM,OAAO;AAAA,KACzE,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,GAAG;AAAA,IACH,cAAc,CAAC,CAAC;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,IACN,eAAe,CAAC,CAAC,SAAS;AACxB,cAAQ,GAAG;AAAA,IACb;AAAA,KAEA,oCAAC,OAAO,OAAP,MACC,oCAAC,OAAO,aAAP,IAAmB,CACtB,GACA,oCAAC,OAAO,OAAP;AAAA,IAAa,UAAQ;AAAA,IAAC,OAAO;AAAA,GAAG,CACnC,GAEA,oCAAC;AAAA,IAAO,MAAK;AAAA,IAAK,SAAS,MAAM,YAAY,CAAC,SAAU,QAAO,MAAM,GAAG;AAAA,KAAG,MAE3E,CACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/esm/SelectDemo.js

@@ -0,0 +1,79 @@
+import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
+import React from "react";
+import { LinearGradient, Select, YStack } from "tamagui";
+function SelectDemo() {
+  return /* @__PURE__ */ React.createElement(Select, {
+    defaultValue: "apple"
+  }, /* @__PURE__ */ React.createElement(Select.Trigger, {
+    w: 200,
+    iconAfter: ChevronDown
+  }, /* @__PURE__ */ React.createElement(Select.Value, {
+    placeholder: "Something"
+  })), /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.ScrollUpButton, {
+    ai: "center",
+    jc: "center",
+    pos: "relative",
+    w: "100%",
+    h: "$3"
+  }, /* @__PURE__ */ React.createElement(YStack, {
+    zi: 10
+  }, /* @__PURE__ */ React.createElement(ChevronUp, {
+    size: 20
+  })), /* @__PURE__ */ React.createElement(LinearGradient, {
+    start: [0, 0],
+    end: [0, 1],
+    fullscreen: true,
+    colors: ["$background", "$backgroundTransparent"]
+  })), /* @__PURE__ */ React.createElement(Select.Viewport, {
+    minWidth: 200
+  }, /* @__PURE__ */ React.createElement(Select.Group, null, /* @__PURE__ */ React.createElement(Select.Label, null, "Fruits"), items.map((item, i) => {
+    return /* @__PURE__ */ React.createElement(Select.Item, {
+      index: i,
+      key: item.name,
+      value: item.name.toLowerCase()
+    }, /* @__PURE__ */ React.createElement(Select.ItemText, null, item.name));
+  }))), /* @__PURE__ */ React.createElement(Select.ScrollDownButton, {
+    ai: "center",
+    jc: "center",
+    pos: "relative",
+    w: "100%",
+    h: "$3"
+  }, /* @__PURE__ */ React.createElement(YStack, {
+    zi: 10
+  }, /* @__PURE__ */ React.createElement(ChevronDown, {
+    size: 20
+  })), /* @__PURE__ */ React.createElement(LinearGradient, {
+    start: [0, 0],
+    end: [0, 1],
+    fullscreen: true,
+    colors: ["$backgroundTransparent", "$background"]
+  }))));
+}
+const items = [
+  { name: "Apple" },
+  { name: "Pear" },
+  { name: "Blackberry" },
+  { name: "Peach" },
+  { name: "Apricot" },
+  { name: "Melon" },
+  { name: "Honeydew" },
+  { name: "Starfruit" },
+  { name: "Blueberry" },
+  { name: "Rasberry" },
+  { name: "Strawberry" },
+  { name: "Mango" },
+  { name: "Pineapple" },
+  { name: "Lime" },
+  { name: "Lemon" },
+  { name: "Coconut" },
+  { name: "Guava" },
+  { name: "Papaya" },
+  { name: "Orange" },
+  { name: "Grape" },
+  { name: "Jackfruit" },
+  { name: "Durian" }
+];
+export {
+  SelectDemo
+};
+//# sourceMappingURL=SelectDemo.js.map

package/dist/esm/SelectDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectDemo.tsx"],
+  "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { LinearGradient, Select, Text, YStack } from 'tamagui'\n\nexport function SelectDemo() {\n  return (\n    <Select defaultValue=\"apple\">\n      <Select.Trigger w={200} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Select.Content>\n        <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group>\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Rasberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
+  "mappings": "AAAA;AACA;AACA;AAEO,sBAAsB;AAC3B,SACE,oCAAC;AAAA,IAAO,cAAa;AAAA,KACnB,oCAAC,OAAO,SAAP;AAAA,IAAe,GAAG;AAAA,IAAK,WAAW;AAAA,KACjC,oCAAC,OAAO,OAAP;AAAA,IAAa,aAAY;AAAA,GAAY,CACxC,GAEA,oCAAC,OAAO,SAAP,MACC,oCAAC,OAAO,gBAAP;AAAA,IAAsB,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,KAAI;AAAA,IAAW,GAAE;AAAA,IAAO,GAAE;AAAA,KACvE,oCAAC;AAAA,IAAO,IAAI;AAAA,KACV,oCAAC;AAAA,IAAU,MAAM;AAAA,GAAI,CACvB,GACA,oCAAC;AAAA,IACC,OAAO,CAAC,GAAG,CAAC;AAAA,IACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACV,YAAU;AAAA,IACV,QAAQ,CAAC,eAAe,wBAAwB;AAAA,GAClD,CACF,GAEA,oCAAC,OAAO,UAAP;AAAA,IAAgB,UAAU;AAAA,KACzB,oCAAC,OAAO,OAAP,MACC,oCAAC,OAAO,OAAP,MAAa,QAAM,GACnB,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,WACE,oCAAC,OAAO,MAAP;AAAA,MAAY,OAAO;AAAA,MAAG,KAAK,KAAK;AAAA,MAAM,OAAO,KAAK,KAAK,YAAY;AAAA,OAClE,oCAAC,OAAO,UAAP,MAAiB,KAAK,IAAK,CAC9B;AAAA,EAEJ,CAAC,CACH,CACF,GAEA,oCAAC,OAAO,kBAAP;AAAA,IAAwB,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,KAAI;AAAA,IAAW,GAAE;AAAA,IAAO,GAAE;AAAA,KACzE,oCAAC;AAAA,IAAO,IAAI;AAAA,KACV,oCAAC;AAAA,IAAY,MAAM;AAAA,GAAI,CACzB,GACA,oCAAC;AAAA,IACC,OAAO,CAAC,GAAG,CAAC;AAAA,IACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACV,YAAU;AAAA,IACV,QAAQ,CAAC,0BAA0B,aAAa;AAAA,GAClD,CACF,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,SAAS;AACnB;",
+  "names": []
+}

package/dist/esm/SeparatorDemo.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Paragraph, Separator, XStack, YStack } from "tamagui";
+function SeparatorDemo() {
+  return /* @__PURE__ */ React.createElement(YStack, {
+    w: "100%",
+    maw: 300,
+    mx: 15
+  }, /* @__PURE__ */ React.createElement(Paragraph, {
+    fontWeight: "800"
+  }, "Tamagui"), /* @__PURE__ */ React.createElement(Paragraph, null, "A cross-platform component library."), /* @__PURE__ */ React.createElement(Separator, {
+    my: 15
+  }), /* @__PURE__ */ React.createElement(XStack, {
+    h: 20,
+    ai: "center"
+  }, /* @__PURE__ */ React.createElement(Paragraph, null, "Blog"), /* @__PURE__ */ React.createElement(Separator, {
+    als: "stretch",
+    vertical: true,
+    mx: 15
+  }), /* @__PURE__ */ React.createElement(Paragraph, null, "Docs"), /* @__PURE__ */ React.createElement(Separator, {
+    als: "stretch",
+    vertical: true,
+    mx: 15
+  }), /* @__PURE__ */ React.createElement(Paragraph, null, "Source")));
+}
+export {
+  SeparatorDemo
+};
+//# sourceMappingURL=SeparatorDemo.js.map

package/dist/esm/SeparatorDemo.js.map

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

package/dist/esm/ShapesDemo.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Circle, Square, XStack } from "tamagui";
+function ShapesDemo() {
+  return /* @__PURE__ */ React.createElement(XStack, {
+    p: "$2",
+    space: "$4"
+  }, /* @__PURE__ */ React.createElement(Square, {
+    size: 100,
+    bc: "$color",
+    elevation: "$4"
+  }), /* @__PURE__ */ React.createElement(Circle, {
+    size: 100,
+    bc: "$color",
+    elevation: "$4"
+  }));
+}
+export {
+  ShapesDemo
+};
+//# sourceMappingURL=ShapesDemo.js.map

package/dist/esm/ShapesDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ShapesDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Circle, Square, XStack } from 'tamagui'\n\nexport function ShapesDemo() {\n  return (\n    <XStack p=\"$2\" space=\"$4\">\n      <Square size={100} bc=\"$color\" elevation=\"$4\" />\n      <Circle size={100} bc=\"$color\" elevation=\"$4\" />\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AAEO,sBAAsB;AAC3B,SACE,oCAAC;AAAA,IAAO,GAAE;AAAA,IAAK,OAAM;AAAA,KACnB,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAK,IAAG;AAAA,IAAS,WAAU;AAAA,GAAK,GAC9C,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAK,IAAG;AAAA,IAAS,WAAU;AAAA,GAAK,CAChD;AAEJ;",
+  "names": []
+}

package/dist/esm/SheetDemo.js

@@ -0,0 +1,26 @@
+import { ChevronDown } from "@tamagui/feather-icons";
+import { Drawer } from "@tamagui/sheet";
+import React, { useState } from "react";
+import { Button } from "tamagui";
+const SheetDemo = () => {
+  const [position, setPosition] = useState(0);
+  return /* @__PURE__ */ React.createElement(Drawer, {
+    snapPoints: [80, 10],
+    position,
+    onChangePosition: setPosition
+  }, /* @__PURE__ */ React.createElement(Drawer.Backdrop, null), /* @__PURE__ */ React.createElement(Drawer.Frame, {
+    ai: "center",
+    jc: "center"
+  }, /* @__PURE__ */ React.createElement(Drawer.Handle, null), /* @__PURE__ */ React.createElement(Button, {
+    size: "$6",
+    circular: true,
+    icon: ChevronDown,
+    onPress: () => {
+      setPosition(1);
+    }
+  })));
+};
+export {
+  SheetDemo
+};
+//# sourceMappingURL=SheetDemo.js.map

package/dist/esm/SheetDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SheetDemo.tsx"],
+  "sourcesContent": ["import { ChevronDown } from '@tamagui/feather-icons'\nimport { Drawer } from '@tamagui/sheet'\nimport React, { useState } from 'react'\nimport { Button } from 'tamagui'\n\nexport const SheetDemo = () => {\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,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,eAAe,SAAS,CAAC;AAE1C,SACE,oCAAC;AAAA,IAAO,YAAY,CAAC,IAAI,EAAE;AAAA,IAAG;AAAA,IAAoB,kBAAkB;AAAA,KAClE,oCAAC,OAAO,UAAP,IAAgB,GACjB,oCAAC,OAAO,OAAP;AAAA,IAAa,IAAG;AAAA,IAAS,IAAG;AAAA,KAC3B,oCAAC,OAAO,QAAP,IAAc,GACf,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS,MAAM;AACb,kBAAY,CAAC;AAAA,IACf;AAAA,GACF,CACF,CACF;AAEJ;",
+  "names": []
+}