@tamagui/demos 1.7.10 → 1.8.0

package/dist/cjs/ToastDemo.js

@@ -0,0 +1,86 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ToastDemo_exports = {};
+__export(ToastDemo_exports, {
+  ToastDemo: () => ToastDemo
+});
+module.exports = __toCommonJS(ToastDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_icons = require("@tamagui/lucide-icons");
+var import_react = __toESM(require("react"));
+var import_tamagui = require("tamagui");
+const ToastDemo = () => {
+  const [savedCount, setSavedCount] = import_react.default.useState(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { ai: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        onPress: () => {
+          setSavedCount((old) => old + 1);
+        },
+        children: "Show toast"
+      }
+    ),
+    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Toast,
+      {
+        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",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: true, ai: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tamagui.YStack,
+            {
+              animation: "quick",
+              enterStyle: { scale: 0, rotate: "-100deg", x: 10 },
+              x: 0,
+              scale: 1,
+              rotate: "0deg",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.CheckCircle2, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Toast.Title, { enterStyle: { x: 40 }, x: 0, animation: "quick", children: "Successfully saved!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Toast.Description, { enterStyle: { x: 20 }, x: 0, animation: "quick", children: "Don't worry... We've got your data." })
+          ] })
+        ] })
+      },
+      index
+    ))
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToastDemo
+});
+//# sourceMappingURL=ToastDemo.js.map

package/dist/cjs/ToastDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToastDemo.tsx"],
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\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          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              animation=\"quick\"\n              enterStyle={{ scale: 0, rotate: '-100deg', x: 10 }}\n              x={0}\n              scale={1}\n              rotate=\"0deg\"\n            >\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title enterStyle={{ x: 40 }} x={0} animation=\"quick\">\n                Successfully saved!\n              </Toast.Title>\n              <Toast.Description enterStyle={{ x: 20 }} x={0} animation=\"quick\">\n                Don't worry... We've got your data.\n              </Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASM;AATN,0BAA6B;AAC7B,mBAAkB;AAClB,qBAA8C;AAEvC,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAS,CAAC;AAEpD,SACE,6CAAC,yBAAO,IAAG,UACT;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,uDAAC,yBAAO,OAAK,MAAC,IAAG,UACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,YAAY,EAAE,OAAO,GAAG,QAAQ,WAAW,GAAG,GAAG;AAAA,cACjD,GAAG;AAAA,cACH,OAAO;AAAA,cACP,QAAO;AAAA,cAEP,sDAAC,oCAAa;AAAA;AAAA,UAChB;AAAA,UAEA,6CAAC,yBACC;AAAA,wDAAC,qBAAM,OAAN,EAAY,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,WAAU,SAAQ,iCAE5D;AAAA,YACA,4CAAC,qBAAM,aAAN,EAAkB,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,WAAU,SAAQ,iDAElE;AAAA,aACF;AAAA,WACF;AAAA;AAAA,MA5BK;AAAA,IA6BP,CACD;AAAA,KACH;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/index.js

