@hanzogui/demos 2.0.0

package/dist/cjs/ReplaceThemeDemo.cjs

@@ -0,0 +1,78 @@
+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 ReplaceThemeDemo_exports = {};
+__export(ReplaceThemeDemo_exports, {
+  ReplaceThemeDemo: () => ReplaceThemeDemo
+});
+module.exports = __toCommonJS(ReplaceThemeDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_theme = require("@hanzogui/theme"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ReplaceThemeDemo() {
+  const [theme, setTheme] = import_react.default.useState(),
+    update = (0, import_gui.useForceUpdate)();
+  return (0, import_gui.useIsomorphicLayoutEffect)(() => {
+    (0, import_theme.addTheme)({
+      name: "mytheme",
+      insertCSS: !0,
+      theme: {
+        color: "red",
+        color2: "green"
+      }
+    }), setTheme("mytheme");
+  }, []), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+      gap: "$5",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+        name: theme ?? null,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+          rounded: "$8",
+          size: 100,
+          bg: "$color"
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      onPress: () => {
+        (0, import_theme.replaceTheme)({
+          name: "mytheme",
+          theme: {
+            color: "blue"
+          }
+        }), update();
+      },
+      children: "Replace theme to only have $color: blue"
+    })]
+  });
+}

package/dist/cjs/ReplaceThemeDemo.native.js

@@ -0,0 +1,81 @@
+"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 ReplaceThemeDemo_exports = {};
+__export(ReplaceThemeDemo_exports, {
+  ReplaceThemeDemo: () => ReplaceThemeDemo
+});
+module.exports = __toCommonJS(ReplaceThemeDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_theme = require("@hanzogui/theme"),
+  import_gui = require("@hanzo/gui");
+function ReplaceThemeDemo() {
+  var [theme, setTheme] = import_react.default.useState(),
+    update = (0, import_gui.useForceUpdate)();
+  return (0, import_gui.useIsomorphicLayoutEffect)(function () {
+    (0, import_theme.addTheme)({
+      name: "mytheme",
+      insertCSS: !0,
+      theme: {
+        color: "red",
+        color2: "green"
+      }
+    }), setTheme("mytheme");
+  }, []), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+      gap: "$5",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Theme, {
+        name: theme ?? null,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+          rounded: "$8",
+          size: 100,
+          bg: "$color"
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      onPress: function () {
+        (0, import_theme.replaceTheme)({
+          name: "mytheme",
+          theme: {
+            color: "blue"
+          }
+        }), update();
+      },
+      children: "Replace theme to only have $color: blue"
+    })]
+  });
+}
+//# sourceMappingURL=ReplaceThemeDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ReplaceThemeDemo_exports","__export","ReplaceThemeDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_theme","import_gui","theme","setTheme","default","useState","update","useForceUpdate","useIsomorphicLayoutEffect","addTheme","name","insertCSS","color","color2","jsxs","YStack","items","gap","children","jsx","XStack","Theme","Square","rounded","size","bg","Button","onPress"],"sources":["../../src/ReplaceThemeDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,wBAAA;AAAAC,QAAA,CAAAD,wBAAA;EAAAE,gBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,wBAClB;AAYO,IAAAK,kBAAS,GAAAC,OAAmB;EAAAC,YAAA,GAAAC,OAAA,CAAAF,OAAA;EAAAG,YAAA,GAAAH,OAAA;EAAAI,UAAA,GAAAJ,OAAA;AACjC,SAAOJ,gBAAeA,CAAA,EAAI;EAG1B,KAAAS,KAAA,EAAAC,QAAA,IAAAL,YAAA,CAAAM,OAAA,CAAAC,QAA0B,EAAM;IAAAC,MAAA,OAAAL,UAAA,CAAAM,cAAA;EAC9B,WAAAN,UAAA,CAAAO,yBAAS;IAAA,EACP,EAAAR,YAAM,CAAAS,QAAA;MACNC,IAAA,WAAW;MACXC,SAAO;MAAAT,KACL;QACAU,KAAA,OAAQ;QACVC,MAAA;MACD;IAEH,CAAG,CAAC,EAACV,QAGH;EACE,2BAAAP,kBAAC,CAAAkB,IAAA,EAAAb,UAAA,CAAAc,MAAO,EAAI;IAMZC,KAAA;IAAAC,GAAC;IAAAC,QAAA,kBACU,CAAM,GAAAtB,kBAAA,CAAAuB,GAAA,EAAAlB,UAAA,CAAAmB,MAAA;MACbH,GAAA;MAAaC,QACX,EAAM,mBAAAtB,kBAAA,CAAAuB,GAAA,EAAAlB,UAAA,CAAAoB,KAAA;QAAAX,IACN,EAAAR,KAAO;QAAAgB,QACL,iBAAO,IAAAtB,kBAAA,CAAAuB,GAAA,EAAAlB,UAAA,CAAAqB,MAAA;UACTC,OAAA;UACDC,IACD,KAAO;UACTC,EAAA;QACD;MAAA;IAED,IACF,mBAAA7B,kBAAA,CAAAuB,GAAA,EAAAlB,UAAA,CAAAyB,MAAA;MAEJC,OAAA,WAAAA,CAAA","ignoreList":[]}

