@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/overlays/alert-dialog/alert-dialog-imperative.d.ts

@@ -1,64 +1,117 @@
-import { ButtonProps } from "../../buttons/button/button.js";
-import "../../buttons/button/index.js";
+import { AlertVariants } from "../../feedback/alert/use-alert-context.js";
+import { index_parts_d_exports } from "../../feedback/alert/index.parts.js";
+import "../../feedback/alert/index.js";
 import { AlertDialogVariants } from "./use-alert-dialog-context.js";
 import React from "react";
 //#region src/components/overlays/alert-dialog/alert-dialog-imperative.d.ts
-/**
- * Rótulo e visual de um botão do alerta, no vocabulário do `Button`. Clique, `loading` e
- * `disabled` ficam com o alerta.
- */
-export type AlertDialogButtonOptions = Pick<ButtonProps, 'children' | 'colorScheme' | 'variant'>;
 export type AlertDialogAlertOptions = {
-  /** Título do alerta. */
+  /**
+   * O que aconteceu, no vocabulário do `Alert`: decide a cor e o ícone padrão do indicador, e só
+   * eles.
+   *
+   * @default 'info'
+   */
+  status?: NonNullable<AlertVariants['status']>;
+  /** Diz o que aconteceu ("Não foi possível emitir a nota"). */
   title: React.ReactNode;
   /**
-   * Texto de apoio. Só para exibição: renderiza no `AlertDialog.Outlet`, sem o contexto de quem
-   * abriu, e não muda depois de aberto.
+   * O motivo ou o que fazer em seguida. Só para exibição: renderiza no `AlertDialog.Outlet`, sem
+   * o contexto de quem abriu, e não muda depois de aberto.
    */
   description?: React.ReactNode;
+  /**
+   * Informação técnica (código de erro, resposta do servidor), num bloco "Detalhes técnicos"
+   * recolhido abaixo da descrição.
+   */
+  details?: React.ReactNode;
+  /**
+   * Troca só o desenho do indicador; a cor continua a do `status`. Um ícone próprio entra pelo
+   * `Icon` da lib, para ter o mesmo traço (`<Icon render={<TruckIcon />} />`).
+   */
+  icon?: React.ReactNode;
+  /**
+   * Rótulo do botão que fecha o alerta.
+   *
+   * @default 'OK'
+   */
+  okLabel?: React.ReactNode;
   /**
    * Largura do popup, repassada ao `AlertDialog.Root`.
    *
    * @default 'md'
    */
   size?: AlertDialogVariants['size'];
+};
+export type AlertDialogConfirmOptions = {
+  /** A pergunta ("Excluir a nota 4821?"). */
+  title: React.ReactNode;
   /**
-   * Botão que fecha o alerta: no `alert`, o único; no `confirm`, o de confirmar.
+   * A consequência da ação ("A exclusão não pode ser desfeita."). Quase sempre deve estar
+   * presente: sem ela, o título é a única informação para decidir. Só para exibição: renderiza no
+   * `AlertDialog.Outlet`, sem o contexto de quem abriu, e não muda depois de aberto.
+   */
+  description?: React.ReactNode;
+  /**
+   * Ação que destrói ou não se desfaz. O botão de confirmar fica vermelho (`red`, e não `accent`) e
+   * o foco abre no "Cancelar", para um `Enter` dado sem ler não confirmar.
    *
-   * @default { children: 'OK' } no `alert`, { children: 'Confirmar' } no `confirm`
+   * @default false
    */
-  confirmButton?: AlertDialogButtonOptions;
-};
-export type AlertDialogConfirmOptions = AlertDialogAlertOptions & {
+  destructive?: boolean;
   /**
-   * Botão de cancelar, antes do de confirmar: é o que recebe o foco ao abrir.
+   * Rótulo do botão de confirmar: o verbo da ação ("Excluir", "Cancelar a nota"), não
+   * "Confirmar" nem "Sim". Sem destrutiva, o foco abre nele.
+   */
+  confirmLabel: React.ReactNode;
+  /**
+   * Rótulo do botão de cancelar, antes do de confirmar.
    *
-   * @default { children: 'Cancelar', variant: 'outline' }
+   * @default 'Cancelar'
    */
-  cancelButton?: AlertDialogButtonOptions;
+  cancelLabel?: React.ReactNode;
   /**
    * Ação executada ao confirmar. Enquanto ela roda, o botão de confirmar fica em `loading` e o
    * alerta não fecha (nem pelo `Esc`, nem pelo cancelar). No sucesso, fecha e resolve `true`. Se
-   * ela lançar, o alerta continua aberto com o erro (o `message`, quando é um `Error`), para tentar
-   * de novo ou cancelar. Sem ela, o alerta só pergunta.
+   * ela lançar, o alerta continua aberto, com os botões de volta ao normal e sem mensagem, para
+   * tentar de novo ou cancelar. Sem ela, o alerta só pergunta.
    */
   onConfirm?: () => unknown;
+  /**
+   * Chamada com o que o `onConfirm` lançou, com o alerta ainda aberto. A lib não mostra o erro:
+   * mostrá-lo é com quem chama, por um handler global (o `onError` de um cliente de queries) ou por
+   * esta opção. Um `try/catch` dentro do `onConfirm` que não relança faz o alerta fechar como
+   * sucesso. Sem `onError` e sem handler global, a falha não aparece para o usuário.
+   */
+  onError?: (error: unknown) => void;
+  /**
+   * Largura do popup, repassada ao `AlertDialog.Root`.
+   *
+   * @default 'md'
+   */
+  size?: AlertDialogVariants['size'];
 };
 /**
- * Abre um alerta com um botão só e resolve quando ele fecha, por esse botão ou pelo `Esc`. Pode
- * ser chamado de qualquer lugar, inclusive de fora do React, mas só aparece com um
- * `AlertDialog.Outlet` montado.
+ * Abre um alerta informativo, com um indicador do `status` e um botão só, e resolve quando ele
+ * fecha, por esse botão ou pelo `Esc`. O foco abre no botão, para o `Enter` fechar mesmo com os
+ * "Detalhes técnicos" antes dele. Pode ser chamado de qualquer lugar, inclusive de fora do React,
+ * mas só aparece com um `AlertDialog.Outlet` montado.
  *
  * @example
  * ```ts
- * await AlertDialog.alert({ title: 'Sessão expirada', description: 'Entre de novo para continuar.' });
+ * await AlertDialog.alert({
+ *   status: 'error',
+ *   title: 'Não foi possível emitir a nota',
+ *   description: 'A SEFAZ está fora do ar. Tente de novo em alguns minutos.',
+ *   details: 'Rejeição 108: serviço paralisado momentaneamente.',
+ * });
  * ```
  */
 export declare const alertDialogAlert: (options: AlertDialogAlertOptions) => Promise<void>;
 /**
- * Abre um alerta de confirmação e resolve `true` se o usuário confirmar, `false` se cancelar ou
- * fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. Pode ser chamado de qualquer
- * lugar, inclusive de fora do React, mas só aparece com um `AlertDialog.Outlet` montado.
+ * Abre um alerta de confirmação, sem ícone, e resolve `true` se o usuário confirmar, `false` se
+ * cancelar ou fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. O foco abre na
+ * ação; com `destructive`, abre no "Cancelar". Pode ser chamado de qualquer lugar, inclusive de
+ * fora do React, mas só aparece com um `AlertDialog.Outlet` montado.
  *
  * Para um campo, uma escolha ou um terceiro botão, que não cabem na resposta `boolean`, monte o
  * AlertDialog com as partes e abra pelo `AlertDialog.createHandle`.
@@ -68,8 +121,14 @@ export declare const alertDialogAlert: (options: AlertDialogAlertOptions) => Pro
  * const confirmed = await AlertDialog.confirm({
  *   title: 'Excluir a nota 4821?',
  *   description: 'A exclusão não pode ser desfeita.',
- *   confirmButton: { children: 'Excluir', colorScheme: 'red' },
+ *   confirmLabel: 'Excluir',
+ *   destructive: true,
  *   onConfirm: () => deleteInvoice(4821),
+ *   onError: () =>
+ *     AlertDialog.alert({
+ *       status: 'error',
+ *       title: 'Não foi possível excluir a nota',
+ *     }),
  * });
  * ```
  */

