@hanzogui/demos 2.0.0

package/dist/cjs/AnimationsDelayDemo.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 AnimationsDelayDemo_exports = {};
+__export(AnimationsDelayDemo_exports, {
+  AnimationsDelayDemo: () => AnimationsDelayDemo
+});
+module.exports = __toCommonJS(AnimationsDelayDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_useOnIntersecting = require("./useOnIntersecting.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const colors = ["$color9", "$color10", "$color11", "$color12"];
+function AnimationsDelayDemo() {
+  const ref = import_react.default.useRef(null),
+    hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, {
+      once: !0
+    }),
+    [show, setShow] = import_react.default.useState(!0);
+  return import_gui.isWeb && !hasIntersected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    ref,
+    height: 150
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+      gap: "$3",
+      height: 100,
+      items: "center",
+      justify: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+        children: show && colors.map((color, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+          transition: ["200ms", {
+            delay: i * 100
+          }],
+          enterStyle: {
+            opacity: 0,
+            scale: 0.5,
+            y: 20
+          },
+          exitStyle: {
+            opacity: 0,
+            scale: 0,
+            y: 20
+          },
+          size: 60,
+          bg: color,
+          rounded: "$4"
+        }, color))
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      size: "$3",
+      onPress: () => setShow(!show),
+      children: show ? "Hide" : "Show"
+    })]
+  });
+}

package/dist/cjs/AnimationsDelayDemo.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 AnimationsDelayDemo_exports = {};
+__export(AnimationsDelayDemo_exports, {
+  AnimationsDelayDemo: () => AnimationsDelayDemo
+});
+module.exports = __toCommonJS(AnimationsDelayDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_useOnIntersecting = require("./useOnIntersecting.native.js"),
+  colors = ["$color9", "$color10", "$color11", "$color12"];
+function AnimationsDelayDemo() {
+  var ref = import_react.default.useRef(null),
+    hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, {
+      once: !0
+    }),
+    [show, setShow] = import_react.default.useState(!0);
+  return import_gui.isWeb && !hasIntersected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    ref,
+    height: 150
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+      gap: "$3",
+      height: 100,
+      items: "center",
+      justify: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.AnimatePresence, {
+        children: show && colors.map(function (color, i) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+            transition: ["200ms", {
+              delay: i * 100
+            }],
+            enterStyle: {
+              opacity: 0,
+              scale: 0.5,
+              y: 20
+            },
+            exitStyle: {
+              opacity: 0,
+              scale: 0,
+              y: 20
+            },
+            size: 60,
+            bg: color,
+            rounded: "$4"
+          }, color);
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      size: "$3",
+      onPress: function () {
+        return setShow(!show);
+      },
+      children: show ? "Hide" : "Show"
+    })]
+  });
+}
+//# sourceMappingURL=AnimationsDelayDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AnimationsDelayDemo_exports","__export","AnimationsDelayDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_gui","import_useOnIntersecting","colors","ref","default","useRef","hasIntersected","useIsIntersecting","once","show","setShow","useState","isWeb","jsx","YStack","height","jsxs","gap","items","children","XStack","justify","AnimatePresence","map","color","i","Square","transition"],"sources":["../../src/AnimationsDelayDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,2BAAA;AAAAC,QAAA,CAAAD,2BAAA;EAAAE,mBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,2BAClB;AAIA,IAAAK,kBAAgB,GAAAC,OAAW,oBAAwB;EAAAC,YAAU,GAAAC,OAAA,CAAAF,OAAA;EAAAG,UAAA,GAAAH,OAAA;EAAAI,wBAAA,GAAAJ,OAAA;EAAAK,MAAA,IAEtD,SAAS,EACd,UAAM,EAIN,UAAI,EAMA,WAIQ;AAAC,SAAAT,oBAAA;EAAA,IAAAU,GAEC,GAAAL,YAAa,CAAAM,OAAW,CAAAC,MAAO,KAAI;IAAIC,cAAC,OAAAL,wBAAA,CAAAM,iBAAA,EAAAJ,GAAA;MAAAK,IACxC;IAAY;IAAA,CAAAC,IACV,EAAAC,OAAS,IAAAZ,YAAA,CAAAM,OAAA,CAAAO,QAAA;EAAA,OAAAX,UACF,CAAAY,KAAA,KAAAN,cAAA,sBAAAV,kBAAA,CAAAiB,GAAA,EAAAb,UAAA,CAAAc,MAAA;IAAAX,GAAA;IACJY,MACL;EAAA,oBACW,IAAAnB,kBAAA,CAAAoB,IAAA,EAAAhB,UAAA,CAAAc,MAAA;IAAAG,GAAA,MACT;IAASC,KAAA,EACT,QAAO;IAAAC,QACP,EAAG,gBACL,IAAAvB,kBAAA,CAAAiB,GAAA,EAAAb,UAAA,CAAAoB,MAAA;MACAH,GAAA,MAAM;MACNF,MAAI;MACJG,KAAA,UAAQ;MAAAG,OAAA;MAdHF,QAAA,qBAAAvB,kBAAA,CAAAiB,GAAA,EAAAb,UAAA,CAAAsB,eAAA;QAiBbH,QACF,EAAAV,IAAA,IAAAP,MAAA,CAAAqB,GAAA,WAAAC,KAAA,EAAAC,CAAA;UAEA,0BAAA7B,kBAAC,CAAAiB,GAAA,EAAAb,UAAO,CAAA0B,MAAK,EAAK;YAGpBC,UAAA,GAEJ,S","ignoreList":[]}

