@tamagui/demos 1.14.0 → 1.14.2

package/dist/jsx/TabsDemo.mjs

@@ -1,2 +1,106 @@
-import{useState as B}from"react";import{Button as D,H5 as C,Separator as P,SizableText as $,Tabs as T,XStack as I,YStack as N}from"tamagui";const k=["horizontal","vertical"],V={horizontal:"Horizontal",vertical:"Vertical"};function Y(){const[H,w]=B(0),R=k[H];return<N paddingHorizontal="$4"position="unset">{R==="horizontal"?<A/>:<F/>}<I alignItems="center"space position="absolute"bottom="$3"left="$4"$xxs={{display:"none"}}><D size="$2"onPress={()=>w(L=>(L+1)%k.length)}>{V[R]}</D></I></N>}const A=()=><T defaultValue="tab1"orientation="horizontal"flexDirection="column"width={400}height={150}borderRadius="$4"borderWidth="$0.25"overflow="hidden"borderColor="$borderColor"><T.List separator={<P vertical/>}disablePassBorderRadius="bottom"aria-label="Manage your account"><T.Tab flex={1}value="tab1"><$ fontFamily="$body">Profile</$></T.Tab><T.Tab flex={1}value="tab2"><$ fontFamily="$body">Connections</$></T.Tab><T.Tab flex={1}value="tab3"><$ fontFamily="$body">Notifications</$></T.Tab></T.List><P/><S value="tab1"><C>Profile</C></S><S value="tab2"><C>Connections</C></S><S value="tab3"><C>Notifications</C></S></T>,F=()=><T defaultValue="tab1"flexDirection="row"orientation="vertical"width={400}borderRadius="$4"borderWidth="$0.25"overflow="hidden"borderColor="$borderColor"><T.List disablePassBorderRadius="end"aria-label="Manage your account"separator={<P/>}><T.Tab value="tab1"><$>Profile</$></T.Tab><T.Tab value="tab2"><$>Connections</$></T.Tab><T.Tab value="tab3"><$>Notifications</$></T.Tab></T.List><P vertical/><S value="tab1"><C textAlign="center">Profile</C></S><S value="tab2"><C textAlign="center">Connections</C></S><S value="tab3"><C textAlign="center">Notifications</C></S></T>,S=H=><T.Content backgroundColor="$background"key="tab3"padding="$2"alignItems="center"justifyContent="center"flex={1}borderColor="$background"borderRadius="$2"borderTopLeftRadius={0}borderTopRightRadius={0}borderWidth="$2"{...H}>{H.children}</T.Content>;export{Y as TabsDemo};
+import { useState } from "react";
+import {
+  Button,
+  H5,
+  Separator,
+  SizableText,
+  Tabs,
+  XStack,
+  YStack
+} from "tamagui";
+const demos = ["horizontal", "vertical"];
+const demosTitle = {
+  horizontal: "Horizontal",
+  vertical: "Vertical"
+};
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = useState(0);
+  const demo = demos[demoIndex];
+  return (
+    // web only fix for position relative
+    <YStack paddingHorizontal="$4" position="unset">
+      {demo === "horizontal" ? <HorizontalTabs /> : <VerticalTabs />}
+      <XStack
+        alignItems="center"
+        space
+        position="absolute"
+        bottom="$3"
+        left="$4"
+        $xxs={{ display: "none" }}
+      ><Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>{demosTitle[demo]}</Button></XStack>
+    </YStack>
+  );
+}
+const HorizontalTabs = () => {
+  return <Tabs
+    defaultValue="tab1"
+    orientation="horizontal"
+    flexDirection="column"
+    width={400}
+    height={150}
+    borderRadius="$4"
+    borderWidth="$0.25"
+    overflow="hidden"
+    borderColor="$borderColor"
+  >
+    <Tabs.List
+      separator={<Separator vertical />}
+      disablePassBorderRadius="bottom"
+      aria-label="Manage your account"
+    >
+      <Tabs.Tab flex={1} value="tab1"><SizableText fontFamily="$body">Profile</SizableText></Tabs.Tab>
+      <Tabs.Tab flex={1} value="tab2"><SizableText fontFamily="$body">Connections</SizableText></Tabs.Tab>
+      <Tabs.Tab flex={1} value="tab3"><SizableText fontFamily="$body">Notifications</SizableText></Tabs.Tab>
+    </Tabs.List>
+    <Separator />
+    <TabsContent value="tab1"><H5>Profile</H5></TabsContent>
+    <TabsContent value="tab2"><H5>Connections</H5></TabsContent>
+    <TabsContent value="tab3"><H5>Notifications</H5></TabsContent>
+  </Tabs>;
+};
+const VerticalTabs = () => {
+  return <Tabs
+    defaultValue="tab1"
+    flexDirection="row"
+    orientation="vertical"
+    width={400}
+    borderRadius="$4"
+    borderWidth="$0.25"
+    overflow="hidden"
+    borderColor="$borderColor"
+  >
+    <Tabs.List
+      disablePassBorderRadius="end"
+      aria-label="Manage your account"
+      separator={<Separator />}
+    >
+      <Tabs.Tab value="tab1"><SizableText>Profile</SizableText></Tabs.Tab>
+      <Tabs.Tab value="tab2"><SizableText>Connections</SizableText></Tabs.Tab>
+      <Tabs.Tab value="tab3"><SizableText>Notifications</SizableText></Tabs.Tab>
+    </Tabs.List>
+    <Separator vertical />
+    <TabsContent value="tab1"><H5 textAlign="center">Profile</H5></TabsContent>
+    <TabsContent value="tab2"><H5 textAlign="center">Connections</H5></TabsContent>
+    <TabsContent value="tab3"><H5 textAlign="center">Notifications</H5></TabsContent>
+  </Tabs>;
+};
+const TabsContent = (props) => {
+  return <Tabs.Content
+    backgroundColor="$background"
+    key="tab3"
+    padding="$2"
+    alignItems="center"
+    justifyContent="center"
+    flex={1}
+    borderColor="$background"
+    borderRadius="$2"
+    borderTopLeftRadius={0}
+    borderTopRightRadius={0}
+    borderWidth="$2"
+    {...props}
+  >{props.children}</Tabs.Content>;
+};
+export {
+  TabsDemo
+};
 //# sourceMappingURL=TabsDemo.mjs.map

