@hanzogui/demos 2.0.0

package/dist/cjs/DialogDemo.cjs

@@ -0,0 +1,212 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var DialogDemo_exports = {};
+__export(DialogDemo_exports, {
+  DialogDemo: () => DialogDemo
+});
+module.exports = __toCommonJS(DialogDemo_exports);
+var import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react = require("react"),
+  import_gui = require("@hanzo/gui"),
+  import_SelectDemo = require("./SelectDemo.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function DialogDemo() {
+  const [mode, setMode] = (0, import_react.useState)("plain");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.View, {
+    gap: "$4",
+    justify: "center",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XGroup, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          theme: mode === "plain" ? "accent" : void 0,
+          onPress: () => setMode("plain"),
+          children: "Plain"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          theme: mode === "adapt" ? "accent" : void 0,
+          onPress: () => setMode("adapt"),
+          children: "Adapt to Sheet"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          theme: mode === "keepMounted" ? "accent" : void 0,
+          onPress: () => setMode("keepMounted"),
+          children: "Keep Mounted"
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogInstance, {
+      mode
+    })]
+  });
+}
+function DialogInstance({
+  mode
+}) {
+  const [open, setOpen] = (0, import_react.useState)(!1);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Dialog, {
+    modal: !0,
+    keepChildrenMounted: mode === "keepMounted",
+    open,
+    onOpenChange: setOpen,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button.Text, {
+          children: "Show Dialog"
+        })
+      })
+    }), mode === "adapt" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt, {
+      when: "maxMd",
+      platform: "touch",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Sheet, {
+        transition: "medium",
+        zIndex: 2e5,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        unmountChildrenWhenHidden: !0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Frame, {
+          p: "$4",
+          gap: "$4",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt.Contents, {})
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Overlay, {
+          bg: "$background",
+          opacity: 0.5,
+          transition: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Dialog.Portal, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Overlay, {
+        bg: "$background",
+        opacity: 0.5,
+        animateOnly: ["transform", "opacity"],
+        transition: ["quicker", {
+          opacity: {
+            overshootClamping: !0
+          }
+        }],
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.FocusScope, {
+        focusOnIdle: !0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Dialog.Content, {
+          transition: ["quicker", {
+            opacity: {
+              overshootClamping: !0
+            }
+          }],
+          enterStyle: {
+            x: 0,
+            y: 20,
+            opacity: 0
+          },
+          exitStyle: {
+            x: 0,
+            y: 10,
+            opacity: 0,
+            scale: 0.95
+          },
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Title, {
+            children: "Edit profile"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Description, {
+            children: "Make changes to your profile here. Click save when you're done."
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Fieldset, {
+            gap: "$4",
+            horizontal: !0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+              width: 64,
+              htmlFor: "name",
+              children: "Name"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Input, {
+              flex: 1,
+              id: "name",
+              defaultValue: "Nate Wienert"
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Fieldset, {
+            gap: "$4",
+            horizontal: !0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+              width: 64,
+              htmlFor: "username",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.TooltipSimple, {
+                label: "Pick your favorite",
+                placement: "bottom-start",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+                  children: "Food"
+                })
+              })
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+              flex: 1,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SelectDemo.SelectDemoContents, {
+                trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.Trigger, {
+                  flex: 1,
+                  iconAfter: import_lucide_icons_2.ChevronDown,
+                  borderRadius: "$4",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.Value, {
+                    placeholder: "Something"
+                  })
+                })
+              })
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+            self: "flex-end",
+            gap: "$4",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Close, {
+              displayWhenAdapted: !0,
+              asChild: !0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+                theme: "accent",
+                "aria-label": "Close",
+                children: "Save changes"
+              })
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Unspaced, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Close, {
+              asChild: !0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+                position: "absolute",
+                r: "$3",
+                size: "$2",
+                circular: !0,
+                icon: import_lucide_icons_2.X
+              })
+            })
+          })]
+        })
+      })]
+    })]
+  });
+}