@@ -57,6 +57,7 @@ __export(src_exports, {
   TabsDemo: () => import_TabsDemo.TabsDemo,
   TextDemo: () => import_TextDemo.TextDemo,
   ThemeInverseDemo: () => import_ThemeInverseDemo.ThemeInverseDemo,
+  ToastDemo: () => import_ToastDemo.ToastDemo,
   TokensDemo: () => import_TokensDemo.TokensDemo,
   TooltipDemo: () => import_TooltipDemo.TooltipDemo,
   UpdateThemeDemo: () => import_UpdateThemeDemo.UpdateThemeDemo
@@ -101,6 +102,7 @@ var import_ThemeInverseDemo = require("./ThemeInverseDemo");
 var import_TooltipDemo = require("./TooltipDemo");
 var import_ColorsDemo = require("./ColorsDemo");
 var import_TokensDemo = require("./TokensDemo");
+var import_ToastDemo = require("./ToastDemo");
 var import_TabsDemo = require("./TabsDemo");
 var import_TabsAdvancedDemo = require("./TabsAdvancedDemo");
 __reExport(src_exports, require("./useOnIntersecting"), module.exports);
@@ -144,6 +146,7 @@ __reExport(src_exports, require("./useOnIntersecting"), module.exports);
   TabsDemo,
   TextDemo,
   ThemeInverseDemo,
+  ToastDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,4BAA+B;AAC/B,iCAAoC;AACpC,iCAAoC;AACpC,kCAAqC;AACrC,oCAAuC;AACvC,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,wBAA2B;AAC3B,0BAA6B;AAC7B,6BAAgC;AAChC,uBAA0B;AAC1B,wBAA2B;AAC3B,uBAA0B;AAC1B,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,gCAAmC;AACnC,0BAA6B;AAC7B,6BAAgC;AAChC,yBAA4B;AAC5B,0BAA6B;AAC7B,4BAA+B;AAC/B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,4BAA+B;AAC/B,uBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AACjC,wBAAc,gCAzCd;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,4BAA+B;AAC/B,iCAAoC;AACpC,iCAAoC;AACpC,kCAAqC;AACrC,oCAAuC;AACvC,wBAA2B;AAC3B,wBAA2B;AAC3B,sBAAyB;AACzB,wBAA2B;AAC3B,0BAA6B;AAC7B,6BAAgC;AAChC,uBAA0B;AAC1B,wBAA2B;AAC3B,uBAA0B;AAC1B,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,gCAAmC;AACnC,0BAA6B;AAC7B,6BAAgC;AAChC,yBAA4B;AAC5B,0BAA6B;AAC7B,4BAA+B;AAC/B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,4BAA+B;AAC/B,uBAA0B;AAC1B,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,sBAAyB;AACzB,8BAAiC;AACjC,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,uBAA0B;AAC1B,sBAAyB;AACzB,8BAAiC;AACjC,wBAAc,gCA1Cd;",
   "names": []
 }

package/dist/esm/ToastDemo.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle2 } from "@tamagui/lucide-icons";
+import React from "react";
+import { Button, Toast, XStack, YStack } from "tamagui";
+const ToastDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0);
+  return /* @__PURE__ */ jsxs(YStack, { ai: "center", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onPress: () => {
+          setSavedCount((old) => old + 1);
+        },
+        children: "Show toast"
+      }
+    ),
+    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ jsx(
+      Toast,
+      {
+        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",
+        children: /* @__PURE__ */ jsxs(XStack, { space: true, ai: "center", children: [
+          /* @__PURE__ */ jsx(
+            YStack,
+            {
+              animation: "quick",
+              enterStyle: { scale: 0, rotate: "-100deg", x: 10 },
+              x: 0,
+              scale: 1,
+              rotate: "0deg",
+              children: /* @__PURE__ */ jsx(CheckCircle2, {})
+            }
+          ),
+          /* @__PURE__ */ jsxs(YStack, { children: [
+            /* @__PURE__ */ jsx(Toast.Title, { enterStyle: { x: 40 }, x: 0, animation: "quick", children: "Successfully saved!" }),
+            /* @__PURE__ */ jsx(Toast.Description, { enterStyle: { x: 20 }, x: 0, animation: "quick", children: "Don't worry... We've got your data." })
+          ] })
+        ] })
+      },
+      index
+    ))
+  ] });
+};
+export {
+  ToastDemo
+};
+//# sourceMappingURL=ToastDemo.js.map

