@multiplatform.one/forms 6.0.0

package/dist/cjs/AdaptivePopup/AdaptivePopup.stories.native.js

@@ -0,0 +1,269 @@
+"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: 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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var AdaptivePopup_stories_exports = {};
+__export(AdaptivePopup_stories_exports, {
+  Disabled: () => Disabled,
+  Fullscreen: () => Fullscreen,
+  Main: () => Main,
+  NoCloseButton: () => NoCloseButton,
+  Sizes: () => Sizes,
+  WithoutTrigger: () => WithoutTrigger,
+  default: () => AdaptivePopup_stories_default
+});
+module.exports = __toCommonJS(AdaptivePopup_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../Button/index.native.js");
+var import_Input = require("../fields/Input/index.native.js");
+var import_index = require("./index.native.js");
+var meta = {
+  title: "Forms/AdaptivePopup",
+  component: import_index.AdaptivePopup,
+  parameters: {
+    docs: {
+      description: {
+        component: "A responsive popup component that renders as a bottom Sheet on mobile/small screens and a centered Dialog on desktop. Resize your browser to see the adaptive behavior."
+      }
+    }
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl", "fullscreen"]
+    },
+    title: {
+      control: "text"
+    },
+    description: {
+      control: "text"
+    },
+    showCloseButton: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    }
+  }
+};
+var AdaptivePopup_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var Example = function Example2() {
+      var [open, setOpen] = (0, import_react.useState)(false);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.AdaptivePopup, {
+        open,
+        onOpenChange: setOpen,
+        title: "Edit Profile",
+        description: "Make changes to your profile here.",
+        trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          children: "Open Popup"
+        }),
+        footer: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$2",
+          justifyContent: "flex-end",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            chromeless: true,
+            onPress: function onPress() {
+              return setOpen(false);
+            },
+            children: "Cancel"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            onPress: function onPress() {
+              return setOpen(false);
+            },
+            children: "Save"
+          })]
+        }),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
+            label: "Name",
+            placeholder: "Enter your name"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Input.Input, {
+            label: "Email",
+            placeholder: "Enter your email"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Example, {});
+  }
+};
+var Sizes = {
+  render: function render2() {
+    var SizeExample = function SizeExample2(param) {
+      var {
+        size
+      } = param;
+      var [open, setOpen] = (0, import_react.useState)(false);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.AdaptivePopup, {
+        open,
+        onOpenChange: setOpen,
+        title: `Size: ${size}`,
+        size,
+        trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          children: size
+        }),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
+          children: ['This popup uses size="', size, '". On desktop this controls the max-width. On mobile it always renders as a sheet.']
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SizeExample, {
+        size: "sm"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SizeExample, {
+        size: "md"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SizeExample, {
+        size: "lg"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SizeExample, {
+        size: "xl"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SizeExample, {
+        size: "fullscreen"
+      })]
+    });
+  }
+};
+var Fullscreen = {
+  render: function render3() {
+    var Example = function Example2() {
+      var [open, setOpen] = (0, import_react.useState)(false);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.AdaptivePopup, {
+        open,
+        onOpenChange: setOpen,
+        title: "Fullscreen View",
+        size: "fullscreen",
+        trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          children: "Open Fullscreen"
+        }),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          flex: 1,
+          backgroundColor: "$color3",
+          borderRadius: "$2",
+          padding: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            children: "This content fills the available space."
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            color: "$color9",
+            marginTop: "$2",
+            children: "Great for maps, image viewers, or any content that benefits from more space."
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Example, {});
+  }
+};
+var WithoutTrigger = {
+  render: function render4() {
+    var Example = function Example2() {
+      var [open, setOpen] = (0, import_react.useState)(false);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          children: "Control the popup externally without using the trigger prop:"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          onPress: function onPress() {
+            return setOpen(true);
+          },
+          children: "Open via external state"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.AdaptivePopup, {
+          open,
+          onOpenChange: setOpen,
+          title: "Externally Controlled",
+          description: "This popup was opened via external state management.",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            children: "Useful when you need to open the popup from multiple places or in response to async events."
+          })
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Example, {});
+  }
+};
+var NoCloseButton = {
+  render: function render5() {
+    var Example = function Example2() {
+      var [open, setOpen] = (0, import_react.useState)(false);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.AdaptivePopup, {
+        open,
+        onOpenChange: setOpen,
+        title: "Confirmation",
+        showCloseButton: false,
+        trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          children: "Delete Item"
+        }),
+        footer: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$2",
+          justifyContent: "flex-end",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            chromeless: true,
+            onPress: function onPress() {
+              return setOpen(false);
+            },
+            children: "Cancel"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            backgroundColor: "$red9",
+            onPress: function onPress() {
+              (0, import_storybook.action)("delete")();
+              setOpen(false);
+            },
+            children: "Delete"
+          })]
+        }),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+          children: "Are you sure you want to delete this item? This action cannot be undone."
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Example, {});
+  }
+};
+var Disabled = {
+  render: function render6() {
+    var Example = function Example2() {
+      var [open, setOpen] = (0, import_react.useState)(false);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.AdaptivePopup, {
+        open,
+        onOpenChange: setOpen,
+        title: "Disabled",
+        disabled: true,
+        trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          children: "Disabled Trigger"
+        }),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+          children: "You should not see this."
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Example, {});
+  }
+};
+//# sourceMappingURL=AdaptivePopup.stories.native.js.map

