@tamagui/demos 1.114.4 → 1.115.0

package/dist/cjs/HeadingsDemo.cjs

@@ -0,0 +1,45 @@
+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 HeadingsDemo_exports = {};
+__export(HeadingsDemo_exports, {
+  HeadingsDemo: () => HeadingsDemo
+});
+module.exports = __toCommonJS(HeadingsDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function HeadingsDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    alignSelf: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H1, {
+      children: "Heading 1"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+      children: "Heading 2"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
+      children: "Heading 3"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H4, {
+      children: "Heading 4"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+      children: "Heading 5"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H6, {
+      children: "Heading 6"
+    })]
+  });
+}

package/dist/cjs/ImageDemo.cjs

@@ -0,0 +1,36 @@
+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 ImageDemo_exports = {};
+__export(ImageDemo_exports, {
+  ImageDemo: () => ImageDemo
+});
+module.exports = __toCommonJS(ImageDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ImageDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
+    source: {
+      uri: "https://picsum.photos/200/300",
+      width: 200,
+      height: 300
+    }
+  });
+}

package/dist/cjs/InputsDemo.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 InputsDemo_exports = {};
+__export(InputsDemo_exports, {
+  InputsDemo: () => InputsDemo
+});
+module.exports = __toCommonJS(InputsDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function InputsDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    width: 200,
+    minHeight: 250,
+    overflow: "hidden",
+    space: "$2",
+    margin: "$3",
+    padding: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(InputDemo, {
+      size: "$2"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputDemo, {
+      size: "$3"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputDemo, {
+      size: "$4"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.TextArea, {
+      placeholder: "Enter your details..."
+    })]
+  });
+}
+function InputDemo(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    space: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+      flex: 1,
+      size: props.size,
+      placeholder: `Size ${props.size}...`
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      size: props.size,
+      children: "Go"
+    })]
+  });
+}

package/dist/cjs/LabelDemo.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 LabelDemo_exports = {};
+__export(LabelDemo_exports, {
+  LabelDemo: () => LabelDemo
+});
+module.exports = __toCommonJS(LabelDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function LabelDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    padding: "$3",
+    minWidth: 300,
+    space: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      space: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+        width: 90,
+        htmlFor: "name",
+        children: "Name"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+        flex: 1,
+        id: "name",
+        defaultValue: "Nate Wienert"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      space: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+        width: 90,
+        htmlFor: "notify",
+        children: "Notifications"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Switch, {
+        id: "notify",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, {
+          animation: "quick"
+        })
+      })]
+    })]
+  });
+}

package/dist/cjs/LinearGradientDemo.cjs

@@ -0,0 +1,48 @@
+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 LinearGradientDemo_exports = {};
+__export(LinearGradientDemo_exports, {
+  LinearGradientDemo: () => LinearGradientDemo
+});
+module.exports = __toCommonJS(LinearGradientDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_linear_gradient = require("tamagui/linear-gradient"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function LinearGradientDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    space: !0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_linear_gradient.LinearGradient, {
+      width: "$6",
+      height: "$6",
+      borderRadius: "$4",
+      colors: ["$red10", "$yellow10"],
+      start: [0, 1],
+      end: [0, 0]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_linear_gradient.LinearGradient, {
+      width: "$6",
+      height: "$6",
+      borderRadius: "$4",
+      colors: ["$background", "$color"],
+      start: [1, 1],
+      end: [0, 0]
+    })]
+  });
+}

package/dist/cjs/ListItemDemo.cjs

@@ -0,0 +1,100 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var ListItemDemo_exports = {};
+__export(ListItemDemo_exports, {
+  ListItemDemo: () => ListItemDemo
+});
+module.exports = __toCommonJS(ListItemDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ListItemDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    $sm: {
+      flexDirection: "column"
+    },
+    paddingHorizontal: "$4",
+    space: !0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ListItemDemo1, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ListItemDemo2, {})]
+  });
+}
+function ListItemDemo1() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, {
+    alignSelf: "center",
+    bordered: !0,
+    width: 240,
+    size: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+        hoverTheme: !0,
+        icon: import_lucide_icons.Star,
+        title: "Star",
+        subTitle: "Twinkles"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+        hoverTheme: !0,
+        icon: import_lucide_icons.Moon,
+        children: "Moon"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+        hoverTheme: !0,
+        icon: import_lucide_icons.Sun,
+        children: "Sun"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+        hoverTheme: !0,
+        icon: import_lucide_icons.Cloud,
+        children: "Cloud"
+      })
+    })]
+  });
+}
+function ListItemDemo2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, {
+    alignSelf: "center",
+    bordered: !0,
+    width: 240,
+    size: "$5",
+    separator: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+        hoverTheme: !0,
+        pressTheme: !0,
+        title: "Star",
+        subTitle: "Subtitle",
+        icon: import_lucide_icons.Star,
+        iconAfter: import_lucide_icons.ChevronRight
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+        hoverTheme: !0,
+        pressTheme: !0,
+        title: "Moon",
+        subTitle: "Subtitle",
+        icon: import_lucide_icons.Moon,
+        iconAfter: import_lucide_icons.ChevronRight
+      })
+    })]
+  });
+}

