@tamagui/demos 1.9.0 → 1.9.2

package/dist/cjs/ToastDemo.js

@@ -36,49 +36,90 @@ 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: [
+  const [native, setNative] = import_react.default.useState([]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: "$5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.ToastImperativeProvider, { options: { native }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastControl, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentToast, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptions, { native, setNative })
+  ] });
+};
+const CurrentToast = () => {
+  const { currentToast } = (0, import_tamagui.useToast)();
+  if (!currentToast || currentToast.isHandledNatively)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tamagui.Toast,
+    {
+      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",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Toast.Title, { children: currentToast.title }),
+        !!currentToast.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Toast.Description, { children: currentToast.message })
+      ] })
+    },
+    currentToast.id
+  );
+};
+const ToastControl = () => {
+  const toast = (0, import_tamagui.useToast)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$2", jc: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_tamagui.Button,
       {
         onPress: () => {
-          setSavedCount((old) => old + 1);
+          toast.show("Successfully saved!", {
+            message: "Don't worry, we've got your data."
+          });
         },
-        children: "Show toast"
+        children: "Show"
       }
     ),
-    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_tamagui.Toast,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
       {
-        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
-    ))
+        onPress: () => {
+          toast.hide();
+        },
+        children: "Hide"
+      }
+    )
   ] });
 };
+const NativeOptions = ({
+  native,
+  setNative
+}) => {
+  const supportedNativePlatforms = ["web", "mobile"];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { space: true, children: supportedNativePlatforms.map((platform) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: "$2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Checkbox,
+      {
+        id: platform,
+        checked: native == null ? void 0 : native.includes(platform),
+        onCheckedChange: (checked) => {
+          if (checked)
+            setNative([...native, platform]);
+          else
+            setNative(native.filter((val) => val !== platform));
+        },
+        size: "$3",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, {}) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Label, { size: "$3", htmlFor: platform, children: [
+      "Native ",
+      platform,
+      " toast"
+    ] })
+  ] }, platform)) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ToastDemo

package/dist/cjs/ToastDemo.js.map

@@ -1,7 +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;",
+  "sourcesContent": ["import { Check } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Checkbox,\n  Label,\n  Toast,\n  ToastImperativeProvider,\n  ToastNativePlatform,\n  XStack,\n  YStack,\n  useToast,\n} from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<ToastNativePlatform[]>([])\n\n  return (\n    <YStack space=\"$5\">\n      <ToastImperativeProvider options={{ native }}>\n        <ToastControl />\n        <CurrentToast />\n      </ToastImperativeProvider>\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = () => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" jc=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: ToastNativePlatform[]\n  setNative: (native: ToastNativePlatform[]) => void\n}) => {\n  const supportedNativePlatforms: ToastNativePlatform[] = ['web', 'mobile']\n\n  return (\n    <XStack space>\n      {supportedNativePlatforms.map((platform) => (\n        <XStack ai=\"center\" space=\"$2\" key={platform}>\n          <Checkbox\n            id={platform}\n            checked={native?.includes(platform)}\n            onCheckedChange={(checked) => {\n              if (checked) setNative([...native, platform])\n              else setNative(native.filter((val) => val !== platform))\n            }}\n            size=\"$3\"\n          >\n            <Checkbox.Indicator>\n              <Check />\n            </Checkbox.Indicator>\n          </Checkbox>\n          <Label size=\"$3\" htmlFor={platform}>\n            Native {platform} toast\n          </Label>\n        </XStack>\n      ))}\n    </XStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBM;AAnBN,0BAAsB;AACtB,mBAAkB;AAClB,qBAUO;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAAgC,CAAC,CAAC;AAEpE,SACE,6CAAC,yBAAO,OAAM,MACZ;AAAA,iDAAC,0CAAwB,SAAS,EAAE,OAAO,GACzC;AAAA,kDAAC,gBAAa;AAAA,MACd,4CAAC,gBAAa;AAAA,OAChB;AAAA,IAEA,4CAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,QAAI,yBAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,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,WAAU;AAAA,MAEV,uDAAC,yBACC;AAAA,oDAAC,qBAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,4CAAC,qBAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAdK,aAAa;AAAA,EAepB;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,YAAQ,yBAAS;AACvB,SACE,6CAAC,yBAAO,OAAM,MAAK,IAAG,UACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,2BAAkD,CAAC,OAAO,QAAQ;AAExE,SACE,4CAAC,yBAAO,OAAK,MACV,mCAAyB,IAAI,CAAC,aAC7B,6CAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,SAAS,iCAAQ,SAAS;AAAA,QAC1B,iBAAiB,CAAC,YAAY;AAC5B,cAAI;AAAS,sBAAU,CAAC,GAAG,QAAQ,QAAQ,CAAC;AAAA;AACvC,sBAAU,OAAO,OAAO,CAAC,QAAQ,QAAQ,QAAQ,CAAC;AAAA,QACzD;AAAA,QACA,MAAK;AAAA,QAEL,sDAAC,wBAAS,WAAT,EACC,sDAAC,6BAAM,GACT;AAAA;AAAA,IACF;AAAA,IACA,6CAAC,wBAAM,MAAK,MAAK,SAAS,UAAU;AAAA;AAAA,MAC1B;AAAA,MAAS;AAAA,OACnB;AAAA,OAhBkC,QAiBpC,CACD,GACH;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/ToastDuplicateDemo.js

@@ -0,0 +1,77 @@
+"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 ToastDuplicateDemo_exports = {};
+__export(ToastDuplicateDemo_exports, {
+  ToastDuplicateDemo: () => ToastDuplicateDemo
+});
+module.exports = __toCommonJS(ToastDuplicateDemo_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 ToastDuplicateDemo = () => {
+  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,
+      {
+        viewportName: "viewport-multiple",
+        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, { 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, { children: "Successfully saved!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Toast.Description, { children: "Don't worry... We've got your data." })
+          ] })
+        ] })
+      },
+      index
+    ))
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToastDuplicateDemo
+});
+//# sourceMappingURL=ToastDuplicateDemo.js.map