package/dist/cjs/ScrollViewDemo.cjs

@@ -0,0 +1,74 @@
+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 ScrollViewDemo_exports = {};
+__export(ScrollViewDemo_exports, {
+  ScrollViewDemo: () => ScrollViewDemo
+});
+module.exports = __toCommonJS(ScrollViewDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ScrollViewDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.ScrollView, {
+    maxH: 250,
+    width: "75%",
+    bg: "$background",
+    p: "$4",
+    rounded: "$4",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      flexWrap: "wrap",
+      items: "center",
+      justify: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color6"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color8"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color10"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color11"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color12"
+      })]
+    })
+  });
+}

package/dist/cjs/ScrollViewDemo.native.js

@@ -0,0 +1,77 @@
+"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 ScrollViewDemo_exports = {};
+__export(ScrollViewDemo_exports, {
+  ScrollViewDemo: () => ScrollViewDemo
+});
+module.exports = __toCommonJS(ScrollViewDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui");
+function ScrollViewDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.ScrollView, {
+    maxH: 250,
+    width: "75%",
+    bg: "$background",
+    p: "$4",
+    rounded: "$4",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      flexWrap: "wrap",
+      items: "center",
+      justify: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color6"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color7"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color8"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color9"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color10"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color11"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color12"
+      })]
+    })
+  });
+}
+//# sourceMappingURL=ScrollViewDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ScrollViewDemo_exports","__export","ScrollViewDemo","module","exports","import_jsx_runtime","require","import_gui","jsx","ScrollView","maxH","width","bg","p","rounded","children","jsxs","XStack","flexWrap","items","justify"],"sources":["../../src/ScrollViewDemo.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;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAmDT,YAAA,CAAAK,sBAK7C;AAHC,IAAAK,kBAAS,GAAAC,OAAiB;EAAAC,UAAA,GAAAD,OAAA;AAC/B,SACEJ,eAAA;EAEI,0BAAAG,kBAAA,CAACG,GAAA,EAAAD,UAAA,CAAAE,UAAS;IACVC,IAAA;IACAC,KAAA;IACAC,EAAA;IACAC,CAAA;IACAC,OAAA;IACAC,QAAA,qBAAAV,kBAAC,CAAAW,IAAA,EAAAT,UAAO,CAAAU,MAAE,EAAK;MACfC,QAAA;MACFC,KACF;MAEJC,OAAA","ignoreList":[]}

package/dist/cjs/SelectDemo.cjs

@@ -0,0 +1,236 @@
+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_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"),
+  import_jsx_runtime = require("react/jsx-runtime");
+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
+        })]
+      })]
+    })
+  });
+}
+const getItemLabel = value => items.find(item => item.name.toLowerCase() === value)?.name;
+function SelectDemoContents(props) {
+  const [val, setVal] = import_react.default.useState("apple");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.Select, {
+    value: val,
+    onValueChange: setVal,
+    disablePreventBodyScroll: !0,
+    ...props,
+    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"
+          }), import_react.default.useMemo(() => items.map((item, i) => /* @__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])]
+        }), 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 ?? "$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"
+        })]
+      })]
+    })]
+  });
+}
+const 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"
+}];