package/dist/jsx/TabsDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
   "sourcesContent": ["import { useState } from 'react'\nimport {\n  Button,\n  H5,\n  Separator,\n  SizableText,\n  Tabs,\n  TabsContentProps,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  horizontal: 'Horizontal',\n  vertical: 'Vertical',\n}\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          {demosTitle[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      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        separator={<Separator vertical />}\n        disablePassBorderRadius=\"bottom\"\n        aria-label=\"Manage your account\"\n      >\n        <Tabs.Tab flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator />\n      <TabsContent value=\"tab1\">\n        <H5>Profile</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab2\">\n        <H5>Connections</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab3\">\n        <H5>Notifications</H5>\n      </TabsContent>\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      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        disablePassBorderRadius=\"end\"\n        aria-label=\"Manage your account\"\n        separator={<Separator />}\n      >\n        <Tabs.Tab value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator vertical />\n      <TabsContent value=\"tab1\">\n        <H5 textAlign=\"center\">Profile</H5>\n      </TabsContent>\n      <TabsContent value=\"tab2\">\n        <H5 textAlign=\"center\">Connections</H5>\n      </TabsContent>\n      <TabsContent value=\"tab3\">\n        <H5 textAlign=\"center\">Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst TabsContent = (props: TabsContentProps) => {\n  return (\n    <Tabs.Content\n      backgroundColor=\"$background\"\n      key=\"tab3\"\n      padding=\"$2\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flex={1}\n      borderColor=\"$background\"\n      borderRadius=\"$2\"\n      borderTopLeftRadius={0}\n      borderTopRightRadius={0}\n      borderWidth=\"$2\"\n      {...props}\n    >\n      {props.children}\n    </Tabs.Content>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["useState", "Button", "H5", "Separator", "SizableText", "Tabs", "XStack", "YStack", "demos", "demosTitle", "TabsDemo", "demoIndex", "setDemoIndex", "demo", "HorizontalTabs", "VerticalTabs", "x", "TabsContent", "props"]
+  "mappings": "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",
+  "names": []
 }

package/dist/jsx/TextDemo.js

@@ -1,2 +1,15 @@
-import{Paragraph as T,SizableText as S,XStack as $,YStack as P}from"tamagui";function I(){return<P space="$2"alignItems="center"><S size="$3">SizableText</S><$ space><S theme="alt1"size="$3">alt1</S><S theme="alt2"size="$3">alt2</S></$><T size="$2"fontWeight="800">Paragraph</T></P>}export{I as TextDemo};
+import { Paragraph, SizableText, XStack, YStack } from "tamagui";
+function TextDemo() {
+  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" fontWeight="800">Paragraph</Paragraph>
+  </YStack>;
+}
+export {
+  TextDemo
+};
 //# sourceMappingURL=TextDemo.js.map

