@hanzogui/demos 2.0.0

package/dist/cjs/SheetDemo.native.js

@@ -0,0 +1,221 @@
+"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 SheetDemo_exports = {};
+__export(SheetDemo_exports, {
+  SheetDemo: () => SheetDemo
+});
+module.exports = __toCommonJS(SheetDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_sheet = require("@hanzogui/sheet"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  spModes = ["percent", "constant", "fit", "mixed"],
+  SheetDemo = function () {
+    var [position, setPosition] = import_react.default.useState(0),
+      [open, setOpen] = import_react.default.useState(!1),
+      [modal, setModal] = import_react.default.useState(!0),
+      [innerOpen, setInnerOpen] = import_react.default.useState(!1),
+      [snapPointsMode, setSnapPointsMode] = import_react.default.useState("percent"),
+      [mixedFitDemo, setMixedFitDemo] = import_react.default.useState(!1),
+      isPercent = snapPointsMode === "percent",
+      isConstant = snapPointsMode === "constant",
+      isFit = snapPointsMode === "fit",
+      isMixed = snapPointsMode === "mixed",
+      snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+          gap: "$4",
+          $maxMd: {
+            flexDirection: "column",
+            items: "center"
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+            onPress: function () {
+              return setOpen(!0);
+            },
+            children: "Open"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+            onPress: function () {
+              return setModal(function (x) {
+                return !x;
+              });
+            },
+            children: modal ? "Type: Modal" : "Type: Inline"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+            onPress: function () {
+              return setSnapPointsMode(function (prev) {
+                return spModes[(spModes.indexOf(prev) + 1) % spModes.length];
+              });
+            },
+            children: `Mode: ${{
+              percent: "Percentage",
+              constant: "Constant",
+              fit: "Fit",
+              mixed: "Mixed"
+            }[snapPointsMode]}`
+          })]
+        }), isMixed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          onPress: function () {
+            return setMixedFitDemo(function (x) {
+              return !x;
+            });
+          },
+          children: `Snap Points: ${JSON.stringify(snapPoints)}`
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+          py: "$2.5",
+          justify: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+            children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
+        modal,
+        open,
+        onOpenChange: setOpen,
+        snapPoints,
+        snapPointsMode,
+        dismissOnSnapToBottom: !0,
+        position,
+        onPositionChange: setPosition,
+        zIndex: 1e5,
+        transition: "medium",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
+          transition: "lazy",
+          bg: "$shadow6",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, {
+          p: "$4",
+          justify: "center",
+          items: "center",
+          gap: "$5",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SheetContents, {
+            modal,
+            isPercent,
+            innerOpen,
+            setInnerOpen,
+            setOpen
+          })
+        })]
+      })]
+    });
+  },
+  SheetContents = /* @__PURE__ */(0, import_react.memo)(function (param) {
+    var {
+      modal,
+      isPercent,
+      innerOpen,
+      setInnerOpen,
+      setOpen
+    } = param;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        size: "$6",
+        circular: !0,
+        icon: import_lucide_icons_2.ChevronDown,
+        onPress: function () {
+          return setOpen(!1);
+        }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Input, {
+        width: 200
+      }), modal && isPercent && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(InnerSheet, {
+          open: innerOpen,
+          onOpenChange: setInnerOpen
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          size: "$6",
+          circular: !0,
+          icon: import_lucide_icons_2.ChevronUp,
+          onPress: function () {
+            return setInnerOpen(!0);
+          }
+        })]
+      })]
+    });
+  });
+function InnerSheet(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
+    transition: "medium",
+    modal: !0,
+    snapPoints: [90],
+    dismissOnSnapToBottom: !0,
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
+      transition: "medium",
+      bg: "$shadow2",
+      enterStyle: {
+        opacity: 0
+      },
+      exitStyle: {
+        opacity: 0
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, {
+      flex: 1,
+      justify: "center",
+      items: "center",
+      gap: "$5",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.ScrollView, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+          p: "$5",
+          gap: "$8",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+            size: "$6",
+            circular: !0,
+            self: "center",
+            icon: import_lucide_icons_2.ChevronDown,
+            onPress: function () {
+              var _props_onOpenChange;
+              return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, !1);
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H2, {
+            children: "Hello world"
+          }), [1, 2, 3, 4, 5, 6, 7, 8].map(function (i) {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+              size: "$8",
+              children: "Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint."
+            }, i);
+          })]
+        })
+      })
+    })]
+  });
+}
+//# sourceMappingURL=SheetDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SheetDemo_exports","__export","SheetDemo","module","exports","import_jsx_runtime","require","import_lucide_icons_2","import_sheet","import_react","__toESM","import_gui","spModes","position","setPosition","default","useState","open","setOpen","modal","setModal","innerOpen","setInnerOpen","snapPointsMode","setSnapPointsMode","mixedFitDemo","setMixedFitDemo","isPercent","isConstant","isFit","isMixed","snapPoints","jsxs","Fragment","children","YStack","gap","XStack","$maxMd","flexDirection","items","jsx","Button","onPress","x","prev","indexOf","length","percent","constant","fit","mixed","JSON","stringify","py","justify","Paragraph","Sheet","onOpenChange","dismissOnSnapToBottom","onPositionChange","zIndex","transition","Overlay","bg","enterStyle"],"sources":["../../src/SheetDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/SliderDemo.cjs