package/dist/components/overlays/alert-dialog/alert-dialog-imperative.js

@@ -1,48 +1,58 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { Button } from "../../buttons/button/button.js";
-import { AlertContent } from "../../feedback/alert/alert-content.js";
-import { AlertDescription } from "../../feedback/alert/alert-description.js";
-import { AlertIndicator } from "../../feedback/alert/alert-indicator.js";
-import { AlertRoot } from "../../feedback/alert/alert-root.js";
-import { AlertTitle } from "../../feedback/alert/alert-title.js";
+import { CollapsibleIndicator } from "../../disclosure/collapsible/collapsible-indicator.js";
+import { CollapsiblePanel } from "../../disclosure/collapsible/collapsible-panel.js";
+import { CollapsibleRoot } from "../../disclosure/collapsible/collapsible-root.js";
+import { CollapsibleTrigger } from "../../disclosure/collapsible/collapsible-trigger.js";
 import { AlertDialogBackdrop } from "./alert-dialog-backdrop.js";
 import { AlertDialogBody } from "./alert-dialog-body.js";
 import { AlertDialogClose } from "./alert-dialog-close.js";
 import { AlertDialogDescription } from "./alert-dialog-description.js";
 import { AlertDialogFooter } from "./alert-dialog-footer.js";
 import { AlertDialogHeader } from "./alert-dialog-header.js";