package/dist/jsx/TextDemo.js.map

@@ -2,6 +2,6 @@
   "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\" 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,OAAS,aAAAA,EAAW,eAAAC,EAAmB,UAAAC,EAAQ,UAAAC,MAAc,UAEtD,SAASC,GAAW,CACzB,MACE,CAACD,EAAO,MAAM,IAAK,WAAW,SAC5B,CAACF,EAAY,KAAK,KAAK,WAAW,EAAjCA,EACD,CAACC,EAAO,MACN,CAACD,EAAY,MAAM,MAAO,KAAK,KAAK,IAEpC,EAFCA,EAGD,CAACA,EAAY,MAAM,MAAO,KAAK,KAAK,IAEpC,EAFCA,EAGH,EAPCC,EAQD,CAACF,EAAU,KAAK,IAAK,WAAW,MAAM,SAEtC,EAFCA,EAGH,EAbCG,EAeL",
-  "names": ["Paragraph", "SizableText", "XStack", "YStack", "TextDemo"]
+  "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,2 +1,15 @@
-import{Paragraph as T,SizableText as S,XStack as $,YStack as P}from"tamagui";function I(){return<P space="$2"alignItems="center"><S size="$3">SizableText</S><$ space><S theme="alt1"size="$3">alt1</S><S theme="alt2"size="$3">alt2</S></$><T size="$2"fontWeight="800">Paragraph</T></P>}export{I as TextDemo};
+import { Paragraph, SizableText, XStack, YStack } from "tamagui";
+function TextDemo() {
+  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" fontWeight="800">Paragraph</Paragraph>
+  </YStack>;
+}
+export {
+  TextDemo
+};
 //# sourceMappingURL=TextDemo.mjs.map

package/dist/jsx/TextDemo.mjs.map

@@ -2,6 +2,6 @@
   "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\" 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,OAAS,aAAAA,EAAW,eAAAC,EAAmB,UAAAC,EAAQ,UAAAC,MAAc,UAEtD,SAASC,GAAW,CACzB,MACE,CAACD,EAAO,MAAM,IAAK,WAAW,SAC5B,CAACF,EAAY,KAAK,KAAK,WAAW,EAAjCA,EACD,CAACC,EAAO,MACN,CAACD,EAAY,MAAM,MAAO,KAAK,KAAK,IAEpC,EAFCA,EAGD,CAACA,EAAY,MAAM,MAAO,KAAK,KAAK,IAEpC,EAFCA,EAGH,EAPCC,EAQD,CAACF,EAAU,KAAK,IAAK,WAAW,MAAM,SAEtC,EAFCA,EAGH,EAbCG,EAeL",
-  "names": ["Paragraph", "SizableText", "XStack", "YStack", "TextDemo"]
+  "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

@@ -1,2 +1,19 @@
-import{Button as B,Theme as S,XStack as D,YStack as I}from"tamagui";function $(){return<D space><T/><S inverse><T/></S></D>}function T(){return<I backgroundColor="$background"padding="$3"borderRadius="$3"space><B>Dark</B><B themeInverse>Inversed</B><B theme="alt1">Alt1 Dark</B><S name="yellow"><B>Yellow dark</B></S></I>}export{$ as ThemeInverseDemo};
+import { Button, Theme, XStack, YStack } from "tamagui";
+function ThemeInverseDemo() {
+  return <XStack space>
+    <Buttons />
+    <Theme inverse><Buttons /></Theme>
+  </XStack>;
+}
+function Buttons() {
+  return <YStack backgroundColor="$background" padding="$3" borderRadius="$3" space>
+    <Button>Dark</Button>
+    <Button themeInverse>Inversed</Button>
+    <Button theme="alt1">Alt1 Dark</Button>
+    <Theme name="yellow"><Button>Yellow dark</Button></Theme>
+  </YStack>;
+}
+export {
+  ThemeInverseDemo
+};
 //# sourceMappingURL=ThemeInverseDemo.js.map

package/dist/jsx/ThemeInverseDemo.js.map

