@hanzogui/demos 2.0.0

package/dist/esm/ThemeBuilderDemo.native.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Square, XStack, YStack } from "@hanzo/gui";
+function ThemeBuilderDemo() {
+  return /* @__PURE__ */_jsx(YStack, {
+    fullscreen: !0,
+    overflow: "hidden",
+    children: /* @__PURE__ */_jsxs(XStack, {
+      maxH: 200,
+      y: -100,
+      x: -50,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */_jsx(Col, {
+        y: 35,
+        bg: "$color9"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */_jsx(Col, {
+        bg: "$color9"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$8",
+        bg: "$color7"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$6",
+        y: 80,
+        bg: "$color5"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$4",
+        y: 50,
+        bg: "$color3"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$2",
+        bg: "$color1"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$4",
+        bg: "$color3"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$6",
+        y: -50,
+        bg: "$color5"
+      }), /* @__PURE__ */_jsx(Col, {
+        size: "$8",
+        y: 30,
+        bg: "$color7"
+      }), /* @__PURE__ */_jsx(Col, {
+        y: 35,
+        bg: "$color9"
+      })]
+    })
+  });
+}
+function Col(props) {
+  var subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */_jsxs(YStack, {
+    p: "$2.5",
+    gap: "$3.5",
+    children: [/* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "blue" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "purple" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "pink" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "red" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: props.subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "orange" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "yellow" + subTheme,
+      bg: "$background",
+      ...props
+    }), /* @__PURE__ */_jsx(Square, {
+      rounded: "$6",
+      size: "$10",
+      theme: "green" + subTheme,
+      bg: "$background",
+      ...props
+    })]
+  });
+}
+export { ThemeBuilderDemo };
+//# sourceMappingURL=ThemeBuilderDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Square","XStack","YStack","ThemeBuilderDemo","fullscreen","overflow","children","maxH","y","x","rotate","Col","bg","size","props","subTheme","p","gap","rounded","theme"],"sources":["../../src/ThemeBuilderDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/ThemeInverseDemo.mjs

@@ -0,0 +1,76 @@
+import { Button, H5, Theme, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ThemeInverseDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    gap: "$4",
+    flexWrap: "wrap",
+    children: [/* @__PURE__ */jsxs(YStack, {
+      elevation: "$4",
+      bg: "$background",
+      p: "$4",
+      rounded: "$4",
+      gap: "$3",
+      children: [/* @__PURE__ */jsx(H5, {
+        children: "Base Theme"
+      }), /* @__PURE__ */jsx(Button, {
+        children: "Normal"
+      }), /* @__PURE__ */jsx(Button, {
+        theme: "accent",
+        children: "Accent"
+      })]
+    }), /* @__PURE__ */jsx(Theme, {
+      name: "red",
+      children: /* @__PURE__ */jsxs(YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */jsx(H5, {
+          children: "Red Theme"
+        }), /* @__PURE__ */jsx(Button, {
+          children: "Normal"
+        }), /* @__PURE__ */jsx(Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    }), /* @__PURE__ */jsx(Theme, {
+      name: "blue",
+      children: /* @__PURE__ */jsxs(YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */jsx(H5, {
+          children: "Blue Theme"
+        }), /* @__PURE__ */jsx(Button, {
+          children: "Normal"
+        }), /* @__PURE__ */jsx(Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    }), /* @__PURE__ */jsx(Theme, {
+      name: "green",
+      children: /* @__PURE__ */jsxs(YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */jsx(H5, {
+          children: "Green Theme"
+        }), /* @__PURE__ */jsx(Button, {
+          children: "Normal"
+        }), /* @__PURE__ */jsx(Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    })]
+  });
+}
+export { ThemeInverseDemo };
+//# sourceMappingURL=ThemeInverseDemo.mjs.map

package/dist/esm/ThemeInverseDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","H5","Theme","XStack","YStack","jsx","jsxs","ThemeInverseDemo","gap","flexWrap","children","elevation","bg","p","rounded","theme","name"],"sources":["../../src/ThemeInverseDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,EAAQC,EAAA,EAAIC,KAAA,EAAOC,MAAA,EAAQC,MAAA,QAAc;AAK5C,SACEC,GAAA,EADFC,IAAA;AAHC,SAASC,iBAAA,EAAmB;EACjC,OACE,eAAAD,IAAA,CAACH,MAAA;IAAOK,GAAA,EAAI;IAAKC,QAAA,EAAS;IACxBC,QAAA,kBAAAJ,IAAA,CAACF,MAAA;MAAOO,SAAA,EAAU;MAAKC,EAAA,EAAG;MAAcC,CAAA,EAAE;MAAKC,OAAA,EAAQ;MAAKN,GAAA,EAAI;MAC9DE,QAAA,kBAAAL,GAAA,CAACJ,EAAA;QAAGS,QAAA;MAAA,CAAU,GACd,eAAAL,GAAA,CAACL,MAAA;QAAOU,QAAA;MAAA,CAAM,GACd,eAAAL,GAAA,CAACL,MAAA;QAAOe,KAAA,EAAM;QAASL,QAAA;MAAA,CAAM;IAAA,CAC/B,GAEA,eAAAL,GAAA,CAACH,KAAA;MAAMc,IAAA,EAAK;MACVN,QAAA,iBAAAJ,IAAA,CAACF,MAAA;QAAOO,SAAA,EAAU;QAAKC,EAAA,EAAG;QAAcC,CAAA,EAAE;QAAKC,OAAA,EAAQ;QAAKN,GAAA,EAAI;QAC9DE,QAAA,kBAAAL,GAAA,CAACJ,EAAA;UAAGS,QAAA;QAAA,CAAS,GACb,eAAAL,GAAA,CAACL,MAAA;UAAOU,QAAA;QAAA,CAAM,GACd,eAAAL,GAAA,CAACL,MAAA;UAAOe,KAAA,EAAM;UAASL,QAAA;QAAA,CAAM;MAAA,CAC/B;IAAA,CACF,GAEA,eAAAL,GAAA,CAACH,KAAA;MAAMc,IAAA,EAAK;MACVN,QAAA,iBAAAJ,IAAA,CAACF,MAAA;QAAOO,SAAA,EAAU;QAAKC,EAAA,EAAG;QAAcC,CAAA,EAAE;QAAKC,OAAA,EAAQ;QAAKN,GAAA,EAAI;QAC9DE,QAAA,kBAAAL,GAAA,CAACJ,EAAA;UAAGS,QAAA;QAAA,CAAU,GACd,eAAAL,GAAA,CAACL,MAAA;UAAOU,QAAA;QAAA,CAAM,GACd,eAAAL,GAAA,CAACL,MAAA;UAAOe,KAAA,EAAM;UAASL,QAAA;QAAA,CAAM;MAAA,CAC/B;IAAA,CACF,GAEA,eAAAL,GAAA,CAACH,KAAA;MAAMc,IAAA,EAAK;MACVN,QAAA,iBAAAJ,IAAA,CAACF,MAAA;QAAOO,SAAA,EAAU;QAAKC,EAAA,EAAG;QAAcC,CAAA,EAAE;QAAKC,OAAA,EAAQ;QAAKN,GAAA,EAAI;QAC9DE,QAAA,kBAAAL,GAAA,CAACJ,EAAA;UAAGS,QAAA;QAAA,CAAW,GACf,eAAAL,GAAA,CAACL,MAAA;UAAOU,QAAA;QAAA,CAAM,GACd,eAAAL,GAAA,CAACL,MAAA;UAAOe,KAAA,EAAM;UAASL,QAAA;QAAA,CAAM;MAAA,CAC/B;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/ThemeInverseDemo.native.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, H5, Theme, XStack, YStack } from "@hanzo/gui";
+function ThemeInverseDemo() {
+  return /* @__PURE__ */_jsxs(XStack, {
+    gap: "$4",
+    flexWrap: "wrap",
+    children: [/* @__PURE__ */_jsxs(YStack, {
+      elevation: "$4",
+      bg: "$background",
+      p: "$4",
+      rounded: "$4",
+      gap: "$3",
+      children: [/* @__PURE__ */_jsx(H5, {
+        children: "Base Theme"
+      }), /* @__PURE__ */_jsx(Button, {
+        children: "Normal"
+      }), /* @__PURE__ */_jsx(Button, {
+        theme: "accent",
+        children: "Accent"
+      })]
+    }), /* @__PURE__ */_jsx(Theme, {
+      name: "red",
+      children: /* @__PURE__ */_jsxs(YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */_jsx(H5, {
+          children: "Red Theme"
+        }), /* @__PURE__ */_jsx(Button, {
+          children: "Normal"
+        }), /* @__PURE__ */_jsx(Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    }), /* @__PURE__ */_jsx(Theme, {
+      name: "blue",
+      children: /* @__PURE__ */_jsxs(YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */_jsx(H5, {
+          children: "Blue Theme"
+        }), /* @__PURE__ */_jsx(Button, {
+          children: "Normal"
+        }), /* @__PURE__ */_jsx(Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    }), /* @__PURE__ */_jsx(Theme, {
+      name: "green",
+      children: /* @__PURE__ */_jsxs(YStack, {
+        elevation: "$4",
+        bg: "$background",
+        p: "$4",
+        rounded: "$4",
+        gap: "$3",
+        children: [/* @__PURE__ */_jsx(H5, {
+          children: "Green Theme"
+        }), /* @__PURE__ */_jsx(Button, {
+          children: "Normal"
+        }), /* @__PURE__ */_jsx(Button, {
+          theme: "accent",
+          children: "Accent"
+        })]
+      })
+    })]
+  });
+}
+export { ThemeInverseDemo };
+//# sourceMappingURL=ThemeInverseDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Button","H5","Theme","XStack","YStack","ThemeInverseDemo","gap","flexWrap","children","elevation","bg","p","rounded","theme"],"sources":["../../src/ThemeInverseDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAQ,EAAIC,IAAA,IAAOC,KAAA,QAAQ,mBAAc;AAK5C,SACEC,MADF,EAAAC,EAAA,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA;AAHC,SAASC,iBAAA,EAAmB;EACjC,OACE,eAAAN,KAAC,CAAAI,MAAA;IACCG,GAAA;IACEC,QAAA;IAAcC,QACd,GACA,eAAAT,KAAC,CAAAK,MAAA,EAAO;MACVK,SAAA;MAEAC,EAAA,eAAC;MAEGC,CAAA;MACAC,OAAA;MACAN,GAAA;MACFE,QACF,GAEA,eAACX,IAAA,CAAAI,EAAM;QAEHO,QAAA;MACA,IACA,eAACX,IAAA,CAAAG,MAAO;QAEZQ,QAAA;MAEA,IAEI,eAACX,IAAA,CAAAG,MAAG;QACJa,KAAA,UAAC;QACDL,QAAA;MAEJ;IAGN,I","ignoreList":[]}

package/dist/esm/ToastDemo.mjs

@@ -0,0 +1,116 @@
+import { Toast, useToastController, useToastState } from "@hanzogui/toast";
+import React from "react";
+import { Button, Label, Switch, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ToastDemo = () => {
+    const [native, setNative] = React.useState(!1);
+    return /* @__PURE__ */jsxs(YStack, {
+      gap: "$4",
+      items: "center",
+      children: [/* @__PURE__ */jsx(ToastControl, {
+        native
+      }), /* @__PURE__ */jsx(CurrentToast, {}), /* @__PURE__ */jsx(NativeOptions, {
+        native,
+        setNative
+      })]
+    });
+  },
+  CurrentToast = () => {
+    const currentToast = useToastState();
+    return !currentToast || currentToast.isHandledNatively ? null : /* @__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",
+          flex: 1,
+          children: [/* @__PURE__ */jsx(Toast.Title, {
+            children: currentToast.title
+          }), !!currentToast.message && /* @__PURE__ */jsx(Toast.Description, {
+            children: currentToast.message
+          })]
+        }), /* @__PURE__ */jsx(Toast.Action, {
+          asChild: !0,
+          altText: "Dismiss toast",
+          children: /* @__PURE__ */jsx(Button, {
+            size: "$2",
+            children: "Dismiss"
+          })
+        })]
+      })
+    }, currentToast.id);
+  },
+  ToastControl = ({
+    native
+  }) => {
+    const toast = useToastController();
+    return /* @__PURE__ */jsxs(XStack, {
+      gap: "$2",
+      justify: "center",
+      children: [/* @__PURE__ */jsx(Button, {
+        onPress: () => {
+          toast.show("Successfully saved!", {
+            message: "Don't worry, we've got your data.",
+            native,
+            demo: !0
+          });
+        },
+        children: "Show"
+      }), /* @__PURE__ */jsx(Button, {
+        onPress: () => {
+          toast.hide();
+        },
+        children: "Hide"
+      })]
+    });
+  },
+  NativeOptions = ({
+    native,
+    setNative
+  }) => /* @__PURE__ */jsxs(XStack, {
+    gap: "$3",
+    children: [/* @__PURE__ */jsx(Label, {
+      size: "$1",
+      onPress: () => setNative(!1),
+      children: "Custom"
+    }), /* @__PURE__ */jsx(Switch, {
+      theme: "surface2",
+      id: "native-toggle",
+      size: "$1",
+      checked: !!native,
+      onCheckedChange: val => setNative(val),
+      children: /* @__PURE__ */jsx(Switch.Thumb, {
+        theme: "accent",
+        transition: ["quickest", {
+          transform: {
+            overshootClamping: !0
+          }
+        }]
+      })
+    }), /* @__PURE__ */jsx(Label, {
+      size: "$1",
+      onPress: () => setNative(!0),
+      children: "Native"
+    })]
+  });
+export { ToastDemo };
+//# sourceMappingURL=ToastDemo.mjs.map

package/dist/esm/ToastDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Toast","useToastController","useToastState","React","Button","Label","Switch","XStack","YStack","jsx","jsxs","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","toast","onPress","show","demo","hide","theme","checked","onCheckedChange","val","Thumb","transform","overshootClamping"],"sources":["../../src/ToastDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/ToastDemo.native.js

@@ -0,0 +1,126 @@
+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";
+var ToastDemo = function () {
+    var [native, setNative] = React.useState(!1);
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      items: "center",
+      children: [/* @__PURE__ */_jsx(ToastControl, {
+        native
+      }), /* @__PURE__ */_jsx(CurrentToast, {}), /* @__PURE__ */_jsx(NativeOptions, {
+        native,
+        setNative
+      })]
+    });
+  },
+  CurrentToast = function () {
+    var currentToast = useToastState();
+    return !currentToast || currentToast.isHandledNatively ? null : /* @__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",
+          flex: 1,
+          children: [/* @__PURE__ */_jsx(Toast.Title, {
+            children: currentToast.title
+          }), !!currentToast.message && /* @__PURE__ */_jsx(Toast.Description, {
+            children: currentToast.message
+          })]
+        }), /* @__PURE__ */_jsx(Toast.Action, {
+          asChild: !0,
+          altText: "Dismiss toast",
+          children: /* @__PURE__ */_jsx(Button, {
+            size: "$2",
+            children: "Dismiss"
+          })
+        })]
+      })
+    }, currentToast.id);
+  },
+  ToastControl = function (param) {
+    var {
+        native
+      } = param,
+      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: !0
+          });
+        },
+        children: "Show"
+      }), /* @__PURE__ */_jsx(Button, {
+        onPress: function () {
+          toast.hide();
+        },
+        children: "Hide"
+      })]
+    });
+  },
+  NativeOptions = function (param) {
+    var {
+      native,
+      setNative
+    } = param;
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$3",
+      children: [/* @__PURE__ */_jsx(Label, {
+        size: "$1",
+        onPress: function () {
+          return setNative(!1);
+        },
+        children: "Custom"
+      }), /* @__PURE__ */_jsx(Switch, {
+        theme: "surface2",
+        id: "native-toggle",
+        size: "$1",
+        checked: !!native,
+        onCheckedChange: function (val) {
+          return setNative(val);
+        },
+        children: /* @__PURE__ */_jsx(Switch.Thumb, {
+          theme: "accent",
+          transition: ["quickest", {
+            transform: {
+              overshootClamping: !0
+            }
+          }]
+        })
+      }), /* @__PURE__ */_jsx(Label, {
+        size: "$1",
+        onPress: function () {
+          return setNative(!0);
+        },
+        children: "Native"
+      })]
+    });
+  };
+export { ToastDemo };
+//# sourceMappingURL=ToastDemo.native.js.map

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