+import { AlertDialogIndicator } from "./alert-dialog-indicator.js";
 import { AlertDialogPopup } from "./alert-dialog-popup.js";
 import { AlertDialogPortal } from "./alert-dialog-portal.js";
 import { AlertDialogRoot } from "./alert-dialog-root.js";
 import { alertDialogStore } from "./alert-dialog-store.js";
 import { AlertDialogTitle } from "./alert-dialog-title.js";
 import { AlertDialogViewport } from "./alert-dialog-viewport.js";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIsoLayoutEffect } from "@base-ui/utils/useIsoLayoutEffect";
 //#region src/components/overlays/alert-dialog/alert-dialog-imperative.tsx
 /**
-* Abre um alerta com um botão só e resolve quando ele fecha, por esse botão ou pelo `Esc`. Pode
-* ser chamado de qualquer lugar, inclusive de fora do React, mas só aparece com um
-* `AlertDialog.Outlet` montado.
+* Abre um alerta informativo, com um indicador do `status` e um botão só, e resolve quando ele
+* fecha, por esse botão ou pelo `Esc`. O foco abre no botão, para o `Enter` fechar mesmo com os
+* "Detalhes técnicos" antes dele. Pode ser chamado de qualquer lugar, inclusive de fora do React,
+* mas só aparece com um `AlertDialog.Outlet` montado.
 *
 * @example
 * ```ts
-* await AlertDialog.alert({ title: 'Sessão expirada', description: 'Entre de novo para continuar.' });
+* await AlertDialog.alert({
+*   status: 'error',
+*   title: 'Não foi possível emitir a nota',
+*   description: 'A SEFAZ está fora do ar. Tente de novo em alguns minutos.',
+*   details: 'Rejeição 108: serviço paralisado momentaneamente.',
+* });
 * ```
 */
 const alertDialogAlert = (options) => {
 	const { promise, resolve } = Promise.withResolvers();
 	open({
-		options,
-		hasCancel: false,
+		request: {
+			type: "alert",
+			options
+		},
 		onSettle: () => resolve()
 	});
 	return promise;
 };
 /**
-* Abre um alerta de confirmação e resolve `true` se o usuário confirmar, `false` se cancelar ou
-* fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. Pode ser chamado de qualquer
-* lugar, inclusive de fora do React, mas só aparece com um `AlertDialog.Outlet` montado.
+* Abre um alerta de confirmação, sem ícone, e resolve `true` se o usuário confirmar, `false` se
+* cancelar ou fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. O foco abre na
+* ação; com `destructive`, abre no "Cancelar". Pode ser chamado de qualquer lugar, inclusive de
+* fora do React, mas só aparece com um `AlertDialog.Outlet` montado.
 *
 * Para um campo, uma escolha ou um terceiro botão, que não cabem na resposta `boolean`, monte o
 * AlertDialog com as partes e abra pelo `AlertDialog.createHandle`.
@@ -52,16 +62,24 @@ const alertDialogAlert = (options) => {
 * const confirmed = await AlertDialog.confirm({
 *   title: 'Excluir a nota 4821?',
 *   description: 'A exclusão não pode ser desfeita.',
-*   confirmButton: { children: 'Excluir', colorScheme: 'red' },
+*   confirmLabel: 'Excluir',
+*   destructive: true,
 *   onConfirm: () => deleteInvoice(4821),
+*   onError: () =>
+*     AlertDialog.alert({
+*       status: 'error',
+*       title: 'Não foi possível excluir a nota',
+*     }),
 * });
 * ```
 */
 const alertDialogConfirm = (options) => {
 	const { promise, resolve } = Promise.withResolvers();
 	open({
-		options,
-		hasCancel: true,
+		request: {
+			type: "confirm",
+			options
+		},
 		onSettle: resolve
 	});
 	return promise;
@@ -71,7 +89,7 @@ const alertDialogConfirm = (options) => {
 * alerta pode fechar pelo botão e, depois, ser dispensado pelo `Outlet` que desmonta.
 */
 const open = (args) => {
-	const { options, hasCancel, onSettle } = args;
+	const { request, onSettle } = args;
 	const id = alertDialogStore.createId();
 	let isSettled = false;
 	const settle = (confirmed) => {
@@ -81,24 +99,30 @@ const open = (args) => {
 	};
 	alertDialogStore.add({
 		id,
-		element: /* @__PURE__ */ jsx(ImperativeAlertDialog, {
-			options,
-			hasCancel,
+		render: (nested, isParentOpen) => /* @__PURE__ */ jsx(ImperativeAlertDialog, {
+			request,
+			isParentOpen,
 			onSettle: settle,
-			onExited: () => alertDialogStore.remove(id)
-		}, id),
+			onClosing: () => alertDialogStore.markClosing(id),
+			onExited: () => alertDialogStore.remove(id),
+			children: nested
+		}),
 		dismiss: () => settle(false)
 	});
 };
 const ImperativeAlertDialog = (props) => {
-	const { options, hasCancel, onSettle, onExited } = props;
-	const { title, description, size, confirmButton, cancelButton, onConfirm } = options;
-	const { children: confirmLabel, ...confirmButtonProps } = confirmButton ?? {};
-	const { children: cancelLabel = "Cancelar", ...cancelButtonProps } = cancelButton ?? {};
+	const { request, children, isParentOpen, onSettle, onClosing, onExited } = props;
+	const { size } = request.options;
+	const onConfirm = request.type === "confirm" ? request.options.onConfirm : void 0;
+	const onError = request.type === "confirm" ? request.options.onError : void 0;
+	/**
+	* O Base UI foca o primeiro elemento focável ao abrir, e no `alert` ele seria o "Detalhes
+	* técnicos". O botão que deve receber o `Enter` (o OK, a ação ou, na destrutiva, o Cancelar)
+	* leva este ref, e o `initialFocus` do `Popup` aponta para ele.
+	*/
+	const initialFocusRef = useRef(null);
 	const [isOpen, setIsOpen] = useState(false);
 	const [isPending, setIsPending] = useState(false);
-	const [hasFailed, setHasFailed] = useState(false);
-	const [errorMessage, setErrorMessage] = useState();
 	/**
 	* Monta fechado e abre no commit seguinte: o popup só anima a entrada quando vê o `open` passar
 	* de `false` para `true`, e montar já aberto pularia a transição.
@@ -108,6 +132,7 @@ const ImperativeAlertDialog = (props) => {
 	}, []);
 	const close = (confirmed) => {
 		onSettle(confirmed);
+		onClosing();
 		setIsOpen(false);
 	};
 	const handleOpenChange = (open, eventDetails) => {
@@ -126,44 +151,84 @@ const ImperativeAlertDialog = (props) => {
 			close(true);
 			return;
 		}
-		setHasFailed(false);
 		setIsPending(true);
 		try {
 			await onConfirm();
 			close(true);
 		} catch (caught) {
-			setHasFailed(true);
-			setErrorMessage(caught instanceof Error && caught.message !== "" ? caught.message : void 0);
+			onError?.(caught);
 		} finally {
 			setIsPending(false);
 		}
 	};
-	return /* @__PURE__ */ jsx(AlertDialogRoot, {
+	return /* @__PURE__ */ jsxs(AlertDialogRoot, {
 		open: isOpen,
 		onOpenChange: handleOpenChange,
 		onOpenChangeComplete: handleOpenChangeComplete,
 		size,
-		children: /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, { children: /* @__PURE__ */ jsxs(AlertDialogPopup, { children: [
-			/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), description !== void 0 && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }),
-			hasFailed && /* @__PURE__ */ jsx(AlertDialogBody, { children: /* @__PURE__ */ jsxs(AlertRoot, {
-				status: "error",
-				role: "alert",
-				children: [/* @__PURE__ */ jsx(AlertIndicator, {}), /* @__PURE__ */ jsxs(AlertContent, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Não foi possível concluir a ação." }), errorMessage !== void 0 && /* @__PURE__ */ jsx(AlertDescription, { children: errorMessage })] })]
-			}) }),
-			/* @__PURE__ */ jsxs(AlertDialogFooter, { children: [hasCancel && /* @__PURE__ */ jsx(AlertDialogClose, {
-				disabled: isPending,
-				render: /* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					...cancelButtonProps
-				}),
-				children: cancelLabel
-			}), /* @__PURE__ */ jsx(Button, {
-				loading: isPending,
-				onClick: handleConfirm,
-				...confirmButtonProps,
-				children: confirmLabel ?? (hasCancel ? "Confirmar" : "OK")
-			})] })
-		] }) })] })
+		children: [/* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {
+			forceRender: !isParentOpen,
+			className: isParentOpen ? void 0 : "starting:opacity-0"
+		}), /* @__PURE__ */ jsx(AlertDialogViewport, { children: /* @__PURE__ */ jsxs(AlertDialogPopup, {
+			initialFocus: initialFocusRef,
+			children: [
+				request.type === "alert" ? /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+					/* @__PURE__ */ jsx(AlertDialogIndicator, {
+						status: request.options.status ?? "info",
+						children: request.options.icon
+					}),
+					/* @__PURE__ */ jsx(AlertDialogTitle, { children: request.options.title }),
+					request.options.description !== void 0 && /* @__PURE__ */ jsx(AlertDialogDescription, { children: request.options.description })
+				] }) : /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: request.options.title }), request.options.description !== void 0 && /* @__PURE__ */ jsx(AlertDialogDescription, { children: request.options.description })] }),
+				request.type === "alert" && request.options.details !== void 0 && /* @__PURE__ */ jsx(AlertDialogBody, { children: /* @__PURE__ */ jsxs(CollapsibleRoot, { children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+					className: mergeTwClassNames([
+						"w-fit",
+						"gap-1",
+						"max-sm:mx-auto",
+						"text-gray-11",
+						"text-xs"
+					]),
+					children: [/* @__PURE__ */ jsx(CollapsibleIndicator, {}), "Detalhes técnicos"]
+				}), /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsx("div", {
+					className: mergeTwClassNames(["pt-2"]),
+					children: /* @__PURE__ */ jsx("div", {
+						className: mergeTwClassNames([
+							"max-h-48",
+							"overflow-y-auto",
+							"px-3",
+							"py-2",
+							"rounded-md",
+							"border",
+							"border-gray-5",
+							"bg-gray-2",
+							"font-mono",
+							"text-gray-11",
+							"text-xs/4",
+							"wrap-break-word"
+						]),
+						children: request.options.details
+					})
+				}) })] }) }),
+				request.type === "alert" ? /* @__PURE__ */ jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsx(AlertDialogClose, {
+					render: /* @__PURE__ */ jsx(Button, {
+						ref: initialFocusRef,
+						variant: "outline"
+					}),
+					children: request.options.okLabel ?? "OK"
+				}) }) : /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogClose, {
+					ref: request.options.destructive ? initialFocusRef : void 0,
+					disabled: isPending,
+					render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+					children: request.options.cancelLabel ?? "Cancelar"
+				}), /* @__PURE__ */ jsx(Button, {
+					ref: request.options.destructive ? void 0 : initialFocusRef,
+					colorScheme: request.options.destructive ? "red" : "accent",
+					loading: isPending,
+					onClick: handleConfirm,
+					children: request.options.confirmLabel
+				})] })
+			]
+		}) })] }), children]
 	});
 };
 //#endregion

