@tamagui/demos 1.2.9 → 1.2.10

package/dist/jsx/GroupDemo.mjs

@@ -0,0 +1,24 @@
+import { Activity, Airplay } from "@tamagui/lucide-icons";
+import { Button, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
+function GroupDemo() {
+  return <YStack p="$3" space="$2" ai="center">
+    <XGroup>
+      <Button>First</Button>
+      <Button>Second</Button>
+      <Button>Third</Button>
+    </XGroup>
+    <XGroup size="$3" $gtSm={{ size: "$5" }}>
+      <Button size="$3" icon={Activity}>First</Button>
+      <Button size="$3" icon={Airplay}>Second</Button>
+    </XGroup>
+    <YGroup separator={<Separator />}>
+      <ListItem title="First" />
+      <ListItem title="Second" subTitle="Second subtitle" />
+      <ListItem>Third</ListItem>
+    </YGroup>
+  </YStack>;
+}
+export {
+  GroupDemo
+};
+//# sourceMappingURL=GroupDemo.mjs.map

package/dist/jsx/GroupDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/GroupDemo.tsx"],
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n      <XGroup>\n        <Button>First</Button>\n        <Button>Second</Button>\n        <Button>Third</Button>\n      </XGroup>\n\n      {/* responsive + size */}\n      <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n        <Button size=\"$3\" icon={Activity}>\n          First\n        </Button>\n        <Button size=\"$3\" icon={Airplay}>\n          Second\n        </Button>\n      </XGroup>\n\n      <YGroup separator={<Separator />}>\n        <ListItem title=\"First\" />\n        <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n        <ListItem>Third</ListItem>\n      </YGroup>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAE7D,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG;AAAA,IAC3B,CAAC;AAAA,MACC,CAAC,OAAO,KAAK,EAAZ;AAAA,MACD,CAAC,OAAO,MAAM,EAAb;AAAA,MACD,CAAC,OAAO,KAAK,EAAZ;AAAA,IACH,EAJC;AAAA,IAOD,CAAC,OAAO,KAAK,KAAK,OAAO,EAAE,MAAM,KAAK;AAAA,MACpC,CAAC,OAAO,KAAK,KAAK,MAAM,UAAU,KAElC,EAFC;AAAA,MAGD,CAAC,OAAO,KAAK,KAAK,MAAM,SAAS,MAEjC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,WAAW,CAAC,UAAU;AAAA,MAC5B,CAAC,SAAS,MAAM,QAAQ;AAAA,MACxB,CAAC,SAAS,MAAM,SAAS,SAAS,kBAAkB;AAAA,MACpD,CAAC,SAAS,KAAK,EAAd;AAAA,IACH,EAJC;AAAA,EAKH,EAtBC;AAwBL;",
+  "names": []
+}

package/dist/jsx/HeadingsDemo.mjs

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

package/dist/jsx/HeadingsDemo.mjs.map

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

package/dist/jsx/ImageDemo.mjs

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

package/dist/jsx/ImageDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ImageDemo.tsx"],
+  "sourcesContent": ["import { Image } from 'tamagui'\n\nexport function ImageDemo() {\n  return <Image src=\"https://placekitten.com/200/300\" width={200} height={300} />\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAEf,SAAS,YAAY;AAC1B,SAAO,CAAC,MAAM,IAAI,kCAAkC,OAAO,KAAK,QAAQ,KAAK;AAC/E;",
+  "names": []
+}

package/dist/jsx/LabelDemo.mjs

@@ -0,0 +1,17 @@
+import { Input, Label, Switch, XStack, YStack } from "tamagui";
+function LabelDemo() {
+  return <YStack p="$3" miw={300} space="$4">
+    <XStack ai="center" space="$4">
+      <Label w={90} htmlFor="name">Name</Label>
+      <Input f={1} id="name" defaultValue="Nate Wienert" />
+    </XStack>
+    <XStack ai="center" space="$4">
+      <Label w={90} htmlFor="notify">Notifications</Label>
+      <Switch id="notify"><Switch.Thumb animation="quick" /></Switch>
+    </XStack>
+  </YStack>;
+}
+export {
+  LabelDemo
+};
+//# sourceMappingURL=LabelDemo.mjs.map

