@hanzogui/demos 2.0.0

package/dist/cjs/SelectDemo.native.js

@@ -0,0 +1,252 @@
+"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 SelectDemo_exports = {};
+__export(SelectDemo_exports, {
+  SelectDemo: () => SelectDemo,
+  SelectDemoContents: () => SelectDemoContents
+});
+module.exports = __toCommonJS(SelectDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_linear_gradient = require("gui/linear-gradient");
+function SelectDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+    name: "surface1",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+        width: "100%",
+        items: "center",
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+          htmlFor: "select-demo-1",
+          flex: 1,
+          minW: 80,
+          children: "Custom"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectDemoContents, {
+          id: "select-demo-1"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+        width: "100%",
+        items: "center",
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+          htmlFor: "select-demo-2",
+          flex: 1,
+          minW: 80,
+          children: "Native"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectDemoContents, {
+          id: "select-demo-2",
+          native: !0
+        })]
+      })]
+    })
+  });
+}
+var getItemLabel = function (value) {
+  var _items_find;
+  return (_items_find = items.find(function (item) {
+    return item.name.toLowerCase() === value;
+  })) === null || _items_find === void 0 ? void 0 : _items_find.name;
+};
+function SelectDemoContents(props) {
+  var [val, setVal] = import_react.default.useState("apple"),
+    _props_size;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Select, {
+    value: val,
+    onValueChange: setVal,
+    disablePreventBodyScroll: !0,
+    ...props,
+    // renderValue enables SSR support by providing the label synchronously
+    renderValue: getItemLabel,
+    children: [props?.trigger || /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.Trigger, {
+      maxWidth: 220,
+      iconAfter: import_lucide_icons_2.ChevronDown,
+      borderRadius: "$4",
+      backgroundColor: "$background",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.Value, {
+        placeholder: "Something"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt, {
+      when: "maxMd",
+      platform: "touch",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Sheet, {
+        native: !!props.native,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        transition: "medium",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Frame, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.ScrollView, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Adapt.Contents, {})
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Sheet.Overlay, {
+          bg: "$shadowColor",
+          transition: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Select.Content, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Select.ScrollUpButton, {
+        items: "center",
+        justify: "center",
+        position: "relative",
+        width: "100%",
+        height: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+          z: 10,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronUp, {
+            size: 20
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_linear_gradient.LinearGradient, {
+          start: [0, 0],
+          end: [0, 1],
+          fullscreen: !0,
+          colors: ["$background", "transparent"],
+          rounded: "$4"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Select.Viewport, {
+        minW: 200,
+        bg: "$background",
+        rounded: "$4",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Select.Group, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.Label, {
+            fontWeight: "700",
+            children: "Fruits"
+          }), /* for longer lists memoizing these is useful */
+          import_react.default.useMemo(function () {
+            return items.map(function (item, i) {
+              return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Select.Item, {
+                index: i,
+                value: item.name.toLowerCase(),
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.ItemText, {
+                  children: item.name
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Select.ItemIndicator, {
+                  marginLeft: "auto",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
+                    size: 16
+                  })
+                })]
+              }, item.name);
+            });
+          }, [items])]
+        }), /* Native gets an extra icon */
+        props.native && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+          position: "absolute",
+          r: 0,
+          t: 16,
+          items: "center",
+          justify: "center",
+          width: "$4",
+          pointerEvents: "none",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronDown, {
+            size: (0, import_gui.getFontSize)((_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : "$true")
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Select.ScrollDownButton, {
+        items: "center",
+        justify: "center",
+        position: "relative",
+        width: "100%",
+        height: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+          z: 10,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronDown, {
+            size: 20
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_linear_gradient.LinearGradient, {
+          start: [0, 0],
+          end: [0, 1],
+          fullscreen: !0,
+          colors: ["transparent", "$background"],
+          rounded: "$4"
+        })]
+      })]
+    })]
+  });
+}
+var items = [{
+  name: "Apple"
+}, {
+  name: "Pear"
+}, {
+  name: "Blackberry"
+}, {
+  name: "Peach"
+}, {
+  name: "Apricot"
+}, {
+  name: "Melon"
+}, {
+  name: "Honeydew"
+}, {
+  name: "Starfruit"
+}, {
+  name: "Blueberry"
+}, {
+  name: "Raspberry"
+}, {
+  name: "Strawberry"
+}, {
+  name: "Mango"
+}, {
+  name: "Pineapple"
+}, {
+  name: "Lime"
+}, {
+  name: "Lemon"
+}, {
+  name: "Coconut"
+}, {
+  name: "Guava"
+}, {
+  name: "Papaya"
+}, {
+  name: "Orange"
+}, {
+  name: "Grape"
+}, {
+  name: "Jackfruit"
+}, {
+  name: "Durian"
+}];
+//# sourceMappingURL=SelectDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SelectDemo_exports","__export","SelectDemo","SelectDemoContents","module","exports","import_jsx_runtime","require","import_lucide_icons_2","import_react","__toESM","import_gui","import_linear_gradient","jsx","Theme","name","children","jsxs","YStack","gap","XStack","width","items","Label","htmlFor","flex","minW","id","native","getItemLabel","_items_find","find","item","toLowerCase","props","val","setVal","default","useState","_props_size","Select","onValueChange","disablePreventBodyScroll","renderValue","trigger","Trigger","maxWidth","iconAfter","ChevronDown","borderRadius","backgroundColor","Value","placeholder","Adapt","when","platform","Sheet","modal","dismissOnSnapToBottom","transition","Frame","ScrollView","Contents","Overlay","bg","enterStyle","opacity","exitStyle","Content","ScrollUpButton","justify","position","height","z","ChevronUp","size","LinearGradient","start","end","fullscreen","colors","rounded","Viewport","borderWidth","borderColor","Group","fontWeight","useMemo","map","i","Item","index","ItemText","ItemIndicator","marginLeft","Check","r"],"sources":["../../src/SelectDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/SeparatorDemo.cjs

