@tamagui/demos 1.0.1-beta.100

package/dist/jsx/KitchenSink.js

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

package/dist/jsx/LabelDemo.js

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

package/dist/jsx/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": "AACA;AAEO,qBAAqB;AAC1B,SACE,CAAC,OAAO,KAAK,KAAK,EAAE,KAAK,MAAM;AAAA,IAC7B,CAAC,MAAM,QAAQ,OAAO,IAAI,EAAzB;AAAA,IACD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,EACrD,EAHC;AAKL;",
+  "names": []
+}

package/dist/jsx/LinearGradientDemo.js

@@ -0,0 +1,8 @@
+import { LinearGradient } from "tamagui";
+function LinearGradientDemo() {
+  return <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/jsx/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": "AACA;AAEO,8BAA8B;AACnC,SACE,CAAC,eACC,IAAI,SACJ,OAAO,KACP,QAAQ,KACR,QAAQ,CAAC,UAAU,WAAW,GAC9B,OAAO,CAAC,GAAG,CAAC,GACZ,GAAG,KACH,KAAK,CAAC,GAAG,CAAC,GACZ;AAEJ;",
+  "names": []
+}

package/dist/jsx/ListItemDemo.js

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

package/dist/jsx/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;AAEA;AAEO,wBAAwB;AAC7B,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,GAAG,KAAK;AAAA,IAChD,CAAC,cAAc;AAAA,IACf,CAAC,cAAc;AAAA,EACjB,EAHC;AAKL;AAEA,yBAAyB;AACvB,SACE,CAAC,MAAM,IAAI,SAAS,SAAS,GAAG,KAAK,KAAK,KAAK;AAAA,IAC7C,CAAC,SAAS,WAAW,MAAM,MAAM,IAEjC,EAFC;AAAA,IAGD,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,EAbC;AAeL;AAEA,yBAAyB;AACvB,SACE,CAAC,MAAM,IAAI,SAAS,SAAS,GAAG,KAAK,KAAK,KAAK,SAAS,WAAW,CAAC,UAAU;AAAA,IAC5E,CAAC,SAAS,WAAW,MAAM,OAAO,SAAS,WAAW,MAAM,MAAM,WAAW,cAAc;AAAA,IAC3F,CAAC,SAAS,WAAW,MAAM,OAAO,SAAS,WAAW,MAAM,MAAM,WAAW,cAAc;AAAA,EAC7F,EAHC;AAKL;",
+  "names": []
+}

package/dist/jsx/MenuDemo.js

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

package/dist/jsx/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,CAAC,KAAK,SACJ,CAAC,KACC,MAAM,MACN,cAAc,SACd,SACE,CAAC,OACC,KAAK,KACL,MAAM,UACN,OAAO,OAAO,WAAW,MACzB,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAClC,IAGF,CAAC,KAAK,KACJ,CAAC,OAAO,EAAE;AAAA,IACR,CAAC,GAAG,aAAa,EAAhB;AAAA,IACD,CAAC,UAAU,2BAA2B,EAArC;AAAA,EACH,EAHC,OAIH,EALC,KAAK,KAMR,EAnBC,KAoBH,EArBC,KAAK;AAuBV;",
+  "names": []
+}

package/dist/jsx/PopoverDemo.js

@@ -0,0 +1,26 @@
+import { ChevronDown, ChevronLeft, ChevronRight } from "@tamagui/feather-icons";
+import { Button, Input, Label, Popover, XStack } from "tamagui";
+function PopoverDemo() {
+  return <XStack space="$2">
+    <Demo placement="left" Icon={ChevronLeft} />
+    <Demo placement="bottom" Icon={ChevronDown} />
+    <Demo placement="right" Icon={ChevronRight} />
+  </XStack>;
+}
+function Demo({ Icon, ...props }) {
+  return <Popover size="$5" {...props}>
+    <Popover.Trigger><Button icon={Icon} /></Popover.Trigger>
+    <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>
+      <Popover.Arrow />
+      <XStack space="$3">
+        <Label size="$3" htmlFor="name">Name</Label>
+        <Input size="$3" id="name" />
+      </XStack>
+    </Popover.Content>
+  </Popover>;
+}
+export {
+  Demo,
+  PopoverDemo
+};
+//# sourceMappingURL=PopoverDemo.js.map