package/dist/jsx/LabelDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/LabelDemo.tsx"],
+  "sourcesContent": ["import { Input, Label, Switch, XStack, YStack } from 'tamagui'\n\nexport function LabelDemo() {\n  return (\n    <YStack p=\"$3\" miw={300} space=\"$4\">\n      <XStack ai=\"center\" space=\"$4\">\n        <Label w={90} htmlFor=\"name\">\n          Name\n        </Label>\n        <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n      </XStack>\n\n      <XStack ai=\"center\" space=\"$4\">\n        <Label w={90} htmlFor=\"notify\">\n          Notifications\n        </Label>\n        <Switch id=\"notify\">\n          <Switch.Thumb animation=\"quick\" />\n        </Switch>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,EAAE,KAAK,KAAK,KAAK,MAAM;AAAA,IAC7B,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,MAAM,GAAG,IAAI,QAAQ,OAAO,IAE7B,EAFC;AAAA,MAGD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,IACrD,EALC;AAAA,IAOD,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,MAAM,GAAG,IAAI,QAAQ,SAAS,aAE/B,EAFC;AAAA,MAGD,CAAC,OAAO,GAAG,SACT,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,IAGH,EAPC;AAAA,EAQH,EAhBC;AAkBL;",
+  "names": []
+}

package/dist/jsx/LinearGradientDemo.mjs

@@ -0,0 +1,26 @@
+import { XStack } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+function LinearGradientDemo() {
+  return <XStack space>
+    <LinearGradient
+      width="$6"
+      height="$6"
+      br="$4"
+      colors={["$red10", "$yellow10"]}
+      start={[0, 1]}
+      end={[0, 0]}
+    />
+    <LinearGradient
+      width="$6"
+      height="$6"
+      br="$4"
+      colors={["$background", "$color"]}
+      start={[1, 1]}
+      end={[0, 0]}
+    />
+  </XStack>;
+}
+export {
+  LinearGradientDemo
+};
+//# sourceMappingURL=LinearGradientDemo.mjs.map

package/dist/jsx/LinearGradientDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/LinearGradientDemo.tsx"],
+  "sourcesContent": ["import { XStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function LinearGradientDemo() {\n  return (\n    <XStack space>\n      {/* tokens */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        br=\"$4\"\n        colors={['$red10', '$yellow10']}\n        start={[0, 1]}\n        end={[0, 0]}\n      />\n\n      {/* theme values */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        br=\"$4\"\n        colors={['$background', '$color']}\n        start={[1, 1]}\n        end={[0, 0]}\n      />\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,CAAC,OAAO;AAAA,IAEN,CAAC;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,GAAG;AAAA,MACH,QAAQ,CAAC,UAAU,WAAW;AAAA,MAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,MACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACZ;AAAA,IAGA,CAAC;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,GAAG;AAAA,MACH,QAAQ,CAAC,eAAe,QAAQ;AAAA,MAChC,OAAO,CAAC,GAAG,CAAC;AAAA,MACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACZ;AAAA,EACF,EApBC;AAsBL;",
+  "names": []
+}

package/dist/jsx/ListItemDemo.mjs