package/dist/cjs/DialogDemo.native.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var DialogDemo_exports = {};
+__export(DialogDemo_exports, {
+  DialogDemo: () => DialogDemo
+});
+module.exports = __toCommonJS(DialogDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react = require("react"),
+  import_gui = require("@hanzo/gui"),
+  import_SelectDemo = require("./SelectDemo.native.js");
+function DialogDemo() {
+  var [mode, setMode] = (0, import_react.useState)("plain");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.View, {
+    gap: "$4",
+    justify: "center",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XGroup, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          theme: mode === "plain" ? "accent" : void 0,
+          onPress: function () {
+            return setMode("plain");
+          },
+          children: "Plain"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          theme: mode === "adapt" ? "accent" : void 0,
+          onPress: function () {
+            return setMode("adapt");
+          },
+          children: "Adapt to Sheet"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XGroup.Item, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$3",
+          theme: mode === "keepMounted" ? "accent" : void 0,
+          onPress: function () {
+            return setMode("keepMounted");
+          },
+          children: "Keep Mounted"
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogInstance, {
+      mode
+    })]
+  });
+}
+function DialogInstance(param) {
+  var {
+      mode
+    } = param,
+    [open, setOpen] = (0, import_react.useState)(!1);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Dialog, {
+    modal: !0,
+    keepChildrenMounted: mode === "keepMounted",
+    open,
+    onOpenChange: setOpen,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button.Text, {
+          children: "Show Dialog"
+        })
+      })
+    }), mode === "adapt" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt, {
+      when: "maxMd",
+      platform: "touch",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Sheet, {
+        transition: "medium",
+        zIndex: 2e5,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        unmountChildrenWhenHidden: !0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Frame, {
+          p: "$4",
+          gap: "$4",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt.Contents, {})
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Overlay, {
+          bg: "$background",
+          opacity: 0.5,
+          transition: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Dialog.Portal, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Overlay, {
+        bg: "$background",
+        opacity: 0.5,
+        animateOnly: ["transform", "opacity"],
+        transition: ["quicker", {
+          opacity: {
+            overshootClamping: !0
+          }
+        }],
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.FocusScope, {
+        focusOnIdle: !0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Dialog.Content, {
+          transition: ["quicker", {
+            opacity: {
+              overshootClamping: !0
+            }
+          }],
+          enterStyle: {
+            x: 0,
+            y: 20,
+            opacity: 0
+          },
+          exitStyle: {
+            x: 0,
+            y: 10,
+            opacity: 0,
+            scale: 0.95
+          },
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Title, {
+            children: "Edit profile"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Description, {
+            children: "Make changes to your profile here. Click save when you're done."
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Fieldset, {
+            gap: "$4",
+            horizontal: !0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+              width: 64,
+              htmlFor: "name",
+              children: "Name"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Input, {
+              flex: 1,
+              id: "name",
+              defaultValue: "Nate Wienert"
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Fieldset, {
+            gap: "$4",
+            horizontal: !0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+              width: 64,
+              htmlFor: "username",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.TooltipSimple, {
+                label: "Pick your favorite",
+                placement: "bottom-start",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+                  children: "Food"
+                })
+              })
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+              flex: 1,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SelectDemo.SelectDemoContents, {
+                trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.Trigger, {
+                  flex: 1,
+                  iconAfter: import_lucide_icons_2.ChevronDown,
+                  borderRadius: "$4",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.Value, {
+                    placeholder: "Something"
+                  })
+                })
+              })
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+            self: "flex-end",
+            gap: "$4",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Close, {
+              displayWhenAdapted: !0,
+              asChild: !0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+                theme: "accent",
+                "aria-label": "Close",
+                children: "Save changes"
+              })
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Unspaced, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Dialog.Close, {
+              asChild: !0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+                position: "absolute",
+                r: "$3",
+                size: "$2",
+                circular: !0,
+                icon: import_lucide_icons_2.X
+              })
+            })
+          })]
+        })
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=DialogDemo.native.js.map

