@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/AdaptivePopup/index.cjs

@@ -29,7 +29,7 @@ var import_react = require("react");
 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_colorRamps = require("../shared/colorRamps.cjs");
 var import_focusManagement = require("../shared/focusManagement.cjs");
 var import_useSheetEscapeDismiss = require("../shared/useSheetEscapeDismiss.cjs");
 var import_zIndex = require("../shared/zIndex.cjs");
@@ -49,6 +49,85 @@ const sizeToHeight = {
   xl: "auto",
   fullscreen: "90vh"
 };
+const overlayFrameFocus = {
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
+  }
+};
+function VisuallyHidden({
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    overflow: "hidden",
+    opacity: 0,
+    pointerEvents: "none",
+    children
+  });
+}
+function PopupCloseButton({
+  onPress
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const {
+    px,
+    hitSlop,
+    ...box
+  } = knobProps.nestedControl;
+  const glyph = Math.max(12, Math.round(px * 0.5));
+  const onKeyDown = e => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress();
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ...box,
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 1,
+    role: "button",
+    "aria-label": "Close",
+    "data-testid": "adaptive-popup-close",
+    "data-nested-px": px,
+    cursor: "pointer",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: knobProps.pointy ? 0 : 9999,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)(),
+    onPress,
+    ...(!import_tamagui.isWeb ? {
+      hitSlop
+    } : {}),
+    ...(import_tamagui.isWeb ? {
+      tabIndex: 0,
+      onKeyDown
+    } : {
+      accessible: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Close"
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {
+      size: glyph,
+      color: import_colorRamps.formCommonColors.muted
+    })
+  });
+}
 function AdaptivePopup({
   open,
   onOpenChange,
@@ -64,6 +143,11 @@ function AdaptivePopup({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const {
+    knobProps: nestedKnobs
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
   const media = (0, import_tamagui.useMedia)();
   const viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   const isDesktop = typeof window !== "undefined" ? viewportGtSm : media.gtSm === true;
@@ -73,50 +157,80 @@ function AdaptivePopup({
   (0, import_focusManagement.useSheetModalFocus)(open && !isDesktop, sheetFrameRef);
   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 closePx = nestedKnobs.nestedControl.px;
+  const openFromTrigger = (0, import_react.useCallback)(() => {
+    if (!disabled) onOpenChange(true);
+  }, [disabled, onOpenChange]);
+  const triggerActivation = import_tamagui.isWeb ? {
+    onClickCapture: openFromTrigger
+  } : void 0;
+  const triggerWrap = {
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    "data-testid": "adaptive-popup-trigger",
+    ...(import_tamagui.isWeb ? {
+      tabIndex: -1,
+      role: "presentation",
+      ...triggerActivation
+    } : {
+      onPress: openFromTrigger
+    })
+  };
+  const headerContent = (title || showCloseButton) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingRight: showCloseButton ? closePx : void 0,
+      minHeight: showCloseButton ? closePx : void 0,
+      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,
+          children: title
         })
-      })
-    })]
-  });
-  const descriptionContent = description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
-    ...knobProps.body,
-    color: "$color11",
-    fontSize: knobProps.sizeToken,
-    children: description
+      }) : null
+    })
   });
   const footerContent = footer && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     paddingTop: "$2",
     children: footer
   });
+  const body = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    flex: size === "fullscreen" ? 1 : void 0,
+    position: "relative",
+    ...knobProps.gap,
+    children: [!title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(VisuallyHidden, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+        children: "Dialog"
+      })
+    }) : null, headerContent, description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+      ...knobProps.body,
+      ...knobProps.label,
+      color: import_colorRamps.formCommonColors.muted,
+      children: description
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(VisuallyHidden, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+        children: " "
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: size === "fullscreen" ? 1 : void 0,
+      children
+    }), footerContent, showCloseButton ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopupCloseButton, {
+      onPress: () => onOpenChange(false)
+    }) : null]
+  });
   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,
+        ...triggerWrap,
         children: trigger
       }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, {
         modal: true,
         open,
         onOpenChange,
         dismissOnSnapToBottom: true,
+        dismissOnOverlayPress: true,
+        moveOnKeyboardChange: true,
         snapPointsMode: size === "fullscreen" ? "percent" : "fit",
         snapPoints: size === "fullscreen" ? [92] : void 0,
         zIndex: import_zIndex.zIndex.sheet,
@@ -130,17 +244,29 @@ function AdaptivePopup({
           exitStyle: {
             opacity: 0
           }
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Frame, {
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {
+          ...{
+            "aria-hidden": true
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, {
           ...{
             ref: sheetFrameRef,
             tabIndex: -1
           },
+          unstyled: true,
+          position: "relative",
+          role: "dialog",
+          "aria-modal": true,
+          "aria-label": typeof title === "string" ? title : "Dialog",
+          "data-testid": "adaptive-popup-surface",
+          "data-adaptive-popup-mode": "sheet",
+          ...knobProps.elevatedSurface,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          ...overlayFrameFocus,
           ...knobProps.panelPadding,
-          ...knobProps.gap,
-          children: [headerContent, descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-            flex: size === "fullscreen" ? 1 : void 0,
-            children
-          }), footerContent]
+          transition: knobProps.transition,
+          children: body
         })]
       })]
     });