@@ -2,6 +2,6 @@
   "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 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,OAAS,UAAAA,EAAQ,SAAAC,EAAO,UAAAC,EAAQ,UAAAC,MAAc,UAEvC,SAASC,GAAmB,CACjC,MACE,CAACF,EAAO,MACN,CAACG,CAAQ,EACT,CAACJ,EAAM,QACL,CAACI,CAAQ,EACX,EAFCJ,EAGH,EALCC,EAOL,CAEA,SAASG,GAAU,CACjB,MACE,CAACF,EAAO,gBAAgB,aAAc,QAAQ,IAAK,aAAa,IAAK,MACnE,CAACH,EAAO,IAAI,EAAXA,EACD,CAACA,EAAO,aAAa,QAAQ,EAA5BA,EACD,CAACA,EAAO,MAAM,OAAO,SAAS,EAA7BA,EACD,CAACC,EAAM,KAAK,SACV,CAACD,EAAO,WAAW,EAAlBA,EACH,EAFCC,EAGH,EAPCE,EASL",
-  "names": ["Button", "Theme", "XStack", "YStack", "ThemeInverseDemo", "Buttons"]
+  "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

@@ -1,2 +1,19 @@
-import{Button as B,Theme as S,XStack as D,YStack as I}from"tamagui";function $(){return<D space><T/><S inverse><T/></S></D>}function T(){return<I backgroundColor="$background"padding="$3"borderRadius="$3"space><B>Dark</B><B themeInverse>Inversed</B><B theme="alt1">Alt1 Dark</B><S name="yellow"><B>Yellow dark</B></S></I>}export{$ as ThemeInverseDemo};
+import { Button, Theme, XStack, YStack } from "tamagui";
+function ThemeInverseDemo() {
+  return <XStack space>
+    <Buttons />
+    <Theme inverse><Buttons /></Theme>
+  </XStack>;
+}
+function Buttons() {
+  return <YStack backgroundColor="$background" padding="$3" borderRadius="$3" space>
+    <Button>Dark</Button>
+    <Button themeInverse>Inversed</Button>
+    <Button theme="alt1">Alt1 Dark</Button>
+    <Theme name="yellow"><Button>Yellow dark</Button></Theme>
+  </YStack>;
+}
+export {
+  ThemeInverseDemo
+};
 //# sourceMappingURL=ThemeInverseDemo.mjs.map

package/dist/jsx/ThemeInverseDemo.mjs.map

@@ -2,6 +2,6 @@
   "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 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,OAAS,UAAAA,EAAQ,SAAAC,EAAO,UAAAC,EAAQ,UAAAC,MAAc,UAEvC,SAASC,GAAmB,CACjC,MACE,CAACF,EAAO,MACN,CAACG,CAAQ,EACT,CAACJ,EAAM,QACL,CAACI,CAAQ,EACX,EAFCJ,EAGH,EALCC,EAOL,CAEA,SAASG,GAAU,CACjB,MACE,CAACF,EAAO,gBAAgB,aAAc,QAAQ,IAAK,aAAa,IAAK,MACnE,CAACH,EAAO,IAAI,EAAXA,EACD,CAACA,EAAO,aAAa,QAAQ,EAA5BA,EACD,CAACA,EAAO,MAAM,OAAO,SAAS,EAA7BA,EACD,CAACC,EAAM,KAAK,SACV,CAACD,EAAO,WAAW,EAAlBA,EACH,EAFCC,EAGH,EAPCE,EASL",
