@lucasbernardosn/react-ui 0.3.0 → 0.4.0

package/dist/components/layout/scroll-area/scroll-area-viewport-variants.d.ts

@@ -22,7 +22,7 @@ export type ScrollAreaViewportVariants = {
  * já aparecer antes da primeira medição, quando ainda há conteúdo abaixo.
  */
 export declare const scrollAreaViewportVariants: (props?: ({
-  fade?: "vertical" | "horizontal" | "both" | null | undefined;
+  fade?: "both" | "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=scroll-area-viewport-variants.d.ts.map

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

@@ -5,8 +5,11 @@ export type AlertDialogBodyProps = useRender.ComponentProps<'div'>;
  * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.
  * Opcional: o caso comum é só `Header` e `Footer`.
  *
- * Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogBody` (tabela no README de `overlays`; o mecanismo está explicado lá), com o
+ * espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda
+ * (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um
+ * `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície
+ * da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
  */
 export declare const AlertDialogBody: {
   (props: AlertDialogBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -5,8 +5,11 @@ import { mergeProps, useRender } from "@base-ui/react";
 * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.
 * Opcional: o caso comum é só `Header` e `Footer`.
 *
-* Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogBody` (tabela no README de `overlays`; o mecanismo está explicado lá), com o
+* espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda
+* (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um
+* `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície
+* da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
 */
 const AlertDialogBody = (props) => {
 	const { render, className, ...rest } = props;
@@ -16,11 +19,13 @@ const AlertDialogBody = (props) => {
 			"flex",
 			"flex-1",
 			"flex-col",
+			"gap-4",
 			"min-h-0",
 			"overflow-y-auto",
 			"px-(--alert-dialog-padding)",
-			"py-2",
 			"first:pt-(--alert-dialog-padding)",
+			"not-first:mt-4",
+			"sm:[[data-component='AlertDialog.Header']:has(>[data-component='AlertDialog.Indicator'])~&]:pl-[calc(var(--alert-dialog-padding)+--spacing(8))]",
 			"[&:not(:has(~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)"
 		], className)
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-body.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.\n * Opcional: o caso comum é só `Header` e `Footer`.\n *\n * Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogBody = (props: AlertDialogBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n        // Sem o `min-h-0`, o item flex não encolhe abaixo do conteúdo, e o popup vaza da tela.\n        'min-h-0',\n        'overflow-y-auto',\n\n        'px-(--alert-dialog-padding)',\n        'py-2',\n        'first:pt-(--alert-dialog-padding)',\n        // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[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\nAlertDialogBody.displayName = 'AlertDialog.Body';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"alert-dialog-body.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.\n * Opcional: o caso comum é só `Header` e `Footer`.\n *\n * Cópia de `DialogBody` (tabela no README de `overlays`; o mecanismo está explicado lá), com o\n * espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda\n * (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um\n * `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície\n * da pendência \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogBody = (props: AlertDialogBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n        'gap-4',\n        // Sem o `min-h-0`, o item flex não encolhe abaixo do conteúdo, e o popup vaza da tela.\n        'min-h-0',\n        'overflow-y-auto',\n\n        'px-(--alert-dialog-padding)',\n        'first:pt-(--alert-dialog-padding)',\n        // Depois de outra parte, o espaço de 16px é margem, e não padding: fica fora da área que\n        // rola. Com padding, o conteúdo rolado seria cortado rente à descrição do header, e com a\n        // margem ele some 16px abaixo dela.\n        'not-first:mt-4',\n        // Com um indicador no header anterior (ícone de 20px mais gap de 12px), recua o conteúdo\n        // para o alinhar ao texto do header. No celular o header é centralizado, sem recuo.\n        \"sm:[[data-component='AlertDialog.Header']:has(>[data-component='AlertDialog.Indicator'])~&]:pl-[calc(var(--alert-dialog-padding)+--spacing(8))]\",\n        // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[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\nAlertDialogBody.displayName = 'AlertDialog.Body';\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;GAIA;GAGA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

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

@@ -2,10 +2,13 @@ import { useRender } from "@base-ui/react";
 //#region src/components/overlays/alert-dialog/alert-dialog-footer.d.ts
 export type AlertDialogFooterProps = useRender.ComponentProps<'div'>;
 /**
- * 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.
  */
 export declare const AlertDialogFooter: {
   (props: AlertDialogFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -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 `brand`) 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',
+ *     }),
  * });
  * ```
  */