@@ -153,8 +279,7 @@ function AdaptivePopup({
       asChild: true,
       disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.5 : 1,
+        ...triggerWrap,
         children: trigger
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
@@ -168,12 +293,17 @@ function AdaptivePopup({
         exitStyle: {
           opacity: 0
         }
-      }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Content, {
+      }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Content, {
         unstyled: true,
         position: "relative",
         pointerEvents: "auto",
+        tabIndex: -1,
+        "data-testid": "adaptive-popup-surface",
+        "data-adaptive-popup-mode": "dialog",
         ...knobProps.elevatedSurface,
+        ...overlayFrameFocus,
         transition: knobProps.transition,
+        animateOnly: ["transform", "opacity"],
         enterStyle: {
           opacity: 0,
           scale: 0.96,
@@ -188,13 +318,16 @@ function AdaptivePopup({
         maxHeight,
         width: "90vw",
         ...knobProps.panelPadding,
-        ...knobProps.gap,
-        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]
+        onOpenAutoFocus: event => {
+          const root = event.currentTarget;
+          const field = root?.querySelector("input, textarea, select, [contenteditable='true']");
+          if (!field) return;
+          event.preventDefault();
+          field.focus({
+            preventScroll: true
+          });
+        },
+        children: body
       }, "content")]
     })]
   });

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

@@ -32,7 +32,7 @@ var import_react = require("react");
 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_colorRamps = require("../shared/colorRamps.native.js");
 var import_focusManagement = require("../shared/focusManagement.native.js");
 var import_useSheetEscapeDismiss = require("../shared/useSheetEscapeDismiss.native.js");
 var import_zIndex = require("../shared/zIndex.native.js");
@@ -51,6 +51,88 @@ var sizeToHeight = {
   xl: "auto",
   fullscreen: "90vh"
 };
+var overlayFrameFocus = {
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
+  }
+};
+function VisuallyHidden(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    overflow: "hidden",
+    opacity: 0,
+    pointerEvents: "none",
+    children
+  });
+}
+function PopupCloseButton(param) {
+  var {
+    onPress
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  var {
+    px,
+    hitSlop,
+    ...box
+  } = knobProps.nestedControl;
+  var glyph = Math.max(12, Math.round(px * 0.5));
+  var onKeyDown = function onKeyDown2(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      var _e_preventDefault;
+      (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+      onPress();
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ...box,
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 1,
+    role: "button",
+    "aria-label": "Close",
+    "data-testid": "adaptive-popup-close",
+    "data-nested-px": px,
+    cursor: "pointer",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: knobProps.pointy ? 0 : 9999,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)(),
+    onPress,
+    ...(!import_tamagui.isWeb ? {
+      hitSlop
+    } : {}),
+    ...(import_tamagui.isWeb ? {
+      tabIndex: 0,
+      onKeyDown
+    } : {
+      accessible: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Close"
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {
+      size: glyph,
+      color: import_colorRamps.formCommonColors.muted
+    })
+  });
+}
 function AdaptivePopup(param) {
   var {
     open,
@@ -67,6 +149,11 @@ function AdaptivePopup(param) {
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var {
+    knobProps: nestedKnobs
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
   var media = (0, import_tamagui.useMedia)();
   var viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   var isDesktop = typeof window !== "undefined" ? viewportGtSm : media.gtSm === true;
@@ -78,52 +165,82 @@ function AdaptivePopup(param) {
   (0, import_focusManagement.useSheetModalFocus)(open && !isDesktop, sheetFrameRef);
   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 closePx = nestedKnobs.nestedControl.px;
+  var openFromTrigger = (0, import_react.useCallback)(function () {
+    if (!disabled) onOpenChange(true);
+  }, [disabled, onOpenChange]);
+  var triggerActivation = import_tamagui.isWeb ? {
+    onClickCapture: openFromTrigger
+  } : void 0;
+  var triggerWrap = {
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    "data-testid": "adaptive-popup-trigger",
+    ...(import_tamagui.isWeb ? {
+      tabIndex: -1,
+      role: "presentation",
+      ...triggerActivation
+    } : {
+      onPress: openFromTrigger
+    })
+  };
+  var headerContent = (title || showCloseButton) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingRight: showCloseButton ? closePx : void 0,
+      minHeight: showCloseButton ? closePx : void 0,
+      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,
+          children: title
         })
-      })
-    })]
-  });
-  var descriptionContent = description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
-    ...knobProps.body,
-    color: "$color11",
-    fontSize: knobProps.sizeToken,
-    children: description
+      }) : null
+    })
   });
   var footerContent = footer && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     paddingTop: "$2",
     children: footer
   });