package/dist/components/overlays/alert-dialog/alert-dialog-imperative.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-imperative.js","names":["Alert.Root","Alert.Indicator","Alert.Content","Alert.Title","Alert.Description"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-imperative.tsx"],"sourcesContent":["import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { Alert } from '#components/feedback/alert';\nimport { AlertDialogBackdrop } from './alert-dialog-backdrop';\nimport { AlertDialogBody } from './alert-dialog-body';\nimport { AlertDialogClose } from './alert-dialog-close';\nimport { AlertDialogDescription } from './alert-dialog-description';\nimport { AlertDialogFooter } from './alert-dialog-footer';\nimport { AlertDialogHeader } from './alert-dialog-header';\nimport { AlertDialogPopup } from './alert-dialog-popup';\nimport { AlertDialogPortal } from './alert-dialog-portal';\nimport {\n  AlertDialogRoot,\n  type AlertDialogRootChangeEventDetails,\n} from './alert-dialog-root';\nimport { alertDialogStore } from './alert-dialog-store';\nimport { AlertDialogTitle } from './alert-dialog-title';\nimport { AlertDialogViewport } from './alert-dialog-viewport';\nimport type { AlertDialogVariants } from './use-alert-dialog-context';\n\n/**\n * Rótulo e visual de um botão do alerta, no vocabulário do `Button`. Clique, `loading` e\n * `disabled` ficam com o alerta.\n */\nexport type AlertDialogButtonOptions = Pick<\n  ButtonProps,\n  'children' | 'colorScheme' | 'variant'\n>;\n\nexport type AlertDialogAlertOptions = {\n  /** Título do alerta. */\n  title: React.ReactNode;\n  /**\n   * Texto de apoio. Só para exibição: renderiza no `AlertDialog.Outlet`, sem o contexto de quem\n   * abriu, e não muda depois de aberto.\n   */\n  description?: React.ReactNode;\n  /**\n   * Largura do popup, repassada ao `AlertDialog.Root`.\n   *\n   * @default 'md'\n   */\n  size?: AlertDialogVariants['size'];\n  /**\n   * Botão que fecha o alerta: no `alert`, o único; no `confirm`, o de confirmar.\n   *\n   * @default { children: 'OK' } no `alert`, { children: 'Confirmar' } no `confirm`\n   */\n  confirmButton?: AlertDialogButtonOptions;\n};\n\nexport type AlertDialogConfirmOptions = AlertDialogAlertOptions & {\n  /**\n   * Botão de cancelar, antes do de confirmar: é o que recebe o foco ao abrir.\n   *\n   * @default { children: 'Cancelar', variant: 'outline' }\n   */\n  cancelButton?: AlertDialogButtonOptions;\n  /**\n   * Ação executada ao confirmar. Enquanto ela roda, o botão de confirmar fica em `loading` e o\n   * alerta não fecha (nem pelo `Esc`, nem pelo cancelar). No sucesso, fecha e resolve `true`. Se\n   * ela lançar, o alerta continua aberto com o erro (o `message`, quando é um `Error`), para tentar\n   * de novo ou cancelar. Sem ela, o alerta só pergunta.\n   */\n  onConfirm?: () => unknown;\n};\n\n/**\n * Abre um alerta com um botão só e resolve quando ele fecha, por esse botão ou pelo `Esc`. Pode\n * ser chamado de qualquer lugar, inclusive de fora do React, mas só aparece com um\n * `AlertDialog.Outlet` montado.\n *\n * @example\n * ```ts\n * await AlertDialog.alert({ title: 'Sessão expirada', description: 'Entre de novo para continuar.' });\n * ```\n */\nexport const alertDialogAlert = (\n  options: AlertDialogAlertOptions,\n): Promise<void> => {\n  const { promise, resolve } = Promise.withResolvers<void>();\n\n  open({\n    options,\n    hasCancel: false,\n    onSettle: () => resolve(),\n  });\n\n  return promise;\n};\n\n/**\n * Abre um alerta de confirmação e resolve `true` se o usuário confirmar, `false` se cancelar ou\n * fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. Pode ser chamado de qualquer\n * lugar, inclusive de fora do React, mas só aparece com um `AlertDialog.Outlet` montado.\n *\n * Para um campo, uma escolha ou um terceiro botão, que não cabem na resposta `boolean`, monte o\n * AlertDialog com as partes e abra pelo `AlertDialog.createHandle`.\n *\n * @example\n * ```ts\n * const confirmed = await AlertDialog.confirm({\n *   title: 'Excluir a nota 4821?',\n *   description: 'A exclusão não pode ser desfeita.',\n *   confirmButton: { children: 'Excluir', colorScheme: 'red' },\n *   onConfirm: () => deleteInvoice(4821),\n * });\n * ```\n */\nexport const alertDialogConfirm = (\n  options: AlertDialogConfirmOptions,\n): Promise<boolean> => {\n  const { promise, resolve } = Promise.withResolvers<boolean>();\n\n  open({\n    options,\n    hasCancel: true,\n    onSettle: resolve,\n  });\n\n  return promise;\n};\n\ntype OpenArgs = {\n  options: AlertDialogConfirmOptions;\n  hasCancel: boolean;\n  onSettle: (confirmed: boolean) => void;\n};\n\n/**\n * Põe o alerta no store. A resolução passa por `settle`, que só vale na primeira chamada: o\n * alerta pode fechar pelo botão e, depois, ser dispensado pelo `Outlet` que desmonta.\n */\nconst open = (args: OpenArgs) => {\n  const { options, hasCancel, onSettle } = args;\n\n  const id = alertDialogStore.createId();\n\n  let isSettled = false;\n\n  const settle = (confirmed: boolean) => {\n    if (isSettled) {\n      return;\n    }\n\n    isSettled = true;\n    onSettle(confirmed);\n  };\n\n  alertDialogStore.add({\n    id,\n    element: (\n      <ImperativeAlertDialog\n        key={id}\n        options={options}\n        hasCancel={hasCancel}\n        onSettle={settle}\n        onExited={() => alertDialogStore.remove(id)}\n      />\n    ),\n    dismiss: () => settle(false),\n  });\n};\n\ntype ImperativeAlertDialogProps = {\n  options: AlertDialogConfirmOptions;\n  hasCancel: boolean;\n  onSettle: (confirmed: boolean) => void;\n  onExited: () => void;\n};\n\nconst ImperativeAlertDialog = (props: ImperativeAlertDialogProps) => {\n  const { options, hasCancel, onSettle, onExited } = props;\n\n  const { title, description, size, confirmButton, cancelButton, onConfirm } =\n    options;\n\n  const { children: confirmLabel, ...confirmButtonProps } = confirmButton ?? {};\n  const { children: cancelLabel = 'Cancelar', ...cancelButtonProps } =\n    cancelButton ?? {};\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isPending, setIsPending] = useState(false);\n  const [hasFailed, setHasFailed] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string>();\n\n  /**\n   * Monta fechado e abre no commit seguinte: o popup só anima a entrada quando vê o `open` passar\n   * de `false` para `true`, e montar já aberto pularia a transição.\n   */\n  useIsoLayoutEffect(() => {\n    setIsOpen(true);\n  }, []);\n\n  const close = (confirmed: boolean) => {\n    onSettle(confirmed);\n    setIsOpen(false);\n  };\n\n  const handleOpenChange = (\n    open: boolean,\n    eventDetails: AlertDialogRootChangeEventDetails,\n  ) => {\n    if (open) {\n      return;\n    }\n\n    if (isPending) {\n      eventDetails.cancel();\n      return;\n    }\n\n    close(false);\n  };\n\n  const handleOpenChangeComplete = (open: boolean) => {\n    if (!open) {\n      onExited();\n    }\n  };\n\n  const handleConfirm = async () => {\n    if (!onConfirm) {\n      close(true);\n      return;\n    }\n\n    setHasFailed(false);\n    setIsPending(true);\n\n    try {\n      await onConfirm();\n      close(true);\n    } catch (caught) {\n      setHasFailed(true);\n      setErrorMessage(\n        caught instanceof Error && caught.message !== ''\n          ? caught.message\n          : undefined,\n      );\n    } finally {\n      setIsPending(false);\n    }\n  };\n\n  return (\n    <AlertDialogRoot\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      onOpenChangeComplete={handleOpenChangeComplete}\n      size={size}\n    >\n      <AlertDialogPortal>\n        <AlertDialogBackdrop />\n        <AlertDialogViewport>\n          <AlertDialogPopup>\n            <AlertDialogHeader>\n              <AlertDialogTitle>{title}</AlertDialogTitle>\n              {description !== undefined && (\n                <AlertDialogDescription>{description}</AlertDialogDescription>\n              )}\n            </AlertDialogHeader>\n\n            {hasFailed && (\n              <AlertDialogBody>\n                <Alert.Root\n                  status=\"error\"\n                  role=\"alert\"\n                >\n                  <Alert.Indicator />\n                  <Alert.Content>\n                    <Alert.Title>Não foi possível concluir a ação.</Alert.Title>\n                    {errorMessage !== undefined && (\n                      <Alert.Description>{errorMessage}</Alert.Description>\n                    )}\n                  </Alert.Content>\n                </Alert.Root>\n              </AlertDialogBody>\n            )}\n\n            <AlertDialogFooter>\n              {hasCancel && (\n                <AlertDialogClose\n                  disabled={isPending}\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      {...cancelButtonProps}\n                    />\n                  }\n                >\n                  {cancelLabel}\n                </AlertDialogClose>\n              )}\n\n              <Button\n                loading={isPending}\n                onClick={handleConfirm}\n                {...confirmButtonProps}\n              >\n                {confirmLabel ?? (hasCancel ? 'Confirmar' : 'OK')}\n              </Button>\n            </AlertDialogFooter>\n          </AlertDialogPopup>\n        </AlertDialogViewport>\n      </AlertDialogPortal>\n    </AlertDialogRoot>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"alert-dialog-imperative.js","names":["Collapsible.Root","Collapsible.Trigger","Collapsible.Indicator","Collapsible.Panel"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-imperative.tsx"],"sourcesContent":["import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport type React from 'react';\nimport { useRef, useState } from 'react';\nimport { Button } from '#components/buttons/button';\nimport { Collapsible } from '#components/disclosure/collapsible';\nimport type { Alert } from '#components/feedback/alert';\nimport { mergeTwClassNames } from '#utils';\nimport { AlertDialogBackdrop } from './alert-dialog-backdrop';\nimport { AlertDialogBody } from './alert-dialog-body';\nimport { AlertDialogClose } from './alert-dialog-close';\nimport { AlertDialogDescription } from './alert-dialog-description';\nimport { AlertDialogFooter } from './alert-dialog-footer';\nimport { AlertDialogHeader } from './alert-dialog-header';\nimport { AlertDialogIndicator } from './alert-dialog-indicator';\nimport { AlertDialogPopup } from './alert-dialog-popup';\nimport { AlertDialogPortal } from './alert-dialog-portal';\nimport {\n  AlertDialogRoot,\n  type AlertDialogRootChangeEventDetails,\n} from './alert-dialog-root';\nimport { alertDialogStore } from './alert-dialog-store';\nimport { AlertDialogTitle } from './alert-dialog-title';\nimport { AlertDialogViewport } from './alert-dialog-viewport';\nimport type { AlertDialogVariants } from './use-alert-dialog-context';\n\nexport type AlertDialogAlertOptions = {\n  /**\n   * O que aconteceu, no vocabulário do `Alert`: decide a cor e o ícone padrão do indicador, e só\n   * eles.\n   *\n   * @default 'info'\n   */\n  status?: NonNullable<Alert.Variants['status']>;\n  /** Diz o que aconteceu (\"Não foi possível emitir a nota\"). */\n  title: React.ReactNode;\n  /**\n   * O motivo ou o que fazer em seguida. Só para exibição: renderiza no `AlertDialog.Outlet`, sem\n   * o contexto de quem abriu, e não muda depois de aberto.\n   */\n  description?: React.ReactNode;\n  /**\n   * Informação técnica (código de erro, resposta do servidor), num bloco \"Detalhes técnicos\"\n   * recolhido abaixo da descrição.\n   */\n  details?: React.ReactNode;\n  /**\n   * Troca só o desenho do indicador; a cor continua a do `status`. Um ícone próprio entra pelo\n   * `Icon` da lib, para ter o mesmo traço (`<Icon render={<TruckIcon />} />`).\n   */\n  icon?: React.ReactNode;\n  /**\n   * Rótulo do botão que fecha o alerta.\n   *\n   * @default 'OK'\n   */\n  okLabel?: React.ReactNode;\n  /**\n   * Largura do popup, repassada ao `AlertDialog.Root`.\n   *\n   * @default 'md'\n   */\n  size?: AlertDialogVariants['size'];\n};\n\nexport type AlertDialogConfirmOptions = {\n  /** A pergunta (\"Excluir a nota 4821?\"). */\n  title: React.ReactNode;\n  /**\n   * A consequência da ação (\"A exclusão não pode ser desfeita.\"). Quase sempre deve estar\n   * presente: sem ela, o título é a única informação para decidir. Só para exibição: renderiza no\n   * `AlertDialog.Outlet`, sem o contexto de quem abriu, e não muda depois de aberto.\n   */\n  description?: React.ReactNode;\n  /**\n   * Ação que destrói ou não se desfaz. O botão de confirmar fica vermelho (`red`, e não `accent`) e\n   * o foco abre no \"Cancelar\", para um `Enter` dado sem ler não confirmar.\n   *\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Rótulo do botão de confirmar: o verbo da ação (\"Excluir\", \"Cancelar a nota\"), não\n   * \"Confirmar\" nem \"Sim\". Sem destrutiva, o foco abre nele.\n   */\n  confirmLabel: React.ReactNode;\n  /**\n   * Rótulo do botão de cancelar, antes do de confirmar.\n   *\n   * @default 'Cancelar'\n   */\n  cancelLabel?: React.ReactNode;\n  /**\n   * Ação executada ao confirmar. Enquanto ela roda, o botão de confirmar fica em `loading` e o\n   * alerta não fecha (nem pelo `Esc`, nem pelo cancelar). No sucesso, fecha e resolve `true`. Se\n   * ela lançar, o alerta continua aberto, com os botões de volta ao normal e sem mensagem, para\n   * tentar de novo ou cancelar. Sem ela, o alerta só pergunta.\n   */\n  onConfirm?: () => unknown;\n  /**\n   * Chamada com o que o `onConfirm` lançou, com o alerta ainda aberto. A lib não mostra o erro:\n   * mostrá-lo é com quem chama, por um handler global (o `onError` de um cliente de queries) ou por\n   * esta opção. Um `try/catch` dentro do `onConfirm` que não relança faz o alerta fechar como\n   * sucesso. Sem `onError` e sem handler global, a falha não aparece para o usuário.\n   */\n  onError?: (error: unknown) => void;\n  /**\n   * Largura do popup, repassada ao `AlertDialog.Root`.\n   *\n   * @default 'md'\n   */\n  size?: AlertDialogVariants['size'];\n};\n\n/**\n * Abre um alerta informativo, com um indicador do `status` e um botão só, e resolve quando ele\n * fecha, por esse botão ou pelo `Esc`. O foco abre no botão, para o `Enter` fechar mesmo com os\n * \"Detalhes técnicos\" antes dele. Pode ser chamado de qualquer lugar, inclusive de fora do React,\n * mas só aparece com um `AlertDialog.Outlet` montado.\n *\n * @example\n * ```ts\n * await AlertDialog.alert({\n *   status: 'error',\n *   title: 'Não foi possível emitir a nota',\n *   description: 'A SEFAZ está fora do ar. Tente de novo em alguns minutos.',\n *   details: 'Rejeição 108: serviço paralisado momentaneamente.',\n * });\n * ```\n */\nexport const alertDialogAlert = (\n  options: AlertDialogAlertOptions,\n): Promise<void> => {\n  const { promise, resolve } = Promise.withResolvers<void>();\n\n  open({\n    request: { type: 'alert', options },\n    onSettle: () => resolve(),\n  });\n\n  return promise;\n};\n\n/**\n * Abre um alerta de confirmação, sem ícone, e resolve `true` se o usuário confirmar, `false` se\n * cancelar ou fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. O foco abre na\n * ação; com `destructive`, abre no \"Cancelar\". Pode ser chamado de qualquer lugar, inclusive de\n * fora do React, mas só aparece com um `AlertDialog.Outlet` montado.\n *\n * Para um campo, uma escolha ou um terceiro botão, que não cabem na resposta `boolean`, monte o\n * AlertDialog com as partes e abra pelo `AlertDialog.createHandle`.\n *\n * @example\n * ```ts\n * const confirmed = await AlertDialog.confirm({\n *   title: 'Excluir a nota 4821?',\n *   description: 'A exclusão não pode ser desfeita.',\n *   confirmLabel: 'Excluir',\n *   destructive: true,\n *   onConfirm: () => deleteInvoice(4821),\n *   onError: () =>\n *     AlertDialog.alert({\n *       status: 'error',\n *       title: 'Não foi possível excluir a nota',\n *     }),\n * });\n * ```\n */\nexport const alertDialogConfirm = (\n  options: AlertDialogConfirmOptions,\n): Promise<boolean> => {\n  const { promise, resolve } = Promise.withResolvers<boolean>();\n\n  open({\n    request: { type: 'confirm', options },\n    onSettle: resolve,\n  });\n\n  return promise;\n};\n\ntype ImperativeRequest =\n  | { type: 'alert'; options: AlertDialogAlertOptions }\n  | { type: 'confirm'; options: AlertDialogConfirmOptions };\n\ntype OpenArgs = {\n  request: ImperativeRequest;\n  onSettle: (confirmed: boolean) => void;\n};\n\n/**\n * Põe o alerta no store. A resolução passa por `settle`, que só vale na primeira chamada: o\n * alerta pode fechar pelo botão e, depois, ser dispensado pelo `Outlet` que desmonta.\n */\nconst open = (args: OpenArgs) => {\n  const { request, onSettle } = args;\n\n  const id = alertDialogStore.createId();\n\n  let isSettled = false;\n\n  const settle = (confirmed: boolean) => {\n    if (isSettled) {\n      return;\n    }\n\n    isSettled = true;\n    onSettle(confirmed);\n  };\n\n  alertDialogStore.add({\n    id,\n    render: (nested, isParentOpen) => (\n      <ImperativeAlertDialog\n        request={request}\n        isParentOpen={isParentOpen}\n        onSettle={settle}\n        onClosing={() => alertDialogStore.markClosing(id)}\n        onExited={() => alertDialogStore.remove(id)}\n      >\n        {nested}\n      </ImperativeAlertDialog>\n    ),\n    dismiss: () => settle(false),\n  });\n};\n\ntype ImperativeAlertDialogProps = {\n  request: ImperativeRequest;\n  /** Os alertas aninhados neste (ver o store), renderizados dentro do `Root`. */\n  children: React.ReactNode;\n  /** Se o alerta pai ainda está aberto; sempre `true` na raiz. */\n  isParentOpen: boolean;\n  onSettle: (confirmed: boolean) => void;\n  /** Chamado quando o alerta começa a fechar, antes da transição de saída. */\n  onClosing: () => void;\n  /** Chamado quando a transição de saída termina. */\n  onExited: () => void;\n};\n\nconst ImperativeAlertDialog = (props: ImperativeAlertDialogProps) => {\n  const { request, children, isParentOpen, onSettle, onClosing, onExited } =\n    props;\n\n  const { size } = request.options;\n\n  const onConfirm =\n    request.type === 'confirm' ? request.options.onConfirm : undefined;\n\n  const onError =\n    request.type === 'confirm' ? request.options.onError : undefined;\n\n  /**\n   * O Base UI foca o primeiro elemento focável ao abrir, e no `alert` ele seria o \"Detalhes\n   * técnicos\". O botão que deve receber o `Enter` (o OK, a ação ou, na destrutiva, o Cancelar)\n   * leva este ref, e o `initialFocus` do `Popup` aponta para ele.\n   */\n  const initialFocusRef = useRef<HTMLButtonElement>(null);\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isPending, setIsPending] = useState(false);\n\n  /**\n   * Monta fechado e abre no commit seguinte: o popup só anima a entrada quando vê o `open` passar\n   * de `false` para `true`, e montar já aberto pularia a transição.\n   */\n  useIsoLayoutEffect(() => {\n    setIsOpen(true);\n  }, []);\n\n  const close = (confirmed: boolean) => {\n    onSettle(confirmed);\n    onClosing();\n    setIsOpen(false);\n  };\n\n  const handleOpenChange = (\n    open: boolean,\n    eventDetails: AlertDialogRootChangeEventDetails,\n  ) => {\n    if (open) {\n      return;\n    }\n\n    if (isPending) {\n      eventDetails.cancel();\n      return;\n    }\n\n    close(false);\n  };\n\n  const handleOpenChangeComplete = (open: boolean) => {\n    if (!open) {\n      onExited();\n    }\n  };\n\n  const handleConfirm = async () => {\n    if (!onConfirm) {\n      close(true);\n      return;\n    }\n\n    setIsPending(true);\n\n    try {\n      await onConfirm();\n      close(true);\n    } catch (caught) {\n      onError?.(caught);\n    } finally {\n      setIsPending(false);\n    }\n  };\n\n  return (\n    <AlertDialogRoot\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      onOpenChangeComplete={handleOpenChangeComplete}\n      size={size}\n    >\n      <AlertDialogPortal>\n        {/**\n         * O backdrop de um alerta aninhado não renderiza: o do pai já cobre a página. Com o pai\n         * fechando ou já fora, `forceRender` mantém o escurecido, e o alerta não fica modal sem ele.\n         */}\n        {/**\n         * O backdrop forçado monta com o alerta já aberto, então o `data-starting-style` do Base UI\n         * não acontece. O `starting:` (`@starting-style`) faz o escurecido entrar em fade; sem ele,\n         * ele surge de uma vez quando o pai fecha.\n         */}\n        <AlertDialogBackdrop\n          forceRender={!isParentOpen}\n          className={isParentOpen ? undefined : 'starting:opacity-0'}\n        />\n        <AlertDialogViewport>\n          <AlertDialogPopup initialFocus={initialFocusRef}>\n            {request.type === 'alert' ? (\n              <AlertDialogHeader>\n                <AlertDialogIndicator status={request.options.status ?? 'info'}>\n                  {request.options.icon}\n                </AlertDialogIndicator>\n                <AlertDialogTitle>{request.options.title}</AlertDialogTitle>\n                {request.options.description !== undefined && (\n                  <AlertDialogDescription>\n                    {request.options.description}\n                  </AlertDialogDescription>\n                )}\n              </AlertDialogHeader>\n            ) : (\n              <AlertDialogHeader>\n                <AlertDialogTitle>{request.options.title}</AlertDialogTitle>\n                {request.options.description !== undefined && (\n                  <AlertDialogDescription>\n                    {request.options.description}\n                  </AlertDialogDescription>\n                )}\n              </AlertDialogHeader>\n            )}\n\n            {request.type === 'alert' &&\n              request.options.details !== undefined && (\n                <AlertDialogBody>\n                  <Collapsible.Root>\n                    <Collapsible.Trigger\n                      className={mergeTwClassNames([\n                        'w-fit',\n                        'gap-1',\n\n                        'max-sm:mx-auto',\n\n                        'text-gray-11',\n                        'text-xs',\n                      ])}\n                    >\n                      <Collapsible.Indicator />\n                      Detalhes técnicos\n                    </Collapsible.Trigger>\n                    <Collapsible.Panel>\n                      <div className={mergeTwClassNames(['pt-2'])}>\n                        <div\n                          className={mergeTwClassNames([\n                            // Com altura máxima e rolagem própria, detalhes longos não empurram o\n                            // rodapé para fora da tela.\n                            'max-h-48',\n                            'overflow-y-auto',\n\n                            'px-3',\n                            'py-2',\n\n                            'rounded-md',\n                            'border',\n                            'border-gray-5',\n\n                            'bg-gray-2',\n\n                            'font-mono',\n                            'text-gray-11',\n                            'text-xs/4',\n                            'wrap-break-word',\n                          ])}\n                        >\n                          {request.options.details}\n                        </div>\n                      </div>\n                    </Collapsible.Panel>\n                  </Collapsible.Root>\n                </AlertDialogBody>\n              )}\n\n            {request.type === 'alert' ? (\n              <AlertDialogFooter>\n                <AlertDialogClose\n                  render={\n                    <Button\n                      ref={initialFocusRef}\n                      variant=\"outline\"\n                    />\n                  }\n                >\n                  {request.options.okLabel ?? 'OK'}\n                </AlertDialogClose>\n              </AlertDialogFooter>\n            ) : (\n              <AlertDialogFooter>\n                <AlertDialogClose\n                  ref={\n                    request.options.destructive ? initialFocusRef : undefined\n                  }\n                  disabled={isPending}\n                  render={<Button variant=\"outline\" />}\n                >\n                  {request.options.cancelLabel ?? 'Cancelar'}\n                </AlertDialogClose>\n\n                <Button\n                  ref={\n                    request.options.destructive ? undefined : initialFocusRef\n                  }\n                  colorScheme={request.options.destructive ? 'red' : 'accent'}\n                  loading={isPending}\n                  onClick={handleConfirm}\n                >\n                  {request.options.confirmLabel}\n                </Button>\n              </AlertDialogFooter>\n            )}\n          </AlertDialogPopup>\n        </AlertDialogViewport>\n      </AlertDialogPortal>\n\n      {/**\n       * Fora do `Portal`, para os aninhados sobreviverem à desmontagem do portal deste alerta\n       * quando ele sai antes deles. O `Root` deles ainda acha este pelo contexto.\n       */}\n      {children}\n    </AlertDialogRoot>\n  );\n};\n"],"mappings":"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"}