@@ -0,0 +1,58 @@
+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 SliderDemo_exports = {};
+__export(SliderDemo_exports, {
+  SliderDemo: () => SliderDemo
+});
+module.exports = __toCommonJS(SliderDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function SliderDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    height: 200,
+    items: "center",
+    gap: "$8",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleSlider, {
+      height: 200,
+      orientation: "vertical"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleSlider, {
+      width: 200
+    })]
+  });
+}
+function SimpleSlider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Slider, {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Slider.Track, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Slider.TrackActive, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Slider.Thumb, {
+      theme: "accent",
+      size: 30,
+      borderRadius: 100
+    }), children]
+  });
+}

package/dist/cjs/SliderDemo.native.js

@@ -0,0 +1,62 @@
+"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 SliderDemo_exports = {};
+__export(SliderDemo_exports, {
+  SliderDemo: () => SliderDemo
+});
+module.exports = __toCommonJS(SliderDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function SliderDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    height: 200,
+    items: "center",
+    gap: "$8",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleSlider, {
+      height: 200,
+      orientation: "vertical"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleSlider, {
+      width: 200
+    })]
+  });
+}
+function SimpleSlider(param) {
+  var {
+    children,
+    ...props
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Slider, {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Slider.Track, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Slider.TrackActive, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Slider.Thumb, {
+      theme: "accent",
+      size: 30,
+      borderRadius: 100
+    }), children]
+  });
+}
+//# sourceMappingURL=SliderDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SliderDemo_exports","__export","SliderDemo","module","exports","import_jsx_runtime","require","import_gui","jsxs","XStack","height","items","gap","children","jsx","SimpleSlider","orientation","width"],"sources":["../../src/SliderDemo.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;AACAC,MAAA,CAAAC,OAAA,GAAsCT,YAAA,CAAAK,kBAIlC;AAFG,IAAAK,kBAAsB,GAAAC,OAAA;EAAAC,UAAA,GAAAD,OAAA;AAC3B,SACEJ,WAAA;EACE,0BAAAG,kBAAA,CAACG,IAAA,EAAAD,UAAa,CAAAE,MAAA,EAAQ;IACtBC,MAAA;IAA0BC,KAC5B;IAEJC,GAAA;IAEAC,QAAS,GACP,eACE,IAAAR,kBAAA,CAAAS,GAAA,EAAAC,YAAC;MACCL,MAAA;MAGAM,WAAA;IACC,IACH,mBAAAX,kBAAA,CAAAS,GAAA,EAAAC,YAAA;MAEJE,KAAA","ignoreList":[]}