@@ -0,0 +1,40 @@
+import { ChevronRight, Cloud, Moon, Star, Sun } from "@tamagui/lucide-icons";
+import { ListItem, Separator, XStack, YGroup } from "tamagui";
+function ListItemDemo() {
+  return <XStack $sm={{ flexDirection: "column" }} px="$4" space>
+    <ListItemDemo1 />
+    <ListItemDemo2 />
+  </XStack>;
+}
+function ListItemDemo1() {
+  return <YGroup als="center" bordered w={240} size="$4">
+    <ListItem hoverTheme icon={Star} title="Star" subTitle="Twinkles" />
+    <ListItem hoverTheme icon={Moon}>Moon</ListItem>
+    <ListItem hoverTheme icon={Sun}>Sun</ListItem>
+    <ListItem hoverTheme icon={Cloud}>Cloud</ListItem>
+  </YGroup>;
+}
+function ListItemDemo2() {
+  return <YGroup als="center" bordered w={240} size="$5" separator={<Separator />}>
+    <ListItem
+      hoverTheme
+      pressTheme
+      title="Star"
+      subTitle="Subtitle"
+      icon={Star}
+      iconAfter={ChevronRight}
+    />
+    <ListItem
+      hoverTheme
+      pressTheme
+      title="Moon"
+      subTitle="Subtitle"
+      icon={Moon}
+      iconAfter={ChevronRight}
+    />
+  </YGroup>;
+}
+export {
+  ListItemDemo
+};
+//# sourceMappingURL=ListItemDemo.mjs.map

package/dist/jsx/ListItemDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ListItemDemo.tsx"],
+  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { ListItem, Separator, XStack, YGroup } 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    <YGroup als=\"center\" bordered w={240} size=\"$4\">\n      <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\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    </YGroup>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n      <ListItem\n        hoverTheme\n        pressTheme\n        title=\"Star\"\n        subTitle=\"Subtitle\"\n        icon={Star}\n        iconAfter={ChevronRight}\n      />\n      <ListItem\n        hoverTheme\n        pressTheme\n        title=\"Moon\"\n        subTitle=\"Subtitle\"\n        icon={Moon}\n        iconAfter={ChevronRight}\n      />\n    </YGroup>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AAErD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,GAAG,KAAK;AAAA,IAChD,CAAC,cAAc;AAAA,IACf,CAAC,cAAc;AAAA,EACjB,EAHC;AAKL;AAEA,SAAS,gBAAgB;AACvB,SACE,CAAC,OAAO,IAAI,SAAS,SAAS,GAAG,KAAK,KAAK;AAAA,IACzC,CAAC,SAAS,WAAW,MAAM,MAAM,MAAM,OAAO,SAAS,WAAW;AAAA,IAClE,CAAC,SAAS,WAAW,MAAM,MAAM,IAEjC,EAFC;AAAA,IAGD,CAAC,SAAS,WAAW,MAAM,KAAK,GAEhC,EAFC;AAAA,IAGD,CAAC,SAAS,WAAW,MAAM,OAAO,KAElC,EAFC;AAAA,EAGH,EAXC;AAaL;AAEA,SAAS,gBAAgB;AACvB,SACE,CAAC,OAAO,IAAI,SAAS,SAAS,GAAG,KAAK,KAAK,KAAK,WAAW,CAAC,UAAU;AAAA,IACpE,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACb;AAAA,IACA,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACb;AAAA,EACF,EAjBC;AAmBL;",
+  "names": []
+}

package/dist/jsx/LucideIconsDemo.mjs

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

package/dist/jsx/LucideIconsDemo.mjs.map

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

package/dist/jsx/PopoverDemo.mjs