package/dist/cjs/ToastDuplicateDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ToastDuplicateDemo.tsx"],
+  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { Button, Toast, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack ai=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space ai=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASM;AATN,0BAA6B;AAC7B,mBAAkB;AAClB,qBAA8C;AAEvC,MAAM,qBAAqB,MAAM;AACtC,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,QACC,cAAa;AAAA,QAEb,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,sDAAC,yBACC,sDAAC,oCAAa,GAChB;AAAA,UAEA,6CAAC,yBACC;AAAA,wDAAC,qBAAM,OAAN,EAAY,iCAAmB;AAAA,YAChC,4CAAC,qBAAM,aAAN,EAAkB,iDAAmC;AAAA,aACxD;AAAA,WACF;AAAA;AAAA,MAlBK;AAAA,IAmBP,CACD;AAAA,KACH;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/index.js

@@ -58,6 +58,7 @@ __export(src_exports, {
   TextDemo: () => import_TextDemo.TextDemo,
   ThemeInverseDemo: () => import_ThemeInverseDemo.ThemeInverseDemo,
   ToastDemo: () => import_ToastDemo.ToastDemo,
+  ToastDuplicateDemo: () => import_ToastDuplicateDemo.ToastDuplicateDemo,
   TokensDemo: () => import_TokensDemo.TokensDemo,
   TooltipDemo: () => import_TooltipDemo.TooltipDemo,
   UpdateThemeDemo: () => import_UpdateThemeDemo.UpdateThemeDemo
@@ -103,6 +104,7 @@ var import_TooltipDemo = require("./TooltipDemo");
 var import_ColorsDemo = require("./ColorsDemo");
 var import_TokensDemo = require("./TokensDemo");
 var import_ToastDemo = require("./ToastDemo");
+var import_ToastDuplicateDemo = require("./ToastDuplicateDemo");
 var import_TabsDemo = require("./TabsDemo");
 var import_TabsAdvancedDemo = require("./TabsAdvancedDemo");
 __reExport(src_exports, require("./useOnIntersecting"), module.exports);
@@ -147,6 +149,7 @@ __reExport(src_exports, require("./useOnIntersecting"), module.exports);
   TextDemo,
   ThemeInverseDemo,
   ToastDemo,
+  ToastDuplicateDemo,
   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 { 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;",
+  "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 { ToastDuplicateDemo } from './ToastDuplicateDemo'\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;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,gCAAmC;AACnC,sBAAyB;AACzB,8BAAiC;AACjC,wBAAc,gCA3Cd;",
   "names": []
 }

package/dist/esm/ToastDemo.js

@@ -1,51 +1,101 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckCircle2 } from "@tamagui/lucide-icons";
+import { Check } from "@tamagui/lucide-icons";
 import React from "react";
-import { Button, Toast, XStack, YStack } from "tamagui";
+import {
+  Button,
+  Checkbox,
+  Label,
+  Toast,
+  ToastImperativeProvider,
+  XStack,
+  YStack,
+  useToast
+} from "tamagui";
 const ToastDemo = () => {
-  const [savedCount, setSavedCount] = React.useState(0);
-  return /* @__PURE__ */ jsxs(YStack, { ai: "center", children: [
+  const [native, setNative] = React.useState([]);
+  return /* @__PURE__ */ jsxs(YStack, { space: "$5", children: [
+    /* @__PURE__ */ jsxs(ToastImperativeProvider, { options: { native }, children: [
+      /* @__PURE__ */ jsx(ToastControl, {}),
+      /* @__PURE__ */ jsx(CurrentToast, {})
+    ] }),
+    /* @__PURE__ */ jsx(NativeOptions, { native, setNative })
+  ] });
+};
+const CurrentToast = () => {
+  const { currentToast } = useToast();
+  if (!currentToast || currentToast.isHandledNatively)
+    return null;
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      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",
+      children: /* @__PURE__ */ jsxs(YStack, { children: [
+        /* @__PURE__ */ jsx(Toast.Title, { children: currentToast.title }),
+        !!currentToast.message && /* @__PURE__ */ jsx(Toast.Description, { children: currentToast.message })
+      ] })
+    },
+    currentToast.id
+  );
+};
+const ToastControl = () => {
+  const toast = useToast();
+  return /* @__PURE__ */ jsxs(XStack, { space: "$2", jc: "center", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         onPress: () => {
-          setSavedCount((old) => old + 1);
+          toast.show("Successfully saved!", {
+            message: "Don't worry, we've got your data."
+          });
         },
-        children: "Show toast"
+        children: "Show"
       }
     ),
-    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ jsx(
-      Toast,
+    /* @__PURE__ */ jsx(
+      Button,
       {
-        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
-    ))
+        onPress: () => {
+          toast.hide();
+        },
+        children: "Hide"
+      }
+    )
   ] });
 };
