@tamagui/demos 1.11.2 → 1.12.0

package/dist/esm/TabsDemo.js

@@ -1,14 +1,28 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, H5, SizableText, Tabs, XStack } from "tamagui";
+import { Button, H5, SizableText, Tabs, XStack, YStack } from "tamagui";
 const demos = ["horizontal", "vertical"];
 function TabsDemo() {
   const [demoIndex, setDemoIndex] = useState(0);
   const demo = demos[demoIndex];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    demo === "horizontal" ? /* @__PURE__ */ jsx(HorizontalTabs, {}) : /* @__PURE__ */ jsx(VerticalTabs, {}),
-    /* @__PURE__ */ jsx(XStack, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demo }) })
-  ] });
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */ jsxs(YStack, { paddingHorizontal: "$4", position: "unset", children: [
+      demo === "horizontal" ? /* @__PURE__ */ jsx(HorizontalTabs, {}) : /* @__PURE__ */ jsx(VerticalTabs, {}),
+      /* @__PURE__ */ jsx(
+        XStack,
+        {
+          alignItems: "center",
+          space: true,
+          position: "absolute",
+          bottom: "$3",
+          left: "$4",
+          $xxs: { display: "none" },
+          children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demo })
+        }
+      )
+    ] })
+  );
 }
 const HorizontalTabs = () => {
   return /* @__PURE__ */ jsxs(
@@ -19,16 +33,49 @@ const HorizontalTabs = () => {
       flexDirection: "column",
       width: 400,
       height: 150,
-      br: "$4",
+      borderRadius: "$4",
       children: [
         /* @__PURE__ */ jsxs(Tabs.List, { disablePassBorderRadius: "bottom", "aria-label": "Manage your account", children: [
-          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", f: 1, value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Profile" }) }),
-          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", f: 1, value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Connections" }) }),
-          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", f: 1, value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Notifications" }) })
+          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", flex: 1, value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Profile" }) }),
+          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", flex: 1, value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Connections" }) }),
+          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", flex: 1, value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Notifications" }) })
         ] }),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab1", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { children: "Profile" }) }, "tab1"),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab2", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { children: "Connections" }) }, "tab2"),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab3", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { children: "Notifications" }) }, "tab3")
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab1",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { children: "Profile" })
+          },
+          "tab1"
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab2",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { children: "Connections" })
+          },
+          "tab2"
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab3",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { children: "Notifications" })
+          },
+          "tab3"
+        )
       ]
     }
   );
@@ -41,16 +88,49 @@ const VerticalTabs = () => {
       flexDirection: "row",
       orientation: "vertical",
       width: 400,
-      br: "$4",
+      borderRadius: "$4",
       children: [
         /* @__PURE__ */ jsxs(Tabs.List, { disablePassBorderRadius: "end", "aria-label": "Manage your account", children: [
           /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
           /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
           /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
         ] }),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab1", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Profile" }) }, "tab1"),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab2", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Connections" }) }, "tab2"),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab3", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Notifications" }) }, "tab3")
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab1",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Profile" })
+          },
+          "tab1"
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab2",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Connections" })
+          },
+          "tab2"
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab3",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Notifications" })
+          },
+          "tab3"
+        )
       ]
     }
   );

package/dist/esm/TabsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    <>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      br=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Profile</H5>\n      </Tabs.Content>\n\n      <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Connections</H5>\n      </Tabs.Content>\n\n      <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      br=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Profile</H5>\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Connections</H5>\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack, YStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    // web only fix for position relative\n    <YStack paddingHorizontal=\"$4\" position={'unset' as any}>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack\n        alignItems=\"center\"\n        space\n        position=\"absolute\"\n        bottom=\"$3\"\n        left=\"$4\"\n        $xxs={{ display: 'none' }}\n      >\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </YStack>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      borderRadius=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content\n        value=\"tab1\"\n        key=\"tab1\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Profile</H5>\n      </Tabs.Content>\n\n      <Tabs.Content\n        value=\"tab2\"\n        key=\"tab2\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Connections</H5>\n      </Tabs.Content>\n\n      <Tabs.Content\n        value=\"tab3\"\n        key=\"tab3\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      borderRadius=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content\n        value=\"tab1\"\n        key=\"tab1\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Profile</H5>\n      </Tabs.Content>\n      <Tabs.Content\n        value=\"tab2\"\n        key=\"tab2\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Connections</H5>\n      </Tabs.Content>\n      <Tabs.Content\n        value=\"tab3\"\n        key=\"tab3\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/TabsDemo.mjs