@@ -0,0 +1,60 @@
+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 SeparatorDemo_exports = {};
+__export(SeparatorDemo_exports, {
+  SeparatorDemo: () => SeparatorDemo
+});
+module.exports = __toCommonJS(SeparatorDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function SeparatorDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    width: "100%",
+    maxW: 300,
+    mx: 16,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+      fontWeight: "800",
+      children: "Gui"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+      children: "A cross-platform component library."
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {
+      my: 15
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      height: 20,
+      items: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+        children: "Blog"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {
+        self: "stretch",
+        vertical: !0,
+        mx: 16
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+        children: "Docs"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {
+        self: "stretch",
+        vertical: !0,
+        mx: 16
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+        children: "Source"
+      })]
+    })]
+  });
+}

package/dist/cjs/SeparatorDemo.native.js

@@ -0,0 +1,63 @@
+"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 SeparatorDemo_exports = {};
+__export(SeparatorDemo_exports, {
+  SeparatorDemo: () => SeparatorDemo
+});
+module.exports = __toCommonJS(SeparatorDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function SeparatorDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    width: "100%",
+    maxW: 300,
+    mx: 16,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+      fontWeight: "800",
+      children: "Gui"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+      children: "A cross-platform component library."
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {
+      my: 15
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      height: 20,
+      items: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+        children: "Blog"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {
+        self: "stretch",
+        vertical: !0,
+        mx: 16
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+        children: "Docs"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {
+        self: "stretch",
+        vertical: !0,
+        mx: 16
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+        children: "Source"
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=SeparatorDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SeparatorDemo_exports","__export","SeparatorDemo","module","exports","import_jsx_runtime","require","import_gui","jsxs","YStack","width","maxW","mx","children","jsx","Paragraph","fontWeight"],"sources":["../../src/SeparatorDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAqDT,YAAA,CAAAK,qBAK/C;AAHC,IAAAK,kBAAS,GAAgBC,OAAA;EAAAC,UAAA,GAAAD,OAAA;AAC9B,SACEJ,cAAA;EACE,0BAAAG,kBAAA,CAACG,IAAA,EAAAD,UAAA,CAAAE,MAAA,EAAU;IACXC,KAAA;IACAC,IAAA;IACAC,EAAA;IACEC,QAAA,GACA,mBAAAR,kBAAA,CAAAS,GAAA,EAACP,UAAA,CAAAQ,SAAA;MACDC,UAAA;MACAH,QAAA;IACA,IAAiB,eACnB,IAAAR,kBAAA,CAAAS,GAAA,EAAAP,UAAA,CAAAQ,SAAA;MACFF,QAAA;IAEJ,I","ignoreList":[]}

package/dist/cjs/ShapesDemo.cjs

@@ -0,0 +1,42 @@
+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 ShapesDemo_exports = {};
+__export(ShapesDemo_exports, {
+  ShapesDemo: () => ShapesDemo
+});
+module.exports = __toCommonJS(ShapesDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ShapesDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    p: "$2",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      size: 100,
+      bg: "$color",
+      elevation: "$4"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+      size: 100,
+      bg: "$color",
+      elevation: "$4"
+    })]
+  });
+}

package/dist/cjs/ShapesDemo.native.js

@@ -0,0 +1,45 @@
+"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 ShapesDemo_exports = {};
+__export(ShapesDemo_exports, {
+  ShapesDemo: () => ShapesDemo
+});
+module.exports = __toCommonJS(ShapesDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function ShapesDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    p: "$2",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+      size: 100,
+      bg: "$color",
+      elevation: "$4"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+      size: 100,
+      bg: "$color",
+      elevation: "$4"
+    })]
+  });
+}
+//# sourceMappingURL=ShapesDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ShapesDemo_exports","__export","ShapesDemo","module","exports","import_jsx_runtime","require","import_gui","jsxs","XStack","p","gap","children"],"sources":["../../src/ShapesDemo.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,GAAuCT,YAAA,CAAAK,kBAInC;AAFG,IAAAK,kBAAsB,GAAAC,OAAA;EAAAC,UAAA,GAAAD,OAAA;AAC3B,SACEJ,WAAA;EACE,0BAAAG,kBAAA,CAACG,IAAA,EAAAD,UAAA,CAAAE,MAAO;IACRC,CAAA;IAA8CC,GAChD;IAEJC,QAAA,G","ignoreList":[]}

package/dist/cjs/SheetDemo.cjs

@@ -0,0 +1,192 @@
+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_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_sheet = require("@hanzogui/sheet"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const spModes = ["percent", "constant", "fit", "mixed"],
+  SheetDemo = () => {
+    const [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: () => setOpen(!0),
+            children: "Open"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+            onPress: () => setModal(x => !x),
+            children: modal ? "Type: Modal" : "Type: Inline"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+            onPress: () => setSnapPointsMode(prev => 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: () => setMixedFitDemo(x => !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 = (0, import_react.memo)(({
+    modal,
+    isPercent,
+    innerOpen,
+    setInnerOpen,
+    setOpen
+  }) => /* @__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: () => 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: () => 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: () => props.onOpenChange?.(!1)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H2, {
+            children: "Hello world"
+          }), [1, 2, 3, 4, 5, 6, 7, 8].map(i => /* @__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))]
+        })
+      })
+    })]
+  });
+}