package/dist/cjs/AnimationsDemo.cjs

@@ -0,0 +1,100 @@
+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 AnimationsDemo_exports = {};
+__export(AnimationsDemo_exports, {
+  AnimationsDemo: () => AnimationsDemo,
+  positions: () => positions
+});
+module.exports = __toCommonJS(AnimationsDemo_exports);
+var import_logo = require("@hanzogui/logo"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function AnimationsDemo(props) {
+  const [positionI, setPositionI] = (0, import_gui.useControllableState)({
+      strategy: "most-recent-wins",
+      prop: props.position,
+      defaultProp: 0
+    }),
+    position = positions[positionI],
+    onPress = (0, import_gui.useEvent)(() => {
+      setPositionI(x => (x + 1) % positions.length);
+    });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      transition: props.animation ?? "bouncy",
+      animateOnly: ["transform"],
+      onPress,
+      size: 104,
+      borderColor: "$borderColor",
+      borderWidth: 1,
+      rounded: "$9",
+      bg: "$color9",
+      hoverStyle: {
+        scale: 1.01
+      },
+      pressStyle: {
+        scale: 0.9
+      },
+      ...position,
+      children: import_gui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+        downscale: 0.75
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      position: "absolute",
+      b: 20,
+      l: 20,
+      icon: import_lucide_icons_2.Play,
+      theme: props.tint ?? "surface2",
+      size: "$5",
+      circular: !0,
+      onPress
+    })]
+  });
+}
+const positions = [{
+  x: 0,
+  y: 0,
+  scale: 1,
+  rotate: "0deg"
+}, {
+  x: -50,
+  y: -50,
+  scale: 0.5,
+  rotate: "-45deg",
+  hoverStyle: {
+    scale: 0.6
+  },
+  pressStyle: {
+    scale: 0.4
+  }
+}, {
+  x: 50,
+  y: 50,
+  scale: 1,
+  rotate: "180deg",
+  hoverStyle: {
+    scale: 1.1
+  },
+  pressStyle: {
+    scale: 0.9
+  }
+}];

package/dist/cjs/AnimationsDemo.native.js

