@hanzogui/demos 4.3.1 → 8.0.0

package/dist/esm/ToastDemo.native.js

@@ -1,127 +1,222 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Toast, useToastController, useToastState } from "@hanzogui/toast";
-import React from "react";
-import { Button, Label, Switch, XStack, YStack } from "@hanzo/gui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isWeb } from "hanzogui";
+import { Toast, toast, useToastItem } from "@hanzogui/toast/v2";
+import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowUp, ArrowUpLeft, ArrowUpRight } from "@hanzogui/lucide-icons-2";
+import { useRef, useState } from "react";
+import { Button, Label, SizableText, Slider, XStack, YStack } from "hanzogui";
 var ToastDemo = function () {
-  var [native, setNative] = React.useState(false);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    items: "center",
-    children: [/* @__PURE__ */_jsx(ToastControl, {
-      native
-    }), /* @__PURE__ */_jsx(CurrentToast, {}), /* @__PURE__ */_jsx(NativeOptions, {
-      native,
-      setNative
+  var [position, setPosition] = useState("bottom-right");
+  var [gap, setGap] = useState(14);
+  var [visibleToasts, setVisibleToasts] = useState(4);
+  var [duration, setDuration] = useState(4e3);
+  var count = useRef(0);
+  var showToast = function (newPosition) {
+    setPosition(newPosition);
+    count.current++;
+    toast(`Toast #${count.current}`, {
+      description: "Swipe to dismiss or wait for auto-close."
+    });
+  };
+  return /* @__PURE__ */_jsxs(Toast, {
+    position,
+    gap: Math.round(gap),
+    visibleToasts,
+    duration,
+    children: [/* @__PURE__ */_jsx(Toast.Viewport, {
+      offset: 16,
+      children: /* @__PURE__ */_jsx(Toast.List, {
+        renderItem: function (param) {
+          var {
+            toast: t,
+            index
+          } = param;
+          return /* @__PURE__ */_jsx(Toast.Item, {
+            toast: t,
+            index,
+            testID: "toast-item",
+            children: /* @__PURE__ */_jsx(ToastContent, {
+              toast: t
+            })
+          }, t.id);
+        }
+      })
+    }), /* @__PURE__ */_jsxs(YStack, {
+      gap: "$3",
+      self: "center",
+      width: 280,
+      children: [/* Position buttons */
+      /* @__PURE__ */_jsxs(YStack, {
+        gap: "$2",
+        self: "center",
+        children: [/* @__PURE__ */_jsxs(XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */_jsx(PositionButton, {
+            position: "top-left",
+            current: position,
+            onPress: showToast,
+            Icon: ArrowUpLeft
+          }), /* @__PURE__ */_jsx(PositionButton, {
+            position: "top-center",
+            current: position,
+            onPress: showToast,
+            Icon: ArrowUp
+          }), /* @__PURE__ */_jsx(PositionButton, {
+            position: "top-right",
+            current: position,
+            onPress: showToast,
+            Icon: ArrowUpRight,
+            testID: "toast-top-right-button"
+          })]
+        }), /* @__PURE__ */_jsxs(XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */_jsx(PositionButton, {
+            position: "bottom-left",
+            current: position,
+            onPress: showToast,
+            Icon: ArrowDownLeft
+          }), /* @__PURE__ */_jsx(PositionButton, {
+            position: "bottom-center",
+            current: position,
+            onPress: showToast,
+            Icon: ArrowDown
+          }), /* @__PURE__ */_jsx(PositionButton, {
+            position: "bottom-right",
+            current: position,
+            onPress: showToast,
+            Icon: ArrowDownRight,
+            testID: "toast-show-button"
+          })]
+        })]
+      }), /* Controls */
+      /* @__PURE__ */_jsxs(YStack, {
+        gap: "$1",
+        paddingTop: "$1",
+        children: [/* @__PURE__ */_jsx(DemoSlider, {
+          label: "Gap",
+          value: gap,
+          min: 0,
+          max: 30,
+          step: 0.1,
+          onChange: setGap
+        }), /* @__PURE__ */_jsx(DemoSlider, {
+          label: "Visible",
+          value: visibleToasts,
+          min: 1,
+          max: 8,
+          step: 1,
+          onChange: setVisibleToasts
+        }), /* @__PURE__ */_jsx(DemoSlider, {
+          label: "Duration",
+          value: duration,
+          min: 1e3,
+          max: 1e4,
+          step: 100,
+          onChange: setDuration,
+          format: function (v) {
+            return `${(v / 1e3).toFixed(1)}s`;
+          }
+        })]
+      })]
     })]
   });
 };