package/dist/cjs/SpinnerDemo.cjs

@@ -0,0 +1,41 @@
+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 SpinnerDemo_exports = {};
+__export(SpinnerDemo_exports, {
+  SpinnerDemo: () => SpinnerDemo
+});
+module.exports = __toCommonJS(SpinnerDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function SpinnerDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    p: "$3",
+    gap: "$4",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Spinner, {
+      size: "small",
+      color: "$green10"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Spinner, {
+      size: "large",
+      color: "$yellow10"
+    })]
+  });
+}

package/dist/cjs/SpinnerDemo.native.js

@@ -0,0 +1,44 @@
+"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 SpinnerDemo_exports = {};
+__export(SpinnerDemo_exports, {
+  SpinnerDemo: () => SpinnerDemo
+});
+module.exports = __toCommonJS(SpinnerDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function SpinnerDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    p: "$3",
+    gap: "$4",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Spinner, {
+      size: "small",
+      color: "$green10"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Spinner, {
+      size: "large",
+      color: "$yellow10"
+    })]
+  });
+}
+//# sourceMappingURL=SpinnerDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SpinnerDemo_exports","__export","SpinnerDemo","module","exports","import_jsx_runtime","require","import_gui","jsxs","YStack","p","gap","items"],"sources":["../../src/SpinnerDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,mBAAA;AAAAC,QAAA,CAAAD,mBAAA;EAAAE,WAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAgCT,YAAA,CAAAK,mBAI5B;AAFG,IAAAK,kBAAS,GAAcC,OAAA;EAAAC,UAAA,GAAAD,OAAA;AAC5B,SACEJ,YAAA;EACE,0BAAAG,kBAAA,CAACG,IAAA,EAAAD,UAAA,CAAAE,MAAQ;IACTC,CAAA;IAAwCC,GAC1C;IAEJC,KAAA","ignoreList":[]}

package/dist/cjs/StacksDemo.cjs

@@ -0,0 +1,107 @@
+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 StacksDemo_exports = {};
+__export(StacksDemo_exports, {
+  StacksDemo: () => StacksDemo
+});
+module.exports = __toCommonJS(StacksDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function StacksDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    maxW: 250,
+    p: "$2",
+    self: "center",
+    gap: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      flex: 1,
+      flexBasis: "auto",
+      borderWidth: 2,
+      borderColor: "$color",
+      rounded: "$4",
+      gap: "$2",
+      p: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      flex: 1,
+      flexBasis: "auto",
+      borderWidth: 2,
+      borderColor: "$color",
+      rounded: "$4",
+      gap: "$2",
+      p: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.ZStack, {
+      flex: 1,
+      flexBasis: "auto",
+      maxW: 50,
+      maxH: 85,
+      width: 100,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        fullscreen: !0,
+        rounded: "$4",
+        p: "$2",
+        borderColor: "$color",
+        borderWidth: 2
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 10,
+        x: 10,
+        borderWidth: 2,
+        rounded: "$4",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 20,
+        x: 20,
+        borderWidth: 2,
+        rounded: "$4",
+        p: "$2"
+      })]
+    })]
+  });
+}

package/dist/cjs/StacksDemo.native.js