@@ -1,14 +1,28 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, H5, SizableText, Tabs, XStack } from "tamagui";
+import { Button, H5, SizableText, Tabs, XStack, YStack } from "tamagui";
 const demos = ["horizontal", "vertical"];
 function TabsDemo() {
   const [demoIndex, setDemoIndex] = useState(0);
   const demo = demos[demoIndex];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    demo === "horizontal" ? /* @__PURE__ */ jsx(HorizontalTabs, {}) : /* @__PURE__ */ jsx(VerticalTabs, {}),
-    /* @__PURE__ */ jsx(XStack, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demo }) })
-  ] });
+  return (
+    // web only fix for position relative
+    /* @__PURE__ */ jsxs(YStack, { paddingHorizontal: "$4", position: "unset", children: [
+      demo === "horizontal" ? /* @__PURE__ */ jsx(HorizontalTabs, {}) : /* @__PURE__ */ jsx(VerticalTabs, {}),
+      /* @__PURE__ */ jsx(
+        XStack,
+        {
+          alignItems: "center",
+          space: true,
+          position: "absolute",
+          bottom: "$3",
+          left: "$4",
+          $xxs: { display: "none" },
+          children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demo })
+        }
+      )
+    ] })
+  );
 }
 const HorizontalTabs = () => {
   return /* @__PURE__ */ jsxs(
@@ -19,16 +33,49 @@ const HorizontalTabs = () => {
       flexDirection: "column",
       width: 400,
       height: 150,
-      br: "$4",
+      borderRadius: "$4",
       children: [
         /* @__PURE__ */ jsxs(Tabs.List, { disablePassBorderRadius: "bottom", "aria-label": "Manage your account", children: [
-          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", f: 1, value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Profile" }) }),
-          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", f: 1, value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Connections" }) }),
-          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", f: 1, value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Notifications" }) })
+          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", flex: 1, value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Profile" }) }),
+          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", flex: 1, value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Connections" }) }),
+          /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", flex: 1, value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { fontFamily: "$body", children: "Notifications" }) })
         ] }),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab1", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { children: "Profile" }) }, "tab1"),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab2", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { children: "Connections" }) }, "tab2"),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab3", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { children: "Notifications" }) }, "tab3")
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab1",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { children: "Profile" })
+          },
+          "tab1"
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab2",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { children: "Connections" })
+          },
+          "tab2"
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab3",
+            padding: "$5",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { children: "Notifications" })
+          },
+          "tab3"
+        )
       ]
     }
   );
@@ -41,16 +88,49 @@ const VerticalTabs = () => {
       flexDirection: "row",
       orientation: "vertical",
       width: 400,
-      br: "$4",
+      borderRadius: "$4",
       children: [
         /* @__PURE__ */ jsxs(Tabs.List, { disablePassBorderRadius: "end", "aria-label": "Manage your account", children: [
           /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
           /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
           /* @__PURE__ */ jsx(Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
         ] }),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab1", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Profile" }) }, "tab1"),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab2", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Connections" }) }, "tab2"),
-        /* @__PURE__ */ jsx(Tabs.Content, { value: "tab3", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ jsx(H5, { ta: "center", children: "Notifications" }) }, "tab3")
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab1",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Profile" })
+          },
+          "tab1"
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab2",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Connections" })
+          },
+          "tab2"
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.Content,
+          {
+            value: "tab3",
+            padding: "$2",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: "Notifications" })
+          },
+          "tab3"
+        )
       ]
     }
   );