package/dist/jsx/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;AAEA;AAEO,uBAAuB;AAC5B,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa;AAAA,IAC1C,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa;AAAA,IAC5C,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc;AAAA,EAC9C,EAJC;AAML;AAEO,cAAc,EAAE,SAAS,SAAwC;AACtE,SACE,CAAC,QAAQ,KAAK,SAAS;AAAA,IACrB,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAGT,CAAC,QAAQ,QACP,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GAChC,GAAG,GACH,GAAG,GACH,GAAG,GACH,UAAU,SACV;AAAA,MAEA,CAAC,QAAQ,MAAM;AAAA,MAEf,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,MAAM,KAAK,KAAK,QAAQ,OAAO,IAEhC,EAFC;AAAA,QAGD,CAAC,MAAM,KAAK,KAAK,GAAG,OAAO;AAAA,MAC7B,EALC;AAAA,IAMH,EAjBC,QAAQ;AAAA,EAkBX,EAtBC;AAwBL;",
+  "names": []
+}

package/dist/jsx/ProgressDemo.js

@@ -0,0 +1,35 @@
+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} $sm={{ disp: "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.js.map

package/dist/jsx/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": "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;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,KAAK,EAAE,MAAM,OAAO;AAAA,MACzE,CAAC,OACC,KAAK,KACL,GAAG,KACH,cAAc,CAAC,CAAC,GAChB,KAAK,GACL,KAAK,GACL,MAAM,GACN,eAAe,CAAC,CAAC,SAAS;AACxB,gBAAQ,GAAG;AAAA,MACb;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,SAAU,QAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
+  "names": []
+}

package/dist/jsx/SelectDemo.js

@@ -0,0 +1,51 @@
+import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
+import { LinearGradient, Select, YStack } from "tamagui";
+function SelectDemo() {
+  return <Select defaultValue="apple">
+    <Select.Trigger w={200} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
+    <Select.Content>
+      <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"]} />
+      </Select.ScrollUpButton>
+      <Select.Viewport minWidth={200}><Select.Group>
+        <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.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"]} />
+      </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.js.map

package/dist/jsx/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;AAEA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,aAAa;AAAA,IACnB,CAAC,OAAO,QAAQ,GAAG,KAAK,WAAW,aACjC,CAAC,OAAO,MAAM,YAAY,YAAY,EACxC,EAFC,OAAO;AAAA,IAIR,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,eAAe,GAAG,SAAS,GAAG,SAAS,IAAI,WAAW,EAAE,OAAO,EAAE;AAAA,QACvE,CAAC,OAAO,IAAI,IACV,CAAC,UAAU,MAAM,IAAI,EACvB,EAFC;AAAA,QAGD,CAAC,eACC,OAAO,CAAC,GAAG,CAAC,GACZ,KAAK,CAAC,GAAG,CAAC,GACV,WACA,QAAQ,CAAC,eAAe,wBAAwB,GAClD;AAAA,MACF,EAVC,OAAO;AAAA,MAYR,CAAC,OAAO,SAAS,UAAU,KACzB,CAAC,OAAO;AAAA,QACN,CAAC,OAAO,MAAM,MAAM,EAAnB,OAAO;AAAA,SACP,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,iBACE,CAAC,OAAO,KAAK,OAAO,GAAG,KAAK,KAAK,MAAM,OAAO,KAAK,KAAK,YAAY,GAClE,CAAC,OAAO,UAAU,KAAK,KAAK,EAA3B,OAAO,SACV,EAFC,OAAO;AAAA,QAIZ,CAAC;AAAA,MACH,EATC,OAAO,MAUV,EAXC,OAAO;AAAA,MAaR,CAAC,OAAO,iBAAiB,GAAG,SAAS,GAAG,SAAS,IAAI,WAAW,EAAE,OAAO,EAAE;AAAA,QACzE,CAAC,OAAO,IAAI,IACV,CAAC,YAAY,MAAM,IAAI,EACzB,EAFC;AAAA,QAGD,CAAC,eACC,OAAO,CAAC,GAAG,CAAC,GACZ,KAAK,CAAC,GAAG,CAAC,GACV,WACA,QAAQ,CAAC,0BAA0B,aAAa,GAClD;AAAA,MACF,EAVC,OAAO;AAAA,IAWV,EArCC,OAAO;AAAA,EAsCV,EA3CC;AA6CL;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/jsx/SeparatorDemo.js

@@ -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.js.map

package/dist/jsx/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": "AACA;AAEO,yBAAyB;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.js

@@ -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.js.map

package/dist/jsx/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": "AACA;AAEO,sBAAsB;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.js

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

package/dist/jsx/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,CAAC,OAAO,YAAY,CAAC,IAAI,EAAE,GAAG,UAAU,UAAU,kBAAkB;AAAA,IAClE,CAAC,OAAO,SAAS;AAAA,IACjB,CAAC,OAAO,MAAM,GAAG,SAAS,GAAG;AAAA,MAC3B,CAAC,OAAO,OAAO;AAAA,MACf,CAAC,OACC,KAAK,KACL,SACA,MAAM,aACN,SAAS,MAAM;AACb,oBAAY,CAAC;AAAA,MACf,GACF;AAAA,IACF,EAVC,OAAO;AAAA,EAWV,EAbC;AAeL;",
+  "names": []
+}

package/dist/jsx/SliderDemo.js

@@ -0,0 +1,18 @@
+import { Slider, XStack } from "tamagui";
+function SliderDemo() {
+  return <XStack height={200} ai="center" space="$8">
+    <SimpleSlider height={200} orientation="vertical" />
+    <SimpleSlider width={200} />
+  </XStack>;
+}
+function SimpleSlider({ children, ...props }) {
+  return <Slider defaultValue={[50]} max={100} step={1} {...props}>
+    <Slider.Track><Slider.TrackActive /></Slider.Track>
+    <Slider.Thumb bordered circular elevate index={0} />
+    {children}
+  </Slider>;
+}
+export {
+  SliderDemo
+};
+//# sourceMappingURL=SliderDemo.js.map

package/dist/jsx/SliderDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SliderDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Slider, SliderProps, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,GAAG,SAAS,MAAM;AAAA,IACrC,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,sBAAsB,EAAE,aAAa,SAAsB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,SAAS,SAAS,QAAQ,OAAO,GAAG;AAAA,KACjD;AAAA,EACH,EANC;AAQL;",
+  "names": []
+}

