@tamagui/alert-dialog 3.0.0-beta.922.1 → 3.0.0

package/dist/esm/useNativeAlertDialog.native.js

@@ -0,0 +1,112 @@
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { isTamaguiElement } from "@tamagui/core";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+import { Alert } from "react-native";
+import { ALERT_DIALOG_PART } from "./alertDialogPart.native.js";
+
+var useNativeAlertDialog = function(props) {
+	var { native } = props;
+	var [open, setOpen] = useControllableState({
+		prop: props.open,
+		defaultProp: props.defaultOpen || false,
+		onChange: props.onOpenChange,
+		transition: true
+	});
+	var triggerElement = null;
+	var title = "";
+	var description = "";
+	var buttons = [];
+	forEachChildDeep(React.Children.toArray(props.children), function(child) {
+		if (!/* @__PURE__ */ React.isValidElement(child)) return false;
+		var part = isTamaguiElement(child) ? child.type.staticConfig[ALERT_DIALOG_PART] : void 0;
+		switch (part) {
+			case "trigger": {
+				triggerElement = /* @__PURE__ */ React.cloneElement(child, { __native: true });
+				return false;
+			}
+			case "title": {
+				title = getStringChildren(child);
+				return false;
+			}
+			case "description": {
+				description = getStringChildren(child);
+				return false;
+			}
+			case "action":
+			case "destructive":
+			case "cancel": {
+				var style = part === "action" ? "default" : part === "destructive" ? "destructive" : "cancel";
+				var text = getStringChildren(child);
+				var onPress = function() {
+					var _childProps_onPress;
+					var childProps = child.props;
+					childProps === null || childProps === void 0 ? void 0 : (_childProps_onPress = childProps.onPress) === null || _childProps_onPress === void 0 ? void 0 : _childProps_onPress.call(childProps, { native: true });
+					setOpen(false);
+				};
+				buttons.push({
+					style,
+					text,
+					onPress
+				});
+				return false;
+			}
+			default: {
+				return true;
+			}
+		}
+	});
+	useIsomorphicLayoutEffect(function() {
+		if (!open || !native) return;
+		if (title || description) {
+			Alert.alert(title, description, buttons);
+		}
+	}, [native, open]);
+	if (native) {
+		return /* @__PURE__ */ React.cloneElement(triggerElement, { __onPress: function() {
+			setOpen(true);
+		} });
+	}
+	return null;
+};
+function forEachChildDeep(children, onChild) {
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var child = _step.value;
+			if (!/* @__PURE__ */ React.isValidElement(child)) continue;
+			if (!onChild(child)) continue;
+			var childProps = child.props;
+			if (childProps.children) {
+				forEachChildDeep(React.Children.toArray(childProps.children), onChild);
+			}
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+}
+function getStringChildren(child) {
+	var string = "";
+	forEachChildDeep(React.Children.toArray(child), function(child2) {
+		if (typeof child2.props.children === "string") {
+			string = child2.props.children;
+			return false;
+		}
+		return true;
+	});
+	return string;
+}
+
+export { useNativeAlertDialog };
+//# sourceMappingURL=useNativeAlertDialog.native.js.map

package/dist/esm/useNativeAlertDialog.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeAlertDialog.native.js","names":[],"sources":["esm/useNativeAlertDialog.native.js"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { isTamaguiElement } from \"@tamagui/core\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport * as React from \"react\";\nimport { Alert } from \"react-native\";\nimport { ALERT_DIALOG_PART } from \"./alertDialogPart\";\nvar useNativeAlertDialog = function(props) {\n  var { native } = props;\n  var [open, setOpen] = useControllableState({\n    prop: props.open,\n    defaultProp: props.defaultOpen || false,\n    onChange: props.onOpenChange,\n    transition: true\n  });\n  var triggerElement = null;\n  var title = \"\";\n  var description = \"\";\n  var buttons = [];\n  forEachChildDeep(React.Children.toArray(props.children), function(child) {\n    if (!/* @__PURE__ */ React.isValidElement(child)) return false;\n    var part = isTamaguiElement(child) ? child.type.staticConfig[ALERT_DIALOG_PART] : void 0;\n    switch (part) {\n      case \"trigger\": {\n        triggerElement = /* @__PURE__ */ React.cloneElement(child, {\n          __native: true\n        });\n        return false;\n      }\n      case \"title\": {\n        title = getStringChildren(child);\n        return false;\n      }\n      case \"description\": {\n        description = getStringChildren(child);\n        return false;\n      }\n      case \"action\":\n      case \"destructive\":\n      case \"cancel\": {\n        var style = part === \"action\" ? \"default\" : part === \"destructive\" ? \"destructive\" : \"cancel\";\n        var text = getStringChildren(child);\n        var onPress = function() {\n          var _childProps_onPress;\n          var childProps = child.props;\n          childProps === null || childProps === void 0 ? void 0 : (_childProps_onPress = childProps.onPress) === null || _childProps_onPress === void 0 ? void 0 : _childProps_onPress.call(childProps, {\n            native: true\n          });\n          setOpen(false);\n        };\n        buttons.push({\n          style,\n          text,\n          // @ts-ignore\n          onPress\n        });\n        return false;\n      }\n      default: {\n        return true;\n      }\n    }\n  });\n  useIsomorphicLayoutEffect(function() {\n    if (!open || !native) return;\n    if (title || description) {\n      Alert.alert(title, description, buttons);\n    }\n  }, [\n    native,\n    open\n  ]);\n  if (native) {\n    return /* @__PURE__ */ React.cloneElement(triggerElement, {\n      __onPress: function() {\n        setOpen(true);\n      }\n    });\n  }\n  return null;\n};\nfunction forEachChildDeep(children, onChild) {\n  var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;\n  try {\n    for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\n      var child = _step.value;\n      if (!/* @__PURE__ */ React.isValidElement(child)) continue;\n      if (!onChild(child)) continue;\n      var childProps = child.props;\n      if (childProps.children) {\n        forEachChildDeep(React.Children.toArray(childProps.children), onChild);\n      }\n    }\n  } catch (err) {\n    _didIteratorError = true;\n    _iteratorError = err;\n  } finally {\n    try {\n      if (!_iteratorNormalCompletion && _iterator.return != null) {\n        _iterator.return();\n      }\n    } finally {\n      if (_didIteratorError) {\n        throw _iteratorError;\n      }\n    }\n  }\n}\nfunction getStringChildren(child) {\n  var string = \"\";\n  forEachChildDeep(React.Children.toArray(child), function(child2) {\n    if (typeof child2.props.children === \"string\") {\n      string = child2.props.children;\n      return false;\n    }\n    return true;\n  });\n  return string;\n}\nexport {\n  useNativeAlertDialog\n};\n//# sourceMappingURL=useNativeAlertDialog.native.js.map\n"],"mappings":";;;;;;;;AAMA,IAAI,uBAAuB,SAAS,OAAO;CACzC,IAAI,EAAE,WAAW;CACjB,IAAI,CAAC,MAAM,WAAW,qBAAqB;EACzC,MAAM,MAAM;EACZ,aAAa,MAAM,eAAe;EAClC,UAAU,MAAM;EAChB,YAAY;CACd,CAAC;CACD,IAAI,iBAAiB;CACrB,IAAI,QAAQ;CACZ,IAAI,cAAc;CAClB,IAAI,UAAU,CAAC;CACf,iBAAiB,MAAM,SAAS,QAAQ,MAAM,QAAQ,GAAG,SAAS,OAAO;EACvE,IAAI,CAAiB,sBAAM,eAAe,KAAK,GAAG,OAAO;EACzD,IAAI,OAAO,iBAAiB,KAAK,IAAI,MAAM,KAAK,aAAa,qBAAqB,KAAK;EACvF,QAAQ,MAAR;GACE,KAAK,WAAW;IACd,iBAAiC,sBAAM,aAAa,OAAO,EACzD,UAAU,KACZ,CAAC;IACD,OAAO;GACT;GACA,KAAK,SAAS;IACZ,QAAQ,kBAAkB,KAAK;IAC/B,OAAO;GACT;GACA,KAAK,eAAe;IAClB,cAAc,kBAAkB,KAAK;IACrC,OAAO;GACT;GACA,KAAK;GACL,KAAK;GACL,KAAK,UAAU;IACb,IAAI,QAAQ,SAAS,WAAW,YAAY,SAAS,gBAAgB,gBAAgB;IACrF,IAAI,OAAO,kBAAkB,KAAK;IAClC,IAAI,UAAU,WAAW;KACvB,IAAI;KACJ,IAAI,aAAa,MAAM;KACvB,eAAe,QAAQ,eAAe,KAAK,IAAI,KAAK,KAAK,sBAAsB,WAAW,aAAa,QAAQ,wBAAwB,KAAK,IAAI,KAAK,IAAI,oBAAoB,KAAK,YAAY,EAC5L,QAAQ,KACV,CAAC;KACD,QAAQ,KAAK;IACf;IACA,QAAQ,KAAK;KACX;KACA;KAEA;IACF,CAAC;IACD,OAAO;GACT;GACA,SAAS;IACP,OAAO;GACT;EACF;CACF,CAAC;CACD,0BAA0B,WAAW;EACnC,IAAI,CAAC,QAAQ,CAAC,QAAQ;EACtB,IAAI,SAAS,aAAa;GACxB,MAAM,MAAM,OAAO,aAAa,OAAO;EACzC;CACF,GAAG,CACD,QACA,IACF,CAAC;CACD,IAAI,QAAQ;EACV,OAAuB,sBAAM,aAAa,gBAAgB,EACxD,WAAW,WAAW;GACpB,QAAQ,IAAI;EACd,EACF,CAAC;CACH;CACA,OAAO;AACT;AACA,SAAS,iBAAiB,UAAU,SAAS;CAC3C,IAAI,4BAA4B,MAAM,oBAAoB,OAAO,iBAAiB,KAAK;CACvF,IAAI;EACF,KAAK,IAAI,YAAY,SAAS,OAAO,SAAS,CAAC,GAAG,OAAO,EAAE,6BAA6B,QAAQ,UAAU,KAAK,EAAC,CAAE,OAAO,4BAA4B,MAAM;GACzJ,IAAI,QAAQ,MAAM;GAClB,IAAI,CAAiB,sBAAM,eAAe,KAAK,GAAG;GAClD,IAAI,CAAC,QAAQ,KAAK,GAAG;GACrB,IAAI,aAAa,MAAM;GACvB,IAAI,WAAW,UAAU;IACvB,iBAAiB,MAAM,SAAS,QAAQ,WAAW,QAAQ,GAAG,OAAO;GACvE;EACF;CACF,SAAS,KAAK;EACZ,oBAAoB;EACpB,iBAAiB;CACnB,UAAU;EACR,IAAI;GACF,IAAI,CAAC,6BAA6B,UAAU,UAAU,MAAM;IAC1D,UAAU,OAAO;GACnB;EACF,UAAU;GACR,IAAI,mBAAmB;IACrB,MAAM;GACR;EACF;CACF;AACF;AACA,SAAS,kBAAkB,OAAO;CAChC,IAAI,SAAS;CACb,iBAAiB,MAAM,SAAS,QAAQ,KAAK,GAAG,SAAS,QAAQ;EAC/D,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GAC7C,SAAS,OAAO,MAAM;GACtB,OAAO;EACT;EACA,OAAO;CACT,CAAC;CACD,OAAO;AACT"}