package/dist/cjs/DialogDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DialogDemo_exports","__export","DialogDemo","module","exports","import_jsx_runtime","require","import_lucide_icons_2","import_react","import_gui","import_SelectDemo","mode","setMode","useState","jsxs","View","gap","justify","items","children","XGroup","jsx","Item","Button","size","theme","onPress","DialogInstance","param","open","setOpen","Dialog","modal","keepChildrenMounted","onOpenChange","Trigger","asChild","Text","Adapt","when","platform","Sheet","transition","zIndex","dismissOnSnapToBottom","unmountChildrenWhenHidden","Frame","p","Contents","Overlay","bg","opacity","enterStyle","exitStyle","Portal","animateOnly","overshootClamping","FocusScope","focusOnIdle","Content"],"sources":["../../src/DialogDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,kBAAA;AAAAC,QAAA,CAAAD,kBAAA;EAAAE,UAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAA+B,CAAAK,kBAAA;AAsBxB,IAAAK,kBAAsB,GAAAC,OAAA;EAAAC,qBAAA,GAAAD,OAAA;EAAAE,YAAA,GAAAF,OAAA;EAAAG,UAAA,GAAAH,OAAA;EAAAI,iBAAA,GAAAJ,OAAA;AAC3B,SAAOJ,UAAMA,CAAA,EAAO;EAEpB,KAAAS,IACE,EAAAC,OAAA,QAAAJ,YAAA,CAAAK,QAAA,SAAC;EACC,0BAAAR,kBAAA,CAAAS,IAAC,EAAAL,UAAA,CAAAM,IAAA,EACC;IAAAC,GAAA;IACEC,OAAC;IAAAC,KAAA;IAAAC,QACC,GAAK,eACE,IAASd,kBAAU,CAAAS,IAAW,EAAAL,UAAA,CAAAW,MAAA;MAAAD,QACrC,GACD,mBAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAW,MAAA,CAAAE,IAAA;QAAAH,QAAA,qBAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAc,MAAA;UAGHC,IAAA;UACAC,KAAA,EAAAd,IAAA,0BAAC;UACEe,OAAA,WAAAA,CAAA;YAAA,OAAAd,OAAA;UACC;UACAO,QAAO;QACP;MACD,uBAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAW,MAAA,CAAAE,IAAA;QAGHH,QAAA,qBAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAc,MAAA;UACAC,IAAA;UACGC,KAAA,EAAAd,IAAA;UAAAe,OAAA,WAAAA,CAAA;YACM,OAAAd,OAAA;UACL;UACAO,QAAS;QACV;MAAA,IAGH,mBAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAW,MAAA,CAAAE,IAAA;QACFH,QAAA,qBAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAc,MAAA;UAEAC,IAAA;UACFC,KAAA,EAAAd,IAAA;UAEJe,OAAA,WAAAA,CAAA;YAES,OAAAd,OAAiB,CAAK,aAAyB;UAC/C,CAAM;UAGXO,QAAA;QAAC;MAAA;IAEC,IACA,mBAAAd,kBAAA,CAAAgB,GAAA,EAAAM,cAAA;MACAhB;IAEA;EAIA;AAII;AAAC,SAAAgB,eAAAC,KAAA;EAAA;MAAAjB;IACC,IAAAiB,KAAA;IAAW,CAAAC,IAAA,EAAAC,OAAA,QAAAtB,YAAA,CAAAK,QAAA;EAAA,sBACH,IAAAR,kBAAA,CAAAS,IAAA,EAAAL,UAAA,CAAAsB,MAAA;IAAAC,KAAA,GACR;IAAKC,mBACL,EAAAtB,IAAA,kBAAqB;IAAAkB,IAAA;IACIK,YAEzB,EAAAJ,OAAA;IAAAX,QAAA,GAEA,eACA,IAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAsB,MAAA,CAAAI,OAAA;MAAAC,OAAA,EAAC;MAAMjB,QAAN,qBAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAc,MAAA;QAAAJ,QACC,iBAAG,IAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAc,MAAA,CAAAc,IAAA;UAAAlB,QACH;QAAS;MACE;IACc,IACDR,IAAA,mCAAAN,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAA6B,KAAA;MAAAC,IAAA,EAC1B;MAAAC,QAAA;MAAArB,QAAA,qBAAAd,kBAAA,CAAAS,IAAA,EAAAL,UAAA,CAAAgC,KAAA;QACFC,UACF;QAGFC,MAAA;QACEX,KAAA;QAAAY,qBAAQ;QAAAC,yBAAP;QAAA1B,QACI,kBACM,IAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAgC,KAAA,CAAAK,KAAA;UACTC,CAAA;UACA/B,GAAA;UAAYG,QACV,qBAAAd,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAA6B,KAAA,CAAAU,QAAA;QAAA,IACA,eACW,IAAA3C,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAgC,KAAA,CAAAQ,OAAA;UAAAC,EAAA,eACP;UAAmBC,OACrB;UAAAT,UACF;UACFU,UAAA;YACAD,OAAA;UACA;UAAwBE,SAAA;YAC1BF,OAAA;UAEA;QACG;MAAA;IACa,IACV,eACA,IAAA9C,kBAAA,CAAAS,IAAA,EAAAL,UAAA,CAAAsB,MAAA,CAAAuB,MAAA;MAAAnC,QAAA,EACE,CAAS,eACP,IAAAd,kBAAmB,CAAAgB,GAAA,EAAAZ,UAAA,CAAAsB,MAAA,CAAAkB,OAAA;QAAAC,EAAA,eACrB;QAAAC,OACF;QAAAI,WACF,GACA,aACA,UAAkD;QAC9Cb,UAEJ,cAA0B;UAK1BS,OAAA;YACEK,iBAAA;UAEA;QACsD,EACxD;QAGEJ,UAAA;UAIAD,OACA;QACE;QAACE,SAAA;UAAAF,OAAA,EACC;QAGE;MAAA,IAGN,eACF,IAAA9C,kBAAA,CAAAgB,GAAA,EAAAZ,UAAA,CAAAsB,MAAA,CAAA0B,UAAA;QAAAC,WAEA;QAMAvC,QAEA,qBAAAd,kBAAC,CAAAS,IAAA,EAAAL,UAAA,CAAAsB,MACC,CAAA4B,OAAA;UAGFjB,UAAA,cAEJ;YACFS,OAAA;cAAAK,iBAAA;YAAA;UACF,EAEJ","ignoreList":[]}