+  var body = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    flex: size === "fullscreen" ? 1 : void 0,
+    position: "relative",
+    ...knobProps.gap,
+    children: [!title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(VisuallyHidden, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+        children: "Dialog"
+      })
+    }) : null, headerContent, description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+      ...knobProps.body,
+      ...knobProps.label,
+      color: import_colorRamps.formCommonColors.muted,
+      children: description
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(VisuallyHidden, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+        children: " "
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: size === "fullscreen" ? 1 : void 0,
+      children
+    }), footerContent, showCloseButton ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopupCloseButton, {
+      onPress: function onPress() {
+        return onOpenChange(false);
+      }
+    }) : null]
+  });
   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,
+        ...triggerWrap,
         children: trigger
       }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, {
         modal: true,
         open,
         onOpenChange,
         dismissOnSnapToBottom: true,
+        dismissOnOverlayPress: true,
+        moveOnKeyboardChange: true,
         snapPointsMode: size === "fullscreen" ? "percent" : "fit",
         snapPoints: size === "fullscreen" ? [92] : void 0,
         zIndex: import_zIndex.zIndex.sheet,
@@ -137,7 +254,11 @@ function AdaptivePopup(param) {
           exitStyle: {
             opacity: 0
           }
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Frame, {
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {
+          ...{
+            "aria-hidden": true
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, {
           // Sheet.Frame forwards its ref at runtime; the styled prop type
           // just omits `ref`, hence the cast. tabIndex -1 makes the frame a
           // programmatic focus target without joining the tab order.
@@ -145,12 +266,20 @@ function AdaptivePopup(param) {
             ref: sheetFrameRef,
             tabIndex: -1
           },
+          unstyled: true,
+          position: "relative",
+          role: "dialog",
+          "aria-modal": true,
+          "aria-label": typeof title === "string" ? title : "Dialog",
+          "data-testid": "adaptive-popup-surface",
+          "data-adaptive-popup-mode": "sheet",
+          ...knobProps.elevatedSurface,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          ...overlayFrameFocus,
           ...knobProps.panelPadding,
-          ...knobProps.gap,
-          children: [headerContent, descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-            flex: size === "fullscreen" ? 1 : void 0,
-            children
-          }), footerContent]
+          transition: knobProps.transition,
+          children: body
         })]
       })]
     });
@@ -163,8 +292,7 @@ function AdaptivePopup(param) {
       asChild: true,
       disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.5 : 1,
+        ...triggerWrap,
         children: trigger
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
@@ -178,7 +306,7 @@ function AdaptivePopup(param) {
         exitStyle: {
           opacity: 0
         }
-      }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Content, {
+      }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Content, {
         // Dialog.Content's styled base bakes in `elevate: true` (plus its
         // own bg/border/radius/padding); `unstyled` drops that so the
         // elevatedSurface knob recipe (SF-OVERLAY/E-OVERLAY) is the only
@@ -186,8 +314,13 @@ function AdaptivePopup(param) {
         unstyled: true,
         position: "relative",
         pointerEvents: "auto",
+        tabIndex: -1,
+        "data-testid": "adaptive-popup-surface",
+        "data-adaptive-popup-mode": "dialog",
         ...knobProps.elevatedSurface,
+        ...overlayFrameFocus,
         transition: knobProps.transition,
+        animateOnly: ["transform", "opacity"],
         enterStyle: {
           opacity: 0,
           scale: 0.96,
@@ -202,13 +335,16 @@ function AdaptivePopup(param) {
         maxHeight,
         width: "90vw",
         ...knobProps.panelPadding,
-        ...knobProps.gap,
-        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]
+        onOpenAutoFocus: function onOpenAutoFocus(event) {
+          var root = event.currentTarget;
+          var field = root === null || root === void 0 ? void 0 : root.querySelector("input, textarea, select, [contenteditable='true']");
+          if (!field) return;
+          event.preventDefault();
+          field.focus({
+            preventScroll: true
+          });
+        },
+        children: body
       }, "content")]
     })]
   });