package/dist/jsx/SpinnerDemo.js

@@ -0,0 +1,11 @@
+import { Spinner, YStack } from "tamagui";
+function SpinnerDemo() {
+  return <YStack p="$3" space="$4" ai="center">
+    <Spinner size="small" color="$green10" />
+    <Spinner size="large" color="$orange10" />
+  </YStack>;
+}
+export {
+  SpinnerDemo
+};
+//# sourceMappingURL=SpinnerDemo.js.map

package/dist/jsx/SpinnerDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SpinnerDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$4\" ai=\"center\">\n      <Spinner size=\"small\" color=\"$green10\" />\n      <Spinner size=\"large\" color=\"$orange10\" />\n    </YStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,uBAAuB;AAC5B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG;AAAA,IAC3B,CAAC,QAAQ,KAAK,QAAQ,MAAM,WAAW;AAAA,IACvC,CAAC,QAAQ,KAAK,QAAQ,MAAM,YAAY;AAAA,EAC1C,EAHC;AAKL;",
+  "names": []
+}

package/dist/jsx/StacksDemo.js

@@ -0,0 +1,24 @@
+import { XStack, YStack, ZStack } from "tamagui";
+function StacksDemo() {
+  return <XStack maw={250} p="$2" als="center" space>
+    <YStack flex={1} space="$2" bw={2} boc="$color" br="$4" p="$2">
+      <YStack bc="$color" br="$3" p="$2" />
+      <YStack bc="$color" br="$3" p="$2" />
+      <YStack bc="$color" br="$3" p="$2" />
+    </YStack>
+    <XStack flex={1} space="$2" bw={2} boc="$color" br="$4" p="$2">
+      <YStack bc="$color" br="$3" p="$2" />
+      <YStack bc="$color" br="$3" p="$2" />
+      <YStack bc="$color" br="$3" p="$2" />
+    </XStack>
+    <ZStack maw={50} mah={85} w={100} flex={1}>
+      <YStack fullscreen bw={2} br="$4" p="$2" />
+      <YStack fullscreen y={10} x={10} bw={2} br="$4" p="$2" />
+      <YStack fullscreen y={20} x={20} bw={2} bc="$color" br="$4" p="$2" />
+    </ZStack>
+  </XStack>;
+}
+export {
+  StacksDemo
+};
+//# sourceMappingURL=StacksDemo.js.map