package/dist/esm/ToastDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToastDemo.tsx"],
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\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          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              animation=\"quick\"\n              enterStyle={{ scale: 0, rotate: '-100deg', x: 10 }}\n              x={0}\n              scale={1}\n              rotate=\"0deg\"\n            >\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title enterStyle={{ x: 40 }} x={0} animation=\"quick\">\n                Successfully saved!\n              </Toast.Title>\n              <Toast.Description enterStyle={{ x: 20 }} x={0} animation=\"quick\">\n                Don't worry... We've got your data.\n              </Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
+  "mappings": "AASM,cA6BM,YA7BN;AATN,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,qBAAC,UAAO,IAAG,UACT;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,+BAAC,UAAO,OAAK,MAAC,IAAG,UACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,YAAY,EAAE,OAAO,GAAG,QAAQ,WAAW,GAAG,GAAG;AAAA,cACjD,GAAG;AAAA,cACH,OAAO;AAAA,cACP,QAAO;AAAA,cAEP,8BAAC,gBAAa;AAAA;AAAA,UAChB;AAAA,UAEA,qBAAC,UACC;AAAA,gCAAC,MAAM,OAAN,EAAY,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,WAAU,SAAQ,iCAE5D;AAAA,YACA,oBAAC,MAAM,aAAN,EAAkB,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,WAAU,SAAQ,iDAElE;AAAA,aACF;AAAA,WACF;AAAA;AAAA,MA5BK;AAAA,IA6BP,CACD;AAAA,KACH;AAEJ;",
+  "names": []
+}

package/dist/esm/ToastDemo.mjs

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle2 } from "@tamagui/lucide-icons";
+import React from "react";
+import { Button, Toast, XStack, YStack } from "tamagui";
+const ToastDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0);
+  return /* @__PURE__ */ jsxs(YStack, { ai: "center", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onPress: () => {
+          setSavedCount((old) => old + 1);
+        },
+        children: "Show toast"
+      }
+    ),
+    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ jsx(
+      Toast,
+      {
+        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",
+        children: /* @__PURE__ */ jsxs(XStack, { space: true, ai: "center", children: [
+          /* @__PURE__ */ jsx(
+            YStack,
+            {
+              animation: "quick",
+              enterStyle: { scale: 0, rotate: "-100deg", x: 10 },
+              x: 0,
+              scale: 1,
+              rotate: "0deg",
+              children: /* @__PURE__ */ jsx(CheckCircle2, {})
+            }
+          ),
+          /* @__PURE__ */ jsxs(YStack, { children: [
+            /* @__PURE__ */ jsx(Toast.Title, { enterStyle: { x: 40 }, x: 0, animation: "quick", children: "Successfully saved!" }),
+            /* @__PURE__ */ jsx(Toast.Description, { enterStyle: { x: 20 }, x: 0, animation: "quick", children: "Don't worry... We've got your data." })
+          ] })
+        ] })
+      },
+      index
+    ))
+  ] });
+};
+export {
+  ToastDemo
+};
+//# sourceMappingURL=ToastDemo.mjs.map

package/dist/esm/ToastDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToastDemo.tsx"],
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\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          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              animation=\"quick\"\n              enterStyle={{ scale: 0, rotate: '-100deg', x: 10 }}\n              x={0}\n              scale={1}\n              rotate=\"0deg\"\n            >\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title enterStyle={{ x: 40 }} x={0} animation=\"quick\">\n                Successfully saved!\n              </Toast.Title>\n              <Toast.Description enterStyle={{ x: 20 }} x={0} animation=\"quick\">\n                Don't worry... We've got your data.\n              </Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
+  "mappings": "AASM,cA6BM,YA7BN;AATN,SAAS,oBAAoB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,qBAAC,UAAO,IAAG,UACT;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,wBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,QAChC;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACC,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,QAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,QAC1C,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAU;AAAA,QAEV,+BAAC,UAAO,OAAK,MAAC,IAAG,UACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,YAAY,EAAE,OAAO,GAAG,QAAQ,WAAW,GAAG,GAAG;AAAA,cACjD,GAAG;AAAA,cACH,OAAO;AAAA,cACP,QAAO;AAAA,cAEP,8BAAC,gBAAa;AAAA;AAAA,UAChB;AAAA,UAEA,qBAAC,UACC;AAAA,gCAAC,MAAM,OAAN,EAAY,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,WAAU,SAAQ,iCAE5D;AAAA,YACA,oBAAC,MAAM,aAAN,EAAkB,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,WAAU,SAAQ,iDAElE;AAAA,aACF;AAAA,WACF;AAAA;AAAA,MA5BK;AAAA,IA6BP,CACD;AAAA,KACH;AAEJ;",
+  "names": []
+}

package/dist/esm/index.js