@@ -0,0 +1,111 @@
+"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 StacksDemo_exports = {};
+__export(StacksDemo_exports, {
+  StacksDemo: () => StacksDemo
+});
+module.exports = __toCommonJS(StacksDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = require("react"),
+  import_gui = require("@hanzo/gui");
+function StacksDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    maxW: 250,
+    p: "$2",
+    self: "center",
+    gap: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      flex: 1,
+      flexBasis: "auto",
+      borderWidth: 2,
+      borderColor: "$color",
+      rounded: "$4",
+      gap: "$2",
+      p: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      flex: 1,
+      flexBasis: "auto",
+      borderWidth: 2,
+      borderColor: "$color",
+      rounded: "$4",
+      gap: "$2",
+      p: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        bg: "$color",
+        rounded: "$3",
+        p: "$2"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.ZStack, {
+      flex: 1,
+      flexBasis: "auto",
+      maxW: 50,
+      maxH: 85,
+      width: 100,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        fullscreen: !0,
+        rounded: "$4",
+        p: "$2",
+        borderColor: "$color",
+        borderWidth: 2
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 10,
+        x: 10,
+        borderWidth: 2,
+        rounded: "$4",
+        p: "$2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        borderColor: "$color",
+        fullscreen: !0,
+        y: 20,
+        x: 20,
+        borderWidth: 2,
+        rounded: "$4",
+        p: "$2"
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=StacksDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","StacksDemo_exports","__export","StacksDemo","module","exports","import_jsx_runtime","require","import_react","import_gui","jsxs","XStack","maxW","p","self","gap","children","YStack","flex","flexBasis","borderWidth","borderColor","rounded","jsx","bg","ZStack","maxH"],"sources":["../../src/StacksDemo.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;AACAC,MAAA,CAAAC,OAAA,GAAuCT,YAAA,CAAAK,kBAKjC;AAHC,IAAAK,kBAAsB,GAAAC,OAAA;EAAAC,YAAA,GAAAD,OAAA;EAAAE,UAAA,GAAAF,OAAA;AAC3B,SACEJ,WAAA;EACE,0BAAAG,kBAAA,CAAAI,IAAA,EAAAD,UAAA,CAAAE,MAAA;IAAAC,IAAC;IAAAC,CAAA;IAAAC,IACC,UAAM;IAAAC,GAAA,EACN;IAAUC,QACV,GAAa,eACD,IAAAV,kBAAA,CAAAI,IAAA,EAAAD,UAAA,CAAAQ,MAAA;MACZC,IAAA;MACAC,SAAI;MACJC,WAAE;MAEFC,WAAA;MAAAC,OAAA;MAAwCP,GACxC;MAAwCF,CAAA,EACxC;MAAwCG,QAAA,sBAAAV,kBAAA,CAAAiB,GAAA,EAAAd,UAAA,CAAAQ,MAAA;QAC1CO,EAAA;QAEAF,OAAA;QAACT,CAAA;MAAA,IACC,eAAM,IAAAP,kBAAA,CAAAiB,GAAA,EAAAd,UAAA,CAAAQ,MAAA;QACNO,EAAA,UAAU;QACVF,OAAA,EAAa;QACbT,CAAA;MACA,IACA,eAAI,IAAAP,kBAAA,CAAAiB,GAAA,EAAAd,UAAA,CAAAQ,MAAA;QACFO,EAAA;QAEFF,OAAA;QAAAT,CAAA;MACA;IACwC,uBAAAP,kBAAA,CAAAI,IAAA,EAAAD,UAAA,CAAAE,MAAA;MAC1CO,IAAA;MAEAC,SAAA;MACEC,WAAA;MACAC,WAAA;MAACC,OAAA;MAAAP,GAAA;MAAAF,CAAA,EACC;MAAYG,QACZ,GACA,eAAG,IAAAV,kBAAA,CAAAiB,GAAA,EAAAd,UAAA,CAAAQ,MAAA;QACHO,EAAG;QACHF,OAAA,MAAa;QACbT,CAAA;MACA,IAAE,mBAAAP,kBAAA,CAAAiB,GAAA,EAAAd,UAAA,CAAAQ,MAAA;QACJO,EAAA;QACAF,OAAA;QAACT,CAAA;MAAA,IACC,eAAY,IAAAP,kBAAA,CAAAiB,GAAA,EAAAd,UAAA,CAAAQ,MAAA;QACZO,EAAA,UAAU;QACVF,OAAG;QACHT,CAAG;MACH;IACQ,IACN,mBAAAP,kBAAA,CAAAI,IAAA,EAAAD,UAAA,CAAAgB,MAAA;MACJP,IAAA;MACFC,SAAA;MACFP,IAAA;MAEJc,IAAA","ignoreList":[]}