+const NativeOptions = ({
+  native,
+  setNative
+}) => {
+  const supportedNativePlatforms = ["web", "mobile"];
+  return /* @__PURE__ */ jsx(XStack, { space: true, children: supportedNativePlatforms.map((platform) => /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$2", children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id: platform,
+        checked: native == null ? void 0 : native.includes(platform),
+        onCheckedChange: (checked) => {
+          if (checked)
+            setNative([...native, platform]);
+          else
+            setNative(native.filter((val) => val !== platform));
+        },
+        size: "$3",
+        children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(Check, {}) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Label, { size: "$3", htmlFor: platform, children: [
+      "Native ",
+      platform,
+      " toast"
+    ] })
+  ] }, platform)) });
+};
 export {
   ToastDemo
 };

package/dist/esm/ToastDemo.js.map

@@ -1,7 +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;",
+  "sourcesContent": ["import { Check } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Checkbox,\n  Label,\n  Toast,\n  ToastImperativeProvider,\n  ToastNativePlatform,\n  XStack,\n  YStack,\n  useToast,\n} from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<ToastNativePlatform[]>([])\n\n  return (\n    <YStack space=\"$5\">\n      <ToastImperativeProvider options={{ native }}>\n        <ToastControl />\n        <CurrentToast />\n      </ToastImperativeProvider>\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = () => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" jc=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: ToastNativePlatform[]\n  setNative: (native: ToastNativePlatform[]) => void\n}) => {\n  const supportedNativePlatforms: ToastNativePlatform[] = ['web', 'mobile']\n\n  return (\n    <XStack space>\n      {supportedNativePlatforms.map((platform) => (\n        <XStack ai=\"center\" space=\"$2\" key={platform}>\n          <Checkbox\n            id={platform}\n            checked={native?.includes(platform)}\n            onCheckedChange={(checked) => {\n              if (checked) setNative([...native, platform])\n              else setNative(native.filter((val) => val !== platform))\n            }}\n            size=\"$3\"\n          >\n            <Checkbox.Indicator>\n              <Check />\n            </Checkbox.Indicator>\n          </Checkbox>\n          <Label size=\"$3\" htmlFor={platform}>\n            Native {platform} toast\n          </Label>\n        </XStack>\n      ))}\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAmBM,SACE,KADF;AAnBN,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAgC,CAAC,CAAC;AAEpE,SACE,qBAAC,UAAO,OAAM,MACZ;AAAA,yBAAC,2BAAwB,SAAS,EAAE,OAAO,GACzC;AAAA,0BAAC,gBAAa;AAAA,MACd,oBAAC,gBAAa;AAAA,OAChB;AAAA,IAEA,oBAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,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,WAAU;AAAA,MAEV,+BAAC,UACC;AAAA,4BAAC,MAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,oBAAC,MAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAdK,aAAa;AAAA,EAepB;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,UAAO,OAAM,MAAK,IAAG,UACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,2BAAkD,CAAC,OAAO,QAAQ;AAExE,SACE,oBAAC,UAAO,OAAK,MACV,mCAAyB,IAAI,CAAC,aAC7B,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,SAAS,iCAAQ,SAAS;AAAA,QAC1B,iBAAiB,CAAC,YAAY;AAC5B,cAAI;AAAS,sBAAU,CAAC,GAAG,QAAQ,QAAQ,CAAC;AAAA;AACvC,sBAAU,OAAO,OAAO,CAAC,QAAQ,QAAQ,QAAQ,CAAC;AAAA,QACzD;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,SAAS,WAAT,EACC,8BAAC,SAAM,GACT;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAM,MAAK,MAAK,SAAS,UAAU;AAAA;AAAA,MAC1B;AAAA,MAAS;AAAA,OACnB;AAAA,OAhBkC,QAiBpC,CACD,GACH;AAEJ;",
   "names": []
 }

package/dist/esm/ToastDemo.mjs

@@ -1,51 +1,101 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckCircle2 } from "@tamagui/lucide-icons";
+import { Check } from "@tamagui/lucide-icons";
 import React from "react";
-import { Button, Toast, XStack, YStack } from "tamagui";
+import {
+  Button,
+  Checkbox,
+  Label,
+  Toast,
+  ToastImperativeProvider,
+  XStack,
+  YStack,
+  useToast
+} from "tamagui";
 const ToastDemo = () => {
-  const [savedCount, setSavedCount] = React.useState(0);
-  return /* @__PURE__ */ jsxs(YStack, { ai: "center", children: [
+  const [native, setNative] = React.useState([]);
+  return /* @__PURE__ */ jsxs(YStack, { space: "$5", children: [
+    /* @__PURE__ */ jsxs(ToastImperativeProvider, { options: { native }, children: [
+      /* @__PURE__ */ jsx(ToastControl, {}),
+      /* @__PURE__ */ jsx(CurrentToast, {})
+    ] }),
+    /* @__PURE__ */ jsx(NativeOptions, { native, setNative })
+  ] });
+};
+const CurrentToast = () => {
+  const { currentToast } = useToast();
+  if (!currentToast || currentToast.isHandledNatively)
+    return null;
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      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",
+      children: /* @__PURE__ */ jsxs(YStack, { children: [
+        /* @__PURE__ */ jsx(Toast.Title, { children: currentToast.title }),
+        !!currentToast.message && /* @__PURE__ */ jsx(Toast.Description, { children: currentToast.message })
+      ] })
+    },
+    currentToast.id
+  );
+};
+const ToastControl = () => {
+  const toast = useToast();
+  return /* @__PURE__ */ jsxs(XStack, { space: "$2", jc: "center", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         onPress: () => {
-          setSavedCount((old) => old + 1);
+          toast.show("Successfully saved!", {
+            message: "Don't worry, we've got your data."
+          });
         },
-        children: "Show toast"
+        children: "Show"
       }
     ),
-    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ jsx(
-      Toast,
+    /* @__PURE__ */ jsx(
+      Button,
       {
-        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
-    ))
+        onPress: () => {
+          toast.hide();
+        },
+        children: "Hide"
+      }
+    )
   ] });
 };