@@ -37,6 +37,7 @@ import { ThemeInverseDemo } from "./ThemeInverseDemo";
 import { TooltipDemo } from "./TooltipDemo";
 import { ColorsDemo } from "./ColorsDemo";
 import { TokensDemo } from "./TokensDemo";
+import { ToastDemo } from "./ToastDemo";
 import { TabsDemo } from "./TabsDemo";
 import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
 export * from "./useOnIntersecting";
@@ -79,6 +80,7 @@ export {
   TabsDemo,
   TextDemo,
   ThemeInverseDemo,
+  ToastDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
   "names": []
 }

package/dist/esm/index.mjs

@@ -37,6 +37,7 @@ import { ThemeInverseDemo } from "./ThemeInverseDemo";
 import { TooltipDemo } from "./TooltipDemo";
 import { ColorsDemo } from "./ColorsDemo";
 import { TokensDemo } from "./TokensDemo";
+import { ToastDemo } from "./ToastDemo";
 import { TabsDemo } from "./TabsDemo";
 import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
 export * from "./useOnIntersecting";
@@ -79,6 +80,7 @@ export {
   TabsDemo,
   TextDemo,
   ThemeInverseDemo,
+  ToastDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
   "names": []
 }

package/dist/jsx/ToastDemo.js

@@ -0,0 +1,39 @@
+import { CheckCircle2 } from "@tamagui/lucide-icons";
+import React from "react";
+import { Button, Toast, XStack, YStack } from "tamagui";
+const ToastDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0);
+  return <YStack ai="center">
+    <Button
+      onPress={() => {
+        setSavedCount((old) => old + 1);
+      }}
+    >Show toast</Button>
+    {[...Array(savedCount)].map((_, index) => <Toast
+      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 ai="center">
+      <YStack
+        animation="quick"
+        enterStyle={{ scale: 0, rotate: "-100deg", x: 10 }}
+        x={0}
+        scale={1}
+        rotate="0deg"
+      ><CheckCircle2 /></YStack>
+      <YStack>
+        <Toast.Title enterStyle={{ x: 40 }} x={0} animation="quick">Successfully saved!</Toast.Title>
+        <Toast.Description enterStyle={{ x: 20 }} x={0} animation="quick">Don't worry... We've got your data.</Toast.Description>
+      </YStack>
+    </XStack></Toast>)}
+  </YStack>;
+};
+export {
+  ToastDemo
+};
+//# sourceMappingURL=ToastDemo.js.map

package/dist/jsx/ToastDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToastDemo.tsx"],
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\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          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              animation=\"quick\"\n              enterStyle={{ scale: 0, rotate: '-100deg', x: 10 }}\n              x={0}\n              scale={1}\n              rotate=\"0deg\"\n            >\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title enterStyle={{ x: 40 }} x={0} animation=\"quick\">\n                Successfully saved!\n              </Toast.Title>\n              <Toast.Description enterStyle={{ x: 20 }} x={0} animation=\"quick\">\n                Don't worry... We've got your data.\n              </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,YAAY,MAAM;AAC7B,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,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;AAAA,QACC,UAAU;AAAA,QACV,YAAY,EAAE,OAAO,GAAG,QAAQ,WAAW,GAAG,GAAG;AAAA,QACjD,GAAG;AAAA,QACH,OAAO;AAAA,QACP,OAAO;AAAA,OAEP,CAAC,aAAa,EAChB,EARC;AAAA,MAUD,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,QAAQ,mBAE5D,EAFC,MAAM;AAAA,QAGP,CAAC,MAAM,YAAY,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,QAAQ,mCAElE,EAFC,MAAM;AAAA,MAGT,EAPC;AAAA,IAQH,EAnBC,OAoBH,EA9BC,MA+BF;AAAA,EACH,EAzCC;AA2CL;",
+  "names": []
+}

package/dist/jsx/ToastDemo.mjs