package/dist/jsx/AlertDialog.mjs

@@ -1,18 +1,17 @@
-import { Slottable, View, createRefComponent, createStyledContext, createStyledHOC, styled } from "@tamagui/core";
+import { Slottable, View, createStyledContext, createStyledHOC, styled } from "@tamagui/core";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb } from "@tamagui/constants";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogOverlayFrame, DialogPortal, DialogTitle, DialogTrigger, DialogWarningProvider } from "@tamagui/dialog";
+import { Dialog, DialogClose, DialogContent, DialogContentFrame, DialogDescription, DialogOverlay, DialogOverlayFrame, DialogPortal, DialogTitle, DialogTrigger, DialogWarningProvider } from "@tamagui/dialog";
 import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
 import * as React from "react";
+import { markAlertDialogPart } from "./alertDialogPart.mjs";
+import { useNativeAlertDialog } from "./useNativeAlertDialog.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 const getAlertDialogScope = (scope) => scope;
 const ROOT_NAME = "AlertDialog";
-const ALERT_DIALOG_PART = /* @__PURE__ */ Symbol("AlertDialogPart");
-const markAlertDialogPart = (component, part) => {
-	Object.assign(component.staticConfig, { [ALERT_DIALOG_PART]: part });
-};
-const NativeAlertDialogTriggerFrame = styled(View, { displayName: "AlertDialogTrigger" });
+const TRIGGER_NAME = "AlertDialogTrigger";
+const NativeAlertDialogTriggerFrame = styled(View, { displayName: TRIGGER_NAME });
 markAlertDialogPart(NativeAlertDialogTriggerFrame, "trigger");
 const AlertDialogTrigger = createStyledHOC(NativeAlertDialogTriggerFrame, function AlertDialogTrigger2(props, forwardedRef) {
 	if (props["__native"]) {
@@ -36,7 +35,9 @@ const AlertDialogPortal = function AlertDialogPortal2(props) {
 		...portalProps
 	});
 };
-const AlertDialogOverlay = createStyledHOC(styled(DialogOverlayFrame, { displayName: "AlertDialogOverlay" }), function AlertDialogOverlay2(props, forwardedRef) {
+const OVERLAY_NAME = "AlertDialogOverlay";
+const AlertDialogOverlayFrame = styled(DialogOverlayFrame, { displayName: OVERLAY_NAME });
+const AlertDialogOverlay = createStyledHOC(AlertDialogOverlayFrame, function AlertDialogOverlay2(props, forwardedRef) {
 	const { scope, ...overlayProps } = props;
 	return /* @__PURE__ */ jsx(DialogOverlay, {
 		scope: getAlertDialogScope(scope),
@@ -46,12 +47,14 @@ const AlertDialogOverlay = createStyledHOC(styled(DialogOverlayFrame, { displayN
 });
 const CONTENT_NAME = "AlertDialogContent";
 const { Provider: AlertDialogContextProvider, useStyledContext: useAlertDialogContentContext } = createStyledContext({}, "AlertDialogContext");
-const AlertDialogContent = createRefComponent(function AlertDialogContent2(props, forwardedRef) {
+const AlertDialogContentFrame = styled(DialogContentFrame, { displayName: CONTENT_NAME });
+const AlertDialogContent = createStyledHOC(AlertDialogContentFrame, function AlertDialogContent2(props, forwardedRef) {
 	const { scope, children, ...contentProps } = props;
 	const dialogScope = getAlertDialogScope(scope);
 	const contentRef = React.useRef(null);
 	const composedRefs = useComposedRefs(forwardedRef, contentRef);
 	const cancelRef = React.useRef(null);
+	const destructiveRef = React.useRef(null);
 	return /* @__PURE__ */ jsx(DialogWarningProvider, {
 		contentName: CONTENT_NAME,
 		titleName: TITLE_NAME,
@@ -59,7 +62,7 @@ const AlertDialogContent = createRefComponent(function AlertDialogContent2(props
 		children: /* @__PURE__ */ jsx(AlertDialogContextProvider, {
 			scope,
 			cancelRef,
-			destructiveRef: React.useRef(null),
+			destructiveRef,
 			children: /* @__PURE__ */ jsxs(DialogContent, {
 				role: "alertdialog",
 				"aria-modal": true,
@@ -68,7 +71,9 @@ const AlertDialogContent = createRefComponent(function AlertDialogContent2(props
 				ref: composedRefs,
 				onOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {
 					event.cancel();
-					if (isWeb) cancelRef.current?.focus({ preventScroll: true });
+					if (isWeb) {
+						cancelRef.current?.focus({ preventScroll: true });
+					}
 				}),
 				onPointerDownOutside: (event) => event.cancel(),
 				onInteractOutside: (event) => event.cancel(),
@@ -99,7 +104,8 @@ const AlertDialogDescription = createStyledHOC(AlertDialogDescriptionFrame, func
 		ref: forwardedRef
 	});
 });
-const AlertDialogActionFrame = styled(View, { displayName: "AlertDialogAction" });
+const ACTION_NAME = "AlertDialogAction";
+const AlertDialogActionFrame = styled(View, { displayName: ACTION_NAME });
 markAlertDialogPart(AlertDialogActionFrame, "action");
 const AlertDialogAction = createStyledHOC(AlertDialogActionFrame, function AlertDialogAction2(props, forwardedRef) {
 	const { scope, ...actionProps } = props;
@@ -109,7 +115,8 @@ const AlertDialogAction = createStyledHOC(AlertDialogActionFrame, function Alert
 		ref: forwardedRef
 	});
 });
-const AlertDialogCancelFrame = styled(View, { displayName: "AlertDialogCancel" });
+const CANCEL_NAME = "AlertDialogCancel";
+const AlertDialogCancelFrame = styled(View, { displayName: CANCEL_NAME });
 markAlertDialogPart(AlertDialogCancelFrame, "cancel");
 const AlertDialogCancel = createStyledHOC(AlertDialogCancelFrame, function AlertDialogCancel2(props, forwardedRef) {
 	const { scope, ...cancelProps } = props;
@@ -121,7 +128,8 @@ const AlertDialogCancel = createStyledHOC(AlertDialogCancelFrame, function Alert
 		ref
 	});
 });
-const AlertDialogDestructiveFrame = styled(View, { displayName: "AlertDialogDestructive" });
+const DESTRUCTIVE_NAME = "AlertDialogDestructive";
+const AlertDialogDestructiveFrame = styled(View, { displayName: DESTRUCTIVE_NAME });
 markAlertDialogPart(AlertDialogDestructiveFrame, "destructive");
 const AlertDialogDestructive = createStyledHOC(AlertDialogDestructiveFrame, function AlertDialogDestructive2(props, forwardedRef) {
 	const { scope, ...destructiveProps } = props;
@@ -134,22 +142,30 @@ const AlertDialogDestructive = createStyledHOC(AlertDialogDestructiveFrame, func
 	});
 });
 const DescriptionWarning = ({ contentRef }) => {
-	if (process.env.NODE_ENV === "development") React.useEffect(() => {
-		if (!isWeb) return;
-		if (!document.getElementById(contentRef.current?.getAttribute("aria-describedby"))) console.warn(`\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
+	if (process.env.NODE_ENV === "development") {
+		React.useEffect(() => {
+			if (!isWeb) return;
+			const hasDescription = document.getElementById(contentRef.current?.getAttribute("aria-describedby"));
+			if (!hasDescription) {
+				console.warn(`\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
   
         You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
         
         Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
         
         For more information, see https://tamagui.dev/docs/components/alert-dialog`);
-	}, [contentRef]);
+			}
+		}, [contentRef]);
+	}
 	return null;
 };
 const AlertDialogInner = (props) => {
 	const { scope, native, ...alertDialogProps } = props;
+	const dialogScope = getAlertDialogScope(scope);
+	const nativeAlert = useNativeAlertDialog(props);
+	if (nativeAlert) return nativeAlert;
 	return /* @__PURE__ */ jsx(Dialog, {
-		scope: getAlertDialogScope(scope),
+		scope: dialogScope,
 		...alertDialogProps,
 		modal: true
 	});

package/dist/jsx/AlertDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","names":[],"sources":["jsx/AlertDialog.js"],"sourcesContent":["import { Slottable, View, createRefComponent, createStyledContext, createStyledHOC, styled } from \"@tamagui/core\";\nimport { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { isWeb } from \"@tamagui/constants\";\nimport { Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogOverlayFrame, DialogPortal, DialogTitle, DialogTrigger, DialogWarningProvider } from \"@tamagui/dialog\";\nimport { composeEventHandlers, withStaticProperties } from \"@tamagui/helpers\";\nimport * as React from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\n\nconst getAlertDialogScope = (scope) => scope;\nconst ROOT_NAME = \"AlertDialog\";\nconst ALERT_DIALOG_PART = /* @__PURE__ */ Symbol(\"AlertDialogPart\");\nconst markAlertDialogPart = (component, part) => {\n\tObject.assign(component.staticConfig, { [ALERT_DIALOG_PART]: part });\n};\nconst NativeAlertDialogTriggerFrame = styled(View, { displayName: \"AlertDialogTrigger\" });\nmarkAlertDialogPart(NativeAlertDialogTriggerFrame, \"trigger\");\nconst AlertDialogTrigger = createStyledHOC(NativeAlertDialogTriggerFrame, function AlertDialogTrigger2(props, forwardedRef) {\n\tif (props[\"__native\"]) {\n\t\tconst { __native, onPress, __onPress, ...rest } = props;\n\t\treturn /* @__PURE__ */ jsx(NativeAlertDialogTriggerFrame, {\n\t\t\t...rest,\n\t\t\tonPress: composeEventHandlers(onPress, __onPress)\n\t\t});\n\t}\n\tconst { scope, ...triggerProps } = props;\n\treturn /* @__PURE__ */ jsx(DialogTrigger, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...triggerProps,\n\t\tref: forwardedRef\n\t});\n});\nconst AlertDialogPortal = function AlertDialogPortal2(props) {\n\tconst { scope, ...portalProps } = props;\n\treturn /* @__PURE__ */ jsx(DialogPortal, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...portalProps\n\t});\n};\nconst AlertDialogOverlay = createStyledHOC(styled(DialogOverlayFrame, { displayName: \"AlertDialogOverlay\" }), function AlertDialogOverlay2(props, forwardedRef) {\n\tconst { scope, ...overlayProps } = props;\n\treturn /* @__PURE__ */ jsx(DialogOverlay, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...overlayProps,\n\t\tref: forwardedRef\n\t});\n});\nconst CONTENT_NAME = \"AlertDialogContent\";\nconst { Provider: AlertDialogContextProvider, useStyledContext: useAlertDialogContentContext } = createStyledContext({}, \"AlertDialogContext\");\nconst AlertDialogContent = createRefComponent(function AlertDialogContent2(props, forwardedRef) {\n\tconst { scope, children, ...contentProps } = props;\n\tconst dialogScope = getAlertDialogScope(scope);\n\tconst contentRef = React.useRef(null);\n\tconst composedRefs = useComposedRefs(forwardedRef, contentRef);\n\tconst cancelRef = React.useRef(null);\n\treturn /* @__PURE__ */ jsx(DialogWarningProvider, {\n\t\tcontentName: CONTENT_NAME,\n\t\ttitleName: TITLE_NAME,\n\t\tdocsSlug: \"alert-dialog\",\n\t\tchildren: /* @__PURE__ */ jsx(AlertDialogContextProvider, {\n\t\t\tscope,\n\t\t\tcancelRef,\n\t\t\tdestructiveRef: React.useRef(null),\n\t\t\tchildren: /* @__PURE__ */ jsxs(DialogContent, {\n\t\t\t\trole: \"alertdialog\",\n\t\t\t\t\"aria-modal\": true,\n\t\t\t\tscope: dialogScope,\n\t\t\t\t...contentProps,\n\t\t\t\tref: composedRefs,\n\t\t\t\tonOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {\n\t\t\t\t\tevent.cancel();\n\t\t\t\t\tif (isWeb) cancelRef.current?.focus({ preventScroll: true });\n\t\t\t\t}),\n\t\t\t\tonPointerDownOutside: (event) => event.cancel(),\n\t\t\t\tonInteractOutside: (event) => event.cancel(),\n\t\t\t\tchildren: [/* @__PURE__ */ jsx(Slottable, { children }), process.env.NODE_ENV === \"development\" && /* @__PURE__ */ jsx(DescriptionWarning, { contentRef })]\n\t\t\t})\n\t\t})\n\t});\n});\nconst TITLE_NAME = \"AlertDialogTitle\";\nconst AlertDialogTitleFrame = styled(View, { displayName: TITLE_NAME });\nmarkAlertDialogPart(AlertDialogTitleFrame, \"title\");\nconst AlertDialogTitle = createStyledHOC(AlertDialogTitleFrame, function AlertDialogTitle2(props, forwardedRef) {\n\tconst { scope, ...titleProps } = props;\n\treturn /* @__PURE__ */ jsx(DialogTitle, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...titleProps,\n\t\tref: forwardedRef\n\t});\n});\nconst DESCRIPTION_NAME = \"AlertDialogDescription\";\nconst AlertDialogDescriptionFrame = styled(View, { displayName: DESCRIPTION_NAME });\nmarkAlertDialogPart(AlertDialogDescriptionFrame, \"description\");\nconst AlertDialogDescription = createStyledHOC(AlertDialogDescriptionFrame, function AlertDialogDescription2(props, forwardedRef) {\n\tconst { scope, ...descriptionProps } = props;\n\treturn /* @__PURE__ */ jsx(DialogDescription, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...descriptionProps,\n\t\tref: forwardedRef\n\t});\n});\nconst AlertDialogActionFrame = styled(View, { displayName: \"AlertDialogAction\" });\nmarkAlertDialogPart(AlertDialogActionFrame, \"action\");\nconst AlertDialogAction = createStyledHOC(AlertDialogActionFrame, function AlertDialogAction2(props, forwardedRef) {\n\tconst { scope, ...actionProps } = props;\n\treturn /* @__PURE__ */ jsx(DialogClose, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...actionProps,\n\t\tref: forwardedRef\n\t});\n});\nconst AlertDialogCancelFrame = styled(View, { displayName: \"AlertDialogCancel\" });\nmarkAlertDialogPart(AlertDialogCancelFrame, \"cancel\");\nconst AlertDialogCancel = createStyledHOC(AlertDialogCancelFrame, function AlertDialogCancel2(props, forwardedRef) {\n\tconst { scope, ...cancelProps } = props;\n\tconst { cancelRef } = useAlertDialogContentContext(scope);\n\tconst ref = useComposedRefs(forwardedRef, cancelRef);\n\treturn /* @__PURE__ */ jsx(DialogClose, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...cancelProps,\n\t\tref\n\t});\n});\nconst AlertDialogDestructiveFrame = styled(View, { displayName: \"AlertDialogDestructive\" });\nmarkAlertDialogPart(AlertDialogDestructiveFrame, \"destructive\");\nconst AlertDialogDestructive = createStyledHOC(AlertDialogDestructiveFrame, function AlertDialogDestructive2(props, forwardedRef) {\n\tconst { scope, ...destructiveProps } = props;\n\tconst { destructiveRef } = useAlertDialogContentContext(scope);\n\tconst ref = useComposedRefs(forwardedRef, destructiveRef);\n\treturn /* @__PURE__ */ jsx(DialogClose, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...destructiveProps,\n\t\tref\n\t});\n});\nconst DescriptionWarning = ({ contentRef }) => {\n\tif (process.env.NODE_ENV === \"development\") React.useEffect(() => {\n\t\tif (!isWeb) return;\n\t\tif (!document.getElementById(contentRef.current?.getAttribute(\"aria-describedby\"))) console.warn(`\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n  \n        You can add a description to the \\`${CONTENT_NAME}\\` by passing a \\`${DESCRIPTION_NAME}\\` component as a child, which also benefits sighted users by adding visible context to the dialog.\n        \n        Alternatively, you can use your own component as a description by assigning it an \\`id\\` and passing the same value to the \\`aria-describedby\\` prop in \\`${CONTENT_NAME}\\`. If the description is confusing or duplicative for sighted users, you can use the \\`@radix-ui/react-visually-hidden\\` primitive as a wrapper around your description component.\n        \n        For more information, see https://tamagui.dev/docs/components/alert-dialog`);\n\t}, [contentRef]);\n\treturn null;\n};\nconst AlertDialogInner = (props) => {\n\tconst { scope, native, ...alertDialogProps } = props;\n\treturn /* @__PURE__ */ jsx(Dialog, {\n\t\tscope: getAlertDialogScope(scope),\n\t\t...alertDialogProps,\n\t\tmodal: true\n\t});\n};\nconst AlertDialog = withStaticProperties(AlertDialogInner, {\n\tTrigger: AlertDialogTrigger,\n\tPortal: AlertDialogPortal,\n\tOverlay: AlertDialogOverlay,\n\tContent: AlertDialogContent,\n\tAction: AlertDialogAction,\n\tCancel: AlertDialogCancel,\n\tDestructive: AlertDialogDestructive,\n\tTitle: AlertDialogTitle,\n\tDescription: AlertDialogDescription\n});\nAlertDialog.displayName = ROOT_NAME;\n\nexport { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogDestructive, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };"],"mappings":"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"}
+{"version":3,"file":"AlertDialog.js","names":[],"sources":["jsx/AlertDialog.js"],"sourcesContent":["import { createStyledHOC } from \"@tamagui/core\";\nimport { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { isWeb } from \"@tamagui/constants\";\nimport { Slottable, View, createStyledContext, styled } from \"@tamagui/core\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogContentFrame,\n  DialogDescription,\n  DialogOverlay,\n  DialogOverlayFrame,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n  DialogWarningProvider\n} from \"@tamagui/dialog\";\nimport { composeEventHandlers, withStaticProperties } from \"@tamagui/helpers\";\nimport * as React from \"react\";\nimport { markAlertDialogPart } from \"./alertDialogPart\";\nimport { useNativeAlertDialog } from \"./useNativeAlertDialog\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst getAlertDialogScope = (scope) => scope;\nconst ROOT_NAME = \"AlertDialog\";\nconst TRIGGER_NAME = \"AlertDialogTrigger\";\nconst NativeAlertDialogTriggerFrame = styled(View, {\n  displayName: TRIGGER_NAME\n});\nmarkAlertDialogPart(NativeAlertDialogTriggerFrame, \"trigger\");\nconst AlertDialogTrigger = createStyledHOC(\n  NativeAlertDialogTriggerFrame,\n  function AlertDialogTrigger2(props, forwardedRef) {\n    if (props[\"__native\"]) {\n      const { __native, onPress, __onPress, ...rest } = props;\n      return /* @__PURE__ */ jsx(\n        NativeAlertDialogTriggerFrame,\n        {\n          ...rest,\n          onPress: composeEventHandlers(onPress, __onPress)\n        }\n      );\n    }\n    const { scope, ...triggerProps } = props;\n    return /* @__PURE__ */ jsx(\n      DialogTrigger,\n      {\n        scope: getAlertDialogScope(scope),\n        ...triggerProps,\n        ref: forwardedRef\n      }\n    );\n  }\n);\nconst AlertDialogPortal = function AlertDialogPortal2(props) {\n  const { scope, ...portalProps } = props;\n  return /* @__PURE__ */ jsx(DialogPortal, { scope: getAlertDialogScope(scope), ...portalProps });\n};\nconst OVERLAY_NAME = \"AlertDialogOverlay\";\nconst AlertDialogOverlayFrame = styled(DialogOverlayFrame, {\n  displayName: OVERLAY_NAME\n});\nconst AlertDialogOverlay = createStyledHOC(\n  AlertDialogOverlayFrame,\n  function AlertDialogOverlay2(props, forwardedRef) {\n    const { scope, ...overlayProps } = props;\n    return /* @__PURE__ */ jsx(\n      DialogOverlay,\n      {\n        scope: getAlertDialogScope(scope),\n        ...overlayProps,\n        ref: forwardedRef\n      }\n    );\n  }\n);\nconst CONTENT_NAME = \"AlertDialogContent\";\nconst {\n  Provider: AlertDialogContextProvider,\n  useStyledContext: useAlertDialogContentContext\n} = createStyledContext({}, \"AlertDialogContext\");\nconst AlertDialogContentFrame = styled(DialogContentFrame, {\n  displayName: CONTENT_NAME\n});\nconst AlertDialogContent = createStyledHOC(\n  AlertDialogContentFrame,\n  function AlertDialogContent2(props, forwardedRef) {\n    const { scope, children, ...contentProps } = props;\n    const dialogScope = getAlertDialogScope(scope);\n    const contentRef = React.useRef(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n    const cancelRef = React.useRef(null);\n    const destructiveRef = React.useRef(null);\n    return /* @__PURE__ */ jsx(\n      DialogWarningProvider,\n      {\n        contentName: CONTENT_NAME,\n        titleName: TITLE_NAME,\n        docsSlug: \"alert-dialog\",\n        children: /* @__PURE__ */ jsx(\n          AlertDialogContextProvider,\n          {\n            scope,\n            cancelRef,\n            destructiveRef,\n            children: /* @__PURE__ */ jsxs(\n              DialogContent,\n              {\n                role: \"alertdialog\",\n                \"aria-modal\": true,\n                scope: dialogScope,\n                ...contentProps,\n                ref: composedRefs,\n                onOpenAutoFocus: composeEventHandlers(\n                  contentProps.onOpenAutoFocus,\n                  (event) => {\n                    event.cancel();\n                    if (isWeb) {\n                      cancelRef.current?.focus({ preventScroll: true });\n                    }\n                  }\n                ),\n                onPointerDownOutside: (event) => event.cancel(),\n                onInteractOutside: (event) => event.cancel(),\n                children: [\n                  /* @__PURE__ */ jsx(Slottable, { children }),\n                  process.env.NODE_ENV === \"development\" && /* @__PURE__ */ jsx(DescriptionWarning, { contentRef })\n                ]\n              }\n            )\n          }\n        )\n      }\n    );\n  }\n);\nconst TITLE_NAME = \"AlertDialogTitle\";\nconst AlertDialogTitleFrame = styled(View, {\n  displayName: TITLE_NAME\n});\nmarkAlertDialogPart(AlertDialogTitleFrame, \"title\");\nconst AlertDialogTitle = createStyledHOC(\n  AlertDialogTitleFrame,\n  function AlertDialogTitle2(props, forwardedRef) {\n    const { scope, ...titleProps } = props;\n    return /* @__PURE__ */ jsx(\n      DialogTitle,\n      {\n        scope: getAlertDialogScope(scope),\n        ...titleProps,\n        ref: forwardedRef\n      }\n    );\n  }\n);\nconst DESCRIPTION_NAME = \"AlertDialogDescription\";\nconst AlertDialogDescriptionFrame = styled(View, {\n  displayName: DESCRIPTION_NAME\n});\nmarkAlertDialogPart(AlertDialogDescriptionFrame, \"description\");\nconst AlertDialogDescription = createStyledHOC(\n  AlertDialogDescriptionFrame,\n  function AlertDialogDescription2(props, forwardedRef) {\n    const { scope, ...descriptionProps } = props;\n    return /* @__PURE__ */ jsx(\n      DialogDescription,\n      {\n        scope: getAlertDialogScope(scope),\n        ...descriptionProps,\n        ref: forwardedRef\n      }\n    );\n  }\n);\nconst ACTION_NAME = \"AlertDialogAction\";\nconst AlertDialogActionFrame = styled(View, {\n  displayName: ACTION_NAME\n});\nmarkAlertDialogPart(AlertDialogActionFrame, \"action\");\nconst AlertDialogAction = createStyledHOC(\n  AlertDialogActionFrame,\n  function AlertDialogAction2(props, forwardedRef) {\n    const { scope, ...actionProps } = props;\n    return /* @__PURE__ */ jsx(\n      DialogClose,\n      {\n        scope: getAlertDialogScope(scope),\n        ...actionProps,\n        ref: forwardedRef\n      }\n    );\n  }\n);\nconst CANCEL_NAME = \"AlertDialogCancel\";\nconst AlertDialogCancelFrame = styled(View, {\n  displayName: CANCEL_NAME\n});\nmarkAlertDialogPart(AlertDialogCancelFrame, \"cancel\");\nconst AlertDialogCancel = createStyledHOC(\n  AlertDialogCancelFrame,\n  function AlertDialogCancel2(props, forwardedRef) {\n    const { scope, ...cancelProps } = props;\n    const { cancelRef } = useAlertDialogContentContext(scope);\n    const ref = useComposedRefs(forwardedRef, cancelRef);\n    return /* @__PURE__ */ jsx(DialogClose, { scope: getAlertDialogScope(scope), ...cancelProps, ref });\n  }\n);\nconst DESTRUCTIVE_NAME = \"AlertDialogDestructive\";\nconst AlertDialogDestructiveFrame = styled(View, {\n  displayName: DESTRUCTIVE_NAME\n});\nmarkAlertDialogPart(AlertDialogDestructiveFrame, \"destructive\");\nconst AlertDialogDestructive = createStyledHOC(\n  AlertDialogDestructiveFrame,\n  function AlertDialogDestructive2(props, forwardedRef) {\n    const { scope, ...destructiveProps } = props;\n    const { destructiveRef } = useAlertDialogContentContext(scope);\n    const ref = useComposedRefs(forwardedRef, destructiveRef);\n    return /* @__PURE__ */ jsx(DialogClose, { scope: getAlertDialogScope(scope), ...destructiveProps, ref });\n  }\n);\nconst DescriptionWarning = ({ contentRef }) => {\n  if (process.env.NODE_ENV === \"development\") {\n    React.useEffect(() => {\n      if (!isWeb) return;\n      const hasDescription = document.getElementById(\n        // @ts-ignore\n        contentRef.current?.getAttribute(\"aria-describedby\")\n      );\n      if (!hasDescription) {\n        console.warn(`\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n  \n        You can add a description to the \\`${CONTENT_NAME}\\` by passing a \\`${DESCRIPTION_NAME}\\` component as a child, which also benefits sighted users by adding visible context to the dialog.\n        \n        Alternatively, you can use your own component as a description by assigning it an \\`id\\` and passing the same value to the \\`aria-describedby\\` prop in \\`${CONTENT_NAME}\\`. If the description is confusing or duplicative for sighted users, you can use the \\`@radix-ui/react-visually-hidden\\` primitive as a wrapper around your description component.\n        \n        For more information, see https://tamagui.dev/docs/components/alert-dialog`);\n      }\n    }, [contentRef]);\n  }\n  return null;\n};\nconst AlertDialogInner = (props) => {\n  const { scope, native, ...alertDialogProps } = props;\n  const dialogScope = getAlertDialogScope(scope);\n  const nativeAlert = useNativeAlertDialog(props);\n  if (nativeAlert) return nativeAlert;\n  return /* @__PURE__ */ jsx(Dialog, { scope: dialogScope, ...alertDialogProps, modal: true });\n};\nconst AlertDialog = withStaticProperties(AlertDialogInner, {\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Overlay: AlertDialogOverlay,\n  Content: AlertDialogContent,\n  Action: AlertDialogAction,\n  Cancel: AlertDialogCancel,\n  Destructive: AlertDialogDestructive,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription\n});\nAlertDialog.displayName = ROOT_NAME;\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogDestructive,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger\n};\n//# sourceMappingURL=AlertDialog.js.map\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,uBAAuB,UAAU;AACvC,MAAM,YAAY;AAClB,MAAM,eAAe;AACrB,MAAM,gCAAgC,OAAO,MAAM,EACjD,aAAa,aACf,CAAC;AACD,oBAAoB,+BAA+B,SAAS;AAC5D,MAAM,qBAAqB,gBACzB,+BACA,SAAS,oBAAoB,OAAO,cAAc;CAChD,IAAI,MAAM,aAAa;EACrB,MAAM,EAAE,UAAU,SAAS,WAAW,GAAG,SAAS;EAClD,OAAuB,oBACrB,+BACA;GACE,GAAG;GACH,SAAS,qBAAqB,SAAS,SAAS;EAClD,CACF;CACF;CACA,MAAM,EAAE,OAAO,GAAG,iBAAiB;CACnC,OAAuB,oBACrB,eACA;EACE,OAAO,oBAAoB,KAAK;EAChC,GAAG;EACH,KAAK;CACP,CACF;AACF,CACF;AACA,MAAM,oBAAoB,SAAS,mBAAmB,OAAO;CAC3D,MAAM,EAAE,OAAO,GAAG,gBAAgB;CAClC,OAAuB,oBAAI,cAAc;EAAE,OAAO,oBAAoB,KAAK;EAAG,GAAG;CAAY,CAAC;AAChG;AACA,MAAM,eAAe;AACrB,MAAM,0BAA0B,OAAO,oBAAoB,EACzD,aAAa,aACf,CAAC;AACD,MAAM,qBAAqB,gBACzB,yBACA,SAAS,oBAAoB,OAAO,cAAc;CAChD,MAAM,EAAE,OAAO,GAAG,iBAAiB;CACnC,OAAuB,oBACrB,eACA;EACE,OAAO,oBAAoB,KAAK;EAChC,GAAG;EACH,KAAK;CACP,CACF;AACF,CACF;AACA,MAAM,eAAe;AACrB,MAAM,EACJ,UAAU,4BACV,kBAAkB,iCAChB,oBAAoB,CAAC,GAAG,oBAAoB;AAChD,MAAM,0BAA0B,OAAO,oBAAoB,EACzD,aAAa,aACf,CAAC;AACD,MAAM,qBAAqB,gBACzB,yBACA,SAAS,oBAAoB,OAAO,cAAc;CAChD,MAAM,EAAE,OAAO,UAAU,GAAG,iBAAiB;CAC7C,MAAM,cAAc,oBAAoB,KAAK;CAC7C,MAAM,aAAa,MAAM,OAAO,IAAI;CACpC,MAAM,eAAe,gBAAgB,cAAc,UAAU;CAC7D,MAAM,YAAY,MAAM,OAAO,IAAI;CACnC,MAAM,iBAAiB,MAAM,OAAO,IAAI;CACxC,OAAuB,oBACrB,uBACA;EACE,aAAa;EACb,WAAW;EACX,UAAU;EACV,UAA0B,oBACxB,4BACA;GACE;GACA;GACA;GACA,UAA0B,qBACxB,eACA;IACE,MAAM;IACN,cAAc;IACd,OAAO;IACP,GAAG;IACH,KAAK;IACL,iBAAiB,qBACf,aAAa,kBACZ,UAAU;KACT,MAAM,OAAO;KACb,IAAI,OAAO;MACT,UAAU,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;KAClD;IACF,CACF;IACA,uBAAuB,UAAU,MAAM,OAAO;IAC9C,oBAAoB,UAAU,MAAM,OAAO;IAC3C,UAAU,CACQ,oBAAI,WAAW,EAAE,SAAS,CAAC,GAC3C,QAAQ,IAAI,aAAa,iBAAiC,oBAAI,oBAAoB,EAAE,WAAW,CAAC,CAClG;GACF,CACF;EACF,CACF;CACF,CACF;AACF,CACF;AACA,MAAM,aAAa;AACnB,MAAM,wBAAwB,OAAO,MAAM,EACzC,aAAa,WACf,CAAC;AACD,oBAAoB,uBAAuB,OAAO;AAClD,MAAM,mBAAmB,gBACvB,uBACA,SAAS,kBAAkB,OAAO,cAAc;CAC9C,MAAM,EAAE,OAAO,GAAG,eAAe;CACjC,OAAuB,oBACrB,aACA;EACE,OAAO,oBAAoB,KAAK;EAChC,GAAG;EACH,KAAK;CACP,CACF;AACF,CACF;AACA,MAAM,mBAAmB;AACzB,MAAM,8BAA8B,OAAO,MAAM,EAC/C,aAAa,iBACf,CAAC;AACD,oBAAoB,6BAA6B,aAAa;AAC9D,MAAM,yBAAyB,gBAC7B,6BACA,SAAS,wBAAwB,OAAO,cAAc;CACpD,MAAM,EAAE,OAAO,GAAG,qBAAqB;CACvC,OAAuB,oBACrB,mBACA;EACE,OAAO,oBAAoB,KAAK;EAChC,GAAG;EACH,KAAK;CACP,CACF;AACF,CACF;AACA,MAAM,cAAc;AACpB,MAAM,yBAAyB,OAAO,MAAM,EAC1C,aAAa,YACf,CAAC;AACD,oBAAoB,wBAAwB,QAAQ;AACpD,MAAM,oBAAoB,gBACxB,wBACA,SAAS,mBAAmB,OAAO,cAAc;CAC/C,MAAM,EAAE,OAAO,GAAG,gBAAgB;CAClC,OAAuB,oBACrB,aACA;EACE,OAAO,oBAAoB,KAAK;EAChC,GAAG;EACH,KAAK;CACP,CACF;AACF,CACF;AACA,MAAM,cAAc;AACpB,MAAM,yBAAyB,OAAO,MAAM,EAC1C,aAAa,YACf,CAAC;AACD,oBAAoB,wBAAwB,QAAQ;AACpD,MAAM,oBAAoB,gBACxB,wBACA,SAAS,mBAAmB,OAAO,cAAc;CAC/C,MAAM,EAAE,OAAO,GAAG,gBAAgB;CAClC,MAAM,EAAE,cAAc,6BAA6B,KAAK;CACxD,MAAM,MAAM,gBAAgB,cAAc,SAAS;CACnD,OAAuB,oBAAI,aAAa;EAAE,OAAO,oBAAoB,KAAK;EAAG,GAAG;EAAa;CAAI,CAAC;AACpG,CACF;AACA,MAAM,mBAAmB;AACzB,MAAM,8BAA8B,OAAO,MAAM,EAC/C,aAAa,iBACf,CAAC;AACD,oBAAoB,6BAA6B,aAAa;AAC9D,MAAM,yBAAyB,gBAC7B,6BACA,SAAS,wBAAwB,OAAO,cAAc;CACpD,MAAM,EAAE,OAAO,GAAG,qBAAqB;CACvC,MAAM,EAAE,mBAAmB,6BAA6B,KAAK;CAC7D,MAAM,MAAM,gBAAgB,cAAc,cAAc;CACxD,OAAuB,oBAAI,aAAa;EAAE,OAAO,oBAAoB,KAAK;EAAG,GAAG;EAAkB;CAAI,CAAC;AACzG,CACF;AACA,MAAM,sBAAsB,EAAE,iBAAiB;CAC7C,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC1C,MAAM,gBAAgB;GACpB,IAAI,CAAC,OAAO;GACZ,MAAM,iBAAiB,SAAS,eAE9B,WAAW,SAAS,aAAa,kBAAkB,CACrD;GACA,IAAI,CAAC,gBAAgB;IACnB,QAAQ,KAAK,KAAK,aAAa;;6CAEM,aAAa,oBAAoB,iBAAiB;;oKAEqE,aAAa;;mFAE9F;GAC7E;EACF,GAAG,CAAC,UAAU,CAAC;CACjB;CACA,OAAO;AACT;AACA,MAAM,oBAAoB,UAAU;CAClC,MAAM,EAAE,OAAO,QAAQ,GAAG,qBAAqB;CAC/C,MAAM,cAAc,oBAAoB,KAAK;CAC7C,MAAM,cAAc,qBAAqB,KAAK;CAC9C,IAAI,aAAa,OAAO;CACxB,OAAuB,oBAAI,QAAQ;EAAE,OAAO;EAAa,GAAG;EAAkB,OAAO;CAAK,CAAC;AAC7F;AACA,MAAM,cAAc,qBAAqB,kBAAkB;CACzD,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,OAAO;CACP,aAAa;AACf,CAAC;AACD,YAAY,cAAc"}

package/dist/jsx/AlertDialog.native.cjs

@@ -47,19 +47,16 @@ var import_constants = require("@tamagui/constants");
 var import_core2 = require("@tamagui/core");
 var import_dialog = require("@tamagui/dialog");
 var import_helpers = require("@tamagui/helpers");
-var import_use_controllable_state = require("@tamagui/use-controllable-state");
 var React = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
+var import_alertDialogPart = require("./alertDialogPart.native.js");
+var import_useNativeAlertDialog = require("./useNativeAlertDialog.native.js");
 var getAlertDialogScope = function(scope) {
 	return scope;
 };
 var ROOT_NAME = "AlertDialog";
-var ALERT_DIALOG_PART = /* @__PURE__ */ Symbol("AlertDialogPart");
-var markAlertDialogPart = function(component, part) {
-	Object.assign(component.staticConfig, { [ALERT_DIALOG_PART]: part });
-};
-var NativeAlertDialogTriggerFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogTrigger" });
-markAlertDialogPart(NativeAlertDialogTriggerFrame, "trigger");
+var TRIGGER_NAME = "AlertDialogTrigger";
+var NativeAlertDialogTriggerFrame = (0, import_core2.styled)(import_core2.View, { displayName: TRIGGER_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(NativeAlertDialogTriggerFrame, "trigger");
 var AlertDialogTrigger = (0, import_core.createStyledHOC)(NativeAlertDialogTriggerFrame, function AlertDialogTrigger2(props, forwardedRef) {
 	if (props["__native"]) {
 		var { __native, onPress, __onPress, ...rest } = props;
@@ -82,7 +79,8 @@ var AlertDialogPortal = function AlertDialogPortal2(props) {
 		...portalProps
 	});
 };
-var AlertDialogOverlayFrame = (0, import_core2.styled)(import_dialog.DialogOverlayFrame, { displayName: "AlertDialogOverlay" });
+var OVERLAY_NAME = "AlertDialogOverlay";
+var AlertDialogOverlayFrame = (0, import_core2.styled)(import_dialog.DialogOverlayFrame, { displayName: OVERLAY_NAME });
 var AlertDialogOverlay = (0, import_core.createStyledHOC)(AlertDialogOverlayFrame, function AlertDialogOverlay2(props, forwardedRef) {
 	var { scope, ...overlayProps } = props;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogOverlay, {
@@ -93,7 +91,8 @@ var AlertDialogOverlay = (0, import_core.createStyledHOC)(AlertDialogOverlayFram
 });
 var CONTENT_NAME = "AlertDialogContent";
 var { Provider: AlertDialogContextProvider, useStyledContext: useAlertDialogContentContext } = (0, import_core2.createStyledContext)({}, "AlertDialogContext");
-var AlertDialogContent = (0, import_core.createRefComponent)(function AlertDialogContent2(props, forwardedRef) {
+var AlertDialogContentFrame = (0, import_core2.styled)(import_dialog.DialogContentFrame, { displayName: CONTENT_NAME });
+var AlertDialogContent = (0, import_core.createStyledHOC)(AlertDialogContentFrame, function AlertDialogContent2(props, forwardedRef) {
 	var { scope, children, ...contentProps } = props;
 	var dialogScope = getAlertDialogScope(scope);
 	var contentRef = React.useRef(null);
@@ -118,7 +117,7 @@ var AlertDialogContent = (0, import_core.createRefComponent)(function AlertDialo
 					event.cancel();
 					if (import_constants.isWeb) {
 						var _cancelRef_current;
-						(_cancelRef_current = cancelRef.current) === null || _cancelRef_current === void 0 || _cancelRef_current.focus({ preventScroll: true });
+						(_cancelRef_current = cancelRef.current) === null || _cancelRef_current === void 0 ? void 0 : _cancelRef_current.focus({ preventScroll: true });
 					}
 				}),
 				onPointerDownOutside: function(event) {
@@ -134,7 +133,7 @@ var AlertDialogContent = (0, import_core.createRefComponent)(function AlertDialo
 });
 var TITLE_NAME = "AlertDialogTitle";
 var AlertDialogTitleFrame = (0, import_core2.styled)(import_core2.View, { displayName: TITLE_NAME });
-markAlertDialogPart(AlertDialogTitleFrame, "title");
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogTitleFrame, "title");
 var AlertDialogTitle = (0, import_core.createStyledHOC)(AlertDialogTitleFrame, function AlertDialogTitle2(props, forwardedRef) {
 	var { scope, ...titleProps } = props;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, {
@@ -145,7 +144,7 @@ var AlertDialogTitle = (0, import_core.createStyledHOC)(AlertDialogTitleFrame, f
 });
 var DESCRIPTION_NAME = "AlertDialogDescription";
 var AlertDialogDescriptionFrame = (0, import_core2.styled)(import_core2.View, { displayName: DESCRIPTION_NAME });
-markAlertDialogPart(AlertDialogDescriptionFrame, "description");
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogDescriptionFrame, "description");
 var AlertDialogDescription = (0, import_core.createStyledHOC)(AlertDialogDescriptionFrame, function AlertDialogDescription2(props, forwardedRef) {
 	var { scope, ...descriptionProps } = props;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, {
@@ -154,8 +153,9 @@ var AlertDialogDescription = (0, import_core.createStyledHOC)(AlertDialogDescrip
 		ref: forwardedRef
 	});
 });
-var AlertDialogActionFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogAction" });
-markAlertDialogPart(AlertDialogActionFrame, "action");
+var ACTION_NAME = "AlertDialogAction";
+var AlertDialogActionFrame = (0, import_core2.styled)(import_core2.View, { displayName: ACTION_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogActionFrame, "action");
 var AlertDialogAction = (0, import_core.createStyledHOC)(AlertDialogActionFrame, function AlertDialogAction2(props, forwardedRef) {
 	var { scope, ...actionProps } = props;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
@@ -164,8 +164,9 @@ var AlertDialogAction = (0, import_core.createStyledHOC)(AlertDialogActionFrame,
 		ref: forwardedRef
 	});
 });
-var AlertDialogCancelFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogCancel" });
-markAlertDialogPart(AlertDialogCancelFrame, "cancel");
+var CANCEL_NAME = "AlertDialogCancel";
+var AlertDialogCancelFrame = (0, import_core2.styled)(import_core2.View, { displayName: CANCEL_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogCancelFrame, "cancel");
 var AlertDialogCancel = (0, import_core.createStyledHOC)(AlertDialogCancelFrame, function AlertDialogCancel2(props, forwardedRef) {
 	var { scope, ...cancelProps } = props;
 	var { cancelRef } = useAlertDialogContentContext(scope);
@@ -176,8 +177,9 @@ var AlertDialogCancel = (0, import_core.createStyledHOC)(AlertDialogCancelFrame,
 		ref
 	});
 });
-var AlertDialogDestructiveFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogDestructive" });
-markAlertDialogPart(AlertDialogDestructiveFrame, "destructive");
+var DESTRUCTIVE_NAME = "AlertDialogDestructive";
+var AlertDialogDestructiveFrame = (0, import_core2.styled)(import_core2.View, { displayName: DESTRUCTIVE_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogDestructiveFrame, "destructive");
 var AlertDialogDestructive = (0, import_core.createStyledHOC)(AlertDialogDestructiveFrame, function AlertDialogDestructive2(props, forwardedRef) {
 	var { scope, ...destructiveProps } = props;
 	var { destructiveRef } = useAlertDialogContentContext(scope);
@@ -190,110 +192,35 @@ var AlertDialogDestructive = (0, import_core.createStyledHOC)(AlertDialogDestruc
 });
 var DescriptionWarning = function(param) {
 	var { contentRef } = param;
-	if (process.env.NODE_ENV === "development") React.useEffect(function() {
-		var _contentRef_current;
-		if (!import_constants.isWeb) return;
-		if (!document.getElementById((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.getAttribute("aria-describedby"))) console.warn(`\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
+	if (process.env.NODE_ENV === "development") {
+		React.useEffect(function() {
+			var _contentRef_current;
+			if (!import_constants.isWeb) return;
+			var hasDescription = document.getElementById((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.getAttribute("aria-describedby"));
+			if (!hasDescription) {
+				console.warn(`\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
   
         You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
         
         Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
         
         For more information, see https://tamagui.dev/docs/components/alert-dialog`);
-	}, [contentRef]);
+			}
+		}, [contentRef]);
+	}
 	return null;
 };
 var AlertDialogInner = function(props) {
 	var { scope, native, ...alertDialogProps } = props;
 	var dialogScope = getAlertDialogScope(scope);
-	var [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
-		prop: props.open,
-		defaultProp: props.defaultOpen || false,
-		onChange: props.onOpenChange,
-		transition: true
-	});
-	var triggerElement = null;
-	var title = "";
-	var description = "";
-	var buttons = [];
-	forEachChildDeep(React.Children.toArray(props.children), function(child) {
-		if (!/* @__PURE__ */ React.isValidElement(child)) return false;
-		var part = (0, import_core2.isTamaguiElement)(child) ? child.type.staticConfig[ALERT_DIALOG_PART] : void 0;
-		switch (part) {
-			case "trigger":
-				triggerElement = /* @__PURE__ */ React.cloneElement(child, { __native: true });
-				return false;
-			case "title":
-				title = getStringChildren(child);
-				return false;
-			case "description":
-				description = getStringChildren(child);
-				return false;
-			case "action":
-			case "destructive":
-			case "cancel":
-				var style = part === "action" ? "default" : part === "destructive" ? "destructive" : "cancel";
-				var text = getStringChildren(child);
-				var onPress = function() {
-					var _childProps_onPress;
-					var childProps = child.props;
-					childProps === null || childProps === void 0 || (_childProps_onPress = childProps.onPress) == null || _childProps_onPress.call(childProps, { native: true });
-					setOpen(false);
-				};
-				buttons.push({
-					style,
-					text,
-					onPress
-				});
-				return false;
-			default: return true;
-		}
-	});
-	(0, import_constants.useIsomorphicLayoutEffect)(function() {
-		if (!open || !native) return;
-		if (title || description) import_react_native.Alert.alert(title, description, buttons);
-	}, [native, open]);
-	if (native) return /* @__PURE__ */ React.cloneElement(triggerElement, { __onPress: function() {
-		setOpen(true);
-	} });
+	var nativeAlert = (0, import_useNativeAlertDialog.useNativeAlertDialog)(props);
+	if (nativeAlert) return nativeAlert;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog, {
 		scope: dialogScope,
 		...alertDialogProps,
 		modal: true
 	});
 };
-function forEachChildDeep(children, onChild) {
-	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-	try {
-		for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-			var child = _step.value;
-			if (!/* @__PURE__ */ React.isValidElement(child)) continue;
-			if (!onChild(child)) continue;
-			var childProps = child.props;
-			if (childProps.children) forEachChildDeep(React.Children.toArray(childProps.children), onChild);
-		}
-	} catch (err) {
-		_didIteratorError = true;
-		_iteratorError = err;
-	} finally {
-		try {
-			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
-		} finally {
-			if (_didIteratorError) throw _iteratorError;
-		}
-	}
-}
-function getStringChildren(child) {
-	var string = "";
-	forEachChildDeep(React.Children.toArray(child), function(child2) {
-		if (typeof child2.props.children === "string") {
-			string = child2.props.children;
-			return false;
-		}
-		return true;
-	});
-	return string;
-}
 var AlertDialog = (0, import_helpers.withStaticProperties)(AlertDialogInner, {
 	Trigger: AlertDialogTrigger,
 	Portal: AlertDialogPortal,