@tamagui/demos 1.61.3 → 1.62.1

package/dist/jsx/TabsDemo.native.js

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import {
+  Button,
+  H5,
+  Separator,
+  SizableText,
+  Tabs,
+  XStack,
+  YStack,
+  isWeb
+} from "tamagui";
+const demos = ["horizontal", "vertical"], demosTitle = {
+  horizontal: "Horizontal",
+  vertical: "Vertical"
+};
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = useState(0), demo = demos[demoIndex];
+  return (
+    // web only fix for position relative
+    <YStack
+      paddingHorizontal="$4"
+      {...isWeb && {
+        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 = () => <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>, VerticalTabs = () => <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>, TabsContent = (props) => <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.js.map

package/dist/jsx/TabsDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/TabsDemo.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/TextDemo.native.js

@@ -0,0 +1,15 @@
+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.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/TextDemo.tsx"],
+  "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/ThemeBuilderDemo.native.js

@@ -0,0 +1,103 @@
+import { Square, XStack, YStack } from "tamagui";
+function ThemeBuilderDemo() {
+  return <YStack fullscreen ov="hidden"><XStack mah={200} y={-100} x={-50} rotate="-10deg">
+    <Col y={35} bc="$color9" />
+    <Col size="$8" y={30} bc="$color7" />
+    <Col size="$6" y={-50} bc="$color5" />
+    <Col size="$4" bc="$color3" />
+    <Col size="$2" bc="$color1" />
+    <Col size="$4" y={50} bc="$color3" />
+    <Col size="$6" y={80} bc="$color5" />
+    <Col size="$8" bc="$color7" />
+    <Col bc="$color9" />
+    <Col size="$8" bc="$color7" />
+    <Col size="$6" y={80} bc="$color5" />
+    <Col size="$4" y={50} bc="$color3" />
+    <Col size="$2" bc="$color1" />
+    <Col size="$4" bc="$color3" />
+    <Col size="$6" y={-50} bc="$color5" />
+    <Col size="$8" y={30} bc="$color7" />
+    <Col y={35} bc="$color9" />
+  </XStack></YStack>;
+}
+function Col(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return <YStack padding="$2.5" space="$3.5">
+    <Square br="$6" size="$10" theme={props.subTheme} bg="$background" {...props} />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"orange" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"yellow" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"green" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"blue" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"purple" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"pink" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"red" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square br="$6" size="$10" theme={props.subTheme} bg="$background" {...props} />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"orange" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"yellow" + subTheme}
+      bg="$background"
+      {...props}
+    />
+    <Square
+      br="$6"
+      size="$10"
+      theme={"green" + subTheme}
+      bg="$background"
+      {...props}
+    />
+  </YStack>;
+}
+export {
+  ThemeBuilderDemo
+};
+//# sourceMappingURL=ThemeBuilderDemo.js.map

package/dist/jsx/ThemeBuilderDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ThemeBuilderDemo.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/ThemeInverseDemo.js

@@ -1,7 +1,6 @@
 import { Button, H5, Theme, XStack, YStack, useThemeName } from "tamagui";
 function ThemeInverseDemo() {
-  const themeName = useThemeName();
-  const opposite = themeName.includes("dark") ? "light" : "dark";
+  const themeName = useThemeName(), opposite = themeName.includes("dark") ? "light" : "dark";
   return <XStack space>
     <Buttons title="Normal" name={themeName} />
     <Theme inverse><Buttons

package/dist/jsx/ThemeInverseDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeInverseDemo.tsx"],
-  "mappings": "AAAA,SAAS,QAAQ,IAAI,OAAO,QAAQ,QAAQ,oBAAoB;AAEzD,SAAS,mBAAmB;AACjC,QAAM,YAAY,aAAa;AAC/B,QAAM,WAAW,UAAU,SAAS,MAAM,IAAI,UAAU;AAExD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ,MAAM,SAAS,MAAM,WAAW;AAAA,IACzC,CAAC,MAAM,QACL,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM,UAAU,QAAQ,UAAU,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ;AAAA,IAC3D,EACF,EALC;AAAA,EAMH,EARC;AAUL;AAEA,SAAS,QAAQ,OAAwC;AACvD,SACE,CAAC;AAAA,IACC,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA;AAAA,IAEN,CAAC,IAAI,MAAM,MAAM,EAAhB;AAAA,IACD,CAAC,QAAQ,MAAM,KAAK,EAAnB;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM;AAAA,OAAQ,MAAM;AAAA,OAAK;AAAA,IAAK,EAArC;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,QAAQ,MAAM,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,UAAU,EAA7C,OACH,EAFC;AAAA,EAGH,EAdC;AAgBL;",
+  "mappings": "AAAA,SAAS,QAAQ,IAAI,OAAO,QAAQ,QAAQ,oBAAoB;AAEzD,SAAS,mBAAmB;AACjC,QAAM,YAAY,aAAa,GACzB,WAAW,UAAU,SAAS,MAAM,IAAI,UAAU;AAExD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ,MAAM,SAAS,MAAM,WAAW;AAAA,IACzC,CAAC,MAAM,QACL,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM,UAAU,QAAQ,UAAU,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ;AAAA,IAC3D,EACF,EALC;AAAA,EAMH,EARC;AAUL;AAEA,SAAS,QAAQ,OAAwC;AACvD,SACE,CAAC;AAAA,IACC,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA;AAAA,IAEN,CAAC,IAAI,MAAM,MAAM,EAAhB;AAAA,IACD,CAAC,QAAQ,MAAM,KAAK,EAAnB;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM;AAAA,OAAQ,MAAM;AAAA,OAAK;AAAA,IAAK,EAArC;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,QAAQ,MAAM,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,UAAU,EAA7C,OACH,EAFC;AAAA,EAGH,EAdC;AAgBL;",
   "names": []
 }

package/dist/jsx/ThemeInverseDemo.native.js

@@ -0,0 +1,33 @@
+import { Button, H5, Theme, XStack, YStack, useThemeName } from "tamagui";
+function ThemeInverseDemo() {
+  const themeName = useThemeName(), opposite = themeName.includes("dark") ? "light" : "dark";
+  return <XStack space>
+    <Buttons title="Normal" name={themeName} />
+    <Theme inverse><Buttons
+      title="Inversed"
+      name={themeName.replace(themeName.split("_")[0], opposite)}
+    /></Theme>
+  </XStack>;
+}
+function Buttons(props) {
+  return <YStack
+    elevation="$4"
+    backgroundColor="$background"
+    padding="$4"
+    borderRadius="$4"
+    space="$3"
+  >
+    <H5>{props.title}</H5>
+    <Button>{props.name}</Button>
+    <Button themeInverse>inversed</Button>
+    <Button theme="alt1">
+      {props.name}
+      {"_alt1"}
+    </Button>
+    <Theme name="yellow"><Button>{props.name.split("_")[0] + "_yellow"}</Button></Theme>
+  </YStack>;
+}
+export {
+  ThemeInverseDemo
+};
+//# sourceMappingURL=ThemeInverseDemo.js.map

package/dist/jsx/ThemeInverseDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ThemeInverseDemo.tsx"],
+  "mappings": "AAAA,SAAS,QAAQ,IAAI,OAAO,QAAQ,QAAQ,oBAAoB;AAEzD,SAAS,mBAAmB;AACjC,QAAM,YAAY,aAAa,GACzB,WAAW,UAAU,SAAS,MAAM,IAAI,UAAU;AAExD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ,MAAM,SAAS,MAAM,WAAW;AAAA,IACzC,CAAC,MAAM,QACL,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM,UAAU,QAAQ,UAAU,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ;AAAA,IAC3D,EACF,EALC;AAAA,EAMH,EARC;AAUL;AAEA,SAAS,QAAQ,OAAwC;AACvD,SACE,CAAC;AAAA,IACC,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA;AAAA,IAEN,CAAC,IAAI,MAAM,MAAM,EAAhB;AAAA,IACD,CAAC,QAAQ,MAAM,KAAK,EAAnB;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM;AAAA,OAAQ,MAAM;AAAA,OAAK;AAAA,IAAK,EAArC;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,QAAQ,MAAM,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,UAAU,EAA7C,OACH,EAFC;AAAA,EAGH,EAdC;AAgBL;",
+  "names": []
+}

package/dist/jsx/ToastDemo.js

@@ -2,18 +2,15 @@ import { Toast, useToastController, useToastState } from "@tamagui/toast";
 import React from "react";
 import { Button, Label, Switch, XStack, YStack } from "tamagui";
 const ToastDemo = () => {
-  const [native, setNative] = React.useState(false);
+  const [native, setNative] = React.useState(!1);
   return <YStack space alignItems="center">
     <ToastControl native={native} />
     <CurrentToast />
     <NativeOptions native={native} setNative={setNative} />
   </YStack>;
-};
-const CurrentToast = () => {
+}, CurrentToast = () => {
   const currentToast = useToastState();
-  if (!currentToast || currentToast.isHandledNatively)
-    return null;
-  return <Toast
+  return !currentToast || currentToast.isHandledNatively ? null : <Toast
     key={currentToast.id}
     duration={currentToast.duration}
     enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
@@ -27,8 +24,7 @@ const CurrentToast = () => {
     <Toast.Title>{currentToast.title}</Toast.Title>
     {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
   </YStack></Toast>;
-};
-const ToastControl = ({ native }) => {
+}, ToastControl = ({ native }) => {
   const toast = useToastController();
   return <XStack space="$2" justifyContent="center">
     <Button
@@ -45,33 +41,30 @@ const ToastControl = ({ native }) => {
       }}
     >Hide</Button>
   </XStack>;
-};
-const NativeOptions = ({
+}, NativeOptions = ({
   native,
   setNative
-}) => {
-  return <XStack space="$3">
-    <Label size="$1" onPress={() => setNative(false)}>Custom</Label>
-    <Switch
-      id="native-toggle"
-      nativeID="native-toggle"
-      theme="active"
-      size="$1"
-      checked={!!native}
-      onCheckedChange={(val) => setNative(val)}
-    ><Switch.Thumb
-      animation={[
-        "quick",
-        {
-          transform: {
-            overshootClamping: true
-          }
+}) => <XStack space="$3">
+  <Label size="$1" onPress={() => setNative(!1)}>Custom</Label>
+  <Switch
+    id="native-toggle"
+    nativeID="native-toggle"
+    theme="active"
+    size="$1"
+    checked={!!native}
+    onCheckedChange={(val) => setNative(val)}
+  ><Switch.Thumb
+    animation={[
+      "quick",
+      {
+        transform: {
+          overshootClamping: !0
         }
-      ]}
-    /></Switch>
-    <Label size="$1" onPress={() => setNative(true)}>Native</Label>
-  </XStack>;
-};
+      }
+    ]}
+  /></Switch>
+  <Label size="$1" onPress={() => setNative(!0)}>Native</Label>
+</XStack>;
 export {
   ToastDemo
 };

package/dist/jsx/ToastDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAK/C,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,IACV,cAAc,aAAa;AAAA,GAE3B,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,EAjBC;AAmBL;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,MAAM,KAAK,KAAK,SAAS,MAAM,UAAU,KAAK,GAAG,MAElD,EAFC;AAAA,IAGD,CAAC;AAAA,MACC,GAAG;AAAA,MACH,SAAS;AAAA,MACT,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,EAlBC;AAAA,IAoBD,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,UAAU,IAAI,GAAG,MAEjD,EAFC;AAAA,EAGH,EA3BC;AA6BL;",
+  "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAK/C,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAK;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,GAEM,eAAe,MAAM;AACzB,QAAM,eAAe,cAAc;AAEnC,SAAI,CAAC,gBAAgB,aAAa,oBAA0B,OAE1D,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,IACV,cAAc,aAAa;AAAA,GAE3B,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,EAjBC;AAmBL,GAEM,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,GAEM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAKI,CAAC,OAAO,MAAM;AAAA,EACZ,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,UAAU,EAAK,GAAG,MAElD,EAFC;AAAA,EAGD,CAAC;AAAA,IACC,GAAG;AAAA,IACH,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS,CAAC,CAAC;AAAA,IACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,GAEvC,CAAC,OAAO;AAAA,IACN,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,WAAW;AAAA,UACT,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,EACF,EAlBC;AAAA,EAoBD,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,UAAU,EAAI,GAAG,MAEjD,EAFC;AAGH,EA3BC;",
   "names": []
 }

package/dist/jsx/ToastDemo.native.js

@@ -0,0 +1,71 @@
+import { Toast, useToastController, useToastState } from "@tamagui/toast";
+import React from "react";
+import { Button, Label, Switch, XStack, YStack } from "tamagui";
+const ToastDemo = () => {
+  const [native, setNative] = React.useState(!1);
+  return <YStack space alignItems="center">
+    <ToastControl native={native} />
+    <CurrentToast />
+    <NativeOptions native={native} setNative={setNative} />
+  </YStack>;
+}, CurrentToast = () => {
+  const currentToast = useToastState();
+  return !currentToast || currentToast.isHandledNatively ? null : <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"
+    viewportName={currentToast.viewportName}
+  ><YStack>
+    <Toast.Title>{currentToast.title}</Toast.Title>
+    {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
+  </YStack></Toast>;
+}, 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>;
+}, NativeOptions = ({
+  native,
+  setNative
+}) => <XStack space="$3">
+  <Label size="$1" onPress={() => setNative(!1)}>Custom</Label>
+  <Switch
+    id="native-toggle"
+    nativeID="native-toggle"
+    theme="active"
+    size="$1"
+    checked={!!native}
+    onCheckedChange={(val) => setNative(val)}
+  ><Switch.Thumb
+    animation={[
+      "quick",
+      {
+        transform: {
+          overshootClamping: !0
+        }
+      }
+    ]}
+  /></Switch>
+  <Label size="$1" onPress={() => setNative(!0)}>Native</Label>
+</XStack>;
+export {
+  ToastDemo
+};
+//# sourceMappingURL=ToastDemo.js.map

package/dist/jsx/ToastDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToastDemo.tsx"],
+  "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAK/C,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAK;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,GAEM,eAAe,MAAM;AACzB,QAAM,eAAe,cAAc;AAEnC,SAAI,CAAC,gBAAgB,aAAa,oBAA0B,OAE1D,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,IACV,cAAc,aAAa;AAAA,GAE3B,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,EAjBC;AAmBL,GAEM,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,GAEM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAKI,CAAC,OAAO,MAAM;AAAA,EACZ,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,UAAU,EAAK,GAAG,MAElD,EAFC;AAAA,EAGD,CAAC;AAAA,IACC,GAAG;AAAA,IACH,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS,CAAC,CAAC;AAAA,IACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,GAEvC,CAAC,OAAO;AAAA,IACN,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,WAAW;AAAA,UACT,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,EACF,EAlBC;AAAA,EAoBD,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,UAAU,EAAI,GAAG,MAEjD,EAFC;AAGH,EA3BC;",
+  "names": []
+}