@@ -0,0 +1,39 @@
+import { CheckCircle2 } from "@tamagui/lucide-icons";
+import React from "react";
+import { Button, Toast, XStack, YStack } from "tamagui";
+const ToastDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0);
+  return <YStack ai="center">
+    <Button
+      onPress={() => {
+        setSavedCount((old) => old + 1);
+      }}
+    >Show toast</Button>
+    {[...Array(savedCount)].map((_, index) => <Toast
+      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 ai="center">
+      <YStack
+        animation="quick"
+        enterStyle={{ scale: 0, rotate: "-100deg", x: 10 }}
+        x={0}
+        scale={1}
+        rotate="0deg"
+      ><CheckCircle2 /></YStack>
+      <YStack>
+        <Toast.Title enterStyle={{ x: 40 }} x={0} animation="quick">Successfully saved!</Toast.Title>
+        <Toast.Description enterStyle={{ x: 20 }} x={0} animation="quick">Don't worry... We've got your data.</Toast.Description>
+      </YStack>
+    </XStack></Toast>)}
+  </YStack>;
+};
+export {
+  ToastDemo
+};
+//# sourceMappingURL=ToastDemo.mjs.map

package/dist/jsx/ToastDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToastDemo.tsx"],
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\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          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              animation=\"quick\"\n              enterStyle={{ scale: 0, rotate: '-100deg', x: 10 }}\n              x={0}\n              scale={1}\n              rotate=\"0deg\"\n            >\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title enterStyle={{ x: 40 }} x={0} animation=\"quick\">\n                Successfully saved!\n              </Toast.Title>\n              <Toast.Description enterStyle={{ x: 20 }} x={0} animation=\"quick\">\n                Don't worry... We've got your data.\n              </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,YAAY,MAAM;AAC7B,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,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;AAAA,QACC,UAAU;AAAA,QACV,YAAY,EAAE,OAAO,GAAG,QAAQ,WAAW,GAAG,GAAG;AAAA,QACjD,GAAG;AAAA,QACH,OAAO;AAAA,QACP,OAAO;AAAA,OAEP,CAAC,aAAa,EAChB,EARC;AAAA,MAUD,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,QAAQ,mBAE5D,EAFC,MAAM;AAAA,QAGP,CAAC,MAAM,YAAY,YAAY,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,QAAQ,mCAElE,EAFC,MAAM;AAAA,MAGT,EAPC;AAAA,IAQH,EAnBC,OAoBH,EA9BC,MA+BF;AAAA,EACH,EAzCC;AA2CL;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -37,6 +37,7 @@ import { ThemeInverseDemo } from "./ThemeInverseDemo";
 import { TooltipDemo } from "./TooltipDemo";
 import { ColorsDemo } from "./ColorsDemo";
 import { TokensDemo } from "./TokensDemo";
+import { ToastDemo } from "./ToastDemo";
 import { TabsDemo } from "./TabsDemo";
 import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
 export * from "./useOnIntersecting";
@@ -79,6 +80,7 @@ export {
   TabsDemo,
   TextDemo,
   ThemeInverseDemo,
+  ToastDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/jsx/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
   "names": []
 }

package/dist/jsx/index.mjs

@@ -37,6 +37,7 @@ import { ThemeInverseDemo } from "./ThemeInverseDemo";
 import { TooltipDemo } from "./TooltipDemo";
 import { ColorsDemo } from "./ColorsDemo";
 import { TokensDemo } from "./TokensDemo";
+import { ToastDemo } from "./ToastDemo";
 import { TabsDemo } from "./TabsDemo";
 import { TabsAdvancedDemo } from "./TabsAdvancedDemo";
 export * from "./useOnIntersecting";
