@tamagui/demos 1.11.2 → 1.12.0

package/dist/jsx/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/jsx/TextDemo.js

@@ -1,12 +1,12 @@
 import { Paragraph, SizableText, XStack, YStack } from "tamagui";
 function TextDemo() {
-  return <YStack space="$2" ai="center">
+  return <YStack space="$2" alignItems="center">
     <SizableText size="$3">SizableText</SizableText>
     <XStack space>
       <SizableText theme="alt1" size="$3">alt1</SizableText>
       <SizableText theme="alt2" size="$3">alt2</SizableText>
     </XStack>
-    <Paragraph size="$2" fow="800">Paragraph</Paragraph>
+    <Paragraph size="$2" fontWeight="800">Paragraph</Paragraph>
   </YStack>;
 }
 export {

package/dist/jsx/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": "AACA,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,CAAC,OAAO,MAAM,KAAK,GAAG;AAAA,IACpB,CAAC,YAAY,KAAK,KAAK,WAAW,EAAjC;AAAA,IACD,CAAC,OAAO;AAAA,MACN,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,UAAU,KAAK,KAAK,IAAI,MAAM,SAE/B,EAFC;AAAA,EAGH,EAbC;AAeL;",
+  "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": "AACA,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,YAAY,KAAK,KAAK,WAAW,EAAjC;AAAA,IACD,CAAC,OAAO;AAAA,MACN,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,UAAU,KAAK,KAAK,WAAW,MAAM,SAEtC,EAFC;AAAA,EAGH,EAbC;AAeL;",
   "names": []
 }

package/dist/jsx/TextDemo.mjs

@@ -1,12 +1,12 @@
 import { Paragraph, SizableText, XStack, YStack } from "tamagui";
 function TextDemo() {
-  return <YStack space="$2" ai="center">
+  return <YStack space="$2" alignItems="center">
     <SizableText size="$3">SizableText</SizableText>
     <XStack space>
       <SizableText theme="alt1" size="$3">alt1</SizableText>
       <SizableText theme="alt2" size="$3">alt2</SizableText>
     </XStack>
-    <Paragraph size="$2" fow="800">Paragraph</Paragraph>
+    <Paragraph size="$2" fontWeight="800">Paragraph</Paragraph>
   </YStack>;
 }
 export {

package/dist/jsx/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": "AACA,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,CAAC,OAAO,MAAM,KAAK,GAAG;AAAA,IACpB,CAAC,YAAY,KAAK,KAAK,WAAW,EAAjC;AAAA,IACD,CAAC,OAAO;AAAA,MACN,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,UAAU,KAAK,KAAK,IAAI,MAAM,SAE/B,EAFC;AAAA,EAGH,EAbC;AAeL;",
+  "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": "AACA,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,YAAY,KAAK,KAAK,WAAW,EAAjC;AAAA,IACD,CAAC,OAAO;AAAA,MACN,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,UAAU,KAAK,KAAK,WAAW,MAAM,SAEtC,EAFC;AAAA,EAGH,EAbC;AAeL;",
   "names": []
 }

package/dist/jsx/ThemeInverseDemo.js

@@ -6,7 +6,7 @@ function ThemeInverseDemo() {
   </XStack>;
 }
 function Buttons() {
-  return <YStack bc="$background" p="$3" br="$3" space>
+  return <YStack backgroundColor="$background" padding="$3" borderRadius="$3" space>
     <Button>Dark</Button>
     <Button themeInverse>Inversed</Button>
     <Button theme="alt1">Alt1 Dark</Button>

package/dist/jsx/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": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,GAAG,cAAc,EAAE,KAAK,GAAG,KAAK;AAAA,IACtC,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
+  "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": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAAK;AAAA,IACnE,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
   "names": []
 }

package/dist/jsx/ThemeInverseDemo.mjs

@@ -6,7 +6,7 @@ function ThemeInverseDemo() {
   </XStack>;
 }
 function Buttons() {
-  return <YStack bc="$background" p="$3" br="$3" space>
+  return <YStack backgroundColor="$background" padding="$3" borderRadius="$3" space>
     <Button>Dark</Button>
     <Button themeInverse>Inversed</Button>
     <Button theme="alt1">Alt1 Dark</Button>

package/dist/jsx/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": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,GAAG,cAAc,EAAE,KAAK,GAAG,KAAK;AAAA,IACtC,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
+  "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": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAAK;AAAA,IACnE,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
   "names": []
 }