@@ -0,0 +1,67 @@
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Input,
+  Label,
+  Popover,
+  XStack,
+  YGroup
+} from "tamagui";
+function PopoverDemo() {
+  return <XStack space="$2" f={1} jc="center" ai="center">
+    <Demo placement="left" Icon={ChevronLeft} Name="left-popover" />
+    <Demo placement="bottom" Icon={ChevronDown} Name="bottom-popover" />
+    <Demo placement="top" Icon={ChevronUp} Name="top-popover" />
+    <Demo placement="right" Icon={ChevronRight} Name="right-popover" />
+  </XStack>;
+}
+function Demo({
+  Icon,
+  Name,
+  ...props
+}) {
+  return <Popover size="$5" {...props}>
+    <Popover.Trigger asChild><Button icon={Icon} /></Popover.Trigger>
+    <Adapt when="sm" platform="web"><Popover.Sheet modal dismissOnSnapToBottom>
+      <Popover.Sheet.Frame padding="$4"><Adapt.Contents /></Popover.Sheet.Frame>
+      <Popover.Sheet.Overlay />
+    </Popover.Sheet></Adapt>
+    <Popover.Content
+      bw={1}
+      boc="$borderColor"
+      enterStyle={{ x: 0, y: -10, o: 0 }}
+      exitStyle={{ x: 0, y: -10, o: 0 }}
+      x={0}
+      y={0}
+      o={1}
+      animation={[
+        "quick",
+        {
+          opacity: {
+            overshootClamping: true
+          }
+        }
+      ]}
+      elevate
+    >
+      <Popover.Arrow bw={1} boc="$borderColor" />
+      <YGroup space="$3">
+        <XStack space="$3">
+          <Label size="$3" htmlFor={Name}>Name</Label>
+          <Input size="$3" id={Name} />
+        </XStack>
+        <Popover.Close asChild><Button
+          size="$3"
+          onPress={() => {
+          }}
+        >Submit</Button></Popover.Close>
+      </YGroup>
+    </Popover.Content>
+  </Popover>;
+}
+export {
+  Demo,
+  PopoverDemo
+};
+//# sourceMappingURL=PopoverDemo.mjs.map

package/dist/jsx/PopoverDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/PopoverDemo.tsx"],
+  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Input,\n  Label,\n  Popover,\n  PopoverProps,\n  XStack,\n  YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n      <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n      <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n      <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n      <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n    </XStack>\n  )\n}\n\nexport function Demo({\n  Icon,\n  Name,\n  ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger asChild>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n\n      <Adapt when=\"sm\" platform=\"web\">\n        <Popover.Sheet modal dismissOnSnapToBottom>\n          <Popover.Sheet.Frame padding=\"$4\">\n            <Adapt.Contents />\n          </Popover.Sheet.Frame>\n          <Popover.Sheet.Overlay />\n        </Popover.Sheet>\n      </Adapt>\n\n      <Popover.Content\n        bw={1}\n        boc=\"$borderColor\"\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={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <XStack space=\"$3\">\n            <Label size=\"$3\" htmlFor={Name}>\n              Name\n            </Label>\n            <Input size=\"$3\" id={Name} />\n          </XStack>\n          <Popover.Close asChild>\n            <Button\n              size=\"$3\"\n              onPress={() => {\n                /* Custom code goes here, does not interfere with popover closure */\n              }}\n            >\n              Submit\n            </Button>\n          </Popover.Close>\n        </YGroup>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,MAAM,KAAK,GAAG,GAAG,GAAG,SAAS,GAAG;AAAA,IACtC,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa,KAAK,eAAe;AAAA,IAC9D,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa,KAAK,iBAAiB;AAAA,IAClE,CAAC,KAAK,UAAU,MAAM,MAAM,WAAW,KAAK,cAAc;AAAA,IAC1D,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc,KAAK,gBAAgB;AAAA,EACnE,EALC;AAOL;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,CAAC,QAAQ,KAAK,SAAS;AAAA,IACrB,CAAC,QAAQ,QAAQ,QACf,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAIT,CAAC,MAAM,KAAK,KAAK,SAAS,MACxB,CAAC,QAAQ,MAAM,MAAM;AAAA,MACnB,CAAC,QAAQ,MAAM,MAAM,QAAQ,KAC3B,CAAC,MAAM,SAAS,EAClB,EAFC,QAAQ,MAAM;AAAA,MAGf,CAAC,QAAQ,MAAM,QAAQ;AAAA,IACzB,EALC,QAAQ,MAMX,EAPC;AAAA,IASD,CAAC,QAAQ;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,MACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,MAChC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA;AAAA,MAEA,CAAC,QAAQ,MAAM,IAAI,GAAG,IAAI,eAAe;AAAA,MAEzC,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,OAAO,MAAM;AAAA,UACZ,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,IAEhC,EAFC;AAAA,UAGD,CAAC,MAAM,KAAK,KAAK,IAAI,MAAM;AAAA,QAC7B,EALC;AAAA,QAMD,CAAC,QAAQ,MAAM,QACb,CAAC;AAAA,UACC,KAAK;AAAA,UACL,SAAS,MAAM;AAAA,UAEf;AAAA,SACD,MAED,EAPC,OAQH,EATC,QAAQ;AAAA,MAUX,EAjBC;AAAA,IAkBH,EAtCC,QAAQ;AAAA,EAuCX,EArDC;AAuDL;",
+  "names": []
+}

package/dist/jsx/ProgressDemo.mjs

@@ -0,0 +1,50 @@
+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 <>
+    <YStack h={60} ai="center" space>
+      <Paragraph h={30} o={0.5}>
+        {"Size: "}
+        {size}
+      </Paragraph>
+      <Progress size={sizeProp} value={progress}><Progress.Indicator animation="bouncy" /></Progress>
+    </YStack>
+    <XStack ai="center" space pos="absolute" b={10} l={20} $xxs={{ dsp: "none" }}>
+      <Slider
+        size="$2"
+        w={130}
+        defaultValue={[4]}
+        min={2}
+        max={6}
+        step={1}
+        onValueChange={([val]) => {
+          setSize(val);
+        }}
+      >
+        <Slider.Track><Slider.TrackActive /></Slider.Track>
+        <Slider.Thumb circular index={0} />
+      </Slider>
+      <Button size="$2" onPress={() => setProgress((prev) => (prev + 20) % 100)}>Load</Button>
+    </XStack>
+  </>;
+}
+export {
+  ProgressDemo
+};
+//# sourceMappingURL=ProgressDemo.mjs.map

