@tamagui/demos 1.14.0 → 1.14.2

package/dist/esm/SheetDemo.js.map

@@ -2,6 +2,6 @@
   "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, Input, 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        animation=\"bouncy\" // for the css driver\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame flex={1} padding=\"$4\" justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n          <Input width={200} />\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 flex={1} justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n        <Sheet.ScrollView padding=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            alignSelf=\"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,OAyBM,YAAAA,EAxBJ,OAAAC,EADF,QAAAC,MAAA,oBAdN,OAAS,eAAAC,EAAa,aAAAC,MAAiB,wBACvC,OAAS,SAAAC,MAAa,iBAEtB,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,MAAAC,EAAI,MAAAC,EAAI,SAAAC,EAAO,aAAAC,EAAW,UAAAC,MAAc,UAElD,MAAMC,EAAY,IAAM,CAC7B,KAAM,CAACC,EAAUC,CAAW,EAAIT,EAAS,CAAC,EACpC,CAACU,EAAMC,CAAO,EAAIX,EAAS,EAAK,EAChC,CAACY,EAAOC,CAAQ,EAAIb,EAAS,EAAK,EAClC,CAACc,EAAWC,CAAY,EAAIf,EAAS,EAAK,EAEhD,OACEJ,EAAAF,EAAA,CACE,UAAAE,EAACU,EAAA,CAAO,MAAK,GACX,UAAAX,EAACM,EAAA,CAAO,QAAS,IAAMU,EAAQ,EAAI,EAAG,gBAAI,EAC1ChB,EAACM,EAAA,CAAO,QAAS,IAAMY,EAAUG,GAAM,CAACA,CAAC,EACtC,SAAAJ,EAAQ,cAAgB,eAC3B,GACF,EAEAhB,EAACG,EAAA,CACC,yBAA0BW,EAC1B,MAAOE,EACP,KAAMF,EACN,aAAcC,EACd,WAAY,CAAC,GAAI,GAAI,EAAE,EACvB,sBAAqB,GACrB,SAAUH,EACV,iBAAkBC,EAClB,OAAQ,IACR,UAAU,SAEV,UAAAd,EAACI,EAAM,QAAN,EAAc,EACfJ,EAACI,EAAM,OAAN,EAAa,EACdH,EAACG,EAAM,MAAN,CAAY,KAAM,EAAG,QAAQ,KAAK,eAAe,SAAS,WAAW,SAAS,MAAM,KACnF,UAAAJ,EAACM,EAAA,CAAO,KAAK,KAAK,SAAQ,GAAC,KAAMJ,EAAa,QAAS,IAAMc,EAAQ,EAAK,EAAG,EAC7EhB,EAACS,EAAA,CAAM,MAAO,IAAK,EAClBQ,GACChB,EAAAF,EAAA,CACE,UAAAC,EAACsB,EAAA,CAAW,KAAMH,EAAW,aAAcC,EAAc,EACzDpB,EAACM,EAAA,CACC,KAAK,KACL,SAAQ,GACR,KAAMH,EACN,QAAS,IAAMiB,EAAa,EAAI,EACjC,GACH,GAEJ,GACF,GACF,CAEJ,EAEA,SAASE,EAAWC,EAAmB,CACrC,OACEtB,EAACG,EAAA,CAAM,MAAK,GAAC,WAAY,CAAC,EAAE,EAAG,sBAAqB,GAAE,GAAGmB,EACvD,UAAAvB,EAACI,EAAM,QAAN,EAAc,EACfJ,EAACI,EAAM,OAAN,EAAa,EACdJ,EAACI,EAAM,MAAN,CAAY,KAAM,EAAG,eAAe,SAAS,WAAW,SAAS,MAAM,KACtE,SAAAH,EAACG,EAAM,WAAN,CAAiB,QAAQ,KAAK,MAAK,GAClC,UAAAJ,EAACM,EAAA,CACC,KAAK,KACL,SAAQ,GACR,UAAU,SACV,KAAMJ,EACN,QAAS,IAAG,CAnExB,IAAAsB,EAmE2B,OAAAA,EAAAD,EAAM,eAAN,YAAAC,EAAA,KAAAD,EAAqB,KACtC,EACAvB,EAACO,EAAA,CAAG,uBAAW,EACfP,EAACQ,EAAA,CAAG,6BAAiB,EACpB,CAAC,EAAG,EAAG,CAAC,EAAE,IAAKiB,GACdzB,EAACU,EAAA,CAAkB,KAAK,MAAM,uXAAde,CAMhB,CACD,GACH,EACF,GACF,CAEJ",
-  "names": ["Fragment", "jsx", "jsxs", "ChevronDown", "ChevronUp", "Sheet", "useState", "Button", "H1", "H2", "Input", "Paragraph", "XStack", "SheetDemo", "position", "setPosition", "open", "setOpen", "modal", "setModal", "innerOpen", "setInnerOpen", "x", "InnerSheet", "props", "_a", "i"]
+  "mappings": "AAcM,SAyBM,UAxBJ,KADF;AAdN,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,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,QACR,WAAU;AAAA,QAEV;AAAA,8BAAC,MAAM,SAAN,EAAc;AAAA,UACf,oBAAC,MAAM,QAAN,EAAa;AAAA,UACd,qBAAC,MAAM,OAAN,EAAY,MAAM,GAAG,SAAQ,MAAK,gBAAe,UAAS,YAAW,UAAS,OAAM,MACnF;AAAA,gCAAC,UAAO,MAAK,MAAK,UAAQ,MAAC,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,YAC7E,oBAAC,SAAM,OAAO,KAAK;AAAA,YAClB,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,MAAM,GAAG,gBAAe,UAAS,YAAW,UAAS,OAAM,MACtE,+BAAC,MAAM,YAAN,EAAiB,SAAQ,MAAK,OAAK,MAClC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS,MAAG;AAnExB;AAmE2B,+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/SheetDemo.mjs