@@ -79,6 +80,7 @@ export {
   TabsDemo,
   TextDemo,
   ThemeInverseDemo,
+  ToastDemo,
   TokensDemo,
   TooltipDemo,
   UpdateThemeDemo

package/dist/jsx/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { InputsDemo } from './InputsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { RadioGroupDemo } from './RadioGroupDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { CheckboxDemo } from './CheckboxDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport { ToastDemo } from './ToastDemo'\nexport { TabsDemo } from './TabsDemo'\nexport { TabsAdvancedDemo } from './TabsAdvancedDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.7.10",
+  "version": "1.8.0",
   "sideEffects": [
     "*.css"
   ],
@@ -28,28 +28,28 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.7.10",
-    "@tamagui/button": "1.7.10",
-    "@tamagui/config": "1.7.10",
-    "@tamagui/core": "1.7.10",
-    "@tamagui/list-item": "1.7.10",
-    "@tamagui/logo": "1.7.10",
-    "@tamagui/menu": "1.7.10",
-    "@tamagui/popover": "1.7.10",
-    "@tamagui/progress": "1.7.10",
-    "@tamagui/radio-group": "1.7.10",
-    "@tamagui/select": "1.7.10",
-    "@tamagui/sheet": "1.7.10",
-    "@tamagui/slider": "1.7.10",
-    "@tamagui/stacks": "1.7.10",
-    "tamagui": "1.7.10"
+    "@tamagui/avatar": "1.8.0",
+    "@tamagui/button": "1.8.0",
+    "@tamagui/config": "1.8.0",
+    "@tamagui/core": "1.8.0",
+    "@tamagui/list-item": "1.8.0",
+    "@tamagui/logo": "1.8.0",
+    "@tamagui/menu": "1.8.0",
+    "@tamagui/popover": "1.8.0",
+    "@tamagui/progress": "1.8.0",
+    "@tamagui/radio-group": "1.8.0",
+    "@tamagui/select": "1.8.0",
+    "@tamagui/sheet": "1.8.0",
+    "@tamagui/slider": "1.8.0",
+    "@tamagui/stacks": "1.8.0",
+    "tamagui": "1.8.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.7.10",
+    "@tamagui/build": "1.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/ToastDemo.tsx

@@ -0,0 +1,52 @@
+import { CheckCircle2 } from '@tamagui/lucide-icons'
+import React from 'react'
+import { Button, Toast, XStack, YStack } from 'tamagui'
+
+export const ToastDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0)
+
+  return (
+    <YStack ai="center">
+      <Button
+        onPress={() => {
+          setSavedCount((old) => old + 1)
+        }}
+      >
+        Show toast
+      </Button>
+      {[...Array(savedCount)].map((_, index) => (
+        <Toast
+          key={index}
+          duration={4000}
+          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 ai="center">
+            <YStack
+              animation="quick"
+              enterStyle={{ scale: 0, rotate: '-100deg', x: 10 }}
+              x={0}
+              scale={1}
+              rotate="0deg"
+            >
+              <CheckCircle2 />
+            </YStack>
+
+            <YStack>
+              <Toast.Title enterStyle={{ x: 40 }} x={0} animation="quick">
+                Successfully saved!
+              </Toast.Title>
+              <Toast.Description enterStyle={{ x: 20 }} x={0} animation="quick">
+                Don't worry... We've got your data.
+              </Toast.Description>
+            </YStack>
+          </XStack>
+        </Toast>
+      ))}
+    </YStack>
+  )
+}

package/src/index.tsx

@@ -37,6 +37,7 @@ export { ThemeInverseDemo } from './ThemeInverseDemo'
 export { TooltipDemo } from './TooltipDemo'
 export { ColorsDemo } from './ColorsDemo'
 export { TokensDemo } from './TokensDemo'
+export { ToastDemo } from './ToastDemo'
 export { TabsDemo } from './TabsDemo'
 export { TabsAdvancedDemo } from './TabsAdvancedDemo'
 export * from './useOnIntersecting'

package/types/ToastDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ToastDemo: () => JSX.Element;
+//# sourceMappingURL=ToastDemo.d.ts.map

package/types/ToastDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastDemo.d.ts","sourceRoot":"","sources":["../src/ToastDemo.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,SAAS,mBA+CrB,CAAA"}

package/types/index.d.ts

@@ -37,6 +37,7 @@ export { ThemeInverseDemo } from './ThemeInverseDemo';
 export { TooltipDemo } from './TooltipDemo';
 export { ColorsDemo } from './ColorsDemo';
 export { TokensDemo } from './TokensDemo';
+export { ToastDemo } from './ToastDemo';
 export { TabsDemo } from './TabsDemo';
 export { TabsAdvancedDemo } from './TabsAdvancedDemo';
 export * from './useOnIntersecting';

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,cAAc,qBAAqB,CAAA"}