package/dist/jsx/StacksDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/StacksDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n  return (\n    <XStack maw={250} p=\"$2\" 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": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,KAAK,KAAK,EAAE,KAAK,IAAI,SAAS;AAAA,IACpC,CAAC,OAAO,MAAM,GAAG,MAAM,KAAK,IAAI,GAAG,IAAI,SAAS,GAAG,KAAK,EAAE;AAAA,MACxD,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrC,EAJC;AAAA,IAMD,CAAC,OAAO,MAAM,GAAG,MAAM,KAAK,IAAI,GAAG,IAAI,SAAS,GAAG,KAAK,EAAE;AAAA,MACxD,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrC,EAJC;AAAA,IAMD,CAAC,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM;AAAA,MACtC,CAAC,OAAO,WAAW,IAAI,GAAG,GAAG,KAAK,EAAE,KAAK;AAAA,MACzC,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,GAAG,KAAK,EAAE,KAAK;AAAA,MACvD,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrE,EAJC;AAAA,EAKH,EAlBC;AAoBL;",
+  "names": []
+}

package/dist/jsx/SwitchDemo.js

@@ -0,0 +1,20 @@
+import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+function SwitchDemo() {
+  return <YStack w={300} ai="center" space="$3">
+    <SwitchWithLabel size="$2" />
+    <SwitchWithLabel size="$3" />
+    <SwitchWithLabel size="$4" />
+    <SwitchWithLabel size="$5" />
+  </YStack>;
+}
+function SwitchWithLabel(props) {
+  return <XStack w={300} ai="center" space="$4">
+    <Label pr="$0" miw={200} jc="flex-end" size={props.size} htmlFor="switch-1">Dark mode</Label>
+    <Separator mih={20} vertical />
+    <Switch id="switch-1" size={props.size}><Switch.Thumb animation="bouncy" /></Switch>
+  </XStack>;
+}
+export {
+  SwitchDemo
+};
+//# sourceMappingURL=SwitchDemo.js.map