package/dist/jsx/ToastDuplicateDemo.native.js

@@ -0,0 +1,35 @@
+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.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToastDuplicateDemo.tsx"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB,SAAS,QAAQ,QAAQ,cAAc;AAKhC,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

@@ -26,7 +26,7 @@ function ToggleGroupComponent(props) {
       id={id}
       type={props.type}
       size={props.size}
-      disableDeactivation={props.type === "single" ? true : void 0}
+      disableDeactivation={props.type === "single" ? !0 : void 0}
     >
       <ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
       <ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>

package/dist/jsx/ToggleGroupDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "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,CAAC,IAAI,MAAM,IAAI;AACjE,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,IAID,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,EA3BC;AA6BL;",
+  "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,CAAC,IAAI,MAAM,IAAI;AACjE,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,IAID,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;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,EA3BC;AA6BL;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.native.js

@@ -0,0 +1,40 @@
+import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
+import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+function ToggleGroupDemo() {
+  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 alignItems="center" space="$6">
+      <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
+      <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
+    </XStack>
+  </XStack></YStack>;
+}
+function ToggleGroupComponent(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
+  return <XStack
+    flexDirection={props.orientation === "horizontal" ? "row" : "column"}
+    alignItems="center"
+    justifyContent="center"
+    space="$4"
+  >
+    <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>{props.type === "single" ? "Single" : "Multiple"}</Label>
+    <ToggleGroup
+      orientation={props.orientation}
+      id={id}
+      type={props.type}
+      size={props.size}
+      disableDeactivation={props.type === "single" ? !0 : void 0}
+    >
+      <ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
+      <ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
+      <ToggleGroup.Item value="right" aria-label="Right aligned"><AlignRight /></ToggleGroup.Item>
+    </ToggleGroup>
+  </XStack>;
+}
+export {
+  ToggleGroupDemo
+};
+//# sourceMappingURL=ToggleGroupDemo.js.map

package/dist/jsx/ToggleGroupDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToggleGroupDemo.tsx"],
+  "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,CAAC,IAAI,MAAM,IAAI;AACjE,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,IAID,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,KAAO;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,EA3BC;AA6BL;",
+  "names": []
+}