@@ -0,0 +1,107 @@
+"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 AnimationsDemo_exports = {};
+__export(AnimationsDemo_exports, {
+  AnimationsDemo: () => AnimationsDemo,
+  positions: () => positions
+});
+module.exports = __toCommonJS(AnimationsDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_logo = require("@hanzogui/logo"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_gui = require("@hanzo/gui");
+function AnimationsDemo(props) {
+  var [positionI, setPositionI] = (0, import_gui.useControllableState)({
+      strategy: "most-recent-wins",
+      prop: props.position,
+      defaultProp: 0
+    }),
+    position = positions[positionI],
+    onPress = (0, import_gui.useEvent)(function () {
+      setPositionI(function (x) {
+        return (x + 1) % positions.length;
+      });
+    }),
+    _props_animation,
+    _props_tint;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      transition: (_props_animation = props.animation) !== null && _props_animation !== void 0 ? _props_animation : "bouncy",
+      animateOnly: ["transform"],
+      onPress,
+      size: 104,
+      borderColor: "$borderColor",
+      borderWidth: 1,
+      rounded: "$9",
+      bg: "$color9",
+      hoverStyle: {
+        scale: 1.01
+      },
+      pressStyle: {
+        scale: 0.9
+      },
+      ...position,
+      children: import_gui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+        downscale: 0.75
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      position: "absolute",
+      b: 20,
+      l: 20,
+      icon: import_lucide_icons_2.Play,
+      theme: (_props_tint = props.tint) !== null && _props_tint !== void 0 ? _props_tint : "surface2",
+      size: "$5",
+      circular: !0,
+      onPress
+    })]
+  });
+}
+var positions = [{
+  x: 0,
+  y: 0,
+  scale: 1,
+  rotate: "0deg"
+}, {
+  x: -50,
+  y: -50,
+  scale: 0.5,
+  rotate: "-45deg",
+  hoverStyle: {
+    scale: 0.6
+  },
+  pressStyle: {
+    scale: 0.4
+  }
+}, {
+  x: 50,
+  y: 50,
+  scale: 1,
+  rotate: "180deg",
+  hoverStyle: {
+    scale: 1.1
+  },
+  pressStyle: {
+    scale: 0.9
+  }
+}];
+//# sourceMappingURL=AnimationsDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AnimationsDemo_exports","__export","AnimationsDemo","positions","module","exports","import_jsx_runtime","require","import_logo","import_lucide_icons_2","import_gui","props","positionI","setPositionI","useControllableState","strategy","prop","position","defaultProp","onPress","useEvent","x","length","_props_animation","_props_tint","jsxs","Fragment","children","jsx","Square","transition","animation","animateOnly","size","borderColor","borderWidth","rounded","bg","hoverStyle","scale","pressStyle","isWeb","LogoIcon","downscale","Button","b","l","icon","Play","theme","tint","circular","y","rotate"],"sources":["../../src/AnimationsDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,sBAAA;AAAAC,QAAA,CAAAD,sBAAA;EAAAE,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,SAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAV,YAAyB,CAAAK,sBACzB;AAGO,IAAAM,kBAAS,GAAeC,OAAO;EAAAC,WAAA,GAAAD,OAAA;EAAAE,qBAAA,GAAAF,OAAA;EAAAG,UAAA,GAAAH,OAAA;AACpC,SAAOL,cAAWA,CAAAS,KAAA;EAAqC,IACrD,CAAAC,SAAU,EAAAC,YAAA,QAAAH,UAAA,CAAAI,oBAAA;MACVC,QAAM,oBAAM;MACZC,IAAA,EAAAL,KAAA,CAAAM,QAAa;MACdC,WACK,EAAW;IAEf;IAAAD,QAAA,GAAad,SACH,CAAAS,SAAS;IAAAO,OAAU,IAC5B,GAAAT,UAAA,CAAAU,QAAA;MACFP,YAAA,WAAAQ,CAAA;QAED,OACE,CAAAA,CAAA,QAAAlB,SAAA,CAAAmB,MAAA;MACE;IAAA;IAACC,gBAAA;IAAAC,WAAA;EAAA,0BAAAlB,kBAAA,CAAAmB,IAAA,EAAAnB,kBAAA,CAAAoB,QAAA;IAAAC,QACC,GAA+B,eACjB,IAAArB,kBAAW,CAAAsB,GAAA,EAAAlB,UAAA,CAAAmB,MAAA;MACzBC,UAAA,GAAAP,gBAAA,GAAAZ,KAAA,CAAAoB,SAAA,cAAAR,gBAAA,cAAAA,gBAAA;MACAS,WAAM,GACN,WAAY,CACZ;MACAb,OAAA;MACAc,IAAG;MACHC,WAAA,EAAY;MAAAC,WACH;MACTC,OAAA;MACAC,EAAA,WAAY;MAAAC,UACH;QACTC,KAAA;MACC;MAEAC,UAAA;QAAoCD,KAAA;MACvC;MAEA,GAAAtB,QAAA;MAACU,QAAA,EAAAjB,UAAA,CAAA+B,KAAA,uBAAAnC,kBAAA,CAAAsB,GAAA,EAAApB,WAAA,CAAAkC,QAAA;QAAAC,SAAA;MACC;IAAS,EACT,EAAG,eACA,IAAArC,kBAAA,CAAAsB,GAAA,EAAAlB,UAAA,CAAAkC,MAAA;MACH3B,QAAM;MACN4B,CAAA;MACAC,CAAA;MACAC,IAAA,EAAAtC,qBAAQ,CAAAuC,IAAA;MACRC,KAAA,GAAAzB,WAAA,GAAAb,KAAA,CAAAuC,IAAA,cAAA1B,WAAA,cAAAA,WAAA;MAAAS,IAAA;MACFkB,QAAA;MACFhC;IAEJ;EAGE;AAAA;AACK,IACHhB,SAAG;EAEHkB,CAAA;EACF+B,CAAA;EACAb,KAAA;EACEc,MAAG;AAAA,GACA;EAEHhC,CAAA;EACA+B,CAAA;EAAYb,KACV,KAAO;EACTc,MAAA;EACAf,UAAA,EAAY;IACVC,KAAA,EAAO;EACT;EACFC,UAAA;IACAD,KAAA;EACE;AAAG,GACA;EAEHlB,CAAA;EACA+B,CAAA;EAAYb,KACV;EACFc,MAAA;EACAf,UAAA,EAAY;IACVC,KAAA,EAAO;EACT;EACFC,UAAA;IACFD,KAAA","ignoreList":[]}

