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

package/dist/cjs/AlertDialog.cjs

@@ -44,18 +44,15 @@ var import_constants = require("@tamagui/constants");
 var import_core2 = require("@tamagui/core");
 var import_dialog = require("@tamagui/dialog");
 var import_helpers = require("@tamagui/helpers");
-require("@tamagui/use-controllable-state");
 var React = __toESM(require("react"), 1);
-require("react-native-web");
+var import_alertDialogPart = require("./alertDialogPart.cjs");
+var import_useNativeAlertDialog = require("./useNativeAlertDialog.cjs");
 var import_jsx_runtime = require("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 = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogTrigger" });
-markAlertDialogPart(NativeAlertDialogTriggerFrame, "trigger");
+const TRIGGER_NAME = "AlertDialogTrigger";
+const NativeAlertDialogTriggerFrame = (0, import_core2.styled)(import_core2.View, { displayName: TRIGGER_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(NativeAlertDialogTriggerFrame, "trigger");
 const AlertDialogTrigger = (0, import_core.createStyledHOC)(NativeAlertDialogTriggerFrame, function AlertDialogTrigger2(props, forwardedRef) {
 	if (props["__native"]) {
 		const { __native, onPress, __onPress, ...rest } = props;
@@ -78,7 +75,8 @@ const AlertDialogPortal = function AlertDialogPortal2(props) {
 		...portalProps
 	});
 };
-const AlertDialogOverlayFrame = (0, import_core2.styled)(import_dialog.DialogOverlayFrame, { displayName: "AlertDialogOverlay" });
+const OVERLAY_NAME = "AlertDialogOverlay";
+const AlertDialogOverlayFrame = (0, import_core2.styled)(import_dialog.DialogOverlayFrame, { displayName: OVERLAY_NAME });
 const AlertDialogOverlay = (0, import_core.createStyledHOC)(AlertDialogOverlayFrame, function AlertDialogOverlay2(props, forwardedRef) {
 	const { scope, ...overlayProps } = props;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogOverlay, {
@@ -89,7 +87,8 @@ const AlertDialogOverlay = (0, import_core.createStyledHOC)(AlertDialogOverlayFr
 });
 const CONTENT_NAME = "AlertDialogContent";
 const { Provider: AlertDialogContextProvider, useStyledContext: useAlertDialogContentContext } = (0, import_core2.createStyledContext)({}, "AlertDialogContext");
-const AlertDialogContent = (0, import_core.createRefComponent)(function AlertDialogContent2(props, forwardedRef) {
+const AlertDialogContentFrame = (0, import_core2.styled)(import_dialog.DialogContentFrame, { displayName: CONTENT_NAME });
+const AlertDialogContent = (0, import_core.createStyledHOC)(AlertDialogContentFrame, function AlertDialogContent2(props, forwardedRef) {
 	const { scope, children, ...contentProps } = props;
 	const dialogScope = getAlertDialogScope(scope);
 	const contentRef = React.useRef(null);
@@ -112,7 +111,9 @@ const AlertDialogContent = (0, import_core.createRefComponent)(function AlertDia
 				ref: composedRefs,
 				onOpenAutoFocus: (0, import_helpers.composeEventHandlers)(contentProps.onOpenAutoFocus, (event) => {
 					event.cancel();
-					if (import_constants.isWeb) cancelRef.current?.focus({ preventScroll: true });
+					if (import_constants.isWeb) {
+						cancelRef.current?.focus({ preventScroll: true });
+					}
 				}),
 				onPointerDownOutside: (event) => event.cancel(),
 				onInteractOutside: (event) => event.cancel(),
@@ -123,7 +124,7 @@ const AlertDialogContent = (0, import_core.createRefComponent)(function AlertDia
 });
 const TITLE_NAME = "AlertDialogTitle";
 const AlertDialogTitleFrame = (0, import_core2.styled)(import_core2.View, { displayName: TITLE_NAME });
-markAlertDialogPart(AlertDialogTitleFrame, "title");
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogTitleFrame, "title");
 const AlertDialogTitle = (0, import_core.createStyledHOC)(AlertDialogTitleFrame, function AlertDialogTitle2(props, forwardedRef) {
 	const { scope, ...titleProps } = props;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, {
@@ -134,7 +135,7 @@ const AlertDialogTitle = (0, import_core.createStyledHOC)(AlertDialogTitleFrame,
 });
 const DESCRIPTION_NAME = "AlertDialogDescription";
 const AlertDialogDescriptionFrame = (0, import_core2.styled)(import_core2.View, { displayName: DESCRIPTION_NAME });
-markAlertDialogPart(AlertDialogDescriptionFrame, "description");
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogDescriptionFrame, "description");
 const AlertDialogDescription = (0, import_core.createStyledHOC)(AlertDialogDescriptionFrame, function AlertDialogDescription2(props, forwardedRef) {
 	const { scope, ...descriptionProps } = props;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, {
@@ -143,8 +144,9 @@ const AlertDialogDescription = (0, import_core.createStyledHOC)(AlertDialogDescr
 		ref: forwardedRef
 	});
 });
-const AlertDialogActionFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogAction" });
-markAlertDialogPart(AlertDialogActionFrame, "action");
+const ACTION_NAME = "AlertDialogAction";
+const AlertDialogActionFrame = (0, import_core2.styled)(import_core2.View, { displayName: ACTION_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogActionFrame, "action");
 const AlertDialogAction = (0, import_core.createStyledHOC)(AlertDialogActionFrame, function AlertDialogAction2(props, forwardedRef) {
 	const { scope, ...actionProps } = props;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
@@ -153,8 +155,9 @@ const AlertDialogAction = (0, import_core.createStyledHOC)(AlertDialogActionFram
 		ref: forwardedRef
 	});
 });
-const AlertDialogCancelFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogCancel" });
-markAlertDialogPart(AlertDialogCancelFrame, "cancel");
+const CANCEL_NAME = "AlertDialogCancel";
+const AlertDialogCancelFrame = (0, import_core2.styled)(import_core2.View, { displayName: CANCEL_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogCancelFrame, "cancel");
 const AlertDialogCancel = (0, import_core.createStyledHOC)(AlertDialogCancelFrame, function AlertDialogCancel2(props, forwardedRef) {
 	const { scope, ...cancelProps } = props;
 	const { cancelRef } = useAlertDialogContentContext(scope);
@@ -165,8 +168,9 @@ const AlertDialogCancel = (0, import_core.createStyledHOC)(AlertDialogCancelFram
 		ref
 	});
 });
-const AlertDialogDestructiveFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogDestructive" });
-markAlertDialogPart(AlertDialogDestructiveFrame, "destructive");
+const DESTRUCTIVE_NAME = "AlertDialogDestructive";
+const AlertDialogDestructiveFrame = (0, import_core2.styled)(import_core2.View, { displayName: DESTRUCTIVE_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogDestructiveFrame, "destructive");
 const AlertDialogDestructive = (0, import_core.createStyledHOC)(AlertDialogDestructiveFrame, function AlertDialogDestructive2(props, forwardedRef) {
 	const { scope, ...destructiveProps } = props;
 	const { destructiveRef } = useAlertDialogContentContext(scope);
@@ -178,35 +182,34 @@ const AlertDialogDestructive = (0, import_core.createStyledHOC)(AlertDialogDestr
 	});
 });
 const DescriptionWarning = ({ contentRef }) => {
-	if (process.env.NODE_ENV === "development") React.useEffect(() => {
-		if (!import_constants.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 (!import_constants.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 = (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) {
-	for (const child of children) {
-		if (!React.isValidElement(child)) continue;
-		if (!onChild(child)) continue;
-		const childProps = child.props;
-		if (childProps.children) forEachChildDeep(React.Children.toArray(childProps.children), onChild);
-	}
-}
 const AlertDialog = (0, import_helpers.withStaticProperties)(AlertDialogInner, {
 	Trigger: AlertDialogTrigger,
 	Portal: AlertDialogPortal,

package/dist/cjs/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,

package/dist/cjs/AlertDialog.native.js

@@ -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,