package/dist/esm/TabsDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    <>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      br=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Profile</H5>\n      </Tabs.Content>\n\n      <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Connections</H5>\n      </Tabs.Content>\n\n      <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      br=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Profile</H5>\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Connections</H5>\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack, YStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    // web only fix for position relative\n    <YStack paddingHorizontal=\"$4\" position={'unset' as any}>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack\n        alignItems=\"center\"\n        space\n        position=\"absolute\"\n        bottom=\"$3\"\n        left=\"$4\"\n        $xxs={{ display: 'none' }}\n      >\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </YStack>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      borderRadius=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content\n        value=\"tab1\"\n        key=\"tab1\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Profile</H5>\n      </Tabs.Content>\n\n      <Tabs.Content\n        value=\"tab2\"\n        key=\"tab2\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Connections</H5>\n      </Tabs.Content>\n\n      <Tabs.Content\n        value=\"tab3\"\n        key=\"tab3\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      borderRadius=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content\n        value=\"tab1\"\n        key=\"tab1\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Profile</H5>\n      </Tabs.Content>\n      <Tabs.Content\n        value=\"tab2\"\n        key=\"tab2\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Connections</H5>\n      </Tabs.Content>\n      <Tabs.Content\n        value=\"tab3\"\n        key=\"tab3\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/TextDemo.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Paragraph, SizableText, XStack, YStack } from "tamagui";
 function TextDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { space: "$2", ai: "center", children: [
+  return /* @__PURE__ */ jsxs(YStack, { space: "$2", alignItems: "center", children: [
     /* @__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" })
+    /* @__PURE__ */ jsx(Paragraph, { size: "$2", fontWeight: "800", children: "Paragraph" })
   ] });
 }
 export {

package/dist/esm/TextDemo.js.map

@@ -1,7 +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      <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,cACA,YADA;AALN,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,OAAM,MAAK,IAAG,UACpB;AAAA,wBAAC,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;",
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" alignItems=\"center\">\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\" fontWeight=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAMM,cACA,YADA;AALN,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,wBAAC,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,YAAW,OAAM,uBAEtC;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/TextDemo.mjs

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Paragraph, SizableText, XStack, YStack } from "tamagui";
 function TextDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { space: "$2", ai: "center", children: [
+  return /* @__PURE__ */ jsxs(YStack, { space: "$2", alignItems: "center", children: [
     /* @__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" })
+    /* @__PURE__ */ jsx(Paragraph, { size: "$2", fontWeight: "800", children: "Paragraph" })
   ] });
 }
 export {

package/dist/esm/TextDemo.mjs.map

@@ -1,7 +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      <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,cACA,YADA;AALN,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,OAAM,MAAK,IAAG,UACpB;AAAA,wBAAC,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;",
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" alignItems=\"center\">\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\" fontWeight=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAMM,cACA,YADA;AALN,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,wBAAC,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,YAAW,OAAM,uBAEtC;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/ThemeInverseDemo.js

@@ -7,7 +7,7 @@ function ThemeInverseDemo() {
   ] });
 }
 function Buttons() {
-  return /* @__PURE__ */ jsxs(YStack, { bc: "$background", p: "$3", br: "$3", space: true, children: [
+  return /* @__PURE__ */ jsxs(YStack, { backgroundColor: "$background", padding: "$3", borderRadius: "$3", space: true, children: [
     /* @__PURE__ */ jsx(Button, { children: "Dark" }),
     /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "Inversed" }),
     /* @__PURE__ */ jsx(Button, { theme: "alt1", children: "Alt1 Dark" }),

package/dist/esm/ThemeInverseDemo.js.map

@@ -1,7 +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;",
+  "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 backgroundColor=\"$background\" padding=\"$3\" borderRadius=\"$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,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;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": []
 }

package/dist/esm/ThemeInverseDemo.mjs

@@ -7,7 +7,7 @@ function ThemeInverseDemo() {
   ] });
 }
 function Buttons() {
-  return /* @__PURE__ */ jsxs(YStack, { bc: "$background", p: "$3", br: "$3", space: true, children: [
+  return /* @__PURE__ */ jsxs(YStack, { backgroundColor: "$background", padding: "$3", borderRadius: "$3", space: true, children: [
     /* @__PURE__ */ jsx(Button, { children: "Dark" }),
     /* @__PURE__ */ jsx(Button, { themeInverse: true, children: "Inversed" }),
     /* @__PURE__ */ jsx(Button, { theme: "alt1", children: "Alt1 Dark" }),

package/dist/esm/ThemeInverseDemo.mjs.map

@@ -1,7 +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;",
+  "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 backgroundColor=\"$background\" padding=\"$3\" borderRadius=\"$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,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAAK,OAAK,MACxE;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": []
 }

package/dist/esm/ToastDemo.js

@@ -1,23 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check } from "@tamagui/lucide-icons";
 import React from "react";
-import {
-  Button,
-  Checkbox,
-  Label,
-  Toast,
-  ToastImperativeProvider,
-  XStack,
-  YStack,
-  useToast
-} from "tamagui";
+import { Button, SizableText, Switch, Toast, XStack, YStack, useToast } from "tamagui";
 const ToastDemo = () => {
-  const [native, setNative] = React.useState([]);
-  return /* @__PURE__ */ jsxs(YStack, { space: "$5", children: [
-    /* @__PURE__ */ jsxs(ToastImperativeProvider, { options: { native }, children: [
-      /* @__PURE__ */ jsx(ToastControl, {}),
-      /* @__PURE__ */ jsx(CurrentToast, {})
-    ] }),
+  const [native, setNative] = React.useState(false);
+  return /* @__PURE__ */ jsxs(YStack, { space: true, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(ToastControl, { native }),
+    /* @__PURE__ */ jsx(CurrentToast, {}),
     /* @__PURE__ */ jsx(NativeOptions, { native, setNative })
   ] });
 };
@@ -43,15 +31,16 @@ const CurrentToast = () => {
     currentToast.id
   );
 };
-const ToastControl = () => {
+const ToastControl = ({ native }) => {
   const toast = useToast();
-  return /* @__PURE__ */ jsxs(XStack, { space: "$2", jc: "center", children: [
+  return /* @__PURE__ */ jsxs(XStack, { space: "$2", justifyContent: "center", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         onPress: () => {
           toast.show("Successfully saved!", {
-            message: "Don't worry, we've got your data."
+            message: "Don't worry, we've got your data.",
+            native
           });
         },
         children: "Show"
@@ -72,29 +61,32 @@ const NativeOptions = ({
   native,
   setNative
 }) => {
-  const supportedNativePlatforms = ["web", "mobile"];
-  return /* @__PURE__ */ jsx(XStack, { space: true, children: supportedNativePlatforms.map((platform) => /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$2", children: [
+  return /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
+    /* @__PURE__ */ jsx(SizableText, { size: "$1", children: "Custom" }),
     /* @__PURE__ */ jsx(
-      Checkbox,
+      Switch,
       {
-        id: platform,
-        checked: native == null ? void 0 : native.includes(platform),
-        onCheckedChange: (checked) => {
-          if (checked)
-            setNative([...native, platform]);
-          else
-            setNative(native.filter((val) => val !== platform));
-        },
-        size: "$3",
-        children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(Check, {}) })
+        theme: "active",
+        size: "$1",
+        checked: !!native,
+        onCheckedChange: (val) => setNative(val),
+        children: /* @__PURE__ */ jsx(
+          Switch.Thumb,
+          {
+            animation: [
+              "quick",
+              {
+                transform: {
+                  overshootClamping: true
+                }
+              }
+            ]
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsxs(Label, { size: "$3", htmlFor: platform, children: [
-      "Native ",
-      platform,
-      " toast"
-    ] })
-  ] }, platform)) });
+    /* @__PURE__ */ jsx(SizableText, { size: "$1", children: "Native" })
+  ] });
 };
 export {
   ToastDemo