package/dist/cjs/LucideIconsDemo.cjs

@@ -0,0 +1,93 @@
+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 LucideIconsDemo_exports = {};
+__export(LucideIconsDemo_exports, {
+  LucideIconsDemo: () => LucideIconsDemo
+});
+module.exports = __toCommonJS(LucideIconsDemo_exports);
+var import_react = __toESM(require("react")),
+  LucideIcons = __toESM(require("@tamagui/lucide-icons")),
+  import_react_native = require("react-native-web"),
+  import_tamagui = require("tamagui"),
+  import_Grid = require("./Grid.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const lucideIcons = Object.keys(
+// vite tree shaking workaround
+typeof LucideIcons < "u" ? LucideIcons : {}).map(name => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: LucideIcons[name]
+}));
+function LucideIconsDemo() {
+  const [searchRaw, setSearch] = import_react.default.useState(""),
+    search = (0, import_tamagui.useDebounceValue)(searchRaw, 400),
+    size = 100,
+    iconsMemo = import_react.default.useMemo(() => lucideIcons.filter(x => x.key.includes(search.toLowerCase())).map(({
+      Icon,
+      name
+    }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      height: size + 20,
+      alignItems: "center",
+      justifyContent: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+        size: size * 0.25
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spacer, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+        height: "$6",
+        wordWrap: "break-word",
+        maxWidth: "100%",
+        textAlign: "center",
+        paddingHorizontal: "$2",
+        size: "$1",
+        opacity: 0.5,
+        children: name
+      })]
+    }, name)), [search]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    minWidth: "100%",
+    padding: "$4",
+    paddingBottom: "$0",
+    space: !0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+      value: searchRaw,
+      onChangeText: setSearch,
+      placeholder: "Search..."
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      height: 420,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.ScrollView, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Grid.Grid, {
+          itemMinWidth: size,
+          children: iconsMemo
+        })
+      })
+    })]
+  });
+}

package/dist/cjs/NewInputsDemo.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 NewInputsDemo_exports = {};
+__export(NewInputsDemo_exports, {
+  NewInputsDemo: () => NewInputsDemo
+});
+module.exports = __toCommonJS(NewInputsDemo_exports);
+var import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function NewInputsDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    width: 200,
+    minHeight: 250,
+    overflow: "hidden",
+    space: "$2",
+    margin: "$3",
+    padding: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(InputDemo, {
+      size: "$2"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputDemo, {
+      size: "$3"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputDemo, {
+      size: "$4"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.TextArea, {
+      placeholder: "Enter your details..."
+    })]
+  });
+}
+function InputDemo(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    space: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+      flex: 1,
+      size: props.size,
+      placeholder: `Size ${props.size}...`
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      size: props.size,
+      children: "Go"
+    })]
+  });
+}

package/dist/cjs/PopoverDemo.cjs

@@ -0,0 +1,145 @@
+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 PopoverDemo_exports = {};
+__export(PopoverDemo_exports, {
+  Demo: () => Demo,
+  PopoverDemo: () => PopoverDemo
+});
+module.exports = __toCommonJS(PopoverDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_react = require("react"),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function PopoverDemo() {
+  const [shouldAdapt, setShouldAdapt] = (0, import_react.useState)(!0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "left",
+        Icon: import_lucide_icons.ChevronLeft,
+        Name: "left-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "bottom",
+        Icon: import_lucide_icons.ChevronDown,
+        Name: "bottom-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "top",
+        Icon: import_lucide_icons.ChevronUp,
+        Name: "top-popover"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Demo, {
+        shouldAdapt,
+        placement: "right",
+        Icon: import_lucide_icons.ChevronRight,
+        Name: "right-popover"
+      })]
+    }), !import_tamagui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Button, {
+      onPress: () => setShouldAdapt(!shouldAdapt),
+      children: ["Adapt to Sheet: ", `${shouldAdapt}`]
+    })]
+  });
+}
+function Demo({
+  Icon,
+  Name,
+  shouldAdapt,
+  ...props
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    size: "$5",
+    allowFlip: !0,
+    ...props,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        icon: Icon
+      })
+    }), shouldAdapt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Adapt, {
+      when: "sm",
+      platform: "touch",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Sheet, {
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Frame, {
+          padding: "$4",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {})
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Sheet.Overlay, {
+          animation: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      enterStyle: {
+        y: -10,
+        opacity: 0
+      },
+      exitStyle: {
+        y: -10,
+        opacity: 0
+      },
+      elevate: !0,
+      animation: ["quick", {
+        opacity: {
+          overshootClamping: !0
+        }
+      }],
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
+        borderWidth: 1,
+        borderColor: "$borderColor"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$3",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+            size: "$3",
+            htmlFor: Name,
+            children: "Name"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+            f: 1,
+            size: "$3",
+            id: Name
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Close, {
+          asChild: !0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$3",
+            onPress: () => {},
+            children: "Submit"
+          })
+        })]
+      })]
+    })]
+  });
+}