package/dist/jsx/SwitchDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SwitchDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Label, Separator, SizeTokens, Switch, XStack, YStack } from 'tamagui'\n\nexport function SwitchDemo() {\n  return (\n    <YStack w={300} ai=\"center\" space=\"$3\">\n      <SwitchWithLabel size=\"$2\" />\n      <SwitchWithLabel size=\"$3\" />\n      <SwitchWithLabel size=\"$4\" />\n      <SwitchWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n  return (\n    <XStack w={300} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={200} jc=\"flex-end\" size={props.size} htmlFor=\"switch-1\">\n        Dark mode\n      </Label>\n      <Separator mih={20} vertical />\n      <Switch id=\"switch-1\" size={props.size}>\n        <Switch.Thumb animation=\"bouncy\" />\n      </Switch>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,EAC7B,EALC;AAOL;AAEA,yBAAyB,OAA6B;AACpD,SACE,CAAC,OAAO,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,MAAM,GAAG,KAAK,KAAK,KAAK,GAAG,WAAW,MAAM,MAAM,MAAM,QAAQ,WAAW,SAE5E,EAFC;AAAA,IAGD,CAAC,UAAU,KAAK,IAAI,SAAS;AAAA,IAC7B,CAAC,OAAO,GAAG,WAAW,MAAM,MAAM,MAChC,CAAC,OAAO,MAAM,UAAU,SAAS,EACnC,EAFC;AAAA,EAGH,EARC;AAUL;",
+  "names": []
+}

package/dist/jsx/TamaguiLogo.js

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import { XStack, YStack } from "tamagui";
+const tints = ["red", "orange", "yellow", "green", "blue", "purple", "pink"];
+const logoColors = tints.map((t) => `var(--${t}9)`);
+const TamaguiLogo = forwardRef(({
+  showWords,
+  color,
+  downscale,
+  onHoverLetter,
+  ...props
+}, ref) => <XStack ref={ref} ai="center" jc="center" space="$5" {...props}>
+  <LogoIcon downscale={(downscale != null ? downscale : 1) * (showWords ? 2 : 1.5)} color={color} />
+  {showWords && <YStack mb={-4}><LogoWords onHoverLetter={onHoverLetter} downscale={downscale != null ? downscale : 2} color={color} /></YStack>}
+</XStack>);
+const LogoWords = ({
+  color,
+  downscale = 1,
+  onHoverLetter
+}) => {
+  return <svg width={373 * (1 / downscale) * 0.333333334} height={41 * (1 / downscale) * 0.333333334} viewBox="0 0 373 41">
+    <polygon shapeRendering="crispEdges" fill={color || logoColors[0]} points="24.3870968 40.1612903 24.3870968 8.67741935 32.2580645 8.67741935 32.2580645 0.806451613 0.774193548 0.806451613 0.774193548 8.67741935 8.64516129 8.67741935 8.64516129 40.1612903" onMouseEnter={onHoverLetter ? () => onHoverLetter(0) : void 0} />
+    <path shapeRendering="crispEdges" fill={color || logoColors[1]} d="M87.3548387,0.806451613 L87.3548387,8.67741935 L95.2258065,8.67741935 L95.2258065,40.1612903 L79.483871,40.1612903 L79.483871,24.4193548 L71.6129032,24.4193548 L71.6129032,40.1612903 L55.8709677,40.1612903 L55.8709677,8.67741935 L63.7419355,8.67741935 L63.7419355,0.806451613 L87.3548387,0.806451613 Z M79.483871,8.67741935 L71.6129032,8.67741935 L71.6129032,16.5483871 L79.483871,16.5483871 L79.483871,8.67741935 Z" fillRule="nonzero" onMouseEnter={onHoverLetter ? () => onHoverLetter(1) : void 0} />
+    <polygon shapeRendering="crispEdges" fill={color || logoColors[2]} points="130.645161 40.1612903 130.645161 22.4516129 138.516129 22.4516129 138.516129 40.1612903 154.258065 40.1612903 154.258065 0.806451613 142.451613 0.806451613 142.451613 8.67741935 126.709677 8.67741935 126.709677 0.806451613 114.903226 0.806451613 114.903226 40.1612903" onMouseEnter={onHoverLetter ? () => onHoverLetter(2) : void 0} />
+    <path fill={color || logoColors[3]} d="M205.419355,0.806451613 L205.419355,8.67741935 L213.290323,8.67741935 L213.290323,40.1612903 L197.548387,40.1612903 L197.548387,24.4193548 L189.677419,24.4193548 L189.677419,40.1612903 L173.935484,40.1612903 L173.935484,8.67741935 L181.806452,8.67741935 L181.806452,0.806451613 L205.419355,0.806451613 Z M197.548387,8.67741935 L189.677419,8.67741935 L189.677419,16.5483871 L197.548387,16.5483871 L197.548387,8.67741935 Z" fillRule="nonzero" onMouseEnter={onHoverLetter ? () => onHoverLetter(3) : void 0} />
+    <polygon shapeRendering="crispEdges" fill={color || logoColors[4]} points="264.451613 40.1612903 264.451613 32.2903226 272.322581 32.2903226 272.322581 16.5483871 256.580645 16.5483871 256.580645 32.2903226 248.709677 32.2903226 248.709677 8.67741935 272.322581 8.67741935 272.322581 0.806451613 240.83871 0.806451613 240.83871 8.67741935 232.967742 8.67741935 232.967742 32.2903226 240.83871 32.2903226 240.83871 40.1612903" onMouseEnter={onHoverLetter ? () => onHoverLetter(4) : void 0} />
+    <polygon shapeRendering="crispEdges" fill={color || logoColors[5]} points="323.483871 40.1612903 323.483871 32.2903226 331.354839 32.2903226 331.354839 0.806451613 315.612903 0.806451613 315.612903 32.2903226 307.741935 32.2903226 307.741935 0.806451613 292 0.806451613 292 32.2903226 299.870968 32.2903226 299.870968 40.1612903" onMouseEnter={onHoverLetter ? () => onHoverLetter(5) : void 0} />
+    <polygon shapeRendering="crispEdges" fill={color || logoColors[6]} points="372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903" onMouseEnter={onHoverLetter ? () => onHoverLetter(6) : void 0} />
+  </svg>;
+};
+const LogoIcon = ({ downscale = 2 }) => {
+  return <YStack als="center" marginVertical={-10} pressStyle={{
+    opacity: 0.7
+  }}><img className="tamagui-icon" width={450 / 8 / downscale} height={420 / 8 / downscale} src="/tamagui-icon.svg" /></YStack>;
+};
+export {
+  LogoIcon,
+  LogoWords,
+  TamaguiLogo,
+  logoColors,
+  tints
+};
+//# sourceMappingURL=TamaguiLogo.js.map

package/dist/jsx/TamaguiLogo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TamaguiLogo.tsx"],
+  "sourcesContent": ["import React, { forwardRef } from 'react'\nimport { ThemeName, XStack, XStackProps, YStack } from 'tamagui'\n\nexport const tints: ThemeName[] = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink']\n\nexport const logoColors = tints.map((t) => `var(--${t}9)`)\n\nexport const TamaguiLogo = forwardRef(\n  (\n    {\n      showWords,\n      color,\n      downscale,\n      onHoverLetter,\n      ...props\n    }: {\n      onHoverLetter?: (i: number) => void\n      showWords?: boolean\n      color?: string\n      downscale?: number\n    } & XStackProps,\n    ref\n  ) => (\n    <XStack ref={ref} ai=\"center\" jc=\"center\" space=\"$5\" {...props}>\n      <LogoIcon downscale={(downscale ?? 1) * (showWords ? 2 : 1.5)} color={color} />\n      {showWords && (\n        <YStack mb={-4}>\n          <LogoWords onHoverLetter={onHoverLetter} downscale={downscale ?? 2} color={color} />\n        </YStack>\n      )}\n    </XStack>\n  )\n)\n\nexport const LogoWords = ({\n  color,\n  downscale = 1,\n  onHoverLetter,\n}: {\n  color?: string\n  downscale?: number\n  onHoverLetter?: any\n}) => {\n  return (\n    <svg\n      width={373 * (1 / downscale) * 0.333333334}\n      height={41 * (1 / downscale) * 0.333333334}\n      viewBox=\"0 0 373 41\"\n    >\n      <polygon\n        shapeRendering=\"crispEdges\"\n        fill={color || logoColors[0]}\n        points=\"24.3870968 40.1612903 24.3870968 8.67741935 32.2580645 8.67741935 32.2580645 0.806451613 0.774193548 0.806451613 0.774193548 8.67741935 8.64516129 8.67741935 8.64516129 40.1612903\"\n        onMouseEnter={onHoverLetter ? () => onHoverLetter(0) : undefined}\n      />\n      <path\n        shapeRendering=\"crispEdges\"\n        fill={color || logoColors[1]}\n        d=\"M87.3548387,0.806451613 L87.3548387,8.67741935 L95.2258065,8.67741935 L95.2258065,40.1612903 L79.483871,40.1612903 L79.483871,24.4193548 L71.6129032,24.4193548 L71.6129032,40.1612903 L55.8709677,40.1612903 L55.8709677,8.67741935 L63.7419355,8.67741935 L63.7419355,0.806451613 L87.3548387,0.806451613 Z M79.483871,8.67741935 L71.6129032,8.67741935 L71.6129032,16.5483871 L79.483871,16.5483871 L79.483871,8.67741935 Z\"\n        fillRule=\"nonzero\"\n        onMouseEnter={onHoverLetter ? () => onHoverLetter(1) : undefined}\n      />\n      <polygon\n        shapeRendering=\"crispEdges\"\n        fill={color || logoColors[2]}\n        points=\"130.645161 40.1612903 130.645161 22.4516129 138.516129 22.4516129 138.516129 40.1612903 154.258065 40.1612903 154.258065 0.806451613 142.451613 0.806451613 142.451613 8.67741935 126.709677 8.67741935 126.709677 0.806451613 114.903226 0.806451613 114.903226 40.1612903\"\n        onMouseEnter={onHoverLetter ? () => onHoverLetter(2) : undefined}\n      />\n      <path\n        fill={color || logoColors[3]}\n        d=\"M205.419355,0.806451613 L205.419355,8.67741935 L213.290323,8.67741935 L213.290323,40.1612903 L197.548387,40.1612903 L197.548387,24.4193548 L189.677419,24.4193548 L189.677419,40.1612903 L173.935484,40.1612903 L173.935484,8.67741935 L181.806452,8.67741935 L181.806452,0.806451613 L205.419355,0.806451613 Z M197.548387,8.67741935 L189.677419,8.67741935 L189.677419,16.5483871 L197.548387,16.5483871 L197.548387,8.67741935 Z\"\n        fillRule=\"nonzero\"\n        onMouseEnter={onHoverLetter ? () => onHoverLetter(3) : undefined}\n      />\n      <polygon\n        shapeRendering=\"crispEdges\"\n        fill={color || logoColors[4]}\n        points=\"264.451613 40.1612903 264.451613 32.2903226 272.322581 32.2903226 272.322581 16.5483871 256.580645 16.5483871 256.580645 32.2903226 248.709677 32.2903226 248.709677 8.67741935 272.322581 8.67741935 272.322581 0.806451613 240.83871 0.806451613 240.83871 8.67741935 232.967742 8.67741935 232.967742 32.2903226 240.83871 32.2903226 240.83871 40.1612903\"\n        onMouseEnter={onHoverLetter ? () => onHoverLetter(4) : undefined}\n      />\n      <polygon\n        shapeRendering=\"crispEdges\"\n        fill={color || logoColors[5]}\n        points=\"323.483871 40.1612903 323.483871 32.2903226 331.354839 32.2903226 331.354839 0.806451613 315.612903 0.806451613 315.612903 32.2903226 307.741935 32.2903226 307.741935 0.806451613 292 0.806451613 292 32.2903226 299.870968 32.2903226 299.870968 40.1612903\"\n        onMouseEnter={onHoverLetter ? () => onHoverLetter(5) : undefined}\n      />\n      <polygon\n        shapeRendering=\"crispEdges\"\n        fill={color || logoColors[6]}\n        points=\"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n        onMouseEnter={onHoverLetter ? () => onHoverLetter(6) : undefined}\n      />\n    </svg>\n  )\n}\n\nexport const LogoIcon = ({ downscale = 2 }: any) => {\n  return (\n    <YStack\n      als=\"center\"\n      marginVertical={-10}\n      pressStyle={{\n        opacity: 0.7,\n      }}\n    >\n      <img\n        className=\"tamagui-icon\"\n        width={450 / 8 / downscale}\n        height={420 / 8 / downscale}\n        src=\"/tamagui-icon.svg\"\n      />\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AAEO,MAAM,QAAqB,CAAC,OAAO,UAAU,UAAU,SAAS,QAAQ,UAAU,MAAM;AAExF,MAAM,aAAa,MAAM,IAAI,CAAC,MAAM,SAAS,KAAK;AAElD,MAAM,cAAc,WACzB,CACE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GAOL,QAEA,CAAC,OAAO,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,MAAM,SAAS;AAAA,EACvD,CAAC,SAAS,WAAY,iCAAa,KAAM,aAAY,IAAI,MAAM,OAAO,OAAO;AAAA,GAC5E,aACC,CAAC,OAAO,IAAI,IACV,CAAC,UAAU,eAAe,eAAe,WAAW,gCAAa,GAAG,OAAO,OAAO,EACpF,EAFC;AAIL,EAPC,OASL;AAEO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,MAKI;AACJ,SACE,CAAC,IACC,OAAO,MAAO,KAAI,aAAa,aAC/B,QAAQ,KAAM,KAAI,aAAa,aAC/B,QAAQ;AAAA,IAER,CAAC,QACC,eAAe,aACf,MAAM,SAAS,WAAW,IAC1B,OAAO,sLACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI,QACzD;AAAA,IACA,CAAC,KACC,eAAe,aACf,MAAM,SAAS,WAAW,IAC1B,EAAE,kaACF,SAAS,UACT,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI,QACzD;AAAA,IACA,CAAC,QACC,eAAe,aACf,MAAM,SAAS,WAAW,IAC1B,OAAO,8QACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI,QACzD;AAAA,IACA,CAAC,KACC,MAAM,SAAS,WAAW,IAC1B,EAAE,uaACF,SAAS,UACT,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI,QACzD;AAAA,IACA,CAAC,QACC,eAAe,aACf,MAAM,SAAS,WAAW,IAC1B,OAAO,gWACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI,QACzD;AAAA,IACA,CAAC,QACC,eAAe,aACf,MAAM,SAAS,WAAW,IAC1B,OAAO,gQACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI,QACzD;AAAA,IACA,CAAC,QACC,eAAe,aACf,MAAM,SAAS,WAAW,IAC1B,OAAO,4FACP,cAAc,gBAAgB,MAAM,cAAc,CAAC,IAAI,QACzD;AAAA,EACF,EAhDC;AAkDL;AAEO,MAAM,WAAW,CAAC,EAAE,YAAY,QAAa;AAClD,SACE,CAAC,OACC,IAAI,SACJ,gBAAgB,KAChB,YAAY;AAAA,IACV,SAAS;AAAA,EACX,GAEA,CAAC,IACC,UAAU,eACV,OAAO,MAAM,IAAI,WACjB,QAAQ,MAAM,IAAI,WAClB,IAAI,oBACN,EACF,EAbC;AAeL;",
+  "names": []
+}