-  "names": ["Button", "Theme", "XStack", "YStack", "ThemeInverseDemo", "Buttons"]
+  "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,2 +1,75 @@
-import{Toast as S,useToastController as X,useToastState as Y}from"@tamagui/toast";import H from"react";import{Button as T,SizableText as C,Switch as N,XStack as $,YStack as D}from"tamagui";const F=()=>{const[t,e]=H.useState(!1);return<D space alignItems="center"><I native={t}/><P/><O native={t}setNative={e}/></D>},P=()=>{const t=Y();return!t||t.isHandledNatively?null:<S key={t.id}duration={t.duration}enterStyle={{opacity:0,scale:.5,y:-25}}exitStyle={{opacity:0,scale:1,y:-20}}y={0}opacity={1}scale={1}animation="100ms"><D><S.Title>{t.title}</S.Title>{!!t.message&&<S.Description>{t.message}</S.Description>}</D></S>},I=({native:t})=>{const e=X();return<$ space="$2"justifyContent="center"><T onPress={()=>{e.show("Successfully saved!",{message:"Don't worry, we've got your data.",native:t})}}>Show</T><T onPress={()=>{e.hide()}}>Hide</T></$>},O=({native:t,setNative:e})=><$ space="$3"><C size="$1">Custom</C><N theme="active"size="$1"checked={!!t}onCheckedChange={B=>e(B)}><N.Thumb animation={["quick",{transform:{overshootClamping:!0}}]}/></N><C size="$1">Native</C></$>;export{F as ToastDemo};
+import { Toast, useToastController, useToastState } from "@tamagui/toast";
+import React from "react";
+import { Button, SizableText, Switch, XStack, YStack } from "tamagui";
+const ToastDemo = () => {
+  const [native, setNative] = React.useState(false);
+  return <YStack space alignItems="center">
+    <ToastControl native={native} />
+    <CurrentToast />
+    <NativeOptions native={native} setNative={setNative} />
+  </YStack>;
+};
+const CurrentToast = () => {
+  const currentToast = useToastState();
+  if (!currentToast || currentToast.isHandledNatively)
+    return null;
+  return <Toast
+    key={currentToast.id}
+    duration={currentToast.duration}
+    enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+    exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+    y={0}
+    opacity={1}
+    scale={1}
+    animation="100ms"
+  ><YStack>
+    <Toast.Title>{currentToast.title}</Toast.Title>
+    {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
+  </YStack></Toast>;
+};
+const ToastControl = ({ native }) => {
+  const toast = useToastController();
+  return <XStack space="$2" justifyContent="center">
+    <Button
+      onPress={() => {
+        toast.show("Successfully saved!", {
+          message: "Don't worry, we've got your data.",
+          native
+        });
+      }}
+    >Show</Button>
+    <Button
+      onPress={() => {
+        toast.hide();
+      }}
+    >Hide</Button>
+  </XStack>;
+};
+const NativeOptions = ({
+  native,
+  setNative
+}) => {
+  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
+};
 //# sourceMappingURL=ToastDemo.js.map

package/dist/jsx/ToastDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
   "sourcesContent": ["import { Toast, useToastController, useToastState } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, SizableText, Switch, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState(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 = useToastState()\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 = useToastController()\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,OAAS,SAAAA,EAAO,sBAAAC,EAAoB,iBAAAC,MAAqB,iBACzD,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,EAAa,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAErD,MAAMC,EAAY,IAAM,CAC7B,KAAM,CAACC,EAAQC,CAAS,EAAIR,EAAM,SAAS,EAAK,EAEhD,MACE,CAACK,EAAO,MAAM,WAAW,SACvB,CAACI,EAAa,QAAQF,EAAQ,EAC9B,CAACG,CAAa,EAEd,CAACC,EAAc,QAAQJ,EAAQ,WAAWC,EAAW,EACvD,EALCH,EAOL,EAEMK,EAAe,IAAM,CACzB,MAAME,EAAeb,EAAc,EAEnC,MAAI,CAACa,GAAgBA,EAAa,kBAA0B,KAE1D,CAACf,EACC,KAAKe,EAAa,GAClB,UAAUA,EAAa,SACvB,YAAY,CAAE,QAAS,EAAG,MAAO,GAAK,EAAG,GAAI,EAC7C,WAAW,CAAE,QAAS,EAAG,MAAO,EAAG,EAAG,GAAI,EAC1C,GAAG,EACH,SAAS,EACT,OAAO,EACP,UAAU,QAEV,CAACP,EACC,CAACR,EAAM,OAAOe,EAAa,MAAM,EAAhCf,EAAM,OACN,CAAC,CAACe,EAAa,SACd,CAACf,EAAM,aAAae,EAAa,QAAQ,EAAxCf,EAAM,aAEX,EALCQ,EAMH,EAhBCR,EAkBL,EAEMY,EAAe,CAAC,CAAE,OAAAF,CAAO,IAA2B,CACxD,MAAMM,EAAQf,EAAmB,EACjC,MACE,CAACM,EAAO,MAAM,IAAK,eAAe,SAChC,CAACH,EACC,SAAS,IAAM,CACbY,EAAM,KAAK,sBAAuB,CAChC,QAAS,oCACT,OAAAN,CACF,CAAC,CACH,GACD,IAED,EATCN,EAUD,CAACA,EACC,SAAS,IAAM,CACbY,EAAM,KAAK,CACb,GACD,IAED,EANCZ,EAOH,EAlBCG,EAoBL,EAEMO,EAAgB,CAAC,CACrB,OAAAJ,EACA,UAAAC,CACF,IAKI,CAACJ,EAAO,MAAM,KACZ,CAACF,EAAY,KAAK,KAAK,MAAM,EAA5BA,EAED,CAACC,EACC,MAAM,QACN,KAAK,IACL,SAAS,CAAC,CAACI,EACX,iBAAkBO,GAAQN,EAAUM,CAAG,GAEvC,CAACX,EAAO,MACN,WAAW,CACT,QACA,CACE,UAAW,CACT,kBAAmB,EACrB,CACF,CACF,EACF,EACF,EAhBCA,EAkBD,CAACD,EAAY,KAAK,KAAK,MAAM,EAA5BA,EACH,EAtBCE",
-  "names": ["Toast", "useToastController", "useToastState", "React", "Button", "SizableText", "Switch", "XStack", "YStack", "ToastDemo", "native", "setNative", "ToastControl", "CurrentToast", "NativeOptions", "currentToast", "toast", "val"]
+  "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAQ,aAAa,QAAQ,QAAQ,cAAc;AAErD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,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,cAAc;AAEnC,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,mBAAmB;AACjC,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,2 +1,75 @@
-import{Toast as S,useToastController as X,useToastState as Y}from"@tamagui/toast";import H from"react";import{Button as T,SizableText as C,Switch as N,XStack as $,YStack as D}from"tamagui";const F=()=>{const[t,e]=H.useState(!1);return<D space alignItems="center"><I native={t}/><P/><O native={t}setNative={e}/></D>},P=()=>{const t=Y();return!t||t.isHandledNatively?null:<S key={t.id}duration={t.duration}enterStyle={{opacity:0,scale:.5,y:-25}}exitStyle={{opacity:0,scale:1,y:-20}}y={0}opacity={1}scale={1}animation="100ms"><D><S.Title>{t.title}</S.Title>{!!t.message&&<S.Description>{t.message}</S.Description>}</D></S>},I=({native:t})=>{const e=X();return<$ space="$2"justifyContent="center"><T onPress={()=>{e.show("Successfully saved!",{message:"Don't worry, we've got your data.",native:t})}}>Show</T><T onPress={()=>{e.hide()}}>Hide</T></$>},O=({native:t,setNative:e})=><$ space="$3"><C size="$1">Custom</C><N theme="active"size="$1"checked={!!t}onCheckedChange={B=>e(B)}><N.Thumb animation={["quick",{transform:{overshootClamping:!0}}]}/></N><C size="$1">Native</C></$>;export{F as ToastDemo};
+import { Toast, useToastController, useToastState } from "@tamagui/toast";
+import React from "react";
+import { Button, SizableText, Switch, XStack, YStack } from "tamagui";
+const ToastDemo = () => {
+  const [native, setNative] = React.useState(false);
+  return <YStack space alignItems="center">
+    <ToastControl native={native} />
+    <CurrentToast />
+    <NativeOptions native={native} setNative={setNative} />
+  </YStack>;
+};
+const CurrentToast = () => {
+  const currentToast = useToastState();
+  if (!currentToast || currentToast.isHandledNatively)
+    return null;
+  return <Toast
+    key={currentToast.id}
+    duration={currentToast.duration}
+    enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+    exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+    y={0}
+    opacity={1}
+    scale={1}
+    animation="100ms"
+  ><YStack>
+    <Toast.Title>{currentToast.title}</Toast.Title>
+    {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
+  </YStack></Toast>;
+};
+const ToastControl = ({ native }) => {
+  const toast = useToastController();
+  return <XStack space="$2" justifyContent="center">
+    <Button
+      onPress={() => {
+        toast.show("Successfully saved!", {
+          message: "Don't worry, we've got your data.",
+          native
+        });
+      }}
+    >Show</Button>
+    <Button
+      onPress={() => {
+        toast.hide();
+      }}
+    >Hide</Button>
+  </XStack>;
+};
+const NativeOptions = ({
+  native,
+  setNative
+}) => {
+  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
+};
 //# sourceMappingURL=ToastDemo.mjs.map

package/dist/jsx/ToastDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
   "sourcesContent": ["import { Toast, useToastController, useToastState } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, SizableText, Switch, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState(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 = useToastState()\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 = useToastController()\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,OAAS,SAAAA,EAAO,sBAAAC,EAAoB,iBAAAC,MAAqB,iBACzD,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,EAAa,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAErD,MAAMC,EAAY,IAAM,CAC7B,KAAM,CAACC,EAAQC,CAAS,EAAIR,EAAM,SAAS,EAAK,EAEhD,MACE,CAACK,EAAO,MAAM,WAAW,SACvB,CAACI,EAAa,QAAQF,EAAQ,EAC9B,CAACG,CAAa,EAEd,CAACC,EAAc,QAAQJ,EAAQ,WAAWC,EAAW,EACvD,EALCH,EAOL,EAEMK,EAAe,IAAM,CACzB,MAAME,EAAeb,EAAc,EAEnC,MAAI,CAACa,GAAgBA,EAAa,kBAA0B,KAE1D,CAACf,EACC,KAAKe,EAAa,GAClB,UAAUA,EAAa,SACvB,YAAY,CAAE,QAAS,EAAG,MAAO,GAAK,EAAG,GAAI,EAC7C,WAAW,CAAE,QAAS,EAAG,MAAO,EAAG,EAAG,GAAI,EAC1C,GAAG,EACH,SAAS,EACT,OAAO,EACP,UAAU,QAEV,CAACP,EACC,CAACR,EAAM,OAAOe,EAAa,MAAM,EAAhCf,EAAM,OACN,CAAC,CAACe,EAAa,SACd,CAACf,EAAM,aAAae,EAAa,QAAQ,EAAxCf,EAAM,aAEX,EALCQ,EAMH,EAhBCR,EAkBL,EAEMY,EAAe,CAAC,CAAE,OAAAF,CAAO,IAA2B,CACxD,MAAMM,EAAQf,EAAmB,EACjC,MACE,CAACM,EAAO,MAAM,IAAK,eAAe,SAChC,CAACH,EACC,SAAS,IAAM,CACbY,EAAM,KAAK,sBAAuB,CAChC,QAAS,oCACT,OAAAN,CACF,CAAC,CACH,GACD,IAED,EATCN,EAUD,CAACA,EACC,SAAS,IAAM,CACbY,EAAM,KAAK,CACb,GACD,IAED,EANCZ,EAOH,EAlBCG,EAoBL,EAEMO,EAAgB,CAAC,CACrB,OAAAJ,EACA,UAAAC,CACF,IAKI,CAACJ,EAAO,MAAM,KACZ,CAACF,EAAY,KAAK,KAAK,MAAM,EAA5BA,EAED,CAACC,EACC,MAAM,QACN,KAAK,IACL,SAAS,CAAC,CAACI,EACX,iBAAkBO,GAAQN,EAAUM,CAAG,GAEvC,CAACX,EAAO,MACN,WAAW,CACT,QACA,CACE,UAAW,CACT,kBAAmB,EACrB,CACF,CACF,EACF,EACF,EAhBCA,EAkBD,CAACD,EAAY,KAAK,KAAK,MAAM,EAA5BA,EACH,EAtBCE",
-  "names": ["Toast", "useToastController", "useToastState", "React", "Button", "SizableText", "Switch", "XStack", "YStack", "ToastDemo", "native", "setNative", "ToastControl", "CurrentToast", "NativeOptions", "currentToast", "toast", "val"]
+  "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAQ,aAAa,QAAQ,QAAQ,cAAc;AAErD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,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,cAAc;AAEnC,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,mBAAmB;AACjC,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

@@ -1,2 +1,35 @@
-import{CheckCircle2 as D}from"@tamagui/lucide-icons";import{Toast as S}from"@tamagui/toast";import C from"react";import{Button as Y,XStack as B,YStack as T}from"tamagui";const P=()=>{const[d,w]=C.useState(0);return<T alignItems="center"><Y onPress={()=>{w(v=>v+1)}}>Show toast</Y>{[...Array(d)].map((v,f)=><S viewportName="viewport-multiple"key={f}duration={4e3}enterStyle={{opacity:0,scale:.5,y:-25}}exitStyle={{opacity:0,scale:1,y:-20}}y={0}opacity={1}scale={1}animation="100ms"><B space alignItems="center"><T><D/></T><T><S.Title>Successfully saved!</S.Title><S.Description>Don't worry... We've got your data.</S.Description></T></B></S>)}</T>};export{P as ToastDuplicateDemo};
+import { CheckCircle2 } from "@tamagui/lucide-icons";
+import { Toast } from "@tamagui/toast";
+import React from "react";
+import { Button, XStack, YStack } from "tamagui";
+const ToastDuplicateDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0);
+  return <YStack alignItems="center">
+    <Button
+      onPress={() => {
+        setSavedCount((old) => old + 1);
+      }}
+    >Show toast</Button>
+    {[...Array(savedCount)].map((_, index) => <Toast
+      viewportName="viewport-multiple"
+      key={index}
+      duration={4e3}
+      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+      y={0}
+      opacity={1}
+      scale={1}
+      animation="100ms"
+    ><XStack space alignItems="center">
+      <YStack><CheckCircle2 /></YStack>
+      <YStack>
+        <Toast.Title>Successfully saved!</Toast.Title>
+        <Toast.Description>Don't worry... We've got your data.</Toast.Description>
+      </YStack>
+    </XStack></Toast>)}
+  </YStack>;
+};
+export {
+  ToastDuplicateDemo
+};
 //# sourceMappingURL=ToastDuplicateDemo.js.map

package/dist/jsx/ToastDuplicateDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
   "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport { Toast } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, 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,OAAS,gBAAAA,MAAoB,wBAC7B,OAAS,SAAAC,MAAa,iBACtB,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEhC,MAAMC,EAAqB,IAAM,CACtC,KAAM,CAACC,EAAYC,CAAa,EAAIN,EAAM,SAAS,CAAC,EAEpD,MACE,CAACG,EAAO,WAAW,SACjB,CAACF,EACC,SAAS,IAAM,CACbK,EAAeC,GAAQA,EAAM,CAAC,CAChC,GACD,UAED,EANCN,GAOA,CAAC,GAAG,MAAMI,CAAU,CAAC,EAAE,IAAI,CAACG,EAAGC,IAC9B,CAACV,EACC,aAAa,mBACb,KAAKU,EACL,UAAU,IACV,YAAY,CAAE,QAAS,EAAG,MAAO,GAAK,EAAG,GAAI,EAC7C,WAAW,CAAE,QAAS,EAAG,MAAO,EAAG,EAAG,GAAI,EAC1C,GAAG,EACH,SAAS,EACT,OAAO,EACP,UAAU,QAEV,CAACP,EAAO,MAAM,WAAW,SACvB,CAACC,EACC,CAACL,CAAa,EAChB,EAFCK,EAID,CAACA,EACC,CAACJ,EAAM,MAAM,mBAAmB,EAA/BA,EAAM,MACP,CAACA,EAAM,YAAY,mCAAmC,EAArDA,EAAM,YACT,EAHCI,EAIH,EATCD,EAUH,EArBCH,EAsBF,EACH,EAhCCI,EAkCL",
-  "names": ["CheckCircle2", "Toast", "React", "Button", "XStack", "YStack", "ToastDuplicateDemo", "savedCount", "setSavedCount", "old", "_", "index"]
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB,SAAS,QAAQ,QAAQ,cAAc;AAEhC,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

@@ -1,2 +1,35 @@
-import{CheckCircle2 as D}from"@tamagui/lucide-icons";import{Toast as S}from"@tamagui/toast";import C from"react";import{Button as Y,XStack as B,YStack as T}from"tamagui";const P=()=>{const[d,w]=C.useState(0);return<T alignItems="center"><Y onPress={()=>{w(v=>v+1)}}>Show toast</Y>{[...Array(d)].map((v,f)=><S viewportName="viewport-multiple"key={f}duration={4e3}enterStyle={{opacity:0,scale:.5,y:-25}}exitStyle={{opacity:0,scale:1,y:-20}}y={0}opacity={1}scale={1}animation="100ms"><B space alignItems="center"><T><D/></T><T><S.Title>Successfully saved!</S.Title><S.Description>Don't worry... We've got your data.</S.Description></T></B></S>)}</T>};export{P as ToastDuplicateDemo};
+import { CheckCircle2 } from "@tamagui/lucide-icons";
+import { Toast } from "@tamagui/toast";
+import React from "react";
+import { Button, XStack, YStack } from "tamagui";
+const ToastDuplicateDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0);
+  return <YStack alignItems="center">
+    <Button
+      onPress={() => {
+        setSavedCount((old) => old + 1);
+      }}
+    >Show toast</Button>
+    {[...Array(savedCount)].map((_, index) => <Toast
+      viewportName="viewport-multiple"
+      key={index}
+      duration={4e3}
+      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+      y={0}
+      opacity={1}
+      scale={1}
+      animation="100ms"
+    ><XStack space alignItems="center">
+      <YStack><CheckCircle2 /></YStack>
+      <YStack>
+        <Toast.Title>Successfully saved!</Toast.Title>
+        <Toast.Description>Don't worry... We've got your data.</Toast.Description>
+      </YStack>
+    </XStack></Toast>)}
+  </YStack>;
+};
+export {
+  ToastDuplicateDemo
+};
 //# sourceMappingURL=ToastDuplicateDemo.mjs.map