@tamagui/demos 2.7.7 → 3.0.0-beta.1091.1

package/dist/cjs/SelectDemo.cjs

@@ -5,236 +5,190 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__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: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SelectDemo_exports = {};
 __export(SelectDemo_exports, {
-  SelectDemo: () => SelectDemo,
-  SelectDemoContents: () => SelectDemoContents
+	SelectDemo: () => SelectDemo,
+	SelectDemoContents: () => SelectDemoContents
 });
 module.exports = __toCommonJS(SelectDemo_exports);
 var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_linear_gradient = require("@tamagui/linear-gradient");
 var import_react = __toESM(require("react"), 1);
 var import_tamagui = require("tamagui");
-var import_linear_gradient = require("tamagui/linear-gradient");
 var import_jsx_runtime = require("react/jsx-runtime");
 function SelectDemo() {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
-    name: "surface1",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        width: "100%",
-        items: "center",
-        gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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_tamagui.XStack, {
-        width: "100%",
-        items: "center",
-        gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
-          htmlFor: "select-demo-2",
-          flex: 1,
-          minW: 80,
-          children: "Native"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectDemoContents, {
-          id: "select-demo-2",
-          native: true
-        })]
-      })]
-    })
-  });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+		name: "level2",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+			gap: "4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+				width: "100%",
+				items: "center",
+				gap: "4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.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_tamagui.XStack, {
+				width: "100%",
+				items: "center",
+				gap: "4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+					htmlFor: "select-demo-2",
+					flex: 1,
+					minW: 80,
+					children: "Native"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectDemoContents, {
+					id: "select-demo-2",
+					native: true
+				})]
+			})]
+		})
+	});
 }
-const getItemLabel = value => items.find(item => item.name.toLowerCase() === value)?.name;
+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_tamagui.Select, {
-    value: val,
-    onValueChange: setVal,
-    disablePreventBodyScroll: true,
-    ...props,
-    renderValue: getItemLabel,
-    children: [props?.trigger || /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Select.Trigger, {
-      maxWidth: 220,
-      iconAfter: import_lucide_icons_2.ChevronDown,
-      borderRadius: "$4",
-      backgroundColor: "$background",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Select.Value, {
-        placeholder: "Something"
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Adapt, {
-      when: "maxMd",
-      platform: "touch",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, {
-        native: !!props.native,
-        modal: true,
-        dismissOnSnapToBottom: true,
-        transition: "medium",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.ScrollView, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {})
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
-          bg: "$shadowColor",
-          transition: "lazy",
-          enterStyle: {
-            opacity: 0
-          },
-          exitStyle: {
-            opacity: 0
-          }
-        })]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Select.Content, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollUpButton, {
-        items: "center",
-        justify: "center",
-        position: "relative",
-        width: "100%",
-        height: "$3",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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: true,
-          colors: ["$background", "transparent"],
-          rounded: "$4"
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Select.Viewport, {
-        minW: 200,
-        bg: "$background",
-        rounded: "$4",
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Select.Group, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Select.Label, {
-            fontWeight: "700",
-            children: "Fruits"
-          }), import_react.default.useMemo(() => items.map((item, i) => {
-            return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Select.Item, {
-              index: i,
-              value: item.name.toLowerCase(),
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemText, {
-                children: item.name
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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_tamagui.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_tamagui.getFontSize)(props.size ?? "$true")
-          })
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollDownButton, {
-        items: "center",
-        justify: "center",
-        position: "relative",
-        width: "100%",
-        height: "$3",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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: true,
-          colors: ["transparent", "$background"],
-          rounded: "$4"
-        })]
-      })]
-    })]
-  });
+	const [val, setVal] = import_react.default.useState("apple");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select, {
+		value: val,
+		onValueChange: setVal,
+		disablePreventBodyScroll: true,
+		lazyMount: true,
+		...props,
+		renderValue: getItemLabel,
+		children: [
+			props?.trigger || /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Trigger, {
+				maxWidth: 220,
+				borderRadius: "4",
+				backgroundColor: "background",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Value, { placeholder: "Something" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronDown, {}) })]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, {
+				when: "max-md",
+				platform: "touch",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, {
+					native: !!props.native,
+					modal: true,
+					dismissOnSnapToBottom: true,
+					transition: "medium",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Container, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Background, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.ScrollView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {}) })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
+						bg: "shadow-color",
+						transition: "lazy",
+						opacity: "enter:0 exit:0"
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Content, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollUpButton, {
+					items: "center",
+					justify: "center",
+					position: "relative",
+					width: "100%",
+					height: "3",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.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],
+						position: "absolute",
+						inset: 0,
+						rounded: "4",
+						colors: ["background", "transparent"]
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Viewport, {
+					minW: 200,
+					bg: "background",
+					rounded: "4",
+					borderWidth: 1,
+					borderColor: "border-color",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Group, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Label, {
+						fontWeight: "700",
+						children: "Fruits"
+					}), import_react.default.useMemo(() => items.map((item) => {
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Item, {
+							value: item.name.toLowerCase(),
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemText, { children: item.name }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.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_tamagui.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_tamagui.getFontSize)(props.size ?? true) })
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollDownButton, {
+					items: "center",
+					justify: "center",
+					position: "relative",
+					width: "100%",
+					height: "3",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.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],
+						position: "absolute",
+						inset: 0,
+						rounded: "4",
+						colors: ["transparent", "background"]
+					})]
+				})
+			] })
+		]
+	});
 }