package/dist/cjs/AnimationsEnterDemo.cjs

@@ -0,0 +1,75 @@
+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 AnimationsEnterDemo_exports = {};
+__export(AnimationsEnterDemo_exports, {
+  AnimationsEnterDemo: () => AnimationsEnterDemo
+});
+module.exports = __toCommonJS(AnimationsEnterDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_logo = require("@hanzogui/logo"),
+  import_gui = require("@hanzo/gui"),
+  import_useOnIntersecting = require("./useOnIntersecting.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function AnimationsEnterDemo(props) {
+  const ref = import_react.default.useRef(null),
+    [key, setKey] = import_react.default.useState(0),
+    hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, {
+      once: !0
+    });
+  return import_gui.isWeb && !hasIntersected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    ref
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      enterStyle: {
+        scale: 1.5,
+        y: -10,
+        opacity: 0
+      },
+      transition: "bouncy",
+      elevation: "$4",
+      size: 110,
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      bg: "$color9",
+      rounded: "$9",
+      children: props.children ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+        downscale: 0.75
+      })
+    }, key), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      size: "$3",
+      mt: "$4",
+      onPress: () => setKey(Math.random()),
+      children: "Re-mount"
+    })]
+  });
+}

package/dist/cjs/AnimationsEnterDemo.native.js

@@ -0,0 +1,82 @@
+"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 AnimationsEnterDemo_exports = {};
+__export(AnimationsEnterDemo_exports, {
+  AnimationsEnterDemo: () => AnimationsEnterDemo
+});
+module.exports = __toCommonJS(AnimationsEnterDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_logo = require("@hanzogui/logo"),
+  import_gui = require("@hanzo/gui"),
+  import_useOnIntersecting = require("./useOnIntersecting.native.js");
+function AnimationsEnterDemo(props) {
+  var ref = import_react.default.useRef(null),
+    [key, setKey] = import_react.default.useState(0),
+    hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, {
+      once: !0
+    });
+  if (import_gui.isWeb && !hasIntersected) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+    ref
+  });
+  var _props_children;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      enterStyle: {
+        scale: 1.5,
+        y: -10,
+        opacity: 0
+      },
+      transition: "bouncy",
+      elevation: "$4",
+      size: 110,
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      bg: "$color9",
+      rounded: "$9",
+      children: (_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+        downscale: 0.75
+      })
+    }, key), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      size: "$3",
+      mt: "$4",
+      onPress: function () {
+        return setKey(Math.random());
+      },
+      children: "Re-mount"
+    })]
+  });
+}
+//# sourceMappingURL=AnimationsEnterDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AnimationsEnterDemo_exports","__export","AnimationsEnterDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_logo","import_gui","import_useOnIntersecting","props","ref","default","useRef","key","setKey","useState","hasIntersected","useIsIntersecting","once","isWeb","jsx","YStack","_props_children","jsxs","Fragment","children","Square","enterStyle","scale","y","opacity","transition","elevation","size","bg","rounded"],"sources":["../../src/AnimationsEnterDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,2BAAA;AAAAC,QAAA,CAAAD,2BAAA;EAAAE,mBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,2BAClB;AAMO,IAAAK,kBAAS,GAAAC,OAAoB,oBAAY;EAAAC,YAAA,GAAAC,OAAA,CAAAF,OAAA;EAAAG,WAAA,GAAAH,OAAA;EAAAI,UAAA,GAAAJ,OAAA;EAAAK,wBAAA,GAAAL,OAAA;AAC9C,SAAMJ,mBAAMA,CAAAU,KAAA,EAAM;EAIlB,IAAAC,GAAI,GAAAN,YAAA,CAAAO,OAAU,CAAAC,MAAA;IACL,CAAAC,GAAA,EAAAC,MAAA,IAAAV,YAAA,CAAAO,OAAA,CAAAI,QAAC;IAAAC,cAAA,GAAO,IAAiBR,wBAIhC,CAAAS,iBAAA,EAAAP,GAAA;MACEQ,IAAA;IAAA;EAAC,IAAAX,UAAA,CAAAY,KAAA,KAAAH,cAAA,SAEC,eAAY,IAAAd,kBAAA,CAAAkB,GAAA,EAAAb,UAAA,CAAAc,MAAA;IAAAX;EACH;EACJ,IAAAY,eACM;EAAA,OACX,mBAAApB,kBAAA,CAAAqB,IAAA,EAAArB,kBAAA,CAAAsB,QAAA;IAAAC,QACA,GAAW,eACD,IAAAvB,kBAAA,CAAAkB,GAAA,EAAAb,UAAA,CAAAmB,MAAA;MACVC,UAAM;QACNC,KAAA,EAAS;QACTC,CAAA,KAAO;QACPC,OAAG;MACH;MACAC,UAAQ;MAEPC,SAAA;MAA6CC,IAAA;MAfzCH,OAAA;MAgBPF,KAAA;MAEAC,CAAA;MAGFK,EAAA;MAEJC,OAAA","ignoreList":[]}