package/dist/cjs/FormsDemo.cjs

@@ -0,0 +1,85 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__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: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var FormsDemo_exports = {};
+__export(FormsDemo_exports, {
+  FormsDemo: () => FormsDemo
+});
+module.exports = __toCommonJS(FormsDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function FormsDemo(props) {
+  const [status, setStatus] = import_react.default.useState("off");
+  return import_react.default.useEffect(() => {
+    if (status === "submitting") {
+      const timer = setTimeout(() => setStatus("off"), 2e3);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [status]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Form, {
+    items: "center",
+    gap: "$2",
+    onSubmit: () => setStatus("submitting"),
+    borderWidth: 1,
+    rounded: "$4",
+    bg: "$color2",
+    borderColor: "$borderColor",
+    minW: 350,
+    p: "$6",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Form.Trigger, {
+      asChild: !0,
+      disabled: status !== "off",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Submit"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+          width: "100%",
+          height: 40,
+          justifyContent: "center",
+          alignItems: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+            children: status === "submitting" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Spinner, {
+              transition: "medium",
+              enterStyle: {
+                opacity: 0
+              },
+              alignSelf: "center",
+              width: 8
+            }, "spinner") : null
+          })
+        })]
+      })
+    })
+  });
+}

package/dist/cjs/FormsDemo.native.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__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: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var FormsDemo_exports = {};
+__export(FormsDemo_exports, {
+  FormsDemo: () => FormsDemo
+});
+module.exports = __toCommonJS(FormsDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui");
+function FormsDemo(props) {
+  var [status, setStatus] = import_react.default.useState("off");
+  return import_react.default.useEffect(function () {
+    if (status === "submitting") {
+      var timer = setTimeout(function () {
+        return setStatus("off");
+      }, 2e3);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+  }, [status]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Form, {
+    items: "center",
+    gap: "$2",
+    onSubmit: function () {
+      return setStatus("submitting");
+    },
+    borderWidth: 1,
+    rounded: "$4",
+    bg: "$color2",
+    borderColor: "$borderColor",
+    minW: 350,
+    p: "$6",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Form.Trigger, {
+      asChild: !0,
+      disabled: status !== "off",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Submit"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+          width: "100%",
+          height: 40,
+          justifyContent: "center",
+          alignItems: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+            children: status === "submitting" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Spinner, {
+              transition: "medium",
+              enterStyle: {
+                opacity: 0
+              },
+              alignSelf: "center",
+              width: 8
+            }, "spinner") : null
+          })
+        })]
+      })
+    })
+  });
+}
+//# sourceMappingURL=FormsDemo.native.js.map