@@ -1,2 +1,80 @@
-import{Fragment as m,jsx as e,jsxs as o}from"react/jsx-runtime";import{ChevronDown as u,ChevronUp as S}from"@tamagui/lucide-icons";import{Sheet as n}from"@tamagui/sheet";import{useState as r}from"react";import{Button as i,H1 as g,H2 as P,Input as O,Paragraph as v,XStack as y}from"tamagui";const x=()=>{const[t,a]=r(0),[c,s]=r(!1),[l,d]=r(!1),[f,p]=r(!1);return o(m,{children:[o(y,{space:!0,children:[e(i,{onPress:()=>s(!0),children:"Open"}),e(i,{onPress:()=>d(h=>!h),children:l?"Type: Modal":"Type: Inline"})]}),o(n,{forceRemoveScrollEnabled:c,modal:l,open:c,onOpenChange:s,snapPoints:[85,50,25],dismissOnSnapToBottom:!0,position:t,onPositionChange:a,zIndex:1e5,animation:"bouncy",children:[e(n.Overlay,{}),e(n.Handle,{}),o(n.Frame,{flex:1,padding:"$4",justifyContent:"center",alignItems:"center",space:"$5",children:[e(i,{size:"$6",circular:!0,icon:u,onPress:()=>s(!1)}),e(O,{width:200}),l&&o(m,{children:[e(C,{open:f,onOpenChange:p}),e(i,{size:"$6",circular:!0,icon:S,onPress:()=>p(!0)})]})]})]})]})};function C(t){return o(n,{modal:!0,snapPoints:[90],dismissOnSnapToBottom:!0,...t,children:[e(n.Overlay,{}),e(n.Handle,{}),e(n.Frame,{flex:1,justifyContent:"center",alignItems:"center",space:"$5",children:o(n.ScrollView,{padding:"$4",space:!0,children:[e(i,{size:"$8",circular:!0,alignSelf:"center",icon:u,onPress:()=>{var a;return(a=t.onOpenChange)==null?void 0:a.call(t,!1)}}),e(g,{children:"Hello world"}),e(P,{children:"You can scroll me"}),[1,2,3].map(a=>e(v,{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."},a))]})})]})}export{x as SheetDemo};
+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, Input, 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,
+        animation: "bouncy",
+        children: [
+          /* @__PURE__ */ jsx(Sheet.Overlay, {}),
+          /* @__PURE__ */ jsx(Sheet.Handle, {}),
+          /* @__PURE__ */ jsxs(Sheet.Frame, { flex: 1, padding: "$4", justifyContent: "center", alignItems: "center", space: "$5", children: [
+            /* @__PURE__ */ jsx(Button, { size: "$6", circular: true, icon: ChevronDown, onPress: () => setOpen(false) }),
+            /* @__PURE__ */ jsx(Input, { width: 200 }),
+            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, { flex: 1, justifyContent: "center", alignItems: "center", space: "$5", children: /* @__PURE__ */ jsxs(Sheet.ScrollView, { padding: "$4", space: true, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "$8",
+          circular: true,
+          alignSelf: "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

@@ -2,6 +2,6 @@
   "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, Input, 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        animation=\"bouncy\" // for the css driver\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame flex={1} padding=\"$4\" justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n          <Input width={200} />\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 flex={1} justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n        <Sheet.ScrollView padding=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            alignSelf=\"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,OAyBM,YAAAA,EAxBJ,OAAAC,EADF,QAAAC,MAAA,oBAdN,OAAS,eAAAC,EAAa,aAAAC,MAAiB,wBACvC,OAAS,SAAAC,MAAa,iBAEtB,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,MAAAC,EAAI,MAAAC,EAAI,SAAAC,EAAO,aAAAC,EAAW,UAAAC,MAAc,UAElD,MAAMC,EAAY,IAAM,CAC7B,KAAM,CAACC,EAAUC,CAAW,EAAIT,EAAS,CAAC,EACpC,CAACU,EAAMC,CAAO,EAAIX,EAAS,EAAK,EAChC,CAACY,EAAOC,CAAQ,EAAIb,EAAS,EAAK,EAClC,CAACc,EAAWC,CAAY,EAAIf,EAAS,EAAK,EAEhD,OACEJ,EAAAF,EAAA,CACE,UAAAE,EAACU,EAAA,CAAO,MAAK,GACX,UAAAX,EAACM,EAAA,CAAO,QAAS,IAAMU,EAAQ,EAAI,EAAG,gBAAI,EAC1ChB,EAACM,EAAA,CAAO,QAAS,IAAMY,EAAUG,GAAM,CAACA,CAAC,EACtC,SAAAJ,EAAQ,cAAgB,eAC3B,GACF,EAEAhB,EAACG,EAAA,CACC,yBAA0BW,EAC1B,MAAOE,EACP,KAAMF,EACN,aAAcC,EACd,WAAY,CAAC,GAAI,GAAI,EAAE,EACvB,sBAAqB,GACrB,SAAUH,EACV,iBAAkBC,EAClB,OAAQ,IACR,UAAU,SAEV,UAAAd,EAACI,EAAM,QAAN,EAAc,EACfJ,EAACI,EAAM,OAAN,EAAa,EACdH,EAACG,EAAM,MAAN,CAAY,KAAM,EAAG,QAAQ,KAAK,eAAe,SAAS,WAAW,SAAS,MAAM,KACnF,UAAAJ,EAACM,EAAA,CAAO,KAAK,KAAK,SAAQ,GAAC,KAAMJ,EAAa,QAAS,IAAMc,EAAQ,EAAK,EAAG,EAC7EhB,EAACS,EAAA,CAAM,MAAO,IAAK,EAClBQ,GACChB,EAAAF,EAAA,CACE,UAAAC,EAACsB,EAAA,CAAW,KAAMH,EAAW,aAAcC,EAAc,EACzDpB,EAACM,EAAA,CACC,KAAK,KACL,SAAQ,GACR,KAAMH,EACN,QAAS,IAAMiB,EAAa,EAAI,EACjC,GACH,GAEJ,GACF,GACF,CAEJ,EAEA,SAASE,EAAWC,EAAmB,CACrC,OACEtB,EAACG,EAAA,CAAM,MAAK,GAAC,WAAY,CAAC,EAAE,EAAG,sBAAqB,GAAE,GAAGmB,EACvD,UAAAvB,EAACI,EAAM,QAAN,EAAc,EACfJ,EAACI,EAAM,OAAN,EAAa,EACdJ,EAACI,EAAM,MAAN,CAAY,KAAM,EAAG,eAAe,SAAS,WAAW,SAAS,MAAM,KACtE,SAAAH,EAACG,EAAM,WAAN,CAAiB,QAAQ,KAAK,MAAK,GAClC,UAAAJ,EAACM,EAAA,CACC,KAAK,KACL,SAAQ,GACR,UAAU,SACV,KAAMJ,EACN,QAAS,IAAG,CAnExB,IAAAsB,EAmE2B,OAAAA,EAAAD,EAAM,eAAN,YAAAC,EAAA,KAAAD,EAAqB,KACtC,EACAvB,EAACO,EAAA,CAAG,uBAAW,EACfP,EAACQ,EAAA,CAAG,6BAAiB,EACpB,CAAC,EAAG,EAAG,CAAC,EAAE,IAAKiB,GACdzB,EAACU,EAAA,CAAkB,KAAK,MAAM,uXAAde,CAMhB,CACD,GACH,EACF,GACF,CAEJ",
-  "names": ["Fragment", "jsx", "jsxs", "ChevronDown", "ChevronUp", "Sheet", "useState", "Button", "H1", "H2", "Input", "Paragraph", "XStack", "SheetDemo", "position", "setPosition", "open", "setOpen", "modal", "setModal", "innerOpen", "setInnerOpen", "x", "InnerSheet", "props", "_a", "i"]
+  "mappings": "AAcM,SAyBM,UAxBJ,KADF;AAdN,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,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,QACR,WAAU;AAAA,QAEV;AAAA,8BAAC,MAAM,SAAN,EAAc;AAAA,UACf,oBAAC,MAAM,QAAN,EAAa;AAAA,UACd,qBAAC,MAAM,OAAN,EAAY,MAAM,GAAG,SAAQ,MAAK,gBAAe,UAAS,YAAW,UAAS,OAAM,MACnF;AAAA,gCAAC,UAAO,MAAK,MAAK,UAAQ,MAAC,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,YAC7E,oBAAC,SAAM,OAAO,KAAK;AAAA,YAClB,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,MAAM,GAAG,gBAAe,UAAS,YAAW,UAAS,OAAM,MACtE,+BAAC,MAAM,YAAN,EAAiB,SAAQ,MAAK,OAAK,MAClC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS,MAAG;AAnExB;AAmE2B,+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.js

@@ -1,2 +1,19 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Slider as r,XStack as c}from"tamagui";function o(){return t(c,{height:200,alignItems:"center",space:"$8",children:[e(i,{height:200,orientation:"vertical"}),e(i,{width:200})]})}function i({children:a,...l}){return t(r,{defaultValue:[50],max:100,step:1,...l,children:[e(r.Track,{children:e(r.TrackActive,{})}),e(r.Thumb,{index:0,circular:!0,elevate:!0}),a]})}export{o as SliderDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider, XStack } from "tamagui";
+function SliderDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { height: 200, alignItems: "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, { index: 0, circular: true, elevate: true }),
+    children
+  ] });
+}
+export {
+  SliderDemo
+};
 //# sourceMappingURL=SliderDemo.js.map

package/dist/esm/SliderDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
   "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} alignItems=\"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 index={0} circular elevate />\n      {children}\n    </Slider>\n  )\n}\n"],
-  "mappings": "AAII,OACE,OAAAA,EADF,QAAAC,MAAA,oBAJJ,OAAS,UAAAC,EAA6B,UAAAC,MAAc,UAE7C,SAASC,GAAa,CAC3B,OACEH,EAACE,EAAA,CAAO,OAAQ,IAAK,WAAW,SAAS,MAAM,KAC7C,UAAAH,EAACK,EAAA,CAAa,OAAQ,IAAK,YAAY,WAAW,EAClDL,EAACK,EAAA,CAAa,MAAO,IAAK,GAC5B,CAEJ,CAEA,SAASA,EAAa,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAgB,CACzD,OACEN,EAACC,EAAA,CAAO,aAAc,CAAC,EAAE,EAAG,IAAK,IAAK,KAAM,EAAI,GAAGK,EACjD,UAAAP,EAACE,EAAO,MAAP,CACC,SAAAF,EAACE,EAAO,YAAP,EAAmB,EACtB,EACAF,EAACE,EAAO,MAAP,CAAa,MAAO,EAAG,SAAQ,GAAC,QAAO,GAAC,EACxCI,GACH,CAEJ",
-  "names": ["jsx", "jsxs", "Slider", "XStack", "SliderDemo", "SimpleSlider", "children", "props"]
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,QAAQ,KAAK,YAAW,UAAS,OAAM,MAC7C;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,OAAO,GAAG,UAAQ,MAAC,SAAO,MAAC;AAAA,IACxC;AAAA,KACH;AAEJ;",
+  "names": []
 }

package/dist/esm/SliderDemo.mjs

@@ -1,2 +1,19 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Slider as r,XStack as c}from"tamagui";function o(){return t(c,{height:200,alignItems:"center",space:"$8",children:[e(i,{height:200,orientation:"vertical"}),e(i,{width:200})]})}function i({children:a,...l}){return t(r,{defaultValue:[50],max:100,step:1,...l,children:[e(r.Track,{children:e(r.TrackActive,{})}),e(r.Thumb,{index:0,circular:!0,elevate:!0}),a]})}export{o as SliderDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider, XStack } from "tamagui";
+function SliderDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { height: 200, alignItems: "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, { index: 0, circular: true, elevate: true }),
+    children
+  ] });
+}
+export {
+  SliderDemo
+};
 //# sourceMappingURL=SliderDemo.mjs.map

package/dist/esm/SliderDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
   "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} alignItems=\"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 index={0} circular elevate />\n      {children}\n    </Slider>\n  )\n}\n"],
-  "mappings": "AAII,OACE,OAAAA,EADF,QAAAC,MAAA,oBAJJ,OAAS,UAAAC,EAA6B,UAAAC,MAAc,UAE7C,SAASC,GAAa,CAC3B,OACEH,EAACE,EAAA,CAAO,OAAQ,IAAK,WAAW,SAAS,MAAM,KAC7C,UAAAH,EAACK,EAAA,CAAa,OAAQ,IAAK,YAAY,WAAW,EAClDL,EAACK,EAAA,CAAa,MAAO,IAAK,GAC5B,CAEJ,CAEA,SAASA,EAAa,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAgB,CACzD,OACEN,EAACC,EAAA,CAAO,aAAc,CAAC,EAAE,EAAG,IAAK,IAAK,KAAM,EAAI,GAAGK,EACjD,UAAAP,EAACE,EAAO,MAAP,CACC,SAAAF,EAACE,EAAO,YAAP,EAAmB,EACtB,EACAF,EAACE,EAAO,MAAP,CAAa,MAAO,EAAG,SAAQ,GAAC,QAAO,GAAC,EACxCI,GACH,CAEJ",
-  "names": ["jsx", "jsxs", "Slider", "XStack", "SliderDemo", "SimpleSlider", "children", "props"]
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,QAAQ,KAAK,YAAW,UAAS,OAAM,MAC7C;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,OAAO,GAAG,UAAQ,MAAC,SAAO,MAAC;AAAA,IACxC;AAAA,KACH;AAEJ;",
+  "names": []
 }

package/dist/esm/SpinnerDemo.js

@@ -1,2 +1,12 @@
-import{jsx as n,jsxs as o}from"react/jsx-runtime";import{Spinner as e,YStack as r}from"tamagui";function i(){return o(r,{padding:"$3",space:"$4",alignItems:"center",children:[n(e,{size:"small",color:"$green10"}),n(e,{size:"large",color:"$orange10"})]})}export{i as SpinnerDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner, YStack } from "tamagui";
+function SpinnerDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", space: "$4", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Spinner, { size: "small", color: "$green10" }),
+    /* @__PURE__ */ jsx(Spinner, { size: "large", color: "$orange10" })
+  ] });
+}
+export {
+  SpinnerDemo
+};
 //# sourceMappingURL=SpinnerDemo.js.map

package/dist/esm/SpinnerDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SpinnerDemo.tsx"],
   "sourcesContent": ["import { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack padding=\"$3\" space=\"$4\" alignItems=\"center\">\n      <Spinner size=\"small\" color=\"$green10\" />\n      <Spinner size=\"large\" color=\"$orange10\" />\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAII,OACE,OAAAA,EADF,QAAAC,MAAA,oBAJJ,OAAS,WAAAC,EAAS,UAAAC,MAAc,UAEzB,SAASC,GAAc,CAC5B,OACEH,EAACE,EAAA,CAAO,QAAQ,KAAK,MAAM,KAAK,WAAW,SACzC,UAAAH,EAACE,EAAA,CAAQ,KAAK,QAAQ,MAAM,WAAW,EACvCF,EAACE,EAAA,CAAQ,KAAK,QAAQ,MAAM,YAAY,GAC1C,CAEJ",
-  "names": ["jsx", "jsxs", "Spinner", "YStack", "SpinnerDemo"]
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,SAAS,cAAc;AAEzB,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,SAAQ,MAAK,OAAM,MAAK,YAAW,UACzC;AAAA,wBAAC,WAAQ,MAAK,SAAQ,OAAM,YAAW;AAAA,IACvC,oBAAC,WAAQ,MAAK,SAAQ,OAAM,aAAY;AAAA,KAC1C;AAEJ;",
+  "names": []
 }

package/dist/esm/SpinnerDemo.mjs

@@ -1,2 +1,12 @@
-import{jsx as n,jsxs as o}from"react/jsx-runtime";import{Spinner as e,YStack as r}from"tamagui";function i(){return o(r,{padding:"$3",space:"$4",alignItems:"center",children:[n(e,{size:"small",color:"$green10"}),n(e,{size:"large",color:"$orange10"})]})}export{i as SpinnerDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner, YStack } from "tamagui";
+function SpinnerDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", space: "$4", alignItems: "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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SpinnerDemo.tsx"],
   "sourcesContent": ["import { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack padding=\"$3\" space=\"$4\" alignItems=\"center\">\n      <Spinner size=\"small\" color=\"$green10\" />\n      <Spinner size=\"large\" color=\"$orange10\" />\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAII,OACE,OAAAA,EADF,QAAAC,MAAA,oBAJJ,OAAS,WAAAC,EAAS,UAAAC,MAAc,UAEzB,SAASC,GAAc,CAC5B,OACEH,EAACE,EAAA,CAAO,QAAQ,KAAK,MAAM,KAAK,WAAW,SACzC,UAAAH,EAACE,EAAA,CAAQ,KAAK,QAAQ,MAAM,WAAW,EACvCF,EAACE,EAAA,CAAQ,KAAK,QAAQ,MAAM,YAAY,GAC1C,CAEJ",
-  "names": ["jsx", "jsxs", "Spinner", "YStack", "SpinnerDemo"]
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,SAAS,cAAc;AAEzB,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,SAAQ,MAAK,OAAM,MAAK,YAAW,UACzC;AAAA,wBAAC,WAAQ,MAAK,SAAQ,OAAM,YAAW;AAAA,IACvC,oBAAC,WAAQ,MAAK,SAAQ,OAAM,aAAY;AAAA,KAC1C;AAEJ;",
+  "names": []
 }

package/dist/esm/StacksDemo.js

@@ -1,2 +1,58 @@
-import{jsx as d,jsxs as o}from"react/jsx-runtime";import{XStack as a,YStack as r,ZStack as e}from"tamagui";function l(){return o(a,{maxWidth:250,padding:"$2",alignSelf:"center",space:!0,children:[o(r,{flex:1,space:"$2",borderWidth:2,borderColor:"$color",borderRadius:"$4",padding:"$2",children:[d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"}),d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"}),d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"})]}),o(a,{flex:1,space:"$2",borderWidth:2,borderColor:"$color",borderRadius:"$4",padding:"$2",children:[d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"}),d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"}),d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"})]}),o(e,{maxWidth:50,maxHeight:85,width:100,flex:1,children:[d(r,{fullscreen:!0,borderWidth:2,borderRadius:"$4",padding:"$2"}),d(r,{fullscreen:!0,y:10,x:10,borderWidth:2,borderRadius:"$4",padding:"$2"}),d(r,{fullscreen:!0,y:20,x:20,borderWidth:2,backgroundColor:"$color",borderRadius:"$4",padding:"$2"})]})]})}export{l as StacksDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XStack, YStack, ZStack } from "tamagui";
+function StacksDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { maxWidth: 250, padding: "$2", alignSelf: "center", space: true, children: [
+    /* @__PURE__ */ jsxs(
+      YStack,
+      {
+        flex: 1,
+        space: "$2",
+        borderWidth: 2,
+        borderColor: "$color",
+        borderRadius: "$4",
+        padding: "$2",
+        children: [
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      XStack,
+      {
+        flex: 1,
+        space: "$2",
+        borderWidth: 2,
+        borderColor: "$color",
+        borderRadius: "$4",
+        padding: "$2",
+        children: [
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(ZStack, { maxWidth: 50, maxHeight: 85, width: 100, flex: 1, children: [
+      /* @__PURE__ */ jsx(YStack, { fullscreen: true, borderWidth: 2, borderRadius: "$4", padding: "$2" }),
+      /* @__PURE__ */ jsx(YStack, { fullscreen: true, y: 10, x: 10, borderWidth: 2, borderRadius: "$4", padding: "$2" }),
+      /* @__PURE__ */ jsx(
+        YStack,
+        {
+          fullscreen: true,
+          y: 20,
+          x: 20,
+          borderWidth: 2,
+          backgroundColor: "$color",
+          borderRadius: "$4",
+          padding: "$2"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  StacksDemo
+};
 //# sourceMappingURL=StacksDemo.js.map

package/dist/esm/StacksDemo.js.map

@@ -2,6 +2,6 @@
   "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 maxWidth={250} padding=\"$2\" alignSelf=\"center\" space>\n      <YStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </YStack>\n\n      <XStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </XStack>\n\n      <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>\n        <YStack fullscreen borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack fullscreen y={10} x={10} borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack\n          fullscreen\n          y={20}\n          x={20}\n          borderWidth={2}\n          backgroundColor=\"$color\"\n          borderRadius=\"$4\"\n          padding=\"$2\"\n        />\n      </ZStack>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAMM,OAQE,OAAAA,EARF,QAAAC,MAAA,oBALN,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEhC,SAASC,GAAa,CAC3B,OACEJ,EAACC,EAAA,CAAO,SAAU,IAAK,QAAQ,KAAK,UAAU,SAAS,MAAK,GAC1D,UAAAD,EAACE,EAAA,CACC,KAAM,EACN,MAAM,KACN,YAAa,EACb,YAAY,SACZ,aAAa,KACb,QAAQ,KAER,UAAAH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,EAChEH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,EAChEH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,GAClE,EAEAF,EAACC,EAAA,CACC,KAAM,EACN,MAAM,KACN,YAAa,EACb,YAAY,SACZ,aAAa,KACb,QAAQ,KAER,UAAAF,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,EAChEH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,EAChEH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,GAClE,EAEAF,EAACG,EAAA,CAAO,SAAU,GAAI,UAAW,GAAI,MAAO,IAAK,KAAM,EACrD,UAAAJ,EAACG,EAAA,CAAO,WAAU,GAAC,YAAa,EAAG,aAAa,KAAK,QAAQ,KAAK,EAClEH,EAACG,EAAA,CAAO,WAAU,GAAC,EAAG,GAAI,EAAG,GAAI,YAAa,EAAG,aAAa,KAAK,QAAQ,KAAK,EAChFH,EAACG,EAAA,CACC,WAAU,GACV,EAAG,GACH,EAAG,GACH,YAAa,EACb,gBAAgB,SAChB,aAAa,KACb,QAAQ,KACV,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "XStack", "YStack", "ZStack", "StacksDemo"]
+  "mappings": "AAMM,SAQE,KARF;AALN,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,UAAU,KAAK,SAAQ,MAAK,WAAU,UAAS,OAAK,MAC1D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,8BAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,oBAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,oBAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,8BAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,oBAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,oBAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA,qBAAC,UAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM,GACrD;AAAA,0BAAC,UAAO,YAAU,MAAC,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAClE,oBAAC,UAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAChF;AAAA,QAAC;AAAA;AAAA,UACC,YAAU;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,cAAa;AAAA,UACb,SAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/StacksDemo.mjs

@@ -1,2 +1,58 @@
-import{jsx as d,jsxs as o}from"react/jsx-runtime";import{XStack as a,YStack as r,ZStack as e}from"tamagui";function l(){return o(a,{maxWidth:250,padding:"$2",alignSelf:"center",space:!0,children:[o(r,{flex:1,space:"$2",borderWidth:2,borderColor:"$color",borderRadius:"$4",padding:"$2",children:[d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"}),d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"}),d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"})]}),o(a,{flex:1,space:"$2",borderWidth:2,borderColor:"$color",borderRadius:"$4",padding:"$2",children:[d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"}),d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"}),d(r,{backgroundColor:"$color",borderRadius:"$3",padding:"$2"})]}),o(e,{maxWidth:50,maxHeight:85,width:100,flex:1,children:[d(r,{fullscreen:!0,borderWidth:2,borderRadius:"$4",padding:"$2"}),d(r,{fullscreen:!0,y:10,x:10,borderWidth:2,borderRadius:"$4",padding:"$2"}),d(r,{fullscreen:!0,y:20,x:20,borderWidth:2,backgroundColor:"$color",borderRadius:"$4",padding:"$2"})]})]})}export{l as StacksDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XStack, YStack, ZStack } from "tamagui";
+function StacksDemo() {
+  return /* @__PURE__ */ jsxs(XStack, { maxWidth: 250, padding: "$2", alignSelf: "center", space: true, children: [
+    /* @__PURE__ */ jsxs(
+      YStack,
+      {
+        flex: 1,
+        space: "$2",
+        borderWidth: 2,
+        borderColor: "$color",
+        borderRadius: "$4",
+        padding: "$2",
+        children: [
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      XStack,
+      {
+        flex: 1,
+        space: "$2",
+        borderWidth: 2,
+        borderColor: "$color",
+        borderRadius: "$4",
+        padding: "$2",
+        children: [
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ jsx(YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(ZStack, { maxWidth: 50, maxHeight: 85, width: 100, flex: 1, children: [
+      /* @__PURE__ */ jsx(YStack, { fullscreen: true, borderWidth: 2, borderRadius: "$4", padding: "$2" }),
+      /* @__PURE__ */ jsx(YStack, { fullscreen: true, y: 10, x: 10, borderWidth: 2, borderRadius: "$4", padding: "$2" }),
+      /* @__PURE__ */ jsx(
+        YStack,
+        {
+          fullscreen: true,
+          y: 20,
+          x: 20,
+          borderWidth: 2,
+          backgroundColor: "$color",
+          borderRadius: "$4",
+          padding: "$2"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  StacksDemo
+};
 //# sourceMappingURL=StacksDemo.mjs.map

package/dist/esm/StacksDemo.mjs.map

@@ -2,6 +2,6 @@
   "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 maxWidth={250} padding=\"$2\" alignSelf=\"center\" space>\n      <YStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </YStack>\n\n      <XStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </XStack>\n\n      <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>\n        <YStack fullscreen borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack fullscreen y={10} x={10} borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack\n          fullscreen\n          y={20}\n          x={20}\n          borderWidth={2}\n          backgroundColor=\"$color\"\n          borderRadius=\"$4\"\n          padding=\"$2\"\n        />\n      </ZStack>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAMM,OAQE,OAAAA,EARF,QAAAC,MAAA,oBALN,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEhC,SAASC,GAAa,CAC3B,OACEJ,EAACC,EAAA,CAAO,SAAU,IAAK,QAAQ,KAAK,UAAU,SAAS,MAAK,GAC1D,UAAAD,EAACE,EAAA,CACC,KAAM,EACN,MAAM,KACN,YAAa,EACb,YAAY,SACZ,aAAa,KACb,QAAQ,KAER,UAAAH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,EAChEH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,EAChEH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,GAClE,EAEAF,EAACC,EAAA,CACC,KAAM,EACN,MAAM,KACN,YAAa,EACb,YAAY,SACZ,aAAa,KACb,QAAQ,KAER,UAAAF,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,EAChEH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,EAChEH,EAACG,EAAA,CAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,GAClE,EAEAF,EAACG,EAAA,CAAO,SAAU,GAAI,UAAW,GAAI,MAAO,IAAK,KAAM,EACrD,UAAAJ,EAACG,EAAA,CAAO,WAAU,GAAC,YAAa,EAAG,aAAa,KAAK,QAAQ,KAAK,EAClEH,EAACG,EAAA,CAAO,WAAU,GAAC,EAAG,GAAI,EAAG,GAAI,YAAa,EAAG,aAAa,KAAK,QAAQ,KAAK,EAChFH,EAACG,EAAA,CACC,WAAU,GACV,EAAG,GACH,EAAG,GACH,YAAa,EACb,gBAAgB,SAChB,aAAa,KACb,QAAQ,KACV,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "XStack", "YStack", "ZStack", "StacksDemo"]
+  "mappings": "AAMM,SAQE,KARF;AALN,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,UAAU,KAAK,SAAQ,MAAK,WAAU,UAAS,OAAK,MAC1D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,8BAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,oBAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,oBAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,8BAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,oBAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,oBAAC,UAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA,qBAAC,UAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM,GACrD;AAAA,0BAAC,UAAO,YAAU,MAAC,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAClE,oBAAC,UAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAChF;AAAA,QAAC;AAAA;AAAA,UACC,YAAU;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,cAAa;AAAA,UACb,SAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/SwitchDemo.js

@@ -1,2 +1,32 @@
-import{jsx as i,jsxs as s}from"react/jsx-runtime";import{Label as a,Separator as h,Switch as c,XStack as o,YStack as z}from"tamagui";function l(){return s(z,{width:200,alignItems:"center",space:"$3",children:[i(e,{size:"$2"}),i(e,{size:"$3"}),i(e,{size:"$4"}),i(e,{size:"$5"})]})}function e(t){const n=`switch-${t.size.toString().slice(1)}`;return s(o,{width:200,alignItems:"center",space:"$4",children:[i(a,{paddingRight:"$0",minWidth:90,justifyContent:"flex-end",size:t.size,htmlFor:n,children:"Dark mode"}),i(h,{minHeight:20,vertical:!0}),i(c,{id:n,size:t.size,children:i(c.Thumb,{animation:"quick"})})]})}export{l as SwitchDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+function SwitchDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { width: 200, alignItems: "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, { width: 200, alignItems: "center", space: "$4", children: [
+    /* @__PURE__ */ jsx(
+      Label,
+      {
+        paddingRight: "$0",
+        minWidth: 90,
+        justifyContent: "flex-end",
+        size: props.size,
+        htmlFor: id,
+        children: "Dark mode"
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, { minHeight: 20, vertical: true }),
+    /* @__PURE__ */ jsx(Switch, { id, size: props.size, children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
+  ] });
+}
+export {
+  SwitchDemo
+};
 //# sourceMappingURL=SwitchDemo.js.map

package/dist/esm/SwitchDemo.js.map

@@ -2,6 +2,6 @@
   "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 width={200} alignItems=\"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 width={200} alignItems=\"center\" space=\"$4\">\n      <Label\n        paddingRight=\"$0\"\n        minWidth={90}\n        justifyContent=\"flex-end\"\n        size={props.size}\n        htmlFor={id}\n      >\n        Dark mode\n      </Label>\n      <Separator minHeight={20} vertical />\n      <Switch id={id} size={props.size}>\n        <Switch.Thumb animation=\"quick\" />\n      </Switch>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAII,OACE,OAAAA,EADF,QAAAC,MAAA,oBAJJ,OAAS,SAAAC,EAAO,aAAAC,EAAuB,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAsB,UAEtE,SAASC,GAAa,CAC3B,OACEN,EAACK,EAAA,CAAO,MAAO,IAAK,WAAW,SAAS,MAAM,KAC5C,UAAAN,EAACQ,EAAA,CAAgB,KAAK,KAAK,EAC3BR,EAACQ,EAAA,CAAgB,KAAK,KAAK,EAC3BR,EAACQ,EAAA,CAAgB,KAAK,KAAK,EAC3BR,EAACQ,EAAA,CAAgB,KAAK,KAAK,GAC7B,CAEJ,CAEA,SAASA,EAAgBC,EAA6B,CACpD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IAClD,OACER,EAACI,EAAA,CAAO,MAAO,IAAK,WAAW,SAAS,MAAM,KAC5C,UAAAL,EAACE,EAAA,CACC,aAAa,KACb,SAAU,GACV,eAAe,WACf,KAAMO,EAAM,KACZ,QAASC,EACV,qBAED,EACAV,EAACG,EAAA,CAAU,UAAW,GAAI,SAAQ,GAAC,EACnCH,EAACI,EAAA,CAAO,GAAIM,EAAI,KAAMD,EAAM,KAC1B,SAAAT,EAACI,EAAO,MAAP,CAAa,UAAU,QAAQ,EAClC,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Label", "Separator", "Switch", "XStack", "YStack", "SwitchDemo", "SwitchWithLabel", "props", "id"]
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;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,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,oBAAC,aAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,oBAAC,UAAO,IAAQ,MAAM,MAAM,MAC1B,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/esm/SwitchDemo.mjs

@@ -1,2 +1,32 @@
-import{jsx as i,jsxs as s}from"react/jsx-runtime";import{Label as a,Separator as h,Switch as c,XStack as o,YStack as z}from"tamagui";function l(){return s(z,{width:200,alignItems:"center",space:"$3",children:[i(e,{size:"$2"}),i(e,{size:"$3"}),i(e,{size:"$4"}),i(e,{size:"$5"})]})}function e(t){const n=`switch-${t.size.toString().slice(1)}`;return s(o,{width:200,alignItems:"center",space:"$4",children:[i(a,{paddingRight:"$0",minWidth:90,justifyContent:"flex-end",size:t.size,htmlFor:n,children:"Dark mode"}),i(h,{minHeight:20,vertical:!0}),i(c,{id:n,size:t.size,children:i(c.Thumb,{animation:"quick"})})]})}export{l as SwitchDemo};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+function SwitchDemo() {
+  return /* @__PURE__ */ jsxs(YStack, { width: 200, alignItems: "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, { width: 200, alignItems: "center", space: "$4", children: [
+    /* @__PURE__ */ jsx(
+      Label,
+      {
+        paddingRight: "$0",
+        minWidth: 90,
+        justifyContent: "flex-end",
+        size: props.size,
+        htmlFor: id,
+        children: "Dark mode"
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, { minHeight: 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

@@ -2,6 +2,6 @@
   "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 width={200} alignItems=\"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 width={200} alignItems=\"center\" space=\"$4\">\n      <Label\n        paddingRight=\"$0\"\n        minWidth={90}\n        justifyContent=\"flex-end\"\n        size={props.size}\n        htmlFor={id}\n      >\n        Dark mode\n      </Label>\n      <Separator minHeight={20} vertical />\n      <Switch id={id} size={props.size}>\n        <Switch.Thumb animation=\"quick\" />\n      </Switch>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAII,OACE,OAAAA,EADF,QAAAC,MAAA,oBAJJ,OAAS,SAAAC,EAAO,aAAAC,EAAuB,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAsB,UAEtE,SAASC,GAAa,CAC3B,OACEN,EAACK,EAAA,CAAO,MAAO,IAAK,WAAW,SAAS,MAAM,KAC5C,UAAAN,EAACQ,EAAA,CAAgB,KAAK,KAAK,EAC3BR,EAACQ,EAAA,CAAgB,KAAK,KAAK,EAC3BR,EAACQ,EAAA,CAAgB,KAAK,KAAK,EAC3BR,EAACQ,EAAA,CAAgB,KAAK,KAAK,GAC7B,CAEJ,CAEA,SAASA,EAAgBC,EAA6B,CACpD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IAClD,OACER,EAACI,EAAA,CAAO,MAAO,IAAK,WAAW,SAAS,MAAM,KAC5C,UAAAL,EAACE,EAAA,CACC,aAAa,KACb,SAAU,GACV,eAAe,WACf,KAAMO,EAAM,KACZ,QAASC,EACV,qBAED,EACAV,EAACG,EAAA,CAAU,UAAW,GAAI,SAAQ,GAAC,EACnCH,EAACI,EAAA,CAAO,GAAIM,EAAI,KAAMD,EAAM,KAC1B,SAAAT,EAACI,EAAO,MAAP,CAAa,UAAU,QAAQ,EAClC,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Label", "Separator", "Switch", "XStack", "YStack", "SwitchDemo", "SwitchWithLabel", "props", "id"]
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;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,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,oBAAC,aAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,oBAAC,UAAO,IAAQ,MAAM,MAAM,MAC1B,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
+  "names": []
 }