@tamagui/demos 1.2.8 → 1.2.10

package/dist/esm/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": "AAcI,SACE,KADF;AAdJ,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,qBAAC,UAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,qBAAC,UAAO,OAAM,MACZ;AAAA,iCAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B;AAAA,YACA,oBAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/esm/ProgressDemo.mjs

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

package/dist/esm/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": "AAyBI,mBAMM,KAJF,YAFJ;AAxBJ,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,iCACE;AAAA,yBAAC,UAAO,GAAG,IAAI,IAAG,UAAS,OAAK,MAC9B;AAAA,2BAAC,aAAU,GAAG,IAAI,GAAG,KAAK;AAAA;AAAA,QACjB;AAAA,SACT;AAAA,MACA,oBAAC,YAAS,MAAM,UAAU,OAAO,UAC/B,8BAAC,SAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAG,IAAI,GAAG,IAAI,MAAM,EAAE,KAAK,OAAO,GACzE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,OAAO,OAAP,EACC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,YACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,oBAAC,UAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/esm/ScrollViewDemo.mjs

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

package/dist/esm/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": "AAKM,SACE,KADF;AALN,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,WAAW,KAAK,GAAE,OAAM,IAAG,eAAc,GAAE,MAAK,IAAG,MAC7D,+BAAC,UAAO,UAAS,QAAO,IAAG,UAAS,IAAG,UACrC;AAAA,wBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,IACrC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,WAAU;AAAA,IACvC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,KACvC,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/SelectDemo.mjs

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(Select, { id: "food", value: val, onValueChange: setVal, children: [
+    /* @__PURE__ */ jsx(Select.Trigger, { w: 180, iconAfter: ChevronDown, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }) }),
+    /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
+      /* @__PURE__ */ jsx(Sheet.Frame, { children: /* @__PURE__ */ jsx(Sheet.ScrollView, { children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }) }),
+      /* @__PURE__ */ jsx(Sheet.Overlay, {})
+    ] }) }),
+    /* @__PURE__ */ jsxs(Select.Content, { zIndex: 2e5, children: [
+      /* @__PURE__ */ jsxs(Select.ScrollUpButton, { ai: "center", jc: "center", pos: "relative", w: "100%", h: "$3", children: [
+        /* @__PURE__ */ jsx(YStack, { zi: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
+        /* @__PURE__ */ jsx(
+          LinearGradient,
+          {
+            start: [0, 0],
+            end: [0, 1],
+            fullscreen: true,
+            colors: ["$background", "$backgroundTransparent"],
+            br: "$4"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsxs(Select.Group, { space: "$-0", children: [
+        /* @__PURE__ */ jsx(Select.Label, { children: "Fruits" }),
+        items.map((item, i) => {
+          return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
+            /* @__PURE__ */ jsx(Select.ItemText, { children: item.name }),
+            /* @__PURE__ */ jsx(Select.ItemIndicator, { ml: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
+          ] }, item.name);
+        })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Select.ScrollDownButton, { ai: "center", jc: "center", pos: "relative", w: "100%", h: "$3", children: [
+        /* @__PURE__ */ jsx(YStack, { zi: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
+        /* @__PURE__ */ jsx(
+          LinearGradient,
+          {
+            start: [0, 0],
+            end: [0, 1],
+            fullscreen: true,
+            colors: ["$backgroundTransparent", "$background"],
+            br: "$4"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+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/esm/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": "AAUQ,cAIA,YAJA;AAVR,SAAS,OAAO,aAAa,iBAAiB;AAC9C,SAAS,gBAAgB;AACzB,SAAS,OAAO,QAAQ,OAAO,cAAc;AAC7C,SAAS,sBAAsB;AAExB,SAAS,aAAa;AAC3B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AACtC,SACE,qBAAC,UAAO,IAAG,QAAO,OAAO,KAAK,eAAe,QAC3C;AAAA,wBAAC,OAAO,SAAP,EAAe,GAAG,KAAK,WAAW,aACjC,8BAAC,OAAO,OAAP,EAAa,aAAY,aAAY,GACxC;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,OAAK,MAAC,uBAAqB,MAChC;AAAA,0BAAC,MAAM,OAAN,EACC,8BAAC,MAAM,YAAN,EACC,8BAAC,MAAM,UAAN,EAAe,GAClB,GACF;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,SAAP,EAAe,QAAQ,KACtB;AAAA,2BAAC,OAAO,gBAAP,EAAsB,IAAG,UAAS,IAAG,UAAS,KAAI,YAAW,GAAE,QAAO,GAAE,MACvE;AAAA,4BAAC,UAAO,IAAI,IACV,8BAAC,aAAU,MAAM,IAAI,GACvB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,CAAC,GAAG,CAAC;AAAA,YACZ,KAAK,CAAC,GAAG,CAAC;AAAA,YACV,YAAU;AAAA,YACV,QAAQ,CAAC,eAAe,wBAAwB;AAAA,YAChD,IAAG;AAAA;AAAA,QACL;AAAA,SACF;AAAA,MAEA,oBAAC,OAAO,UAAP,EAAgB,UAAU,KACzB,+BAAC,OAAO,OAAP,EAAa,OAAM,OAClB;AAAA,4BAAC,OAAO,OAAP,EAAa,oBAAM;AAAA,QACnB,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,iBACE,qBAAC,OAAO,MAAP,EAAY,OAAO,GAAmB,OAAO,KAAK,KAAK,YAAY,GAClE;AAAA,gCAAC,OAAO,UAAP,EAAiB,eAAK,MAAK;AAAA,YAC5B,oBAAC,OAAO,eAAP,EAAqB,IAAG,QACvB,8BAAC,SAAM,MAAM,IAAI,GACnB;AAAA,eAJ0B,KAAK,IAKjC;AAAA,QAEJ,CAAC;AAAA,SACH,GACF;AAAA,MAEA,qBAAC,OAAO,kBAAP,EAAwB,IAAG,UAAS,IAAG,UAAS,KAAI,YAAW,GAAE,QAAO,GAAE,MACzE;AAAA,4BAAC,UAAO,IAAI,IACV,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,CAAC,GAAG,CAAC;AAAA,YACZ,KAAK,CAAC,GAAG,CAAC;AAAA,YACV,YAAU;AAAA,YACV,QAAQ,CAAC,0BAA0B,aAAa;AAAA,YAChD,IAAG;AAAA;AAAA,QACL;AAAA,SACF;AAAA,OACF;AAAA,KACF;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.mjs

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

package/dist/esm/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": "AAMM,cAGA,YAHA;AALN,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,qBAAC,UAAO,GAAE,QAAO,KAAK,KAAK,IAAI,IAC7B;AAAA,wBAAC,aAAU,YAAW,OAAM,qBAAO;AAAA,IACnC,oBAAC,aAAU,iDAAmC;AAAA,IAC9C,oBAAC,aAAU,IAAI,IAAI;AAAA,IACnB,qBAAC,UAAO,GAAG,IAAI,IAAG,UAChB;AAAA,0BAAC,aAAU,kBAAI;AAAA,MACf,oBAAC,aAAU,KAAI,WAAU,UAAQ,MAAC,IAAI,IAAI;AAAA,MAC1C,oBAAC,aAAU,kBAAI;AAAA,MACf,oBAAC,aAAU,KAAI,WAAU,UAAQ,MAAC,IAAI,IAAI;AAAA,MAC1C,oBAAC,aAAU,oBAAM;AAAA,OACnB;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/esm/ShapesDemo.mjs

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Square, XStack } from "tamagui";
+function ShapesDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { p: "$2", space: "$4", children: [
+    /* @__PURE__ */ jsx(Square, { size: 100, bc: "$color", elevation: "$4" }),
+    /* @__PURE__ */ jsx(Circle, { size: 100, bc: "$color", elevation: "$4" })
+  ] });
+}
+export {
+  ShapesDemo
+};
+//# sourceMappingURL=ShapesDemo.mjs.map

package/dist/esm/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": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,GAAE,MAAK,OAAM,MACnB;AAAA,wBAAC,UAAO,MAAM,KAAK,IAAG,UAAS,WAAU,MAAK;AAAA,IAC9C,oBAAC,UAAO,MAAM,KAAK,IAAG,UAAS,WAAU,MAAK;AAAA,KAChD;AAEJ;",
+  "names": []
+}

package/dist/esm/SheetDemo.mjs

@@ -0,0 +1,78 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(XStack, { space: true, children: [
+      /* @__PURE__ */ jsx(Button, { onPress: () => setOpen(true), children: "Open" }),
+      /* @__PURE__ */ jsx(Button, { onPress: () => setModal((x) => !x), children: modal ? "Type: Modal" : "Type: Inline" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Sheet,
+      {
+        forceRemoveScrollEnabled: open,
+        modal,
+        open,
+        onOpenChange: setOpen,
+        snapPoints: [85, 50, 25],
+        dismissOnSnapToBottom: true,
+        position,
+        onPositionChange: setPosition,
+        zIndex: 1e5,
+        children: [
+          /* @__PURE__ */ jsx(Sheet.Overlay, {}),
+          /* @__PURE__ */ jsx(Sheet.Handle, {}),
+          /* @__PURE__ */ jsxs(Sheet.Frame, { f: 1, p: "$4", jc: "center", ai: "center", space: "$5", children: [
+            /* @__PURE__ */ jsx(Button, { size: "$6", circular: true, icon: ChevronDown, onPress: () => setOpen(false) }),
+            modal && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(InnerSheet, { open: innerOpen, onOpenChange: setInnerOpen }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "$6",
+                  circular: true,
+                  icon: ChevronUp,
+                  onPress: () => setInnerOpen(true)
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+function InnerSheet(props) {
+  return /* @__PURE__ */ jsxs(Sheet, { modal: true, snapPoints: [90], dismissOnSnapToBottom: true, ...props, children: [
+    /* @__PURE__ */ jsx(Sheet.Overlay, {}),
+    /* @__PURE__ */ jsx(Sheet.Handle, {}),
+    /* @__PURE__ */ jsx(Sheet.Frame, { f: 1, jc: "center", ai: "center", space: "$5", children: /* @__PURE__ */ jsxs(Sheet.ScrollView, { p: "$4", space: true, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "$8",
+          circular: true,
+          als: "center",
+          icon: ChevronDown,
+          onPress: () => {
+            var _a;
+            return (_a = props.onOpenChange) == null ? void 0 : _a.call(props, false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(H1, { children: "Hello world" }),
+      /* @__PURE__ */ jsx(H2, { children: "You can scroll me" }),
+      [1, 2, 3].map((i) => /* @__PURE__ */ jsx(Paragraph, { size: "$10", children: "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." }, i))
+    ] }) })
+  ] });
+}
+export {
+  SheetDemo
+};
+//# sourceMappingURL=SheetDemo.mjs.map

package/dist/esm/SheetDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SheetDemo.tsx"],
+  "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n  const [position, setPosition] = useState(0)\n  const [open, setOpen] = useState(false)\n  const [modal, setModal] = useState(false)\n  const [innerOpen, setInnerOpen] = useState(false)\n\n  return (\n    <>\n      <XStack space>\n        <Button onPress={() => setOpen(true)}>Open</Button>\n        <Button onPress={() => setModal((x) => !x)}>\n          {modal ? 'Type: Modal' : 'Type: Inline'}\n        </Button>\n      </XStack>\n\n      <Sheet\n        forceRemoveScrollEnabled={open}\n        modal={modal}\n        open={open}\n        onOpenChange={setOpen}\n        snapPoints={[85, 50, 25]}\n        dismissOnSnapToBottom\n        position={position}\n        onPositionChange={setPosition}\n        zIndex={100_000}\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n\n          {modal && (\n            <>\n              <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n              <Button\n                size=\"$6\"\n                circular\n                icon={ChevronUp}\n                onPress={() => setInnerOpen(true)}\n              ></Button>\n            </>\n          )}\n        </Sheet.Frame>\n      </Sheet>\n    </>\n  )\n}\n\nfunction InnerSheet(props: SheetProps) {\n  return (\n    <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n      <Sheet.Overlay />\n      <Sheet.Handle />\n      <Sheet.Frame f={1} jc=\"center\" ai=\"center\" space=\"$5\">\n        <Sheet.ScrollView p=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            als=\"center\"\n            icon={ChevronDown}\n            onPress={() => props.onOpenChange?.(false)}\n          />\n          <H1>Hello world</H1>\n          <H2>You can scroll me</H2>\n          {[1, 2, 3].map((i) => (\n            <Paragraph key={i} size=\"$10\">\n              Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n              pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n              ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n              ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n              velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n            </Paragraph>\n          ))}\n        </Sheet.ScrollView>\n      </Sheet.Frame>\n    </Sheet>\n  )\n}\n"],
+  "mappings": "AAcM,SAwBM,UAvBJ,KADF;AAdN,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,WAAW,cAAc;AAE3C,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE,iCACE;AAAA,yBAAC,UAAO,OAAK,MACX;AAAA,0BAAC,UAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,kBAAI;AAAA,MAC1C,oBAAC,UAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,GACtC,kBAAQ,gBAAgB,gBAC3B;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,QACvB,uBAAqB;AAAA,QACrB;AAAA,QACA,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QAER;AAAA,8BAAC,MAAM,SAAN,EAAc;AAAA,UACf,oBAAC,MAAM,QAAN,EAAa;AAAA,UACd,qBAAC,MAAM,OAAN,EAAY,GAAG,GAAG,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,OAAM,MACtD;AAAA,gCAAC,UAAO,MAAK,MAAK,UAAQ,MAAC,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,YAE5E,SACC,iCACE;AAAA,kCAAC,cAAW,MAAM,WAAW,cAAc,cAAc;AAAA,cACzD;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,UAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,SAAS,MAAM,aAAa,IAAI;AAAA;AAAA,cACjC;AAAA,eACH;AAAA,aAEJ;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,qBAAC,SAAM,OAAK,MAAC,YAAY,CAAC,EAAE,GAAG,uBAAqB,MAAE,GAAG,OACvD;AAAA,wBAAC,MAAM,SAAN,EAAc;AAAA,IACf,oBAAC,MAAM,QAAN,EAAa;AAAA,IACd,oBAAC,MAAM,OAAN,EAAY,GAAG,GAAG,IAAG,UAAS,IAAG,UAAS,OAAM,MAC/C,+BAAC,MAAM,YAAN,EAAiB,GAAE,MAAK,OAAK,MAC5B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,KAAI;AAAA,UACJ,MAAM;AAAA,UACN,SAAS,MAAG;AAlExB;AAkE2B,+BAAM,iBAAN,+BAAqB;AAAA;AAAA;AAAA,MACtC;AAAA,MACA,oBAAC,MAAG,yBAAW;AAAA,MACf,oBAAC,MAAG,+BAAiB;AAAA,MACpB,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,oBAAC,aAAkB,MAAK,OAAM,0XAAd,CAMhB,CACD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/esm/SliderDemo.mjs

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider, XStack } from "tamagui";
+function SliderDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { height: 200, ai: "center", space: "$8", children: [
+    /* @__PURE__ */ jsx(SimpleSlider, { height: 200, orientation: "vertical" }),
+    /* @__PURE__ */ jsx(SimpleSlider, { width: 200 })
+  ] });
+}
+function SimpleSlider({ children, ...props }) {
+  return /* @__PURE__ */ jsxs(Slider, { defaultValue: [50], max: 100, step: 1, ...props, children: [
+    /* @__PURE__ */ jsx(Slider.Track, { children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
+    /* @__PURE__ */ jsx(Slider.Thumb, { bordered: true, circular: true, elevate: true, index: 0 }),
+    children
+  ] });
+}
+export {
+  SliderDemo
+};
+//# sourceMappingURL=SliderDemo.mjs.map

package/dist/esm/SliderDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SliderDemo.tsx"],
+  "sourcesContent": ["import { Slider, SliderProps, Spacer, 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": "AAII,SACE,KADF;AAJJ,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,QAAQ,KAAK,IAAG,UAAS,OAAM,MACrC;AAAA,wBAAC,gBAAa,QAAQ,KAAK,aAAY,YAAW;AAAA,IAClD,oBAAC,gBAAa,OAAO,KAAK;AAAA,KAC5B;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,qBAAC,UAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,GAAI,GAAG,OACjD;AAAA,wBAAC,OAAO,OAAP,EACC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,IACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,MAAC,UAAQ,MAAC,SAAO,MAAC,OAAO,GAAG;AAAA,IACjD;AAAA,KACH;AAEJ;",
+  "names": []
+}

package/dist/esm/SpinnerDemo.mjs

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner, YStack } from "tamagui";
+function SpinnerDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { p: "$3", space: "$4", ai: "center", children: [
+    /* @__PURE__ */ jsx(Spinner, { size: "small", color: "$green10" }),
+    /* @__PURE__ */ jsx(Spinner, { size: "large", color: "$orange10" })
+  ] });
+}
+export {
+  SpinnerDemo
+};
+//# sourceMappingURL=SpinnerDemo.mjs.map

package/dist/esm/SpinnerDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SpinnerDemo.tsx"],
+  "sourcesContent": ["import { 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": "AAII,SACE,KADF;AAJJ,SAAS,SAAS,cAAc;AAEzB,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,wBAAC,WAAQ,MAAK,SAAQ,OAAM,YAAW;AAAA,IACvC,oBAAC,WAAQ,MAAK,SAAQ,OAAM,aAAY;AAAA,KAC1C;AAEJ;",
+  "names": []
+}

package/dist/esm/StacksDemo.mjs

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XStack, YStack, ZStack } from "tamagui";
+function StacksDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { maw: 250, p: "$2", als: "center", space: true, children: [
+    /* @__PURE__ */ jsxs(YStack, { flex: 1, space: "$2", bw: 2, boc: "$color", br: "$4", p: "$2", children: [
+      /* @__PURE__ */ jsx(YStack, { bc: "$color", br: "$3", p: "$2" }),
+      /* @__PURE__ */ jsx(YStack, { bc: "$color", br: "$3", p: "$2" }),
+      /* @__PURE__ */ jsx(YStack, { bc: "$color", br: "$3", p: "$2" })
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { flex: 1, space: "$2", bw: 2, boc: "$color", br: "$4", p: "$2", children: [
+      /* @__PURE__ */ jsx(YStack, { bc: "$color", br: "$3", p: "$2" }),
+      /* @__PURE__ */ jsx(YStack, { bc: "$color", br: "$3", p: "$2" }),
+      /* @__PURE__ */ jsx(YStack, { bc: "$color", br: "$3", p: "$2" })
+    ] }),
+    /* @__PURE__ */ jsxs(ZStack, { maw: 50, mah: 85, w: 100, flex: 1, children: [
+      /* @__PURE__ */ jsx(YStack, { fullscreen: true, bw: 2, br: "$4", p: "$2" }),
+      /* @__PURE__ */ jsx(YStack, { fullscreen: true, y: 10, x: 10, bw: 2, br: "$4", p: "$2" }),
+      /* @__PURE__ */ jsx(YStack, { fullscreen: true, y: 20, x: 20, bw: 2, bc: "$color", br: "$4", p: "$2" })
+    ] })
+  ] });
+}
+export {
+  StacksDemo
+};
+//# sourceMappingURL=StacksDemo.mjs.map

package/dist/esm/StacksDemo.mjs.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": "AAMM,SACE,KADF;AALN,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,KAAK,KAAK,GAAE,MAAK,KAAI,UAAS,OAAK,MACzC;AAAA,yBAAC,UAAO,MAAM,GAAG,OAAM,MAAK,IAAI,GAAG,KAAI,UAAS,IAAG,MAAK,GAAE,MACxD;AAAA,0BAAC,UAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,MACnC,oBAAC,UAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,MACnC,oBAAC,UAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,OACrC;AAAA,IAEA,qBAAC,UAAO,MAAM,GAAG,OAAM,MAAK,IAAI,GAAG,KAAI,UAAS,IAAG,MAAK,GAAE,MACxD;AAAA,0BAAC,UAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,MACnC,oBAAC,UAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,MACnC,oBAAC,UAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,OACrC;AAAA,IAEA,qBAAC,UAAO,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,GACtC;AAAA,0BAAC,UAAO,YAAU,MAAC,IAAI,GAAG,IAAG,MAAK,GAAE,MAAK;AAAA,MACzC,oBAAC,UAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,IAAG,MAAK,GAAE,MAAK;AAAA,MACvD,oBAAC,UAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,OACrE;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/esm/SwitchDemo.mjs

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+function SwitchDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { w: 200, ai: "center", space: "$3", children: [
+    /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$2" }),
+    /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$3" }),
+    /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$4" }),
+    /* @__PURE__ */ jsx(SwitchWithLabel, { size: "$5" })
+  ] });
+}
+function SwitchWithLabel(props) {
+  const id = `switch-${props.size.toString().slice(1)}`;
+  return /* @__PURE__ */ jsxs(XStack, { w: 200, ai: "center", space: "$4", children: [
+    /* @__PURE__ */ jsx(Label, { pr: "$0", miw: 90, jc: "flex-end", size: props.size, htmlFor: id, children: "Dark mode" }),
+    /* @__PURE__ */ jsx(Separator, { mih: 20, vertical: true }),
+    /* @__PURE__ */ jsx(Switch, { id, size: props.size, children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
+  ] });
+}
+export {
+  SwitchDemo
+};
+//# sourceMappingURL=SwitchDemo.mjs.map

package/dist/esm/SwitchDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SwitchDemo.tsx"],
+  "sourcesContent": ["import { Label, Separator, SizeTokens, Switch, XStack, YStack, styled } from 'tamagui'\n\nexport function SwitchDemo() {\n  return (\n    <YStack w={200} 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  const id = `switch-${props.size.toString().slice(1)}`\n  return (\n    <XStack w={200} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={90} jc=\"flex-end\" size={props.size} htmlFor={id}>\n        Dark mode\n      </Label>\n      <Separator mih={20} vertical />\n      <Switch id={id} size={props.size}>\n        <Switch.Thumb animation=\"quick\" />\n      </Switch>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,oBAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,oBAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,oBAAC,mBAAgB,MAAK,MAAK;AAAA,KAC7B;AAEJ;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,SAAM,IAAG,MAAK,KAAK,IAAI,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IAAI,uBAErE;AAAA,IACA,oBAAC,aAAU,KAAK,IAAI,UAAQ,MAAC;AAAA,IAC7B,oBAAC,UAAO,IAAQ,MAAM,MAAM,MAC1B,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/esm/TextDemo.mjs

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paragraph, SizableText, Text, XStack, YStack } from "tamagui";
+function TextDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { space: "$2", ai: "center", children: [
+    /* @__PURE__ */ jsx(Text, { children: "Text" }),
+    /* @__PURE__ */ jsx(SizableText, { size: "$3", children: "SizableText" }),
+    /* @__PURE__ */ jsxs(XStack, { space: true, children: [
+      /* @__PURE__ */ jsx(SizableText, { theme: "alt1", size: "$3", children: "alt1" }),
+      /* @__PURE__ */ jsx(SizableText, { theme: "alt2", size: "$3", children: "alt2" })
+    ] }),
+    /* @__PURE__ */ jsx(Paragraph, { size: "$2", fow: "800", children: "Paragraph" })
+  ] });
+}
+export {
+  TextDemo
+};
+//# sourceMappingURL=TextDemo.mjs.map

package/dist/esm/TextDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TextDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" ai=\"center\">\n      <Text>Text</Text>\n      <SizableText size=\"$3\">SizableText</SizableText>\n      <XStack space>\n        <SizableText theme=\"alt1\" size=\"$3\">\n          alt1\n        </SizableText>\n        <SizableText theme=\"alt2\" size=\"$3\">\n          alt2\n        </SizableText>\n      </XStack>\n      <Paragraph size=\"$2\" fow=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAMM,cAEA,YAFA;AALN,SAAS,WAAW,aAAa,MAAM,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,OAAM,MAAK,IAAG,UACpB;AAAA,wBAAC,QAAK,kBAAI;AAAA,IACV,oBAAC,eAAY,MAAK,MAAK,yBAAW;AAAA,IAClC,qBAAC,UAAO,OAAK,MACX;AAAA,0BAAC,eAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,MACA,oBAAC,eAAY,OAAM,QAAO,MAAK,MAAK,kBAEpC;AAAA,OACF;AAAA,IACA,oBAAC,aAAU,MAAK,MAAK,KAAI,OAAM,uBAE/B;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/esm/ThemeInverseDemo.mjs

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Theme, XStack, YStack } from "tamagui";
+function ThemeInverseDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { space: true, children: [
+    /* @__PURE__ */ jsx(Buttons, {}),
+    /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsx(Buttons, {}) })
+  ] });
+}
+function Buttons() {
+  return /* @__PURE__ */ jsxs(YStack, { bc: "$background", p: "$3", br: "$3", space: true, children: [
+    /* @__PURE__ */ jsx(Button, { children: "Dark" }),
+    /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "Inversed" }),
+    /* @__PURE__ */ jsx(Button, { theme: "alt1", children: "Alt1 Dark" }),
+    /* @__PURE__ */ jsx(Theme, { name: "yellow", children: /* @__PURE__ */ jsx(Button, { children: "Yellow dark" }) })
+  ] });
+}
+export {
+  ThemeInverseDemo
+};
+//# sourceMappingURL=ThemeInverseDemo.mjs.map

package/dist/esm/ThemeInverseDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ThemeInverseDemo.tsx"],
+  "sourcesContent": ["import { Button, Theme, XStack, YStack } from 'tamagui'\n\nexport function ThemeInverseDemo() {\n  return (\n    <XStack space>\n      <Buttons />\n      <Theme inverse>\n        <Buttons />\n      </Theme>\n    </XStack>\n  )\n}\n\nfunction Buttons() {\n  return (\n    <YStack bc=\"$background\" p=\"$3\" br=\"$3\" space>\n      <Button>Dark</Button>\n      <Button themeInverse>Inversed</Button>\n      <Button theme=\"alt1\">Alt1 Dark</Button>\n      <Theme name=\"yellow\">\n        <Button>Yellow dark</Button>\n      </Theme>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,WAAQ;AAAA,IACT,oBAAC,SAAM,SAAO,MACZ,8BAAC,WAAQ,GACX;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE,qBAAC,UAAO,IAAG,eAAc,GAAE,MAAK,IAAG,MAAK,OAAK,MAC3C;AAAA,wBAAC,UAAO,kBAAI;AAAA,IACZ,oBAAC,UAAO,cAAY,MAAC,sBAAQ;AAAA,IAC7B,oBAAC,UAAO,OAAM,QAAO,uBAAS;AAAA,IAC9B,oBAAC,SAAM,MAAK,UACV,8BAAC,UAAO,yBAAW,GACrB;AAAA,KACF;AAEJ;",
+  "names": []
+}