package/dist/components/overlays/alert-dialog/alert-dialog-indicator-variants.d.ts

@@ -0,0 +1,24 @@
+import { AlertVariants } from "../../feedback/alert/use-alert-context.js";
+import { index_parts_d_exports } from "../../feedback/alert/index.parts.js";
+import "../../feedback/alert/index.js";
+//#region src/components/overlays/alert-dialog/alert-dialog-indicator-variants.d.ts
+export type AlertDialogIndicatorVariants = {
+  /**
+   * O que o alerta comunica, no vocabulário do `Alert`. Decide a cor (`neutral` gray, `info` blue,
+   * `success` green, `warning` amber, `error` red) e o ícone padrão.
+   *
+   * @default 'neutral'
+   */
+  status?: AlertVariants['status'];
+};
+export declare const alertDialogIndicatorDefaultVariants: Required<AlertDialogIndicatorVariants>;
+/**
+ * A cor do ícone segue o `status`, no passo 11: sobre a superfície neutra do popup, o ícone é o
+ * único lugar com a cor do `status`. Ela fica no indicador, e não nos filhos, para valer também
+ * quando o filho troca o desenho.
+ */
+export declare const alertDialogIndicatorVariants: (props?: ({
+  status?: "neutral" | "info" | "success" | "warning" | "error" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=alert-dialog-indicator-variants.d.ts.map

package/dist/components/overlays/alert-dialog/alert-dialog-indicator-variants.js

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+//#region src/components/overlays/alert-dialog/alert-dialog-indicator-variants.ts
+const alertDialogIndicatorDefaultVariants = { status: "neutral" };
+/**
+* A cor do ícone segue o `status`, no passo 11: sobre a superfície neutra do popup, o ícone é o
+* único lugar com a cor do `status`. Ela fica no indicador, e não nos filhos, para valer também
+* quando o filho troca o desenho.
+*/
+const alertDialogIndicatorVariants = cva([
+	"flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"h-6",
+	"text-xl",
+	"leading-none",
+	"[&_svg]:size-[1em]"
+], {
+	variants: { status: {
+		neutral: ["text-gray-11"],
+		info: ["text-blue-11"],
+		success: ["text-green-11"],
+		warning: ["text-amber-11"],
+		error: ["text-red-11"]
+	} },
+	defaultVariants: { status: alertDialogIndicatorDefaultVariants.status }
+});
+//#endregion
+export { alertDialogIndicatorDefaultVariants, alertDialogIndicatorVariants };
+
+//# sourceMappingURL=alert-dialog-indicator-variants.js.map

package/dist/components/overlays/alert-dialog/alert-dialog-indicator-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-indicator-variants.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-indicator-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { Alert } from '#components/feedback/alert';\n\nexport type AlertDialogIndicatorVariants = {\n  /**\n   * O que o alerta comunica, no vocabulário do `Alert`. Decide a cor (`neutral` gray, `info` blue,\n   * `success` green, `warning` amber, `error` red) e o ícone padrão.\n   *\n   * @default 'neutral'\n   */\n  status?: Alert.Variants['status'];\n};\n\nexport const alertDialogIndicatorDefaultVariants: Required<AlertDialogIndicatorVariants> =\n  {\n    status: 'neutral',\n  };\n\n/**\n * A cor do ícone segue o `status`, no passo 11: sobre a superfície neutra do popup, o ícone é o\n * único lugar com a cor do `status`. Ela fica no indicador, e não nos filhos, para valer também\n * quando o filho troca o desenho.\n */\nexport const alertDialogIndicatorVariants = cva(\n  [\n    'flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n\n    'h-6',\n\n    'text-xl',\n    // Sem entrelinha, um emoji ocuparia mais altura que o ícone.\n    'leading-none',\n\n    '[&_svg]:size-[1em]',\n  ],\n  {\n    variants: {\n      status: {\n        neutral: ['text-gray-11'],\n        info: ['text-blue-11'],\n        success: ['text-green-11'],\n        warning: ['text-amber-11'],\n        error: ['text-red-11'],\n      },\n    },\n    defaultVariants: {\n      status: alertDialogIndicatorDefaultVariants.status,\n    },\n  },\n);\n"],"mappings":";;AAaA,MAAa,sCACX,EACE,QAAQ,UACV;;;;;;AAOF,MAAa,+BAA+B,IAC1C;CACE;CACA;CACA;CACA;CAEA;CAEA;CAEA;CAEA;AACF,GACA;CACE,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,cAAc;EACxB,MAAM,CAAC,cAAc;EACrB,SAAS,CAAC,eAAe;EACzB,SAAS,CAAC,eAAe;EACzB,OAAO,CAAC,aAAa;CACvB,EACF;CACA,iBAAiB,EACf,QAAQ,oCAAoC,OAC9C;AACF,CACF"}

package/dist/components/overlays/alert-dialog/alert-dialog-indicator.d.ts

@@ -0,0 +1,25 @@
+import { AlertDialogIndicatorVariants } from "./alert-dialog-indicator-variants.js";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/overlays/alert-dialog/alert-dialog-indicator.d.ts
+export type AlertDialogIndicatorProps = MergeOverride<useRender.ComponentProps<'div'>, AlertDialogIndicatorVariants>;
+/**
+ * Ícone do alert dialog, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon`
+ * da lib; com filhos (outro ícone, um emoji), usa os filhos, e um ícone próprio entra pelo `Icon`
+ * para ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do
+ * `AlertDialog.Title`, para ficar alinhado à primeira linha.
+ *
+ * Como filho do `AlertDialog.Header`, fica à esquerda do texto; no celular, acima dele.
+ *
+ * Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.
+ *
+ * Cópia do `Alert.Indicator`, a origem, com os mesmos ícones; as diferenças: o `status` é prop da
+ * parte, e não vem de um contexto, e a cor está no passo 11.
+ */
+export declare const AlertDialogIndicator: {
+  (props: AlertDialogIndicatorProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=alert-dialog-indicator.d.ts.map