+const NativeOptions = ({
+  native,
+  setNative
+}) => {
+  const supportedNativePlatforms = ["web", "mobile"];
+  return /* @__PURE__ */ jsx(XStack, { space: true, children: supportedNativePlatforms.map((platform) => /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$2", children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id: platform,
+        checked: native == null ? void 0 : native.includes(platform),
+        onCheckedChange: (checked) => {
+          if (checked)
+            setNative([...native, platform]);
+          else
+            setNative(native.filter((val) => val !== platform));
+        },
+        size: "$3",
+        children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(Check, {}) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Label, { size: "$3", htmlFor: platform, children: [
+      "Native ",
+      platform,
+      " toast"
+    ] })
+  ] }, platform)) });
+};
 export {
   ToastDemo
 };

package/dist/esm/ToastDemo.mjs.map

@@ -1,7 +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;",
+  "sourcesContent": ["import { Check } from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Checkbox,\n  Label,\n  Toast,\n  ToastImperativeProvider,\n  ToastNativePlatform,\n  XStack,\n  YStack,\n  useToast,\n} from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState<ToastNativePlatform[]>([])\n\n  return (\n    <YStack space=\"$5\">\n      <ToastImperativeProvider options={{ native }}>\n        <ToastControl />\n        <CurrentToast />\n      </ToastImperativeProvider>\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const { currentToast } = useToast()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = () => {\n  const toast = useToast()\n  return (\n    <XStack space=\"$2\" jc=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: ToastNativePlatform[]\n  setNative: (native: ToastNativePlatform[]) => void\n}) => {\n  const supportedNativePlatforms: ToastNativePlatform[] = ['web', 'mobile']\n\n  return (\n    <XStack space>\n      {supportedNativePlatforms.map((platform) => (\n        <XStack ai=\"center\" space=\"$2\" key={platform}>\n          <Checkbox\n            id={platform}\n            checked={native?.includes(platform)}\n            onCheckedChange={(checked) => {\n              if (checked) setNative([...native, platform])\n              else setNative(native.filter((val) => val !== platform))\n            }}\n            size=\"$3\"\n          >\n            <Checkbox.Indicator>\n              <Check />\n            </Checkbox.Indicator>\n          </Checkbox>\n          <Label size=\"$3\" htmlFor={platform}>\n            Native {platform} toast\n          </Label>\n        </XStack>\n      ))}\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAmBM,SACE,KADF;AAnBN,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAgC,CAAC,CAAC;AAEpE,SACE,qBAAC,UAAO,OAAM,MACZ;AAAA,yBAAC,2BAAwB,SAAS,EAAE,OAAO,GACzC;AAAA,0BAAC,gBAAa;AAAA,MACd,oBAAC,gBAAa;AAAA,OAChB;AAAA,IAEA,oBAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,EAAE,aAAa,IAAI,SAAS;AAElC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,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,WAAU;AAAA,MAEV,+BAAC,UACC;AAAA,4BAAC,MAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,oBAAC,MAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAdK,aAAa;AAAA,EAepB;AAEJ;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,UAAO,OAAM,MAAK,IAAG,UACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,2BAAkD,CAAC,OAAO,QAAQ;AAExE,SACE,oBAAC,UAAO,OAAK,MACV,mCAAyB,IAAI,CAAC,aAC7B,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,SAAS,iCAAQ,SAAS;AAAA,QAC1B,iBAAiB,CAAC,YAAY;AAC5B,cAAI;AAAS,sBAAU,CAAC,GAAG,QAAQ,QAAQ,CAAC;AAAA;AACvC,sBAAU,OAAO,OAAO,CAAC,QAAQ,QAAQ,QAAQ,CAAC;AAAA,QACzD;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,SAAS,WAAT,EACC,8BAAC,SAAM,GACT;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAM,MAAK,MAAK,SAAS,UAAU;AAAA;AAAA,MAC1B;AAAA,MAAS;AAAA,OACnB;AAAA,OAhBkC,QAiBpC,CACD,GACH;AAEJ;",
   "names": []
 }