package/dist/cjs/AdaptivePopup/AdaptivePopup.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AdaptivePopup_stories_exports","__export","Disabled","Fullscreen","Main","NoCloseButton","Sizes","WithoutTrigger","default","AdaptivePopup_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react","import_tamagui","import_Button","import_Input","import_index","meta","title","component","AdaptivePopup","parameters","docs","description","argTypes","size","control","options","showCloseButton","disabled","name","render","Example","Example2","open","setOpen","useState","jsx","onOpenChange","trigger","Button","children","footer","jsxs","XStack","gap","justifyContent","chromeless","onPress","YStack","Input","label","placeholder","render2","SizeExample","SizeExample2","param","Paragraph","flexWrap","render3","flex","backgroundColor","borderRadius","padding","Text","color","marginTop","render4"],"sources":["../../../src/AdaptivePopup/AdaptivePopup.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/AdaptivePopup/index.cjs

@@ -0,0 +1,186 @@
+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: 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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var AdaptivePopup_exports = {};
+__export(AdaptivePopup_exports, {
+  AdaptivePopup: () => AdaptivePopup
+});
+module.exports = __toCommonJS(AdaptivePopup_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_Button = require("../Button/index.cjs");
+var import_zIndex = require("../shared/zIndex.cjs");
+var import_FloatingPanel = require("../FloatingPanel/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const sizeToWidth = {
+  sm: 400,
+  md: 600,
+  lg: 800,
+  xl: 1e3,
+  fullscreen: "95vw"
+};
+const sizeToHeight = {
+  sm: "auto",
+  md: "auto",
+  lg: "auto",
+  xl: "auto",
+  fullscreen: "90vh"
+};
+function AdaptivePopup({
+  open,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  children,
+  size = "md",
+  showCloseButton = true,
+  footer,
+  disabled
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const media = (0, import_tamagui.useMedia)();
+  const viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
+  const isDesktop = typeof window !== "undefined" ? viewportGtSm : media.gtSm === true;
+  const maxWidth = sizeToWidth[size];
+  const maxHeight = sizeToHeight[size];
+  const headerContent = (title || showCloseButton) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    justifyContent: "space-between",
+    alignItems: "center",
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: 1,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+        ...knobProps.heading,
+        fontSize: "$6",
+        children: title
+      })
+    }), showCloseButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        size: "$3",
+        circular: true,
+        chromeless: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {
+          size: 20
+        })
+      })
+    })]
+  });
+  const descriptionContent = description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+    ...knobProps.body,
+    color: "$color11",
+    fontSize: knobProps.sizeToken,
+    children: description
+  });
+  const footerContent = footer && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    paddingTop: "$2",
+    children: footer
+  });
+  if (!isDesktop) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [trigger && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        onPress: () => !disabled && onOpenChange(true),
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        children: trigger
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, {
+        modal: true,
+        open,
+        onOpenChange,
+        dismissOnSnapToBottom: true,
+        snapPointsMode: size === "fullscreen" ? "percent" : "fit",
+        snapPoints: size === "fullscreen" ? [92] : void 0,
+        zIndex: import_zIndex.zIndex.sheet,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
+          backgroundColor: "$shadow6",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Frame, {
+          ...knobProps.panelPadding,
+          ...knobProps.gap,
+          children: [headerContent, descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            flex: size === "fullscreen" ? 1 : void 0,
+            children
+          }), footerContent]
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog, {
+    modal: true,
+    open,
+    onOpenChange,
+    children: [trigger && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Trigger, {
+      asChild: true,
+      disabled,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        children: trigger
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
+      zIndex: import_zIndex.zIndex.dropdown,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Overlay, {
+        backgroundColor: "$shadow6",
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Content, {
+        bordered: true,
+        elevate: true,
+        enterStyle: {
+          opacity: 0,
+          scale: 0.96,
+          y: -10
+        },
+        exitStyle: {
+          opacity: 0,
+          scale: 0.96,
+          y: -10
+        },
+        maxWidth,
+        maxHeight,
+        width: "90vw",
+        backgroundColor: "$background",
+        ...knobProps.panelPadding,
+        ...knobProps.gap,
+        ...knobProps.borderRadius,
+        children: [headerContent && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, {
+          children: headerContent
+        }), descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          flex: size === "fullscreen" ? 1 : void 0,
+          children
+        }), footerContent]
+      }, "content")]
+    })]
+  });
+}

