@lucasbernardosn/react-ui 0.2.0 → 0.4.0

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

@@ -2,10 +2,13 @@ import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/overlays/alert-dialog/alert-dialog-footer.tsx
 /**
-* Linha de ações na base do alert dialog, alinhadas à direita.
+* Linha de ações na base do alert dialog, alinhadas à direita. Em tela pequena, empilha as ações
+* na largura toda, com a última em cima: a ordem do DOM e do foco não muda (cancelar antes da
+* ação).
 *
-* Cópia de `DialogFooter`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogFooter` (tabela no README de `overlays`; o mecanismo está explicado lá), com a
+* pilha do celular e sempre 24px antes das ações (sem o `pt-2`). Segue o modelo de superfície
+* da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
 */
 const AlertDialogFooter = (props) => {
 	const { render, className, ...rest } = props;
@@ -17,9 +20,10 @@ const AlertDialogFooter = (props) => {
 			"justify-end",
 			"gap-2",
 			"px-(--alert-dialog-padding)",
-			"pt-2",
+			"pt-(--alert-dialog-padding)",
 			"pb-(--alert-dialog-padding)",
-			"first:pt-(--alert-dialog-padding)"
+			"max-sm:flex-col-reverse",
+			"max-sm:*:w-full"
 		], className)
 	};
 	return useRender({

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-footer.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do alert dialog, alinhadas à direita.\n *\n * Cópia de `DialogFooter`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogFooter = (props: AlertDialogFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--alert-dialog-padding)',\n        'pt-2',\n        'pb-(--alert-dialog-padding)',\n        // Abrindo o dialog, fecha o respiro de cima.\n        'first:pt-(--alert-dialog-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"alert-dialog-footer.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do alert dialog, alinhadas à direita. Em tela pequena, empilha as ações\n * na largura toda, com a última em cima: a ordem do DOM e do foco não muda (cancelar antes da\n * ação).\n *\n * Cópia de `DialogFooter` (tabela no README de `overlays`; o mecanismo está explicado lá), com a\n * pilha do celular e sempre 24px antes das ações (sem o `pt-2`). Segue o modelo de superfície\n * da pendência \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogFooter = (props: AlertDialogFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--alert-dialog-padding)',\n        'pt-(--alert-dialog-padding)',\n        'pb-(--alert-dialog-padding)',\n\n        'max-sm:flex-col-reverse',\n        'max-sm:*:w-full',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -4,8 +4,15 @@ export type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;
 /**
  * Topo do alert dialog, onde ficam título e descrição.
  *
- * Cópia de `DialogHeader`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Com um `AlertDialog.Indicator` como filho, vira um grid de duas colunas: o indicador à esquerda,
+ * alinhado à primeira linha do título, e os demais filhos (título, descrição, o que vier) na
+ * coluna da direita, alinhados entre si. Em tela pequena o grid se desfaz: o indicador fica acima
+ * do texto e tudo é centralizado.
+ *
+ * Cópia de `DialogHeader` (tabela no README de `overlays`; o mecanismo está explicado lá), com o
+ * grid do indicador, o texto centralizado no celular, 4px entre título e descrição e sem o `pb-2`:
+ * o espaço antes da parte seguinte é o padding dela. Segue o modelo de superfície da pendência
+ * "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
  */
 export declare const AlertDialogHeader: {
   (props: AlertDialogHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -4,8 +4,15 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Topo do alert dialog, onde ficam título e descrição.
 *
-* Cópia de `DialogHeader`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Com um `AlertDialog.Indicator` como filho, vira um grid de duas colunas: o indicador à esquerda,
+* alinhado à primeira linha do título, e os demais filhos (título, descrição, o que vier) na
+* coluna da direita, alinhados entre si. Em tela pequena o grid se desfaz: o indicador fica acima
+* do texto e tudo é centralizado.
+*
+* Cópia de `DialogHeader` (tabela no README de `overlays`; o mecanismo está explicado lá), com o
+* grid do indicador, o texto centralizado no celular, 4px entre título e descrição e sem o `pb-2`:
+* o espaço antes da parte seguinte é o padding dela. Segue o modelo de superfície da pendência
+* "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
 */
 const AlertDialogHeader = (props) => {
 	const { render, className, ...rest } = props;
@@ -14,11 +21,18 @@ const AlertDialogHeader = (props) => {
 		className: mergeTwClassNames([
 			"flex",
 			"flex-col",
-			"gap-0.5",
+			"gap-1",
 			"px-(--alert-dialog-padding)",
 			"pt-(--alert-dialog-padding)",
-			"pb-2",
-			"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)"
+			"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)",
+			"max-sm:text-center",
+			"max-sm:[&>[data-component='AlertDialog.Indicator']]:mb-2",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:grid",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:grid-cols-[auto_1fr]",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:gap-x-3",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>:not([data-component='AlertDialog.Indicator'])]:col-start-2",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>[data-component='AlertDialog.Indicator']]:col-start-1",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>[data-component='AlertDialog.Indicator']]:row-start-1"
 		], className)
 	};
 	return useRender({

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-header.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do alert dialog, onde ficam título e descrição.\n *\n * Cópia de `DialogHeader`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogHeader = (props: AlertDialogHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--alert-dialog-padding)',\n        'pt-(--alert-dialog-padding)',\n        'pb-2',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do dialog embaixo. Por irmão, e não por\n        // `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogHeader.displayName = 'AlertDialog.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAGA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"alert-dialog-header.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do alert dialog, onde ficam título e descrição.\n *\n * Com um `AlertDialog.Indicator` como filho, vira um grid de duas colunas: o indicador à esquerda,\n * alinhado à primeira linha do título, e os demais filhos (título, descrição, o que vier) na\n * coluna da direita, alinhados entre si. Em tela pequena o grid se desfaz: o indicador fica acima\n * do texto e tudo é centralizado.\n *\n * Cópia de `DialogHeader` (tabela no README de `overlays`; o mecanismo está explicado lá), com o\n * grid do indicador, o texto centralizado no celular, 4px entre título e descrição e sem o `pb-2`:\n * o espaço antes da parte seguinte é o padding dela. Segue o modelo de superfície da pendência\n * \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogHeader = (props: AlertDialogHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-1',\n\n        'px-(--alert-dialog-padding)',\n        'pt-(--alert-dialog-padding)',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do dialog embaixo. Por irmão, e não por\n        // `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n\n        'max-sm:text-center',\n        // Em coluna, o `gap` de 4px colaria o indicador no título; com o `mb-2`, ficam 12px.\n        \"max-sm:[&>[data-component='AlertDialog.Indicator']]:mb-2\",\n        // O grid vale a partir de `sm`; abaixo, o header segue em coluna, com o indicador acima do\n        // texto. O indicador fixa a coluna e a linha 1 para valer qualquer que seja a ordem dos\n        // filhos, e todo o resto vai para a coluna 2, alinhado entre si.\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:grid\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:grid-cols-[auto_1fr]\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:gap-x-3\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>:not([data-component='AlertDialog.Indicator'])]:col-start-2\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>[data-component='AlertDialog.Indicator']]:col-start-1\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>[data-component='AlertDialog.Indicator']]:row-start-1\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogHeader.displayName = 'AlertDialog.Header';\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAGA;GAEA;GAEA;GAIA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -0,0 +1,137 @@
+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
+export type AlertDialogAlertOptions = {
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * 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 `brand`) e
+   * o foco abre no "Cancelar", para um `Enter` dado sem ler não confirmar.
+   *
+   * @default false
+   */
+  destructive?: boolean;
+  /**
+   * 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 'Cancelar'
+   */
+  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 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 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({
+ *   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, 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`.
+ *
+ * @example
+ * ```ts
+ * const confirmed = await AlertDialog.confirm({
+ *   title: 'Excluir a nota 4821?',
+ *   description: 'A exclusão não pode ser desfeita.',
+ *   confirmLabel: 'Excluir',
+ *   destructive: true,
+ *   onConfirm: () => deleteInvoice(4821),
+ *   onError: () =>
+ *     AlertDialog.alert({
+ *       status: 'error',
+ *       title: 'Não foi possível excluir a nota',
+ *     }),
+ * });
+ * ```
+ */
+export declare const alertDialogConfirm: (options: AlertDialogConfirmOptions) => Promise<boolean>;
+//#endregion
+//# sourceMappingURL=alert-dialog-imperative.d.ts.map

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

@@ -0,0 +1,237 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Button } from "../../buttons/button/button.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 { 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 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({
+*   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({
+		request: {
+			type: "alert",
+			options
+		},
+		onSettle: () => resolve()
+	});
+	return promise;
+};
+/**
+* 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`.
+*
+* @example
+* ```ts
+* const confirmed = await AlertDialog.confirm({
+*   title: 'Excluir a nota 4821?',
+*   description: 'A exclusão não pode ser desfeita.',
+*   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({
+		request: {
+			type: "confirm",
+			options
+		},
+		onSettle: resolve
+	});
+	return promise;
+};
+/**
+* Põe o alerta no store. A resolução passa por `settle`, que só vale na primeira chamada: o
+* alerta pode fechar pelo botão e, depois, ser dispensado pelo `Outlet` que desmonta.
+*/
+const open = (args) => {
+	const { request, onSettle } = args;
+	const id = alertDialogStore.createId();
+	let isSettled = false;
+	const settle = (confirmed) => {
+		if (isSettled) return;
+		isSettled = true;
+		onSettle(confirmed);
+	};
+	alertDialogStore.add({
+		id,
+		render: (nested, isParentOpen) => /* @__PURE__ */ jsx(ImperativeAlertDialog, {
+			request,
+			isParentOpen,
+			onSettle: settle,
+			onClosing: () => alertDialogStore.markClosing(id),
+			onExited: () => alertDialogStore.remove(id),
+			children: nested
+		}),
+		dismiss: () => settle(false)
+	});
+};
+const ImperativeAlertDialog = (props) => {
+	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);
+	/**
+	* 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.
+	*/
+	useIsoLayoutEffect(() => {
+		setIsOpen(true);
+	}, []);
+	const close = (confirmed) => {
+		onSettle(confirmed);
+		onClosing();
+		setIsOpen(false);
+	};
+	const handleOpenChange = (open, eventDetails) => {
+		if (open) return;
+		if (isPending) {
+			eventDetails.cancel();
+			return;
+		}
+		close(false);
+	};
+	const handleOpenChangeComplete = (open) => {
+		if (!open) onExited();
+	};
+	const handleConfirm = async () => {
+		if (!onConfirm) {
+			close(true);
+			return;
+		}
+		setIsPending(true);
+		try {
+			await onConfirm();
+			close(true);
+		} catch (caught) {
+			onError?.(caught);
+		} finally {
+			setIsPending(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(AlertDialogRoot, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		onOpenChangeComplete: handleOpenChangeComplete,
+		size,
+		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" : "brand",
+					loading: isPending,
+					onClick: handleConfirm,
+					children: request.options.confirmLabel
+				})] })
+			]
+		}) })] }), children]
+	});
+};
+//#endregion
+export { alertDialogAlert, alertDialogConfirm };
+
+//# sourceMappingURL=alert-dialog-imperative.js.map

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

@@ -0,0 +1 @@
+{"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 `brand`) 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' : 'brand'}\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 (tabela no README de `feedback`), 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