-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"
-}];
+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" }
+];

package/dist/cjs/SelectDemo.native.cjs

@@ -0,0 +1,204 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SelectDemo_exports = {};
+__export(SelectDemo_exports, {
+	SelectDemo: () => SelectDemo,
+	SelectDemoContents: () => SelectDemoContents
+});
+module.exports = __toCommonJS(SelectDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_linear_gradient = require("@tamagui/linear-gradient");
+var import_react = __toESM(require("react"), 1);
+var import_tamagui = require("tamagui");
+function SelectDemo() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+		name: "level2",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+			gap: "4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+				width: "100%",
+				items: "center",
+				gap: "4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.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_tamagui.XStack, {
+				width: "100%",
+				items: "center",
+				gap: "4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+					htmlFor: "select-demo-2",
+					flex: 1,
+					minW: 80,
+					children: "Native"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectDemoContents, {
+					id: "select-demo-2",
+					native: true
+				})]
+			})]
+		})
+	});
+}
+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");
+	var _props_size;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select, {
+		value: val,
+		onValueChange: setVal,
+		disablePreventBodyScroll: true,
+		lazyMount: true,
+		...props,
+		renderValue: getItemLabel,
+		children: [
+			(props === null || props === void 0 ? void 0 : props.trigger) || /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Trigger, {
+				maxWidth: 220,
+				borderRadius: "4",
+				backgroundColor: "background",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Value, { placeholder: "Something" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronDown, {}) })]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, {
+				when: "max-md",
+				platform: "touch",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, {
+					native: !!props.native,
+					modal: true,
+					dismissOnSnapToBottom: true,
+					transition: "medium",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Container, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Background, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.ScrollView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {}) })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
+						bg: "shadow-color",
+						transition: "lazy",
+						opacity: "enter:0 exit:0"
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Content, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollUpButton, {
+					items: "center",
+					justify: "center",
+					position: "relative",
+					width: "100%",
+					height: "3",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.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],
+						position: "absolute",
+						inset: 0,
+						rounded: "4",
+						colors: ["background", "transparent"]
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Viewport, {
+					minW: 200,
+					bg: "background",
+					rounded: "4",
+					borderWidth: 1,
+					borderColor: "border-color",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Group, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Label, {
+						fontWeight: "700",
+						children: "Fruits"
+					}), import_react.default.useMemo(function() {
+						return items.map(function(item) {
+							return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Item, {
+								value: item.name.toLowerCase(),
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemText, { children: item.name }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.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_tamagui.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_tamagui.getFontSize)((_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : true) })
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollDownButton, {
+					items: "center",
+					justify: "center",
+					position: "relative",
+					width: "100%",
+					height: "3",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.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],
+						position: "absolute",
+						inset: 0,
+						rounded: "4",
+						colors: ["transparent", "background"]
+					})]
+				})
+			] })
+		]
+	});
+}
+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" }
+];