package/dist/cjs/AnimationsHoverDemo.cjs

@@ -0,0 +1,47 @@
+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 AnimationsHoverDemo_exports = {};
+__export(AnimationsHoverDemo_exports, {
+  AnimationsHoverDemo: () => AnimationsHoverDemo
+});
+module.exports = __toCommonJS(AnimationsHoverDemo_exports);
+var import_logo = require("@hanzogui/logo"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function AnimationsHoverDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+    borderColor: "$borderColor",
+    transition: "bouncy",
+    elevation: "$4",
+    bg: "$color9",
+    size: 104,
+    rounded: "$9",
+    hoverStyle: {
+      scale: 1.2
+    },
+    pressStyle: {
+      scale: 0.9
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+      downscale: 0.75
+    })
+  });
+}

package/dist/cjs/AnimationsHoverDemo.native.js

@@ -0,0 +1,50 @@
+"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 AnimationsHoverDemo_exports = {};
+__export(AnimationsHoverDemo_exports, {
+  AnimationsHoverDemo: () => AnimationsHoverDemo
+});
+module.exports = __toCommonJS(AnimationsHoverDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_logo = require("@hanzogui/logo"),
+  import_gui = require("@hanzo/gui");
+function AnimationsHoverDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+    borderColor: "$borderColor",
+    transition: "bouncy",
+    elevation: "$4",
+    bg: "$color9",
+    size: 104,
+    rounded: "$9",
+    hoverStyle: {
+      scale: 1.2
+    },
+    pressStyle: {
+      scale: 0.9
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logo.LogoIcon, {
+      downscale: 0.75
+    })
+  });
+}
+//# sourceMappingURL=AnimationsHoverDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AnimationsHoverDemo_exports","__export","AnimationsHoverDemo","module","exports","import_jsx_runtime","require","import_logo","import_gui","jsx","Square","borderColor","transition","elevation","bg","size","rounded","hoverStyle","scale","pressStyle","children","LogoIcon","downscale"],"sources":["../../src/AnimationsHoverDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,2BAAA;AAAAC,QAAA,CAAAD,2BAAA;EAAAE,mBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAyB,CAAAK,2BACzB,CAAuB;AAEhB,IAAAK,kBAAS,GAAAC,OAAsB;EAAAC,WAAA,GAAAD,OAAA;EAAAE,UAAA,GAAAF,OAAA;AACpC,SACEJ,oBAAA;EAAA,OAAC,mBAAAG,kBAAA,CAAAI,GAAA,EAAAD,UAAA,CAAAE,MAAA;IAAAC,WAAA;IAAAC,UACC,UAAY;IAAAC,SACZ,MAAW;IAAAC,EACX,WAAU;IAAAC,IACV,EAAG;IAAAC,OACH,EAAM;IAAAC,UACN,EAAQ;MACRC,KAAA;IAAY;IACHC,UACT;MACAD,KAAA;IAAY;IACHE,QACT,qBAAAf,kBAAA,CAAAI,GAAA,EAAAF,WAAA,CAAAc,QAAA;MAEAC,SAAA;IAA2B;EAC7B;AAEJ","ignoreList":[]}