package/dist/jsx/ProgressDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ProgressDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { useEffect, useState } from 'react'\nimport {\n  Button,\n  Paragraph,\n  Progress,\n  SizeTokens,\n  Slider,\n  XStack,\n  YStack,\n} 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} $xxs={{ dsp: '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": "AACA,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,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;AAAA,IACE,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS;AAAA,MACzB,CAAC,UAAU,GAAG,IAAI,GAAG;AAAA,SAAK;AAAA,SACjB;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,GAAG,IAAI,GAAG,IAAI,MAAM,EAAE,KAAK,OAAO;AAAA,MACzE,CAAC;AAAA,QACC,KAAK;AAAA,QACL,GAAG;AAAA,QACH,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
+  "names": []
+}

package/dist/jsx/ScrollViewDemo.mjs

@@ -0,0 +1,17 @@
+import { Circle, ScrollView, Square, XStack } from "tamagui";
+function ScrollViewDemo() {
+  return <ScrollView maxHeight={250} w="75%" bc="$background" p="$4" br="$4"><XStack flexWrap="wrap" ai="center" jc="center">
+    <Square m="$4" size={120} bc="$red9" />
+    <Circle m="$4" size={120} bc="$orange9" />
+    <Square m="$4" size={120} bc="$yellow9" />
+    <Circle m="$4" size={120} bc="$green9" />
+    <Square m="$4" size={120} bc="$blue9" />
+    <Circle m="$4" size={120} bc="$purple9" />
+    <Square m="$4" size={120} bc="$pink9" />
+    <Circle m="$4" size={120} bc="$red9" />
+  </XStack></ScrollView>;
+}
+export {
+  ScrollViewDemo
+};
+//# sourceMappingURL=ScrollViewDemo.mjs.map

package/dist/jsx/ScrollViewDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ScrollViewDemo.tsx"],
+  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} w=\"75%\" bc=\"$background\" p=\"$4\" br=\"$4\">\n      <XStack flexWrap=\"wrap\" ai=\"center\" jc=\"center\">\n        <Square m=\"$4\" size={120} bc=\"$red9\" />\n        <Circle m=\"$4\" size={120} bc=\"$orange9\" />\n        <Square m=\"$4\" size={120} bc=\"$yellow9\" />\n        <Circle m=\"$4\" size={120} bc=\"$green9\" />\n        <Square m=\"$4\" size={120} bc=\"$blue9\" />\n        <Circle m=\"$4\" size={120} bc=\"$purple9\" />\n        <Square m=\"$4\" size={120} bc=\"$pink9\" />\n        <Circle m=\"$4\" size={120} bc=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,WAAW,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE,KAAK,GAAG,KAC7D,CAAC,OAAO,SAAS,OAAO,GAAG,SAAS,GAAG;AAAA,IACrC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,QAAQ;AAAA,IACrC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,UAAU;AAAA,IACvC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,SAAS;AAAA,IACtC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,WAAW;AAAA,IACxC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,SAAS;AAAA,IACtC,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG,QAAQ;AAAA,EACvC,EATC,OAUH,EAXC;AAaL;",
+  "names": []
+}