@@ -0,0 +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;IAC7B,KAAAC,MAAO,EAAAC,SAAQ,IAASR,KAAI,CAAAS,QAAM,GAAS;IAE3C,OACE,eAAAb,KAAC,CAAAS,MAAA;MACCK,GAAA;MACAC,KAAA;MAEAC,QAAA,GACF,eAAAlB,IAAA,CAAAmB,YAAA;QAIEN;MACJ,EAAM,EAEN,eAAKb,IAAgB,CAAAoB,YAAa,OAG/B,eAAApB,IAAA,CAAAqB,aAAA;QAAAR,MAAA;QAECC;MACA;IAC8C;EACD;EAAAM,YACpC,YAAAA,CAAA;IAAA,IACTE,YAAO,GAAAjB,aAAA;IAAA,OACJ,CAAAiB,YAAA,IAAAA,YAAA,CAAAC,iBAAA,yBAAAvB,IAAA,CAAAG,KAAA;MAAAqB,QACH,EAAAF,YAAW,CAAAE,QAAA;MAAAC,YACR,EAAAH,YAAA,CAAAG,YAAA;MAAAC,UACH;QAEAC,OAAA;QACEC,KAAA;QACEC,CAAA;MAAiC;MAEUC,SAE7C;QAAAH,OACA;QAEAC,KACF;QAAAC,CAAA;MAtBK;MAuBPF,OAAA;MAIEC,KAAA;MACJC,CAAA,GAAM;MAENE,UACE;MACEC,EAAA;MAAAC,SAAC;MAAAf,QAAA,iBAAAhB,KAAA,CAAAQ,MAAA;QAAAM,GACC;QACEC,KAAA,UAAW;QAAuBiB,OAChC,iBAAS;QAAAhB,QACT,kBACMhB,KAAA,CAAAS,MAAA;UACRK,GAAC;UACHmB,IAAA;UACDjB,QAAA,kBAAAlB,IAAA,CAAAG,KAAA,CAAAiC,KAAA;YAEDlB,QAAA,EAAAI,YAAA,CAAAe;UACA,IAAC,EAAAf,YAAA,CAAAgB,OAAA,mBAAAtC,IAAA,CAAAG,KAAA,CAAAoC,WAAA;YAAArB,QAAA,EAAAI,YAAA,CAAAgB;UACC;QAEA,IACD,eAAAtC,IAAA,CAAAG,KAAA,CAAAqC,MAAA;UAAAC,OAAA;UAEDC,OAAA;UACFxB,QAAA,iBAAAlB,IAAA,CAAAO,MAAA;YAIEoC,IAAA,MAAiB;YACrBzB,QAAA;UACA;QAME;MAIE;IAAA,GAACI,YAAA,CAAAsB,EAAA;EAAA;EAAAzB,YAAA,YAAAA,CAAA0B,KAAA;IAAA,IACC;QAAAhC;MAAM,IAAAgC,KAAA;MAAAC,KAAA,GAAA1C,kBAAA;IAAA,OACN,eAAGF,KAAA,CAAAQ,MAAA;MAAAM,GACH,MAAK;MAAAkB,OACL,UAAW;MAAAhB,QACX,GAEA,eAAAlB,IAAA,CAAAO,MAAA;QAACwC,OAAO,WAAAA,CAAA;UAAPD,KAAA,CAAAE,IAAA;YACCV,OAAM;YACNzB,MAAA;YACEoC,IAAA;UAAA,EACA;QAAA;QACa/B,QACT;MAAmB,IACrB,eACFlB,IAAA,CAAAO,MAAA;QAAAwC,OACF,WAAAA,CAAA;UAAAD,KAAA,CAAAI,IAAA;QACF;QAAAhC,QAAA;MACF;IAIA,CACF","ignoreList":[]}

package/dist/esm/ToastDuplicateDemo.mjs

@@ -0,0 +1,49 @@
+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";
+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",
+      children: /* @__PURE__ */jsxs(XStack, {
+        gap: "$4",
+        items: "center",
+        children: [/* @__PURE__ */jsx(YStack, {
+          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."
+          })]
+        })]
+      })
+    }, index))]
+  });
+};
+export { ToastDuplicateDemo };
+//# sourceMappingURL=ToastDuplicateDemo.mjs.map

package/dist/esm/ToastDuplicateDemo.mjs.map

@@ -0,0 +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":[]}