package/dist/cjs/AdaptivePopup/index.native.js

@@ -0,0 +1,192 @@
+"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: 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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var AdaptivePopup_exports = {};
+__export(AdaptivePopup_exports, {
+  AdaptivePopup: () => AdaptivePopup
+});
+module.exports = __toCommonJS(AdaptivePopup_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_Button = require("../Button/index.native.js");
+var import_zIndex = require("../shared/zIndex.native.js");
+var import_FloatingPanel = require("../FloatingPanel/index.native.js");
+var sizeToWidth = {
+  sm: 400,
+  md: 600,
+  lg: 800,
+  xl: 1e3,
+  fullscreen: "95vw"
+};
+var sizeToHeight = {
+  sm: "auto",
+  md: "auto",
+  lg: "auto",
+  xl: "auto",
+  fullscreen: "90vh"
+};
+function AdaptivePopup(param) {
+  var {
+    open,
+    onOpenChange,
+    trigger,
+    title,
+    description,
+    children,
+    size = "md",
+    showCloseButton = true,
+    footer,
+    disabled
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var media = (0, import_tamagui.useMedia)();
+  var viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
+  var isDesktop = typeof window !== "undefined" ? viewportGtSm : media.gtSm === true;
+  var maxWidth = sizeToWidth[size];
+  var maxHeight = sizeToHeight[size];
+  var headerContent = (title || showCloseButton) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    justifyContent: "space-between",
+    alignItems: "center",
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: 1,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+        ...knobProps.heading,
+        fontSize: "$6",
+        children: title
+      })
+    }), showCloseButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        size: "$3",
+        circular: true,
+        chromeless: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {
+          size: 20
+        })
+      })
+    })]
+  });
+  var descriptionContent = description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+    ...knobProps.body,
+    color: "$color11",
+    fontSize: knobProps.sizeToken,
+    children: description
+  });
+  var footerContent = footer && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    paddingTop: "$2",
+    children: footer
+  });
+  if (!isDesktop) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [trigger && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        onPress: function onPress() {
+          return !disabled && onOpenChange(true);
+        },
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        children: trigger
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, {
+        modal: true,
+        open,
+        onOpenChange,
+        dismissOnSnapToBottom: true,
+        snapPointsMode: size === "fullscreen" ? "percent" : "fit",
+        snapPoints: size === "fullscreen" ? [92] : void 0,
+        zIndex: import_zIndex.zIndex.sheet,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
+          backgroundColor: "$shadow6",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Frame, {
+          ...knobProps.panelPadding,
+          ...knobProps.gap,
+          children: [headerContent, descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            flex: size === "fullscreen" ? 1 : void 0,
+            children
+          }), footerContent]
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog, {
+    modal: true,
+    open,
+    onOpenChange,
+    children: [trigger && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Trigger, {
+      asChild: true,
+      disabled,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        children: trigger
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
+      zIndex: import_zIndex.zIndex.dropdown,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Overlay, {
+        backgroundColor: "$shadow6",
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Content, {
+        bordered: true,
+        elevate: true,
+        enterStyle: {
+          opacity: 0,
+          scale: 0.96,
+          y: -10
+        },
+        exitStyle: {
+          opacity: 0,
+          scale: 0.96,
+          y: -10
+        },
+        maxWidth,
+        maxHeight,
+        width: "90vw",
+        backgroundColor: "$background",
+        ...knobProps.panelPadding,
+        ...knobProps.gap,
+        ...knobProps.borderRadius,
+        children: [headerContent && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, {
+          children: headerContent
+        }), descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          flex: size === "fullscreen" ? 1 : void 0,
+          children
+        }), footerContent]
+      }, "content")]
+    })]
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/AdaptivePopup/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AdaptivePopup_exports","__export","AdaptivePopup","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_lucide_icons_2","import_Button","import_zIndex","import_FloatingPanel","sizeToWidth","sm","md","lg","xl","fullscreen","sizeToHeight","param","open","onOpenChange","trigger","title","description","children","size","showCloseButton","footer","disabled","knobProps","useResolvedKnobs","media","useMedia","viewportGtSm","useViewportGtSm","isDesktop","window","gtSm","maxWidth","maxHeight","headerContent","jsxs","XStack","justifyContent","alignItems","jsx","YStack","flex","Dialog","Title","heading","fontSize","Close","asChild","Button","circular","chromeless","X","descriptionContent","Description","body","color","sizeToken","footerContent","paddingTop","Fragment","View","onPress","cursor","opacity","Sheet","modal","dismissOnSnapToBottom","snapPointsMode","snapPoints","zIndex","sheet","Overlay","backgroundColor","enterStyle","exitStyle","Handle","Frame","panelPadding","gap","Trigger"],"sources":["../../../src/AdaptivePopup/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}