package/dist/jsx/SelectDemo.mjs

@@ -0,0 +1,73 @@
+import { Check, ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
+import { useState } from "react";
+import { Adapt, Select, Sheet, YStack } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+function SelectDemo() {
+  const [val, setVal] = useState("apple");
+  return <Select id="food" value={val} onValueChange={setVal}>
+    <Select.Trigger w={180} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
+    <Adapt when="sm" platform="touch"><Sheet modal dismissOnSnapToBottom>
+      <Sheet.Frame><Sheet.ScrollView><Adapt.Contents /></Sheet.ScrollView></Sheet.Frame>
+      <Sheet.Overlay />
+    </Sheet></Adapt>
+    <Select.Content zIndex={2e5}>
+      <Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
+        <YStack zi={10}><ChevronUp size={20} /></YStack>
+        <LinearGradient
+          start={[0, 0]}
+          end={[0, 1]}
+          fullscreen
+          colors={["$background", "$backgroundTransparent"]}
+          br="$4"
+        />
+      </Select.ScrollUpButton>
+      <Select.Viewport minWidth={200}><Select.Group space="$-0">
+        <Select.Label>Fruits</Select.Label>
+        {items.map((item, i) => {
+          return <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
+            <Select.ItemText>{item.name}</Select.ItemText>
+            <Select.ItemIndicator ml="auto"><Check size={16} /></Select.ItemIndicator>
+          </Select.Item>;
+        })}
+      </Select.Group></Select.Viewport>
+      <Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
+        <YStack zi={10}><ChevronDown size={20} /></YStack>
+        <LinearGradient
+          start={[0, 0]}
+          end={[0, 1]}
+          fullscreen
+          colors={["$backgroundTransparent", "$background"]}
+          br="$4"
+        />
+      </Select.ScrollDownButton>
+    </Select.Content>
+  </Select>;
+}
+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.mjs.map

package/dist/jsx/SelectDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectDemo.tsx"],
+  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger w={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\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            br=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$-0\">\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.ItemIndicator ml=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\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            br=\"$4\"\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": "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",
+  "names": []
+}

package/dist/jsx/SeparatorDemo.mjs

@@ -0,0 +1,19 @@
+import { Paragraph, Separator, XStack, YStack } from "tamagui";
+function SeparatorDemo() {
+  return <YStack w="100%" maw={300} mx={15}>
+    <Paragraph fontWeight="800">Tamagui</Paragraph>
+    <Paragraph>A cross-platform component library.</Paragraph>
+    <Separator my={15} />
+    <XStack h={20} ai="center">
+      <Paragraph>Blog</Paragraph>
+      <Separator als="stretch" vertical mx={15} />
+      <Paragraph>Docs</Paragraph>
+      <Separator als="stretch" vertical mx={15} />
+      <Paragraph>Source</Paragraph>
+    </XStack>
+  </YStack>;
+}
+export {
+  SeparatorDemo
+};
+//# sourceMappingURL=SeparatorDemo.mjs.map

package/dist/jsx/SeparatorDemo.mjs.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": "AACA,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,IAAI;AAAA,IAC7B,CAAC,UAAU,WAAW,MAAM,OAAO,EAAlC;AAAA,IACD,CAAC,UAAU,mCAAmC,EAA7C;AAAA,IACD,CAAC,UAAU,IAAI,IAAI;AAAA,IACnB,CAAC,OAAO,GAAG,IAAI,GAAG;AAAA,MAChB,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,IAAI,UAAU,SAAS,IAAI,IAAI;AAAA,MAC1C,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,IAAI,UAAU,SAAS,IAAI,IAAI;AAAA,MAC1C,CAAC,UAAU,MAAM,EAAhB;AAAA,IACH,EANC;AAAA,EAOH,EAXC;AAaL;",
+  "names": []
+}