-var CurrentToast = function () {
-  var currentToast = useToastState();
-  if (!currentToast || currentToast.isHandledNatively) return null;
-  return /* @__PURE__ */_jsx(Toast, {
-    duration: currentToast.duration,
-    viewportName: currentToast.viewportName,
-    enterStyle: {
-      opacity: 0,
-      scale: 0.95,
-      y: -80
-    },
-    exitStyle: {
-      opacity: 0,
-      scale: 0.95,
-      y: -80
-    },
-    opacity: 1,
-    scale: 1,
-    y: -50,
-    transition: "quicker",
-    bg: "$color2",
-    boxShadow: "0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)",
-    children: /* @__PURE__ */_jsxs(XStack, {
-      gap: "$5",
-      items: "center",
-      justify: "space-between",
-      children: [/* @__PURE__ */_jsxs(YStack, {
-        gap: "$0.5",
+function ToastContent(param) {
+  var {
+    toast: t
+  } = param;
+  var {
+    handleClose
+  } = useToastItem();
+  var title = typeof t.title === "function" ? t.title() : t.title;
+  var description = typeof t.description === "function" ? t.description() : t.description;
+  return /* @__PURE__ */_jsxs(_Fragment, {
+    children: [/* @__PURE__ */_jsxs(XStack, {
+      gap: "$3",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */_jsx(Toast.Icon, {}), /* @__PURE__ */_jsxs(YStack, {
         flex: 1,
-        children: [/* @__PURE__ */_jsx(Toast.Title, {
-          children: currentToast.title
-        }), !!currentToast.message && /* @__PURE__ */_jsx(Toast.Description, {
-          children: currentToast.message
-        })]
-      }), /* @__PURE__ */_jsx(Toast.Action, {
-        asChild: true,
-        altText: "Dismiss toast",
-        children: /* @__PURE__ */_jsx(Button, {
+        gap: "$0.5",
+        children: [title && /* @__PURE__ */_jsx(Toast.Title, {
+          fontWeight: "600",
+          size: "$3",
+          children: title
+        }), description && /* @__PURE__ */_jsx(Toast.Description, {
+          color: "$color9",
           size: "$2",
-          children: "Dismiss"
-        })
+          children: description
+        })]
       })]
-    })
-  }, currentToast.id);
-};
-var ToastControl = function (param) {
-  var {
-    native
-  } = param;
-  var toast = useToastController();
-  return /* @__PURE__ */_jsxs(XStack, {
-    gap: "$2",
-    justify: "center",
-    children: [/* @__PURE__ */_jsx(Button, {
-      onPress: function () {
-        toast.show("Successfully saved!", {
-          message: "Don't worry, we've got your data.",
-          native,
-          demo: true
-        });
-      },
-      children: "Show"
-    }), /* @__PURE__ */_jsx(Button, {
-      onPress: function () {
-        toast.hide();
-      },
-      children: "Hide"
+    }), isWeb && /* @__PURE__ */_jsx(Toast.Close, {
+      testID: "toast-close-button",
+      position: "absolute",
+      top: -6,
+      left: -6,
+      zIndex: 1
     })]
   });
-};
-var NativeOptions = function (param) {
+}
+function DemoSlider(param) {
   var {
-    native,
-    setNative
+    label,
+    value,
+    min,
+    max,
+    step,
+    onChange,
+    format
   } = param;
   return /* @__PURE__ */_jsxs(XStack, {
-    gap: "$3",
+    gap: "$2",
+    alignItems: "center",
     children: [/* @__PURE__ */_jsx(Label, {
-      size: "$1",
-      onPress: function () {
-        return setNative(false);
-      },
-      children: "Custom"
-    }), /* @__PURE__ */_jsx(Switch, {
-      theme: "surface2",
-      id: "native-toggle",
-      size: "$1",
-      checked: !!native,
-      onCheckedChange: function (val) {
-        return setNative(val);
+      size: "$2",
+      width: 55,
+      children: label
+    }), /* @__PURE__ */_jsxs(Slider, {
+      flex: 1,
+      value: [value],
+      min,
+      max,
+      step,
+      onValueChange: function (param2) {
+        var [v] = param2;
+        return onChange(v);
       },
-      children: /* @__PURE__ */_jsx(Switch.Thumb, {
+      children: [/* @__PURE__ */_jsx(Slider.Track, {
+        children: /* @__PURE__ */_jsx(Slider.TrackActive, {})
+      }), /* @__PURE__ */_jsx(Slider.Thumb, {
         theme: "accent",
-        transition: ["quickest", {
-          transform: {
-            overshootClamping: true
-          }
-        }]
-      })
-    }), /* @__PURE__ */_jsx(Label, {
-      size: "$1",
-      onPress: function () {
-        return setNative(true);
-      },
-      children: "Native"
+        size: 16,
+        borderRadius: 100,
+        index: 0
+      })]
+    }), /* @__PURE__ */_jsx(SizableText, {
+      userSelect: "none",
+      size: "$2",
+      width: 35,
+      textAlign: "right",
+      children: format ? format(value) : Math.round(value)
     })]
   });
+}
+var PositionButton = function (param) {
+  var {
+    position,
+    current,
+    onPress,
+    Icon,
+    testID
+  } = param;
+  var isActive = position === current;
+  return /* @__PURE__ */_jsx(Button, {
+    icon: Icon,
+    circular: true,
+    theme: isActive ? "accent" : void 0,
+    onPress: function () {
+      return onPress(position);
+    },
+    testID
+  });
 };
 export { ToastDemo };
 //# sourceMappingURL=ToastDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Toast","useToastController","useToastState","React","Button","Label","Switch","XStack","YStack","ToastDemo","native","setNative","useState","gap","items","children","ToastControl","CurrentToast","NativeOptions","currentToast","isHandledNatively","duration","viewportName","enterStyle","opacity","scale","y","exitStyle","transition","bg","boxShadow","justify","flex","Title","title","message","Description","Action","asChild","altText","size","id","param","toast","onPress","show","demo","hide"],"sources":["../../src/ToastDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAOC,IAAA,EAAAC,IAAA,IAAAC,KAAA,QAAoB,mBAAqB;AACzD,SAAOC,KAAA,EAAAC,kBAAW,EAAAC,aAAA;AAClB,OAAAC,KAAS,MAAQ,OAAO;AAWpB,SACEC,MADF,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAJG,IAAAC,SAAM,YAAAA,CAAA,EAAkB;EAC7B,KAAAC,MAAO,EAAAC,SAAQ,IAASR,KAAI,CAAAS,QAAM,MAAS;EAE3C,OACE,eAAAb,KAAC,CAAAS,MAAA;IACCK,GAAA;IACAC,KAAA;IAEAC,QAAA,GACF,eAAAlB,IAAA,CAAAmB,YAAA;MAEJN;IAEM,IACJ,eAAMb,IAAe,CAAAoB,YAAc,OAE/B,eAACpB,IAAgB,CAAAqB,aAAa;MAElCR,MACE;MAACC;IAAA;EAEwB;AACI;AACmB,IAAAM,YAC9C,GAAa,SAAAA,CAAA,EAAS;EAAuB,IAC7CE,YAAS,GAAAjB,aAAA;EAAA,IACT,CAAAiB,YAAO,IAAAA,YAAA,CAAAC,iBAAA;EAAA,OACJ,eAAAvB,IAAA,CAAAG,KAAA;IAAAqB,QACH,EAAAF,YAAW,CAAAE,QAAA;IAAAC,YACR,EAAAH,YAAA,CAAAG,YAAA;IAAAC,UACH;MAEAC,OAAA;MACEC,KAAA;MACEC,CAAA;IAAiC;IAEUC,SAE7C;MAAAH,OACA;MAEAC,KACF;MAAAC,CAAA;IAtBK;IAuBPF,OAAA;IAEJC,KAAA;IAEAC,CAAA,EAAM;IACJE,UAAM,EAAQ;IAEdC,EAAA,WACE;IACEC,SAAA;IAAAf,QAAC,iBAAAhB,KAAA,CAAAQ,MAAA;MAAAM,GAAA;MAAAC,KACC,UAAS;MACPiB,OAAA,iBAAW;MAAuBhB,QAChC,GAAS,eACThB,KAAA,CAAAS,MAAA;QAAAK,GACA,QAAM;QACRmB,IAAC;QACHjB,QAAA,GACD,eAAAlB,IAAA,CAAAG,KAAA,CAAAiC,KAAA;UAAAlB,QAAA,EAAAI,YAAA,CAAAe;QAED,IACA,EAAAf,YAAA,CAAAgB,OAAA,mBAAAtC,IAAA,CAAAG,KAAA,CAAAoC,WAAA;UAACrB,QAAA,EAAAI,YAAA,CAAAgB;QAAA;MAEG,IACF,eAAAtC,IAAA,CAAAG,KAAA,CAAAqC,MAAA;QACDC,OAAA;QAAAC,OAAA;QAEDxB,QAAA,iBAAAlB,IAAA,CAAAO,MAAA;UACFoC,IAAA;UAEJzB,QAAA;QAEM;MACJ;IAEF;EAIE,GAAAI,YACE,CAAAsB,EAAA;AACE;AAEA,IACAzB,YAAA,YAAAA,CAAA0B,KAAA;EAAA,IAAC;IAAAhC;EAAA,IAAAgC,KAAA;EAAA,IAAAC,KAAA,GAAA1C,kBAAA;EAAA,OACC,eAAMF,KAAA,CAAAQ,MAAA;IAAAM,GAAA,EACN,IAAG;IAAAkB,OACH,UAAK;IAAAhB,QACL,GAAW,eACXlB,IAAkB,CAAAO,MAAA,EAAQ;MAE1BwC,OAAA,WAAAA,CAAA;QAACD,KAAA,CAAAE,IAAO;UAAPV,OAAA;UACCzB,MAAA;UACAoC,IAAA;QAAY;MACV;MACA/B,QACE;IAAW,IACU,eACrBlB,IAAA,CAAAO,MAAA;MAAAwC,OACF,WAAAA,CAAA;QAAAD,KACF,CAAAI,IAAA;MAAA;MACFhC,QAAA;IAAA;EACF,EAEA;AAEA;AAGN,IAAAG,aAAA,YAAAA,CAAAwB,KAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","isWeb","Toast","toast","useToastItem","ArrowDown","ArrowDownLeft","ArrowDownRight","ArrowUp","ArrowUpLeft","ArrowUpRight","useRef","useState","Button","Label","SizableText","Slider","XStack","YStack","ToastDemo","position","setPosition","gap","setGap","visibleToasts","setVisibleToasts","duration","setDuration","count","showToast","newPosition","current","description","Math","round","children","Viewport","offset","List","renderItem","param","t","index","Item","testID","ToastContent","id","self","width","PositionButton","onPress","Icon","paddingTop","DemoSlider","label","value","min","max","step","onChange","format","v","toFixed","handleClose","title","alignItems","flex","Title","fontWeight","size","Description","color","Close","top","left","zIndex","onValueChange","param2","Track","TrackActive","Thumb","theme","borderRadius","userSelect","textAlign"],"sources":["../../src/ToastDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/ToastDuplicateDemo.mjs

@@ -1,34 +1,32 @@
 import { CheckCircle2 } from "@hanzogui/lucide-icons-2";
-import { Toast } from "@hanzogui/toast";
-import React from "react";
-import { Button, XStack, YStack } from "@hanzo/gui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast, toast, useToasts } from "@hanzogui/toast/v2";
+import { Button, XStack, YStack } from "hanzogui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const ToastDuplicateDemo = () => {
-  const [savedCount, setSavedCount] = React.useState(0);
-  return /* @__PURE__ */jsxs(YStack, {
-    items: "center",
-    children: [/* @__PURE__ */jsx(Button, {
-      onPress: () => {
-        setSavedCount(old => old + 1);
-      },
-      children: "Show toast"
-    }), [...Array(savedCount)].map((_, index) => /* @__PURE__ */jsx(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,
-      transition: "100ms",
+  return /* @__PURE__ */jsxs(Toast, {
+    children: [/* @__PURE__ */jsx(Toast.Viewport, {
+      children: /* @__PURE__ */jsx(ToastList, {})
+    }), /* @__PURE__ */jsx(YStack, {
+      items: "center",
+      children: /* @__PURE__ */jsx(Button, {
+        onPress: () => {
+          toast("Successfully saved!", {
+            description: "Don't worry... We've got your data."
+          });
+        },
+        children: "Show toast"
+      })
+    })]
+  });
+};
+const ToastList = () => {
+  const {
+    toasts
+  } = useToasts();
+  return /* @__PURE__ */jsx(Fragment, {
+    children: toasts.map((t, index) => /* @__PURE__ */jsx(Toast.Item, {
+      toast: t,
+      index,
       children: /* @__PURE__ */jsxs(XStack, {
         gap: "$4",
         items: "center",
@@ -36,13 +34,13 @@ const ToastDuplicateDemo = () => {
           children: /* @__PURE__ */jsx(CheckCircle2, {})
         }), /* @__PURE__ */jsxs(YStack, {
           children: [/* @__PURE__ */jsx(Toast.Title, {
-            children: "Successfully saved!"
-          }), /* @__PURE__ */jsx(Toast.Description, {
-            children: "Don't worry... We've got your data."
+            children: typeof t.title === "function" ? t.title() : t.title
+          }), t.description && /* @__PURE__ */jsx(Toast.Description, {
+            children: typeof t.description === "function" ? t.description() : t.description
           })]
         })]
       })
-    }, index))]
+    }, t.id))
   });
 };
 export { ToastDuplicateDemo };

package/dist/esm/ToastDuplicateDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["CheckCircle2","Toast","React","Button","XStack","YStack","jsx","jsxs","ToastDuplicateDemo","savedCount","setSavedCount","useState","items","children","onPress","old","Array","map","_","index","viewportName","duration","enterStyle","opacity","scale","y","exitStyle","transition","gap","Title","Description"],"sources":["../../src/ToastDuplicateDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,YAAA,QAAoB;AAC7B,SAASC,KAAA,QAAa;AACtB,OAAOC,KAAA,MAAW;AAClB,SAASC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAUjC,SAAAC,GAAA,EAwBMC,IAAA,QAxBN;AALC,MAAMC,kBAAA,GAAqBA,CAAA,KAAM;EACtC,MAAM,CAACC,UAAA,EAAYC,aAAa,IAAIR,KAAA,CAAMS,QAAA,CAAS,CAAC;EAEpD,OACE,eAAAJ,IAAA,CAACF,MAAA;IAAOO,KAAA,EAAM;IACZC,QAAA,kBAAAP,GAAA,CAACH,MAAA;MACCW,OAAA,EAASA,CAAA,KAAM;QACbJ,aAAA,CAAeK,GAAA,IAAQA,GAAA,GAAM,CAAC;MAChC;MACDF,QAAA;IAAA,CAED,GACC,CAAC,GAAGG,KAAA,CAAMP,UAAU,CAAC,EAAEQ,GAAA,CAAI,CAACC,CAAA,EAAGC,KAAA,KAC9B,eAAAb,GAAA,CAACL,KAAA;MACCmB,YAAA,EAAa;MAEbC,QAAA,EAAU;MACVC,UAAA,EAAY;QAAEC,OAAA,EAAS;QAAGC,KAAA,EAAO;QAAKC,CAAA,EAAG;MAAI;MAC7CC,SAAA,EAAW;QAAEH,OAAA,EAAS;QAAGC,KAAA,EAAO;QAAGC,CAAA,EAAG;MAAI;MAC1CA,CAAA,EAAG;MACHF,OAAA,EAAS;MACTC,KAAA,EAAO;MACPG,UAAA,EAAW;MAEXd,QAAA,iBAAAN,IAAA,CAACH,MAAA;QAAOwB,GAAA,EAAI;QAAKhB,KAAA,EAAM;QACrBC,QAAA,kBAAAP,GAAA,CAACD,MAAA;UACCQ,QAAA,iBAAAP,GAAA,CAACN,YAAA,IAAa;QAAA,CAChB,GAEA,eAAAO,IAAA,CAACF,MAAA;UACCQ,QAAA,kBAAAP,GAAA,CAACL,KAAA,CAAM4B,KAAA,EAAN;YAAYhB,QAAA;UAAA,CAAmB,GAChC,eAAAP,GAAA,CAACL,KAAA,CAAM6B,WAAA,EAAN;YAAkBjB,QAAA;UAAA,CAAmC;QAAA,CACxD;MAAA,CACF;IAAA,GAlBKM,KAmBP,CACD;EAAA,CACH;AAEJ","ignoreList":[]}
+{"version":3,"names":["CheckCircle2","Toast","toast","useToasts","Button","XStack","YStack","Fragment","jsx","jsxs","ToastDuplicateDemo","children","Viewport","ToastList","items","onPress","description","toasts","map","t","index","Item","gap","Title","title","Description","id"],"sources":["../../src/ToastDuplicateDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,YAAA,QAAoB;AAC7B,SAASC,KAAA,EAAOC,KAAA,EAAOC,SAAA,QAAiB;AACxC,SAASC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAOnC,SAwBAC,QAAA,EAtBIC,GAAA,EAFJC,IAAA;AAFG,MAAMC,kBAAA,GAAqBA,CAAA,KAAM;EACtC,OACE,eAAAD,IAAA,CAACR,KAAA;IACCU,QAAA,kBAAAH,GAAA,CAACP,KAAA,CAAMW,QAAA,EAAN;MACCD,QAAA,iBAAAH,GAAA,CAACK,SAAA,IAAU;IAAA,CACb,GAEA,eAAAL,GAAA,CAACF,MAAA;MAAOQ,KAAA,EAAM;MACZH,QAAA,iBAAAH,GAAA,CAACJ,MAAA;QACCW,OAAA,EAASA,CAAA,KAAM;UACbb,KAAA,CAAM,uBAAuB;YAC3Bc,WAAA,EAAa;UACf,CAAC;QACH;QACDL,QAAA;MAAA,CAED;IAAA,CACF;EAAA,CACF;AAEJ;AAEA,MAAME,SAAA,GAAYA,CAAA,KAAM;EACtB,MAAM;IAAEI;EAAO,IAAId,SAAA,CAAU;EAE7B,OACE,eAAAK,GAAA,CAAAD,QAAA;IACGI,QAAA,EAAAM,MAAA,CAAOC,GAAA,CAAI,CAACC,CAAA,EAAGC,KAAA,KACd,eAAAZ,GAAA,CAACP,KAAA,CAAMoB,IAAA,EAAN;MAAsBnB,KAAA,EAAOiB,CAAA;MAAGC,KAAA;MAC/BT,QAAA,iBAAAF,IAAA,CAACJ,MAAA;QAAOiB,GAAA,EAAI;QAAKR,KAAA,EAAM;QACrBH,QAAA,kBAAAH,GAAA,CAACF,MAAA;UACCK,QAAA,iBAAAH,GAAA,CAACR,YAAA,IAAa;QAAA,CAChB,GAEA,eAAAS,IAAA,CAACH,MAAA;UACCK,QAAA,kBAAAH,GAAA,CAACP,KAAA,CAAMsB,KAAA,EAAN;YACEZ,QAAA,SAAOQ,CAAA,CAAEK,KAAA,KAAU,aAAaL,CAAA,CAAEK,KAAA,CAAM,IAAIL,CAAA,CAAEK;UAAA,CACjD,GACCL,CAAA,CAAEH,WAAA,IACD,eAAAR,GAAA,CAACP,KAAA,CAAMwB,WAAA,EAAN;YACEd,QAAA,SAAOQ,CAAA,CAAEH,WAAA,KAAgB,aAAaG,CAAA,CAAEH,WAAA,CAAY,IAAIG,CAAA,CAAEH;UAAA,CAC7D;QAAA,CAEJ;MAAA,CACF;IAAA,GAhBeG,CAAA,CAAEO,EAiBnB,CACD;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/ToastDuplicateDemo.native.js

@@ -1,39 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CheckCircle2 } from "@hanzogui/lucide-icons-2";
-import { Toast } from "@hanzogui/toast";
-import React from "react";
-import { Button, XStack, YStack } from "@hanzo/gui";
+import { Toast, toast, useToasts } from "@hanzogui/toast/v2";
+import { Button, XStack, YStack } from "hanzogui";
 var ToastDuplicateDemo = function () {
-  var [savedCount, setSavedCount] = React.useState(0);
-  return /* @__PURE__ */_jsxs(YStack, {
-    items: "center",
-    children: [/* @__PURE__ */_jsx(Button, {
-      onPress: function () {
-        setSavedCount(function (old) {
-          return old + 1;
-        });
-      },
-      children: "Show toast"
-    }), [...Array(savedCount)].map(function (_, index) {
-      return /* @__PURE__ */_jsx(Toast, {
-        viewportName:
-        // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop
-        "viewport-multiple",
-        duration: 4e3,
-        enterStyle: {
-          opacity: 0,
-          scale: 0.5,
-          y: -25
+  return /* @__PURE__ */_jsxs(Toast, {
+    children: [/* @__PURE__ */_jsx(Toast.Viewport, {
+      children: /* @__PURE__ */_jsx(ToastList, {})
+    }), /* @__PURE__ */_jsx(YStack, {
+      items: "center",
+      children: /* @__PURE__ */_jsx(Button, {
+        onPress: function () {
+          toast("Successfully saved!", {
+            description: "Don't worry... We've got your data."
+          });
         },
-        exitStyle: {
-          opacity: 0,
-          scale: 1,
-          y: -20
-        },
-        y: 0,
-        opacity: 1,
-        scale: 1,
-        transition: "100ms",
+        children: "Show toast"
+      })
+    })]
+  });
+};
+var ToastList = function () {
+  var {
+    toasts
+  } = useToasts();
+  return /* @__PURE__ */_jsx(_Fragment, {
+    children: toasts.map(function (t, index) {
+      return /* @__PURE__ */_jsx(Toast.Item, {
+        toast: t,
+        index,
         children: /* @__PURE__ */_jsxs(XStack, {
           gap: "$4",
           items: "center",
@@ -41,14 +35,14 @@ var ToastDuplicateDemo = function () {
             children: /* @__PURE__ */_jsx(CheckCircle2, {})
           }), /* @__PURE__ */_jsxs(YStack, {
             children: [/* @__PURE__ */_jsx(Toast.Title, {
-              children: "Successfully saved!"
-            }), /* @__PURE__ */_jsx(Toast.Description, {
-              children: "Don't worry... We've got your data."
+              children: typeof t.title === "function" ? t.title() : t.title
+            }), t.description && /* @__PURE__ */_jsx(Toast.Description, {
+              children: typeof t.description === "function" ? t.description() : t.description
             })]
           })]
         })
-      }, index);
-    })]
+      }, t.id);
+    })
   });
 };
 export { ToastDuplicateDemo };

package/dist/esm/ToastDuplicateDemo.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","CheckCircle2","Toast","React","Button","XStack","YStack","ToastDuplicateDemo","savedCount","setSavedCount","useState","items","children","onPress","old","Array","map","_","index","viewportName","duration","enterStyle","opacity","scale","y","exitStyle"],"sources":["../../src/ToastDuplicateDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAoBC,KAAA;AAC7B,SAASC,YAAA,QAAa;AACtB,SAAOC,KAAA,QAAW;AAClB,OAAAC,KAAS,MAAQ,OAAQ;AAUnB,SAAAC,MAwBM,EAAAC,MAAA,EAAAC,MAxBN;AALC,IAAAC,kBAAM,YAAAA,CAAA,EAA2B;EACtC,KAAAC,UAAO,EAAAC,aAAY,IAAaN,KAAI,CAAAO,QAAM,GAAS;EAEnD,OACE,eAAAV,KAAC,CAAAM,MAAA;IACCK,KAAA;IAAAC,QAAC,kBAAAd,IAAA,CAAAM,MAAA;MACCS,OAAA,EAAS,SAAAA,CAAA,EAAM;QACbJ,aAAA,CAAc,UAASK,GAAA;UACzB,OAAAA,GAAA;QACD;MAAA;MAEDF,QAAA;IACE,EAAG,EACF,IAAAG,KAAA,CAAAP,UAAA,GACCQ,GAAA,WAAAC,CAAa,EAAAC,KAAA;MAEb,sBAAUpB,IAAA,CAAAI,KAAA;QACViB,YAAc;QACd;QACG,mBACH;QACAC,QAAO;QACPC,UAAW;UAEXC,OAAA;UACEC,KAAA;UAIAC,CAAA;QACE;QAAgCC,SAChC;UAAsDH,OACxD;UACFC,KAAA;UAAAC,CAAA;QAlBK;QAoBRA,CAAA;QACHF,OAAA;QAEJC,KAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CheckCircle2","Toast","toast","useToasts","Button","XStack","YStack","ToastDuplicateDemo","children","Viewport","ToastList","items","onPress","description","toasts","map","t","index","Item"],"sources":["../../src/ToastDuplicateDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAoBC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAC7B,SAASC,YAAO,QAAO,0BAAiB;AACxC,SAASC,KAAA,EAAAC,KAAQ,EAAAC,SAAQ,QAAc;AAOnC,SAwBAC,MAAA,EAAAC,MAtBI,EAFJC,MAAA;AAFG,IAAAC,kBAAM,YAAAA,CAAA,EAA2B;EACtC,OACE,eAAAV,KAAC,CAAAI,KAAA;IACCO,QAAA,GAIA,eAAAb,IAAC,CAAAM,KAAA,CAAAQ,QAAa;MACXD,QAAA,iBAAAb,IAAA,CAAAe,SAAA;IAAA,mBACUf,IAAM,CAAAW,MAAA;MACbK,KAAA,UAAM;MAAuBH,QAC3B,iBAAab,IAAA,CAAAS,MAAA;QACfQ,OAAC,WAAAA,CAAA;UACHV,KAAA;YACDW,WAAA;UAAA;QAGH;QACFL,QAAA;MAEJ;IAEM;EAGJ;AAKU;AAEA,IAEAE,SAAA,YAAAA,CAAA,EAAC;EACC;IAAAI;EAAA,IAAAX,SAAC;EAED,OACG,eACDR,IAAA,CAAAI,SAAA;IAEAS,QAEJ,EAAAM,MAAA,CAAAC,GAAA,WAAAC,CAAA,EAAAC,KAAA;MACF,OAhBiB,eAmBvBtB,IAAA,CAAAM,KAAA,CAAAiB,IAAA;QAEJhB,KAAA,EAAAc,CAAA","ignoreList":[]}