package/dist/jsx/ToastDemo.js

@@ -1,22 +1,10 @@
-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 <YStack space="$5">
-    <ToastImperativeProvider options={{ native }}>
-      <ToastControl />
-      <CurrentToast />
-    </ToastImperativeProvider>
+  const [native, setNative] = React.useState(false);
+  return <YStack space alignItems="center">
+    <ToastControl native={native} />
+    <CurrentToast />
     <NativeOptions native={native} setNative={setNative} />
   </YStack>;
 };
@@ -38,13 +26,14 @@ const CurrentToast = () => {
     {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
   </YStack></Toast>;
 };
-const ToastControl = () => {
+const ToastControl = ({ native }) => {
   const toast = useToast();
-  return <XStack space="$2" jc="center">
+  return <XStack space="$2" justifyContent="center">
     <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
         });
       }}
     >Show</Button>
@@ -59,25 +48,25 @@ const NativeOptions = ({
   native,
   setNative
 }) => {
-  const supportedNativePlatforms = ["web", "mobile"];
-  return <XStack space>{supportedNativePlatforms.map((platform) => <XStack ai="center" space="$2" key={platform}>
-    <Checkbox
-      id={platform}
-      checked={native?.includes(platform)}
-      onCheckedChange={(checked) => {
-        if (checked)
-          setNative([...native, platform]);
-        else
-          setNative(native.filter((val) => val !== platform));
-      }}
-      size="$3"
-    ><Checkbox.Indicator><Check /></Checkbox.Indicator></Checkbox>
-    <Label size="$3" htmlFor={platform}>
-      {"Native "}
-      {platform}
-      {" toast"}
-    </Label>
-  </XStack>)}</XStack>;
+  return <XStack space="$3">
+    <SizableText size="$1">Custom</SizableText>
+    <Switch
+      theme="active"
+      size="$1"
+      checked={!!native}
+      onCheckedChange={(val) => setNative(val)}
+    ><Switch.Thumb
+      animation={[
+        "quick",
+        {
+          transform: {
+            overshootClamping: true
+          }
+        }
+      ]}
+    /></Switch>
+    <SizableText size="$1">Native</SizableText>
+  </XStack>;
 };
 export {
   ToastDemo

package/dist/jsx/ToastDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "sourcesContent": ["import { Check } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Checkbox,\n  Label,\n  Toast,\n  ToastImperativeProvider,\n  ToastNativePlatform,\n  XStack,\n  YStack,\n  useToast,\n} from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<ToastNativePlatform[]>([])\n\n  return (\n    <YStack space=\"$5\">\n      <ToastImperativeProvider options={{ native }}>\n        <ToastControl />\n        <CurrentToast />\n      </ToastImperativeProvider>\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = () => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" jc=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: ToastNativePlatform[]\n  setNative: (native: ToastNativePlatform[]) => void\n}) => {\n  const supportedNativePlatforms: ToastNativePlatform[] = ['web', 'mobile']\n\n  return (\n    <XStack space>\n      {supportedNativePlatforms.map((platform) => (\n        <XStack ai=\"center\" space=\"$2\" key={platform}>\n          <Checkbox\n            id={platform}\n            checked={native?.includes(platform)}\n            onCheckedChange={(checked) => {\n              if (checked) setNative([...native, platform])\n              else setNative(native.filter((val) => val !== platform))\n            }}\n            size=\"$3\"\n          >\n            <Checkbox.Indicator>\n              <Check />\n            </Checkbox.Indicator>\n          </Checkbox>\n          <Label size=\"$3\" htmlFor={platform}>\n            Native {platform} toast\n          </Label>\n        </XStack>\n      ))}\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAgC,CAAC,CAAC;AAEpE,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,wBAAwB,SAAS,EAAE,OAAO;AAAA,MACzC,CAAC,aAAa;AAAA,MACd,CAAC,aAAa;AAAA,IAChB,EAHC;AAAA,IAKD,CAAC,cAAc,QAAQ,QAAQ,WAAW,WAAW;AAAA,EACvD,EAPC;AASL;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE,CAAC;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,UAAU,aAAa;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,IAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,IAC1C,GAAG;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,GAEV,CAAC;AAAA,IACC,CAAC,MAAM,OAAO,aAAa,MAAM,EAAhC,MAAM;AAAA,KACN,CAAC,CAAC,aAAa,WACd,CAAC,MAAM,aAAa,aAAa,QAAQ,EAAxC,MAAM;AAAA,EAEX,EALC,OAMH,EAhBC;AAkBL;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,QAAQ,SAAS;AACvB,SACE,CAAC,OAAO,MAAM,KAAK,GAAG;AAAA,IACpB,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK,uBAAuB;AAAA,UAChC,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,KACD,IAED,EARC;AAAA,IASD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK;AAAA,MACb;AAAA,KACD,IAED,EANC;AAAA,EAOH,EAjBC;AAmBL;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,2BAAkD,CAAC,OAAO,QAAQ;AAExE,SACE,CAAC,OAAO,OACL,yBAAyB,IAAI,CAAC,aAC7B,CAAC,OAAO,GAAG,SAAS,MAAM,KAAK,KAAK;AAAA,IAClC,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,SAAS,QAAQ,SAAS,QAAQ;AAAA,MAClC,iBAAiB,CAAC,YAAY;AAC5B,YAAI;AAAS,oBAAU,CAAC,GAAG,QAAQ,QAAQ,CAAC;AAAA;AACvC,oBAAU,OAAO,OAAO,CAAC,QAAQ,QAAQ,QAAQ,CAAC;AAAA,MACzD;AAAA,MACA,KAAK;AAAA,KAEL,CAAC,SAAS,UACR,CAAC,MAAM,EACT,EAFC,SAAS,UAGZ,EAZC;AAAA,IAaD,CAAC,MAAM,KAAK,KAAK,SAAS;AAAA,OAAU;AAAA,OAC1B;AAAA,OAAS;AAAA,IACnB,EAFC;AAAA,EAGH,EAjBC,OAkBF,EACH,EArBC;AAuBL;",
+  "sourcesContent": ["import React from 'react'\nimport { Button, SizableText, Switch, Toast, XStack, YStack, useToast } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<boolean>(false)\n\n  return (\n    <YStack space alignItems=\"center\">\n      <ToastControl native={native} />\n      <CurrentToast />\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = ({ native }: { native: boolean }) => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" justifyContent=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n            native,\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: boolean\n  setNative: (native: boolean) => void\n}) => {\n  return (\n    <XStack space=\"$3\">\n      <SizableText size=\"$1\">Custom</SizableText>\n\n      <Switch\n        theme=\"active\"\n        size=\"$1\"\n        checked={!!native}\n        onCheckedChange={(val) => setNative(val)}\n      >\n        <Switch.Thumb\n          animation={[\n            'quick',\n            {\n              transform: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        />\n      </Switch>\n\n      <SizableText size=\"$1\">Native</SizableText>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,QAAQ,aAAa,QAAQ,OAAO,QAAQ,QAAQ,gBAAgB;AAEtE,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAkB,KAAK;AAEzD,SACE,CAAC,OAAO,MAAM,WAAW;AAAA,IACvB,CAAC,aAAa,QAAQ,QAAQ;AAAA,IAC9B,CAAC,aAAa;AAAA,IAEd,CAAC,cAAc,QAAQ,QAAQ,WAAW,WAAW;AAAA,EACvD,EALC;AAOL;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE,CAAC;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,UAAU,aAAa;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,IAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,IAC1C,GAAG;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,GAEV,CAAC;AAAA,IACC,CAAC,MAAM,OAAO,aAAa,MAAM,EAAhC,MAAM;AAAA,KACN,CAAC,CAAC,aAAa,WACd,CAAC,MAAM,aAAa,aAAa,QAAQ,EAAxC,MAAM;AAAA,EAEX,EALC,OAMH,EAhBC;AAkBL;AAEA,MAAM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,QAAQ,SAAS;AACvB,SACE,CAAC,OAAO,MAAM,KAAK,eAAe;AAAA,IAChC,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK,uBAAuB;AAAA,UAChC,SAAS;AAAA,UACT;AAAA,QACF,CAAC;AAAA,MACH;AAAA,KACD,IAED,EATC;AAAA,IAUD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK;AAAA,MACb;AAAA,KACD,IAED,EANC;AAAA,EAOH,EAlBC;AAoBL;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,YAAY,KAAK,KAAK,MAAM,EAA5B;AAAA,IAED,CAAC;AAAA,MACC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS,CAAC,CAAC;AAAA,MACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,KAEvC,CAAC,OAAO;AAAA,MACN,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,WAAW;AAAA,YACT,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,IACF,EACF,EAhBC;AAAA,IAkBD,CAAC,YAAY,KAAK,KAAK,MAAM,EAA5B;AAAA,EACH,EAtBC;AAwBL;",
   "names": []
 }

package/dist/jsx/ToastDemo.mjs

@@ -1,22 +1,10 @@
-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 <YStack space="$5">
-    <ToastImperativeProvider options={{ native }}>
-      <ToastControl />
-      <CurrentToast />
-    </ToastImperativeProvider>
+  const [native, setNative] = React.useState(false);
+  return <YStack space alignItems="center">
+    <ToastControl native={native} />
+    <CurrentToast />
     <NativeOptions native={native} setNative={setNative} />
   </YStack>;
 };
@@ -38,13 +26,14 @@ const CurrentToast = () => {
     {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
   </YStack></Toast>;
 };
-const ToastControl = () => {
+const ToastControl = ({ native }) => {
   const toast = useToast();
-  return <XStack space="$2" jc="center">
+  return <XStack space="$2" justifyContent="center">
     <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
         });
       }}
     >Show</Button>
@@ -59,25 +48,25 @@ const NativeOptions = ({
   native,
   setNative
 }) => {
-  const supportedNativePlatforms = ["web", "mobile"];
-  return <XStack space>{supportedNativePlatforms.map((platform) => <XStack ai="center" space="$2" key={platform}>
-    <Checkbox
-      id={platform}
-      checked={native?.includes(platform)}
-      onCheckedChange={(checked) => {
-        if (checked)
-          setNative([...native, platform]);
-        else
-          setNative(native.filter((val) => val !== platform));
-      }}
-      size="$3"
-    ><Checkbox.Indicator><Check /></Checkbox.Indicator></Checkbox>
-    <Label size="$3" htmlFor={platform}>
-      {"Native "}
-      {platform}
-      {" toast"}
-    </Label>
-  </XStack>)}</XStack>;
+  return <XStack space="$3">
+    <SizableText size="$1">Custom</SizableText>
+    <Switch
+      theme="active"
+      size="$1"
+      checked={!!native}
+      onCheckedChange={(val) => setNative(val)}
+    ><Switch.Thumb
+      animation={[
+        "quick",
+        {
+          transform: {
+            overshootClamping: true
+          }
+        }
+      ]}
+    /></Switch>
+    <SizableText size="$1">Native</SizableText>
+  </XStack>;
 };
 export {
   ToastDemo

package/dist/jsx/ToastDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "sourcesContent": ["import { Check } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Checkbox,\n  Label,\n  Toast,\n  ToastImperativeProvider,\n  ToastNativePlatform,\n  XStack,\n  YStack,\n  useToast,\n} from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<ToastNativePlatform[]>([])\n\n  return (\n    <YStack space=\"$5\">\n      <ToastImperativeProvider options={{ native }}>\n        <ToastControl />\n        <CurrentToast />\n      </ToastImperativeProvider>\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = () => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" jc=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: ToastNativePlatform[]\n  setNative: (native: ToastNativePlatform[]) => void\n}) => {\n  const supportedNativePlatforms: ToastNativePlatform[] = ['web', 'mobile']\n\n  return (\n    <XStack space>\n      {supportedNativePlatforms.map((platform) => (\n        <XStack ai=\"center\" space=\"$2\" key={platform}>\n          <Checkbox\n            id={platform}\n            checked={native?.includes(platform)}\n            onCheckedChange={(checked) => {\n              if (checked) setNative([...native, platform])\n              else setNative(native.filter((val) => val !== platform))\n            }}\n            size=\"$3\"\n          >\n            <Checkbox.Indicator>\n              <Check />\n            </Checkbox.Indicator>\n          </Checkbox>\n          <Label size=\"$3\" htmlFor={platform}>\n            Native {platform} toast\n          </Label>\n        </XStack>\n      ))}\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAgC,CAAC,CAAC;AAEpE,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,wBAAwB,SAAS,EAAE,OAAO;AAAA,MACzC,CAAC,aAAa;AAAA,MACd,CAAC,aAAa;AAAA,IAChB,EAHC;AAAA,IAKD,CAAC,cAAc,QAAQ,QAAQ,WAAW,WAAW;AAAA,EACvD,EAPC;AASL;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE,CAAC;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,UAAU,aAAa;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,IAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,IAC1C,GAAG;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,GAEV,CAAC;AAAA,IACC,CAAC,MAAM,OAAO,aAAa,MAAM,EAAhC,MAAM;AAAA,KACN,CAAC,CAAC,aAAa,WACd,CAAC,MAAM,aAAa,aAAa,QAAQ,EAAxC,MAAM;AAAA,EAEX,EALC,OAMH,EAhBC;AAkBL;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,QAAQ,SAAS;AACvB,SACE,CAAC,OAAO,MAAM,KAAK,GAAG;AAAA,IACpB,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK,uBAAuB;AAAA,UAChC,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,KACD,IAED,EARC;AAAA,IASD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK;AAAA,MACb;AAAA,KACD,IAED,EANC;AAAA,EAOH,EAjBC;AAmBL;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,2BAAkD,CAAC,OAAO,QAAQ;AAExE,SACE,CAAC,OAAO,OACL,yBAAyB,IAAI,CAAC,aAC7B,CAAC,OAAO,GAAG,SAAS,MAAM,KAAK,KAAK;AAAA,IAClC,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,SAAS,QAAQ,SAAS,QAAQ;AAAA,MAClC,iBAAiB,CAAC,YAAY;AAC5B,YAAI;AAAS,oBAAU,CAAC,GAAG,QAAQ,QAAQ,CAAC;AAAA;AACvC,oBAAU,OAAO,OAAO,CAAC,QAAQ,QAAQ,QAAQ,CAAC;AAAA,MACzD;AAAA,MACA,KAAK;AAAA,KAEL,CAAC,SAAS,UACR,CAAC,MAAM,EACT,EAFC,SAAS,UAGZ,EAZC;AAAA,IAaD,CAAC,MAAM,KAAK,KAAK,SAAS;AAAA,OAAU;AAAA,OAC1B;AAAA,OAAS;AAAA,IACnB,EAFC;AAAA,EAGH,EAjBC,OAkBF,EACH,EArBC;AAuBL;",
+  "sourcesContent": ["import React from 'react'\nimport { Button, SizableText, Switch, Toast, XStack, YStack, useToast } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<boolean>(false)\n\n  return (\n    <YStack space alignItems=\"center\">\n      <ToastControl native={native} />\n      <CurrentToast />\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = ({ native }: { native: boolean }) => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" justifyContent=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n            native,\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: boolean\n  setNative: (native: boolean) => void\n}) => {\n  return (\n    <XStack space=\"$3\">\n      <SizableText size=\"$1\">Custom</SizableText>\n\n      <Switch\n        theme=\"active\"\n        size=\"$1\"\n        checked={!!native}\n        onCheckedChange={(val) => setNative(val)}\n      >\n        <Switch.Thumb\n          animation={[\n            'quick',\n            {\n              transform: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        />\n      </Switch>\n\n      <SizableText size=\"$1\">Native</SizableText>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,QAAQ,aAAa,QAAQ,OAAO,QAAQ,QAAQ,gBAAgB;AAEtE,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAkB,KAAK;AAEzD,SACE,CAAC,OAAO,MAAM,WAAW;AAAA,IACvB,CAAC,aAAa,QAAQ,QAAQ;AAAA,IAC9B,CAAC,aAAa;AAAA,IAEd,CAAC,cAAc,QAAQ,QAAQ,WAAW,WAAW;AAAA,EACvD,EALC;AAOL;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE,CAAC;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,UAAU,aAAa;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,IAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,IAC1C,GAAG;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,GAEV,CAAC;AAAA,IACC,CAAC,MAAM,OAAO,aAAa,MAAM,EAAhC,MAAM;AAAA,KACN,CAAC,CAAC,aAAa,WACd,CAAC,MAAM,aAAa,aAAa,QAAQ,EAAxC,MAAM;AAAA,EAEX,EALC,OAMH,EAhBC;AAkBL;AAEA,MAAM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,QAAQ,SAAS;AACvB,SACE,CAAC,OAAO,MAAM,KAAK,eAAe;AAAA,IAChC,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK,uBAAuB;AAAA,UAChC,SAAS;AAAA,UACT;AAAA,QACF,CAAC;AAAA,MACH;AAAA,KACD,IAED,EATC;AAAA,IAUD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK;AAAA,MACb;AAAA,KACD,IAED,EANC;AAAA,EAOH,EAlBC;AAoBL;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,YAAY,KAAK,KAAK,MAAM,EAA5B;AAAA,IAED,CAAC;AAAA,MACC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS,CAAC,CAAC;AAAA,MACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,KAEvC,CAAC,OAAO;AAAA,MACN,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,WAAW;AAAA,YACT,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,IACF,EACF,EAhBC;AAAA,IAkBD,CAAC,YAAY,KAAK,KAAK,MAAM,EAA5B;AAAA,EACH,EAtBC;AAwBL;",
   "names": []
 }

package/dist/jsx/ToastDuplicateDemo.js

@@ -3,7 +3,7 @@ import React from "react";
 import { Button, Toast, XStack, YStack } from "tamagui";
 const ToastDuplicateDemo = () => {
   const [savedCount, setSavedCount] = React.useState(0);
-  return <YStack ai="center">
+  return <YStack alignItems="center">
     <Button
       onPress={() => {
         setSavedCount((old) => old + 1);
@@ -19,7 +19,7 @@ const ToastDuplicateDemo = () => {
       opacity={1}
       scale={1}
       animation="100ms"
-    ><XStack space ai="center">
+    ><XStack space alignItems="center">
       <YStack><CheckCircle2 /></YStack>
       <YStack>
         <Toast.Title>Successfully saved!</Toast.Title>

package/dist/jsx/ToastDuplicateDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
-  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack ai=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space ai=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,CAAC,OAAO,GAAG;AAAA,IACT,CAAC;AAAA,MACC,SAAS,MAAM;AACb,sBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,MAChC;AAAA,KACD,UAED,EANC;AAAA,KAOA,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B,CAAC;AAAA,MACC,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU;AAAA,MACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,KAEV,CAAC,OAAO,MAAM,GAAG;AAAA,MACf,CAAC,OACC,CAAC,aAAa,EAChB,EAFC;AAAA,MAID,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,mBAAmB,EAA/B,MAAM;AAAA,QACP,CAAC,MAAM,YAAY,mCAAmC,EAArD,MAAM;AAAA,MACT,EAHC;AAAA,IAIH,EATC,OAUH,EArBC,MAsBF;AAAA,EACH,EAhCC;AAkCL;",
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack alignItems=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space alignItems=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,CAAC,OAAO,WAAW;AAAA,IACjB,CAAC;AAAA,MACC,SAAS,MAAM;AACb,sBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,MAChC;AAAA,KACD,UAED,EANC;AAAA,KAOA,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B,CAAC;AAAA,MACC,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU;AAAA,MACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,KAEV,CAAC,OAAO,MAAM,WAAW;AAAA,MACvB,CAAC,OACC,CAAC,aAAa,EAChB,EAFC;AAAA,MAID,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,mBAAmB,EAA/B,MAAM;AAAA,QACP,CAAC,MAAM,YAAY,mCAAmC,EAArD,MAAM;AAAA,MACT,EAHC;AAAA,IAIH,EATC,OAUH,EArBC,MAsBF;AAAA,EACH,EAhCC;AAkCL;",
   "names": []
 }

package/dist/jsx/ToastDuplicateDemo.mjs

@@ -3,7 +3,7 @@ import React from "react";
 import { Button, Toast, XStack, YStack } from "tamagui";
 const ToastDuplicateDemo = () => {
   const [savedCount, setSavedCount] = React.useState(0);
-  return <YStack ai="center">
+  return <YStack alignItems="center">
     <Button
       onPress={() => {
         setSavedCount((old) => old + 1);
@@ -19,7 +19,7 @@ const ToastDuplicateDemo = () => {
       opacity={1}
       scale={1}
       animation="100ms"
-    ><XStack space ai="center">
+    ><XStack space alignItems="center">
       <YStack><CheckCircle2 /></YStack>
       <YStack>
         <Toast.Title>Successfully saved!</Toast.Title>

package/dist/jsx/ToastDuplicateDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
-  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack ai=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space ai=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,CAAC,OAAO,GAAG;AAAA,IACT,CAAC;AAAA,MACC,SAAS,MAAM;AACb,sBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,MAChC;AAAA,KACD,UAED,EANC;AAAA,KAOA,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B,CAAC;AAAA,MACC,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU;AAAA,MACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,KAEV,CAAC,OAAO,MAAM,GAAG;AAAA,MACf,CAAC,OACC,CAAC,aAAa,EAChB,EAFC;AAAA,MAID,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,mBAAmB,EAA/B,MAAM;AAAA,QACP,CAAC,MAAM,YAAY,mCAAmC,EAArD,MAAM;AAAA,MACT,EAHC;AAAA,IAIH,EATC,OAUH,EArBC,MAsBF;AAAA,EACH,EAhCC;AAkCL;",
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack alignItems=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space alignItems=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,CAAC,OAAO,WAAW;AAAA,IACjB,CAAC;AAAA,MACC,SAAS,MAAM;AACb,sBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,MAChC;AAAA,KACD,UAED,EANC;AAAA,KAOA,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B,CAAC;AAAA,MACC,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU;AAAA,MACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,KAEV,CAAC,OAAO,MAAM,WAAW;AAAA,MACvB,CAAC,OACC,CAAC,aAAa,EAChB,EAFC;AAAA,MAID,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,mBAAmB,EAA/B,MAAM;AAAA,QACP,CAAC,MAAM,YAAY,mCAAmC,EAArD,MAAM;AAAA,MACT,EAHC;AAAA,IAIH,EATC,OAUH,EArBC,MAsBF;AAAA,EACH,EAhCC;AAkCL;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.js

@@ -1,26 +1,26 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return <XStack ai="center" space="$10">
-    <YStack ai="center" space="$6">
+  return <YStack paddingHorizontal="$4"><XStack alignItems="center" space="$10">
+    <YStack alignItems="center" space="$6">
       <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
       <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
     </YStack>
-    <XStack ai="center" space="$6">
+    <XStack alignItems="center" space="$6">
       <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
       <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
     </XStack>
-  </XStack>;
+  </XStack></YStack>;
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
   return <XStack
     flexDirection={props.orientation === "horizontal" ? "row" : "column"}
-    ai="center"
-    jc="center"
+    alignItems="center"
+    justifyContent="center"
     space="$4"
   >
-    <Label pr="$0" jc="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
+    <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
     <ToggleGroup
       orientation={props.orientation}
       id={id}

package/dist/jsx/ToggleGroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$10\">\n      <YStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n      </YStack>\n      <XStack ai=\"center\" space=\"$6\">\n        <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n        <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n      </XStack>\n    </XStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      ai=\"center\"\n      jc=\"center\"\n      space=\"$4\"\n    >\n      <Label pr=\"$0\"  jc=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === \"single\" ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,GAAG,KAAM,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KACtD,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
+  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack paddingHorizontal=\"$4\">\n      <XStack alignItems=\"center\" space=\"$10\">\n        <YStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n        </YStack>\n        <XStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n        </XStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      space=\"$4\"\n    >\n      <Label paddingRight=\"$0\" justifyContent=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === 'single' ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,kBAAkB,KACxB,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC,OAUH,EAXC;AAaL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,aAAa,KAAK,eAAe,WAAW,MAAM,MAAM,MAAM,SAAS,KAC3E,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.mjs

@@ -1,26 +1,26 @@
 import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
 import { Label, ToggleGroup, XStack, YStack } from "tamagui";
 function ToggleGroupDemo() {
-  return <XStack ai="center" space="$10">
-    <YStack ai="center" space="$6">
+  return <YStack paddingHorizontal="$4"><XStack alignItems="center" space="$10">
+    <YStack alignItems="center" space="$6">
       <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
       <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
     </YStack>
-    <XStack ai="center" space="$6">
+    <XStack alignItems="center" space="$6">
       <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
       <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
     </XStack>
-  </XStack>;
+  </XStack></YStack>;
 }
 function ToggleGroupComponent(props) {
   const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
   return <XStack
     flexDirection={props.orientation === "horizontal" ? "row" : "column"}
-    ai="center"
-    jc="center"
+    alignItems="center"
+    justifyContent="center"
     space="$4"
   >
-    <Label pr="$0" jc="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
+    <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
     <ToggleGroup
       orientation={props.orientation}
       id={id}