package/dist/jsx/ShapesDemo.mjs

@@ -0,0 +1,11 @@
+import { Circle, Square, XStack } from "tamagui";
+function ShapesDemo() {
+  return <XStack p="$2" space="$4">
+    <Square size={100} bc="$color" elevation="$4" />
+    <Circle size={100} bc="$color" elevation="$4" />
+  </XStack>;
+}
+export {
+  ShapesDemo
+};
+//# sourceMappingURL=ShapesDemo.mjs.map

package/dist/jsx/ShapesDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ShapesDemo.tsx"],
+  "sourcesContent": ["import { 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,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM;AAAA,IACnB,CAAC,OAAO,MAAM,KAAK,GAAG,SAAS,UAAU,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,KAAK,GAAG,SAAS,UAAU,KAAK;AAAA,EAChD,EAHC;AAKL;",
+  "names": []
+}

package/dist/jsx/SheetDemo.mjs

@@ -0,0 +1,64 @@
+import { ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
+import { Sheet } from "@tamagui/sheet";
+import { useState } from "react";
+import { Button, H1, H2, Paragraph, XStack } from "tamagui";
+const SheetDemo = () => {
+  const [position, setPosition] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [modal, setModal] = useState(false);
+  const [innerOpen, setInnerOpen] = useState(false);
+  return <>
+    <XStack space>
+      <Button onPress={() => setOpen(true)}>Open</Button>
+      <Button onPress={() => setModal((x) => !x)}>{modal ? "Type: Modal" : "Type: Inline"}</Button>
+    </XStack>
+    <Sheet
+      forceRemoveScrollEnabled={open}
+      modal={modal}
+      open={open}
+      onOpenChange={setOpen}
+      snapPoints={[85, 50, 25]}
+      dismissOnSnapToBottom
+      position={position}
+      onPositionChange={setPosition}
+      zIndex={1e5}
+    >
+      <Sheet.Overlay />
+      <Sheet.Handle />
+      <Sheet.Frame f={1} p="$4" jc="center" ai="center" space="$5">
+        <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
+        {modal && <>
+          <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
+          <Button
+            size="$6"
+            circular
+            icon={ChevronUp}
+            onPress={() => setInnerOpen(true)}
+          />
+        </>}
+      </Sheet.Frame>
+    </Sheet>
+  </>;
+};
+function InnerSheet(props) {
+  return <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
+    <Sheet.Overlay />
+    <Sheet.Handle />
+    <Sheet.Frame f={1} jc="center" ai="center" space="$5"><Sheet.ScrollView p="$4" space>
+      <Button
+        size="$8"
+        circular
+        als="center"
+        icon={ChevronDown}
+        onPress={() => props.onOpenChange?.(false)}
+      />
+      <H1>Hello world</H1>
+      <H2>You can scroll me</H2>
+      {[1, 2, 3].map((i) => <Paragraph key={i} size="$10">Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.</Paragraph>)}
+    </Sheet.ScrollView></Sheet.Frame>
+  </Sheet>;
+}
+export {
+  SheetDemo
+};
+//# sourceMappingURL=SheetDemo.mjs.map