package/dist/cjs/FormsDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FormsDemo_exports","__export","FormsDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_gui","props","status","setStatus","default","useState","useEffect","timer","setTimeout","clearTimeout","jsx","Form","items","gap","onSubmit","borderWidth","rounded","bg","borderColor","minW","p","children","Trigger","asChild","disabled","jsxs","YStack","Button","width"],"sources":["../../src/FormsDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,iBAAA;AAAAC,QAAA,CAAAD,iBAAA;EAAAE,SAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,iBAAA;AAeX,IAAAK,kBAAmB,GAAAC,OAA6B;EAAAC,YAAA,GAAAC,OAAA,CAAAF,OAAA;EAAAG,UAAA,GAAAH,OAAA;AACrD,SAAOJ,SAAQA,CAAAQ,KAAA,EAAS;EAExB,KAAAC,MAAA,EAAAC,SAAA,IAAAL,YAAgB,CAAAM,OAAM,CAAAC,QAAA;EACpB,OAAIP,YAAW,CAAAM,OAAA,CAAAE,SAAc;IAC3B,IAAAJ,MAAM,iBAAmB;MACzB,IAAAK,KAAO,GAAAC,UAAM;QACX,OAAAL,SAAa,MAAK;MACpB;MACF;QACEM,YAGF,CAAAF,KAAA;MAAC;IAAA;EAAA,IACOL,MACN,CAAI,GACJ,eAAgB,IAAAN,kBAAsB,CAAAc,GAAA,EAAAV,UAAA,CAAAW,IAAA;IAAAC,KACtC,UAAa;IAAAC,GACb;IAAQC,QACL,WAAAA,CAAA;MACH,OAAAX,SAAY;IAAA;IACNY,WACJ;IAAAC,OAEF;IAEIC,EAAA;IAAcC,WACd;IAGMC,IAAA,EAAC;IAAAC,CAAA;IAAAC,QACC,iBAAW,IAAAzB,kBAAA,CAAAc,GAAA,EAAAV,UAAA,CAAAW,IAAA,CAAAW,OAAA;MAAAC,OACX;MAAyBC,QACzB,EAAAtB,MAAA,KAAU;MAAAmB,QAEV,iBAAO,IAAAzB,kBAAA,CAAA6B,IAAA,EAAAzB,UAAA,CAAA0B,MAAA;QAAAb,GAAA;QAAAQ,QADH,GAEN,eAGN,IAAAzB,kBAAA,CAAAc,GAAA,EAAAV,UAAA,CAAA2B,MAAA;UAEJN,QAAA;QAAA,IACF,mBAAAzB,kBAAA,CAAAc,GAAA,EAAAV,UAAA,CAAA0B,MAAA;UAEJE,KAAA","ignoreList":[]}