npm - @lucasbernardosn/react-ui - Versions diffs - 0.4.0 → 0.5.0 - Mend

@lucasbernardosn/react-ui 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (552) hide show

package/dist/components/overlays/alert-dialog/alert-dialog-backdrop.js CHANGED Viewed

@@ -6,8 +6,7 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 * Camada atrás do popup que cobre e escurece a página. Num alert dialog aninhado, o Base UI não a
 * renderiza (a não ser com `forceRender`): quem escurece é o popup de trás.
 *
-* Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
-* de `overlays`).
+* Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.
 */
 const AlertDialogBackdrop = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/alert-dialog/alert-dialog-backdrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-dialog-backdrop.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-backdrop.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogBackdropProps = BaseAlertDialog.Backdrop.Props;\n\nexport type AlertDialogBackdropState = BaseAlertDialog.Backdrop.State;\n\n/*\n Camada atrás do popup que cobre e escurece a página. Num alert dialog aninhado, o Base UI não a\n * renderiza (a não ser com `forceRender`): quem escurece é o popup de trás.\n \n Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças ~~(tabela no README\n * de `overlays`)~~.\n */\nexport const AlertDialogBackdrop = (props: AlertDialogBackdropProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseAlertDialog.Backdrop\n data-component=\"AlertDialog.Backdrop\"\n className={mergeStateClassNames(\n [\n 'fixed',\n 'inset-0',\n 'min-h-dvh',\n 'supports-[-webkit-touch-callout:none]:absolute',\n\n 'bg-black/40',\n\n 'not-motion-reduced:transition-opacity',\n 'not-motion-reduced:ease-enter',\n // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n 'not-motion-reduced:duration-150',\n 'not-motion-reduced:data-ending-style:duration-100',\n 'not-motion-reduced:data-ending-style:ease-exit',\n\n 'data-ending-style:opacity-0',\n 'data-starting-style:opacity-0',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nAlertDialogBackdrop.displayName = 'AlertDialog.Backdrop';\n"],"mappings":"~~;;;;;;;;;;;AAcA~~,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,UAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}
1	+ {"version":3,"file":"alert-dialog-backdrop.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-backdrop.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogBackdropProps = BaseAlertDialog.Backdrop.Props;\n\nexport type AlertDialogBackdropState = BaseAlertDialog.Backdrop.State;\n\n/*\n Camada atrás do popup que cobre e escurece a página. Num alert dialog aninhado, o Base UI não a\n * renderiza (a não ser com `forceRender`): quem escurece é o popup de trás.\n \n Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.\n */\nexport const AlertDialogBackdrop = (props: AlertDialogBackdropProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseAlertDialog.Backdrop\n data-component=\"AlertDialog.Backdrop\"\n className={mergeStateClassNames(\n [\n 'fixed',\n 'inset-0',\n 'min-h-dvh',\n 'supports-[-webkit-touch-callout:none]:absolute',\n\n 'bg-black/40',\n\n 'not-motion-reduced:transition-opacity',\n 'not-motion-reduced:ease-enter',\n // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n 'not-motion-reduced:duration-150',\n 'not-motion-reduced:data-ending-style:duration-100',\n 'not-motion-reduced:data-ending-style:ease-exit',\n\n 'data-ending-style:opacity-0',\n 'data-starting-style:opacity-0',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nAlertDialogBackdrop.displayName = 'AlertDialog.Backdrop';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,UAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

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

@@ -5,7 +5,7 @@ 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` (tabela no README de `overlays`; o mecanismo está explicado lá), com o
+ * Cópia de `DialogBody` (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

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

@@ -5,7 +5,7 @@ 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` (tabela no README de `overlays`; o mecanismo está explicado lá), com o
+* Cópia de `DialogBody` (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

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

	@@ -1 +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` (~~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"}
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` (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-description.d.ts CHANGED Viewed

@@ -6,8 +6,7 @@ export type AlertDialogDescriptionState = AlertDialog.Description.State;
  * Texto de apoio do alert dialog, ligado ao popup por `aria-describedby`: o leitor de tela o lê
  * junto com o título ao abrir.
  *
- * Cópia de `DialogDescription`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogDescription`, sem diferenças; o mecanismo está explicado lá.
  */
 export declare const AlertDialogDescription: {
   (props: AlertDialogDescriptionProps): import("react").JSX.Element;

package/dist/components/overlays/alert-dialog/alert-dialog-description.js CHANGED Viewed

@@ -6,8 +6,7 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 * Texto de apoio do alert dialog, ligado ao popup por `aria-describedby`: o leitor de tela o lê
 * junto com o título ao abrir.
 *
-* Cópia de `DialogDescription`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogDescription`, sem diferenças; o mecanismo está explicado lá.
 */
 const AlertDialogDescription = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/alert-dialog/alert-dialog-description.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-dialog-description.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-description.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogDescriptionProps = BaseAlertDialog.Description.Props;\n\nexport type AlertDialogDescriptionState = BaseAlertDialog.Description.State;\n\n/*\n Texto de apoio do alert dialog, ligado ao popup por `aria-describedby`: o leitor de tela o lê\n * junto com o título ao abrir.\n \n Cópia de `DialogDescription`, sem diferenças ~~(tabela no README de `overlays`)~~; o mecanismo ~~está\n~~ * explicado lá.\n */\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseAlertDialog.Description\n data-component=\"AlertDialog.Description\"\n className={mergeStateClassNames(\n ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n className,\n )}\n {...rest}\n />\n );\n};\n\nAlertDialogDescription.displayName = 'AlertDialog.Description';\n"],"mappings":"~~;;;;;;;;;;;AAcA~~,MAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,aAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,uBAAuB,cAAc"}
1	+ {"version":3,"file":"alert-dialog-description.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-description.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogDescriptionProps = BaseAlertDialog.Description.Props;\n\nexport type AlertDialogDescriptionState = BaseAlertDialog.Description.State;\n\n/*\n Texto de apoio do alert dialog, ligado ao popup por `aria-describedby`: o leitor de tela o lê\n * junto com o título ao abrir.\n \n Cópia de `DialogDescription`, sem diferenças; o mecanismo está explicado lá.\n */\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseAlertDialog.Description\n data-component=\"AlertDialog.Description\"\n className={mergeStateClassNames(\n ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n className,\n )}\n {...rest}\n />\n );\n};\n\nAlertDialogDescription.displayName = 'AlertDialog.Description';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,aAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,uBAAuB,cAAc"}

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

@@ -6,7 +6,7 @@ export type AlertDialogFooterProps = useRender.ComponentProps<'div'>;
  * 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` (tabela no README de `overlays`; o mecanismo está explicado lá), com a
+ * Cópia de `DialogFooter` (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.
  */

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

@@ -6,7 +6,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 * 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` (tabela no README de `overlays`; o mecanismo está explicado lá), com a
+* Cópia de `DialogFooter` (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.
 */

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

	@@ -1 +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. 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"}
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. 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` (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 CHANGED Viewed

@@ -9,7 +9,7 @@ export type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;
  * 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
+ * Cópia de `DialogHeader` (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.

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

@@ -9,7 +9,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 * 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
+* Cópia de `DialogHeader` (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.

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

	@@ -1 +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 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"}
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 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` (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 CHANGED Viewed

@@ -52,7 +52,7 @@ export type AlertDialogConfirmOptions = {
    */
   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
+   * 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 false

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

@@ -222,7 +222,7 @@ const ImperativeAlertDialog = (props) => {
 					children: request.options.cancelLabel ?? "Cancelar"
 				}), /* @__PURE__ */ jsx(Button, {
 					ref: request.options.destructive ? void 0 : initialFocusRef,
-					colorScheme: request.options.destructive ? "red" : "brand",
+					colorScheme: request.options.destructive ? "red" : "accent",
 					loading: isPending,
 					onClick: handleConfirm,
 					children: request.options.confirmLabel

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

	@@ -1 +1 @@
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,MAAa,oBACX,YACkB;CAClB,MAAM,EAAE,SAAS,YAAY,QAAQ,cAAoB;CAEzD,KAAK;EACH,SAAS;GAAE,MAAM;GAAS;EAAQ;EAClC,gBAAgB,QAAQ;CAC1B,CAAC;CAED,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,sBACX,YACqB;CACrB,MAAM,EAAE,SAAS,YAAY,QAAQ,cAAuB;CAE5D,KAAK;EACH,SAAS;GAAE,MAAM;GAAW;EAAQ;EACpC,UAAU;CACZ,CAAC;CAED,OAAO;AACT;;;;;AAeA,MAAM,QAAQ,SAAmB;CAC/B,MAAM,EAAE,SAAS,aAAa;CAE9B,MAAM,KAAK,iBAAiB,SAAS;CAErC,IAAI,YAAY;CAEhB,MAAM,UAAU,cAAuB;EACrC,IAAI,WACF;EAGF,YAAY;EACZ,SAAS,SAAS;CACpB;CAEA,iBAAiB,IAAI;EACnB;EACA,SAAS,QAAQ,iBACf,oBAAC,uBAAD;GACW;GACK;GACd,UAAU;GACV,iBAAiB,iBAAiB,YAAY,EAAE;GAChD,gBAAgB,iBAAiB,OAAO,EAAE;GAEzC,UAAA;EACoB,CAAA;EAEzB,eAAe,OAAO,KAAK;CAC7B,CAAC;AACH;AAeA,MAAM,yBAAyB,UAAsC;CACnE,MAAM,EAAE,SAAS,UAAU,cAAc,UAAU,WAAW,aAC5D;CAEF,MAAM,EAAE,SAAS,QAAQ;CAEzB,MAAM,YACJ,QAAQ,SAAS,YAAY,QAAQ,QAAQ,YAAY,KAAA;CAE3D,MAAM,UACJ,QAAQ,SAAS,YAAY,QAAQ,QAAQ,UAAU,KAAA;;;;;;CAOzD,MAAM,kBAAkB,OAA0B,IAAI;CAEtD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;;;;;CAMhD,yBAAyB;EACvB,UAAU,IAAI;CAChB,GAAG,CAAC,CAAC;CAEL,MAAM,SAAS,cAAuB;EACpC,SAAS,SAAS;EAClB,UAAU;EACV,UAAU,KAAK;CACjB;CAEA,MAAM,oBACJ,MACA,iBACG;EACH,IAAI,MACF;EAGF,IAAI,WAAW;GACb,aAAa,OAAO;GACpB;EACF;EAEA,MAAM,KAAK;CACb;CAEA,MAAM,4BAA4B,SAAkB;EAClD,IAAI,CAAC,MACH,SAAS;CAEb;CAEA,MAAM,gBAAgB,YAAY;EAChC,IAAI,CAAC,WAAW;GACd,MAAM,IAAI;GACV;EACF;EAEA,aAAa,IAAI;EAEjB,IAAI;GACF,MAAM,UAAU;GAChB,MAAM,IAAI;EACZ,SAAS,QAAQ;GACf,UAAU,MAAM;EAClB,UAAU;GACR,aAAa,KAAK;EACpB;CACF;CAEA,OACE,qBAAC,iBAAD;EACE,MAAM;EACN,cAAc;EACd,sBAAsB;EAChB;EAJR,UAAA,CAME,qBAAC,mBAAD,EAAA,UAAA,CAUE,oBAAC,qBAAD;GACE,aAAa,CAAC;GACd,WAAW,eAAe,KAAA,IAAY;EACvC,CAAA,GACD,oBAAC,qBAAD,EAAA,UACE,qBAAC,kBAAD;GAAkB,cAAc;GAAhC,UAAA;IACG,QAAQ,SAAS,UAChB,qBAAC,mBAAD,EAAA,UAAA;KACE,oBAAC,sBAAD;MAAsB,QAAQ,QAAQ,QAAQ,UAAU;MACrD,UAAA,QAAQ,QAAQ;KACG,CAAA;KACtB,oBAAC,kBAAD,EAAA,UAAmB,QAAQ,QAAQ,MAAwB,CAAA;KAC1D,QAAQ,QAAQ,gBAAgB,KAAA,KAC/B,oBAAC,wBAAD,EAAA,UACG,QAAQ,QAAQ,YACK,CAAA;IAET,EAAA,CAAA,IAEnB,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UAAmB,QAAQ,QAAQ,MAAwB,CAAA,GAC1D,QAAQ,QAAQ,gBAAgB,KAAA,KAC/B,oBAAC,wBAAD,EAAA,UACG,QAAQ,QAAQ,YACK,CAAA,CAET,EAAA,CAAA;IAGpB,QAAQ,SAAS,WAChB,QAAQ,QAAQ,YAAY,KAAA,KAC1B,oBAAC,iBAAD,EAAA,UACE,qBAACA,iBAAD,EAAA,UAAA,CACE,qBAACC,oBAAD;KACE,WAAW,kBAAkB;MAC3B;MACA;MAEA;MAEA;MACA;KACF,CAAC;KATH,UAAA,CAWE,oBAACC,sBAAD,CAAwB,CAAA,GAAC,mBAEN;IACrB,CAAA,GAAA,oBAACC,kBAAD,EAAA,UACE,oBAAC,OAAD;KAAK,WAAW,kBAAkB,CAAC,MAAM,CAAC;KACxC,UAAA,oBAAC,OAAD;MACE,WAAW,kBAAkB;OAG3B;OACA;OAEA;OACA;OAEA;OACA;OACA;OAEA;OAEA;OACA;OACA;OACA;MACF,CAAC;MAEA,UAAA,QAAQ,QAAQ;KACd,CAAA;IACF,CAAA,EACY,CAAA,CACH,EAAA,CAAA,EACH,CAAA;IAGpB,QAAQ,SAAS,UAChB,oBAAC,mBAAD,EAAA,UACE,oBAAC,kBAAD;KACE,QACE,oBAAC,QAAD;MACE,KAAK;MACL,SAAQ;KACT,CAAA;KAGF,UAAA,QAAQ,QAAQ,WAAW;IACZ,CAAA,EACD,CAAA,IAEnB,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,kBAAD;KACE,KACE,QAAQ,QAAQ,cAAc,kBAAkB,KAAA;KAElD,UAAU;KACV,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,UAAW,CAAA;KAElC,UAAA,QAAQ,QAAQ,eAAe;IAChB,CAAA,GAElB,oBAAC,QAAD;KACE,KACE,QAAQ,QAAQ,cAAc,KAAA,IAAY;KAE5C,aAAa,QAAQ,QAAQ,cAAc,QAAQ;KACnD,SAAS;KACT,SAAS;KAER,UAAA,QAAQ,QAAQ;IACX,CAAA,CACS,EAAA,CAAA;GAEL;EACC,CAAA,EAAA,CAAA,CACJ,EAAA,CAAA,GAMlB,QACc;;AAErB"}
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 `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.d.ts CHANGED Viewed

@@ -14,8 +14,8 @@ export type AlertDialogIndicatorProps = MergeOverride<useRender.ComponentProps<'
  *
  * 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.
+ * 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>>;

package/dist/components/overlays/alert-dialog/alert-dialog-indicator.js CHANGED Viewed

@@ -17,8 +17,8 @@ const splitVariantProps = createSplitProps();
 *
 * 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.
+* 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.
 */
 const AlertDialogIndicator = (props) => {
 	const [variantProps, elementProps] = splitVariantProps(props, ["status"]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-dialog-indicator.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n createSplitProps,\n type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n WarningIcon,\n} from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type AlertDialogIndicatorVariants,\n alertDialogIndicatorDefaultVariants,\n alertDialogIndicatorVariants,\n} from './alert-dialog-indicator-variants';\n\nexport type AlertDialogIndicatorProps = MergeOverride<\n useRender.ComponentProps<'div'>,\n AlertDialogIndicatorVariants\n>;\n\nconst splitVariantProps = createSplitProps<AlertDialogIndicatorVariants>();\n\n/*\n Ícone do alert dialog, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon`\n * da lib; com filhos (outro ícone, um emoji), usa os filhos, e um ícone próprio entra pelo `Icon`\n * para ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do\n * `AlertDialog.Title`, para ficar alinhado à primeira linha.\n \n Como filho do `AlertDialog.Header`, fica à esquerda do texto; no celular, acima dele.\n \n Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.\n \n Cópia do `Alert.Indicator`, a origem ~~(tabela no README de `feedback`)~~, com os mesmos ícones; as\n * diferenças: o `status` é prop da parte, e não vem de um contexto, e a cor está no passo 11.\n */\nexport const AlertDialogIndicator = (props: AlertDialogIndicatorProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, ['status']);\n\n const { render, className, children, ...rest } = elementProps;\n\n const { status = alertDialogIndicatorDefaultVariants.status } = variantProps;\n\n const StatusIcon = statusIcons[status];\n\n const baseProps = {\n 'data-component': 'AlertDialog.Indicator',\n 'aria-hidden': true,\n children: children ?? <Icon render={<StatusIcon />} />,\n className: mergeTwClassNames(\n alertDialogIndicatorVariants(variantProps),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nAlertDialogIndicator.displayName = 'AlertDialog.Indicator';\n\nconst statusIcons: Record<\n Required<AlertDialogIndicatorVariants>['status'],\n React.ComponentType\n> = {\n neutral: InfoIcon,\n info: InfoIcon,\n success: CheckCircleIcon,\n warning: WarningIcon,\n error: WarningCircleIcon,\n};\n"],"mappings":";;;;;;;;AAyBA,MAAM,oBAAoB,iBAA+C;;;;;;;;;;;;;;AAezE,MAAa,wBAAwB,UAAqC;CACxE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,QAAQ,CAAC;CAExE,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,oCAAoC,WAAW;CAEhE,MAAM,aAAa,YAAY;CAE/B,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,YAAD,CAAa,CAAA,EAAI,CAAA;EACrD,WAAW,kBACT,6BAA6B,YAAY,GACzC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,qBAAqB,cAAc;AAEnC,MAAM,cAGF;CACF,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT"}
1	+ {"version":3,"file":"alert-dialog-indicator.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n createSplitProps,\n type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n WarningIcon,\n} from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type AlertDialogIndicatorVariants,\n alertDialogIndicatorDefaultVariants,\n alertDialogIndicatorVariants,\n} from './alert-dialog-indicator-variants';\n\nexport type AlertDialogIndicatorProps = MergeOverride<\n useRender.ComponentProps<'div'>,\n AlertDialogIndicatorVariants\n>;\n\nconst splitVariantProps = createSplitProps<AlertDialogIndicatorVariants>();\n\n/*\n Ícone do alert dialog, na cor do `status`. Sem filhos, mostra o ícone do `status`, pelo `Icon`\n * da lib; com filhos (outro ícone, um emoji), usa os filhos, e um ícone próprio entra pelo `Icon`\n * para ter o mesmo traço. O `svg` mede `1em` (20px), numa caixa da altura da linha do\n * `AlertDialog.Title`, para ficar alinhado à primeira linha.\n \n Como filho do `AlertDialog.Header`, fica à esquerda do texto; no celular, acima dele.\n \n Fica com `aria-hidden`: o ícone repete o que o texto diz, e o `status` não é anunciado por ele.\n \n Cópia do `Alert.Indicator`, a origem, com os mesmos ícones; as diferenças: o `status` é prop da\n * parte, e não vem de um contexto, e a cor está no passo 11.\n */\nexport const AlertDialogIndicator = (props: AlertDialogIndicatorProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, ['status']);\n\n const { render, className, children, ...rest } = elementProps;\n\n const { status = alertDialogIndicatorDefaultVariants.status } = variantProps;\n\n const StatusIcon = statusIcons[status];\n\n const baseProps = {\n 'data-component': 'AlertDialog.Indicator',\n 'aria-hidden': true,\n children: children ?? <Icon render={<StatusIcon />} />,\n className: mergeTwClassNames(\n alertDialogIndicatorVariants(variantProps),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nAlertDialogIndicator.displayName = 'AlertDialog.Indicator';\n\nconst statusIcons: Record<\n Required<AlertDialogIndicatorVariants>['status'],\n React.ComponentType\n> = {\n neutral: InfoIcon,\n info: InfoIcon,\n success: CheckCircleIcon,\n warning: WarningIcon,\n error: WarningCircleIcon,\n};\n"],"mappings":";;;;;;;;AAyBA,MAAM,oBAAoB,iBAA+C;;;;;;;;;;;;;;AAezE,MAAa,wBAAwB,UAAqC;CACxE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,QAAQ,CAAC;CAExE,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,SAAS,oCAAoC,WAAW;CAEhE,MAAM,aAAa,YAAY;CAE/B,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,YAAD,CAAa,CAAA,EAAI,CAAA;EACrD,WAAW,kBACT,6BAA6B,YAAY,GACzC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,qBAAqB,cAAc;AAEnC,MAAM,cAGF;CACF,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT"}

package/dist/components/overlays/alert-dialog/alert-dialog-popup-variants.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 //#region src/components/overlays/alert-dialog/alert-dialog-popup-variants.d.ts
 /**
- * Cópia de `dialogPopupVariants` (tabela no README de `overlays`): superfície, largura pelo `size`,
- * respiro e tipografia fixos e aninhamento estão explicados lá. As diferenças: o respiro é de 24px
- * e a sombra é `shadow-xl`. O AlertDialog segue o modelo de superfície da pendência "Superfícies"
- * do ROADMAP, ainda não aplicado ao Dialog.
+ * Cópia de `dialogPopupVariants`: superfície, largura pelo `size`, respiro e tipografia fixos e
+ * aninhamento estão explicados lá. As diferenças: o respiro é de 24px e a sombra é `shadow-xl`. O
+ * AlertDialog segue o modelo de superfície da pendência "Superfícies" do ROADMAP, ainda não
+ * aplicado ao Dialog.
  */
 export declare const alertDialogPopupVariants: (props?: ({
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | null | undefined;

package/dist/components/overlays/alert-dialog/alert-dialog-popup-variants.js CHANGED Viewed

@@ -2,10 +2,10 @@ import { alertDialogDefaultVariants } from "./use-alert-dialog-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/overlays/alert-dialog/alert-dialog-popup-variants.ts
 /**
-* Cópia de `dialogPopupVariants` (tabela no README de `overlays`): superfície, largura pelo `size`,
-* respiro e tipografia fixos e aninhamento estão explicados lá. As diferenças: o respiro é de 24px
-* e a sombra é `shadow-xl`. O AlertDialog segue o modelo de superfície da pendência "Superfícies"
-* do ROADMAP, ainda não aplicado ao Dialog.
+* Cópia de `dialogPopupVariants`: superfície, largura pelo `size`, respiro e tipografia fixos e
+* aninhamento estão explicados lá. As diferenças: o respiro é de 24px e a sombra é `shadow-xl`. O
+* AlertDialog segue o modelo de superfície da pendência "Superfícies" do ROADMAP, ainda não
+* aplicado ao Dialog.
 */
 const alertDialogPopupVariants = cva([
 	"[--alert-dialog-padding:--spacing(6)]",

package/dist/components/overlays/alert-dialog/alert-dialog-popup-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-dialog-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { alertDialogDefaultVariants } from './use-alert-dialog-context';\n\n/*\n Cópia de `dialogPopupVariants` ~~(tabela no README de `overlays`):~~ superfície, largura pelo `size~~`,\n~~ * respiro e tipografia fixos e aninhamento estão explicados lá. As diferenças: o respiro é de 24px\n * e a sombra é `shadow-xl`. O AlertDialog segue o modelo de superfície da pendência \"Superfícies\"\n * do ROADMAP, ainda não aplicado ao Dialog.\n /\nexport const alertDialogPopupVariants = cva(\n [\n '[--alert-dialog-padding:--spacing(6)]',\n\n 'relative',\n\n 'flex',\n 'flex-col',\n\n 'w-full',\n 'max-h-full',\n\n 'rounded-lg',\n 'outline-1',\n 'outline-gray-6',\n\n 'bg-gray-1',\n 'dark:bg-gray-1',\n\n 'shadow-xl',\n 'shadow-black/12',\n 'dark:shadow-none',\n\n // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n 'text-sm',\n 'text-gray-12',\n\n 'not-motion-reduced:transition-[translate,opacity,scale]',\n 'not-motion-reduced:ease-enter',\n 'not-motion-reduced:duration-150',\n\n 'not-motion-reduced:data-starting-style:scale-95',\n 'not-motion-reduced:data-ending-style:scale-95',\n 'not-motion-reduced:data-ending-style:ease-exit',\n 'not-motion-reduced:data-ending-style:duration-100',\n 'data-starting-style:opacity-0',\n 'data-ending-style:opacity-0',\n\n 'not-motion-reduced:data-nested-dialog-open:scale-[calc(1-0.05var(--nested-dialogs))]',\n 'not-motion-reduced:data-nested-dialog-open:-translate-y-[calc(var(--nested-dialogs)*(--spacing(6)))]',\n\n \"after:content-['']\",\n 'after:absolute',\n 'after:inset-0',\n 'after:rounded-[inherit]',\n 'after:bg-black/20',\n 'after:opacity-0',\n 'after:pointer-events-none',\n 'not-motion-reduced:after:transition-opacity',\n 'not-motion-reduced:after:duration-150',\n 'data-nested-dialog-open:after:opacity-100',\n ],\n {\n variants: {\n size: {\n xs: ['max-w-xs'],\n sm: ['max-w-sm'],\n md: ['max-w-md'],\n lg: ['max-w-lg'],\n xl: ['max-w-xl'],\n '2xl': ['max-w-2xl'],\n '3xl': ['max-w-3xl'],\n '4xl': ['max-w-4xl'],\n '5xl': ['max-w-5xl'],\n '6xl': ['max-w-6xl'],\n '7xl': ['max-w-7xl'],\n full: ['max-w-none', 'h-full'],\n },\n },\n defaultVariants: {\n size: alertDialogDefaultVariants.size,\n },\n },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,2BAA2B,IACtC;CACE;CAEA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,MAAM,CAAC,cAAc,QAAQ;CAC/B,EACF;CACA,iBAAiB,EACf,MAAM,2BAA2B,KACnC;AACF,CACF"}
1	+ {"version":3,"file":"alert-dialog-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { alertDialogDefaultVariants } from './use-alert-dialog-context';\n\n/*\n Cópia de `dialogPopupVariants`: superfície, largura pelo `size`, respiro e tipografia fixos e\n * aninhamento estão explicados lá. As diferenças: o respiro é de 24px e a sombra é `shadow-xl`. O\n * AlertDialog segue o modelo de superfície da pendência \"Superfícies\" do ROADMAP, ainda não\n * aplicado ao Dialog.\n /\nexport const alertDialogPopupVariants = cva(\n [\n '[--alert-dialog-padding:--spacing(6)]',\n\n 'relative',\n\n 'flex',\n 'flex-col',\n\n 'w-full',\n 'max-h-full',\n\n 'rounded-lg',\n 'outline-1',\n 'outline-gray-6',\n\n 'bg-gray-1',\n 'dark:bg-gray-1',\n\n 'shadow-xl',\n 'shadow-black/12',\n 'dark:shadow-none',\n\n // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n 'text-sm',\n 'text-gray-12',\n\n 'not-motion-reduced:transition-[translate,opacity,scale]',\n 'not-motion-reduced:ease-enter',\n 'not-motion-reduced:duration-150',\n\n 'not-motion-reduced:data-starting-style:scale-95',\n 'not-motion-reduced:data-ending-style:scale-95',\n 'not-motion-reduced:data-ending-style:ease-exit',\n 'not-motion-reduced:data-ending-style:duration-100',\n 'data-starting-style:opacity-0',\n 'data-ending-style:opacity-0',\n\n 'not-motion-reduced:data-nested-dialog-open:scale-[calc(1-0.05var(--nested-dialogs))]',\n 'not-motion-reduced:data-nested-dialog-open:-translate-y-[calc(var(--nested-dialogs)*(--spacing(6)))]',\n\n \"after:content-['']\",\n 'after:absolute',\n 'after:inset-0',\n 'after:rounded-[inherit]',\n 'after:bg-black/20',\n 'after:opacity-0',\n 'after:pointer-events-none',\n 'not-motion-reduced:after:transition-opacity',\n 'not-motion-reduced:after:duration-150',\n 'data-nested-dialog-open:after:opacity-100',\n ],\n {\n variants: {\n size: {\n xs: ['max-w-xs'],\n sm: ['max-w-sm'],\n md: ['max-w-md'],\n lg: ['max-w-lg'],\n xl: ['max-w-xl'],\n '2xl': ['max-w-2xl'],\n '3xl': ['max-w-3xl'],\n '4xl': ['max-w-4xl'],\n '5xl': ['max-w-5xl'],\n '6xl': ['max-w-6xl'],\n '7xl': ['max-w-7xl'],\n full: ['max-w-none', 'h-full'],\n },\n },\n defaultVariants: {\n size: alertDialogDefaultVariants.size,\n },\n },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,2BAA2B,IACtC;CACE;CAEA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,WAAW;EACnB,MAAM,CAAC,cAAc,QAAQ;CAC/B,EACF;CACA,iBAAiB,EACf,MAAM,2BAA2B,KACnC;AACF,CACF"}

package/dist/components/overlays/alert-dialog/alert-dialog-title.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export type AlertDialogTitleState = AlertDialog.Title.State;
  * Título do alert dialog, um `h2` ligado ao popup por `aria-labelledby`. Diga a pergunta ou a
  * consequência ("Excluir o pedido 4821?"), não só a ação.
  *
- * Cópia de `DialogTitle` (tabela no README de `overlays`; o mecanismo está explicado lá), com
+ * Cópia de `DialogTitle` (o mecanismo está explicado lá), com
  * `font-semibold` no lugar de `font-medium`. Segue o modelo de superfície da pendência
  * "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
  */

package/dist/components/overlays/alert-dialog/alert-dialog-title.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 * Título do alert dialog, um `h2` ligado ao popup por `aria-labelledby`. Diga a pergunta ou a
 * consequência ("Excluir o pedido 4821?"), não só a ação.
 *
-* Cópia de `DialogTitle` (tabela no README de `overlays`; o mecanismo está explicado lá), com
+* Cópia de `DialogTitle` (o mecanismo está explicado lá), com
 * `font-semibold` no lugar de `font-medium`. Segue o modelo de superfície da pendência
 * "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
 */

package/dist/components/overlays/alert-dialog/alert-dialog-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-dialog-title.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-title.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogTitleProps = BaseAlertDialog.Title.Props;\n\nexport type AlertDialogTitleState = BaseAlertDialog.Title.State;\n\n/*\n Título do alert dialog, um `h2` ligado ao popup por `aria-labelledby`. Diga a pergunta ou a\n * consequência (\"Excluir o pedido 4821?\"), não só a ação.\n \n Cópia de `DialogTitle` (~~tabela no README de `overlays`;~~ o mecanismo está explicado lá), com\n * `font-semibold` no lugar de `font-medium`. Segue o modelo de superfície da pendência\n * \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogTitle = (props: AlertDialogTitleProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseAlertDialog.Title\n data-component=\"AlertDialog.Title\"\n className={mergeStateClassNames(\n [\n 'text-base',\n 'leading-6',\n 'font-semibold',\n 'text-gray-12',\n 'text-balance',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nAlertDialogTitle.displayName = 'AlertDialog.Title';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,OAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
1	+ {"version":3,"file":"alert-dialog-title.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-title.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogTitleProps = BaseAlertDialog.Title.Props;\n\nexport type AlertDialogTitleState = BaseAlertDialog.Title.State;\n\n/*\n Título do alert dialog, um `h2` ligado ao popup por `aria-labelledby`. Diga a pergunta ou a\n * consequência (\"Excluir o pedido 4821?\"), não só a ação.\n \n Cópia de `DialogTitle` (o mecanismo está explicado lá), com\n * `font-semibold` no lugar de `font-medium`. Segue o modelo de superfície da pendência\n * \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogTitle = (props: AlertDialogTitleProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseAlertDialog.Title\n data-component=\"AlertDialog.Title\"\n className={mergeStateClassNames(\n [\n 'text-base',\n 'leading-6',\n 'font-semibold',\n 'text-gray-12',\n 'text-balance',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nAlertDialogTitle.displayName = 'AlertDialog.Title';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,OAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/overlays/alert-dialog/alert-dialog-viewport.d.ts CHANGED Viewed

@@ -6,8 +6,7 @@ export type AlertDialogViewportState = AlertDialog.Viewport.State;
  * Camada fixa sobre a tela que centraliza o popup, com a margem que limita o popup em tela
  * pequena. Diferente do Dialog, um clique nela, fora do popup, não fecha o alert dialog.
  *
- * Cópia de `DialogViewport`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogViewport`, sem diferenças; o mecanismo está explicado lá.
  */
 export declare const AlertDialogViewport: {
   (props: AlertDialogViewportProps): import("react").JSX.Element;

package/dist/components/overlays/alert-dialog/alert-dialog-viewport.js CHANGED Viewed

@@ -6,8 +6,7 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 * Camada fixa sobre a tela que centraliza o popup, com a margem que limita o popup em tela
 * pequena. Diferente do Dialog, um clique nela, fora do popup, não fecha o alert dialog.
 *
-* Cópia de `DialogViewport`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogViewport`, sem diferenças; o mecanismo está explicado lá.
 */
 const AlertDialogViewport = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/alert-dialog/alert-dialog-viewport.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-dialog-viewport.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-viewport.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogViewportProps = BaseAlertDialog.Viewport.Props;\n\nexport type AlertDialogViewportState = BaseAlertDialog.Viewport.State;\n\n/*\n Camada fixa sobre a tela que centraliza o popup, com a margem que limita o popup em tela\n * pequena. Diferente do Dialog, um clique nela, fora do popup, não fecha o alert dialog.\n \n Cópia de `DialogViewport`, sem diferenças ~~(tabela no README de `overlays`)~~; o mecanismo ~~está\n~~ * explicado lá.\n */\nexport const AlertDialogViewport = (props: AlertDialogViewportProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseAlertDialog.Viewport\n data-component=\"AlertDialog.Viewport\"\n className={mergeStateClassNames(\n [\n 'fixed',\n 'inset-0',\n\n 'flex',\n 'items-center',\n 'justify-center',\n\n 'p-4',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nAlertDialogViewport.displayName = 'AlertDialog.Viewport';\n"],"mappings":"~~;;;;;;;;;;;AAcA~~,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,UAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}
1	+ {"version":3,"file":"alert-dialog-viewport.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-viewport.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogViewportProps = BaseAlertDialog.Viewport.Props;\n\nexport type AlertDialogViewportState = BaseAlertDialog.Viewport.State;\n\n/*\n Camada fixa sobre a tela que centraliza o popup, com a margem que limita o popup em tela\n * pequena. Diferente do Dialog, um clique nela, fora do popup, não fecha o alert dialog.\n \n Cópia de `DialogViewport`, sem diferenças; o mecanismo está explicado lá.\n */\nexport const AlertDialogViewport = (props: AlertDialogViewportProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseAlertDialog.Viewport\n data-component=\"AlertDialog.Viewport\"\n className={mergeStateClassNames(\n [\n 'fixed',\n 'inset-0',\n\n 'flex',\n 'items-center',\n 'justify-center',\n\n 'p-4',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nAlertDialogViewport.displayName = 'AlertDialog.Viewport';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,UAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

package/dist/components/overlays/dialog/dialog-backdrop.d.ts CHANGED Viewed

@@ -6,8 +6,7 @@ export type DialogBackdropState = Dialog.Backdrop.State;
  * Camada atrás do popup que cobre e escurece a página. Num dialog aninhado, o Base UI não a
  * renderiza (a não ser com `forceRender`): quem escurece é o popup de baixo.
  *
- * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
- * de `overlays`).
+ * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.
  */
 export declare const DialogBackdrop: {
   (props: DialogBackdropProps): import("react").JSX.Element;

package/dist/components/overlays/dialog/dialog-backdrop.js CHANGED Viewed

@@ -6,8 +6,7 @@ import { Dialog } from "@base-ui/react/dialog";
 * Camada atrás do popup que cobre e escurece a página. Num dialog aninhado, o Base UI não a
 * renderiza (a não ser com `forceRender`): quem escurece é o popup de baixo.
 *
-* Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
-* de `overlays`).
+* Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.
 */
 const DialogBackdrop = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/dialog/dialog-backdrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog-backdrop.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-backdrop.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DialogBackdropProps = BaseDialog.Backdrop.Props;\n\nexport type DialogBackdropState = BaseDialog.Backdrop.State;\n\n/*\n Camada atrás do popup que cobre e escurece a página. Num dialog aninhado, o Base UI não a\n * renderiza (a não ser com `forceRender`): quem escurece é o popup de baixo.\n \n Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças ~~(tabela no README\n * de `overlays`)~~.\n */\nexport const DialogBackdrop = (props: DialogBackdropProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseDialog.Backdrop\n data-component=\"Dialog.Backdrop\"\n className={mergeStateClassNames(\n [\n 'fixed',\n 'inset-0',\n 'min-h-dvh',\n 'supports-[-webkit-touch-callout:none]:absolute',\n\n 'bg-black/40',\n\n 'not-motion-reduced:transition-opacity',\n 'not-motion-reduced:ease-enter',\n // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n 'not-motion-reduced:duration-150',\n 'not-motion-reduced:data-ending-style:duration-100',\n 'not-motion-reduced:data-ending-style:ease-exit',\n\n 'data-ending-style:opacity-0',\n 'data-starting-style:opacity-0',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nDialogBackdrop.displayName = 'Dialog.Backdrop';\n"],"mappings":"~~;;;;;;;;;;;AAcA~~,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,UAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
1	+ {"version":3,"file":"dialog-backdrop.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-backdrop.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DialogBackdropProps = BaseDialog.Backdrop.Props;\n\nexport type DialogBackdropState = BaseDialog.Backdrop.State;\n\n/*\n Camada atrás do popup que cobre e escurece a página. Num dialog aninhado, o Base UI não a\n * renderiza (a não ser com `forceRender`): quem escurece é o popup de baixo.\n \n Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.\n */\nexport const DialogBackdrop = (props: DialogBackdropProps) => {\n const { className, ...rest } = props;\n\n return (\n <BaseDialog.Backdrop\n data-component=\"Dialog.Backdrop\"\n className={mergeStateClassNames(\n [\n 'fixed',\n 'inset-0',\n 'min-h-dvh',\n 'supports-[-webkit-touch-callout:none]:absolute',\n\n 'bg-black/40',\n\n 'not-motion-reduced:transition-opacity',\n 'not-motion-reduced:ease-enter',\n // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n 'not-motion-reduced:duration-150',\n 'not-motion-reduced:data-ending-style:duration-100',\n 'not-motion-reduced:data-ending-style:ease-exit',\n\n 'data-ending-style:opacity-0',\n 'data-starting-style:opacity-0',\n ],\n className,\n )}\n {...rest}\n />\n );\n};\n\nDialogBackdrop.displayName = 'Dialog.Backdrop';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,UAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/dialog/dialog-body.d.ts CHANGED Viewed

@@ -11,12 +11,12 @@ export type DialogBodyProps = useRender.ComponentProps<'div'>;
  * do título e dos botões. Sem `Header` antes ou sem `Footer` depois, o `Body` fecha o respiro do
  * dialog daquele lado.
  *
- * Cópia de `CardBody` (tabela no README de `display`). As diferenças: lê `--dialog-padding`, rola
- * por dentro (`min-h-0`, `overflow-y-auto`) e divide o espaço vertical com `Header` e `Footer`.
+ * Cópia de `CardBody`. As diferenças: lê `--dialog-padding`, rola por dentro (`min-h-0`,
+ * `overflow-y-auto`) e divide o espaço vertical com `Header` e `Footer`.
  *
- * Origem do `AlertDialog.Body` e do `Drawer.Body`, que copiam estas classes
- * (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na
- * mesma rodada.
+ * Origem do `AlertDialog.Body` e do `Drawer.Body`, que copiam estas classes, cada um com as suas
+ * diferenças, explicadas no JSDoc de cada cópia. Uma mudança aqui vale para as cópias na mesma
+ * rodada.
  */
 export declare const DialogBody: {
   (props: DialogBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/overlays/dialog/dialog-body.js CHANGED Viewed

@@ -11,12 +11,12 @@ import { mergeProps, useRender } from "@base-ui/react";
 * do título e dos botões. Sem `Header` antes ou sem `Footer` depois, o `Body` fecha o respiro do
 * dialog daquele lado.
 *
-* Cópia de `CardBody` (tabela no README de `display`). As diferenças: lê `--dialog-padding`, rola
-* por dentro (`min-h-0`, `overflow-y-auto`) e divide o espaço vertical com `Header` e `Footer`.
+* Cópia de `CardBody`. As diferenças: lê `--dialog-padding`, rola por dentro (`min-h-0`,
+* `overflow-y-auto`) e divide o espaço vertical com `Header` e `Footer`.
 *
-* Origem do `AlertDialog.Body` e do `Drawer.Body`, que copiam estas classes
-* (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na
-* mesma rodada.
+* Origem do `AlertDialog.Body` e do `Drawer.Body`, que copiam estas classes, cada um com as suas
+* diferenças, explicadas no JSDoc de cada cópia. Uma mudança aqui vale para as cópias na mesma
+* rodada.
 */
 const DialogBody = (props) => {
 	const { render, className, ...rest } = props;

package/dist/components/overlays/dialog/dialog-body.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog-body.js","names":[],"sources":["../../../../src/components/overlays/dialog/dialog-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DialogBodyProps = useRender.ComponentProps<'div'>;\n\n/*\n Conteúdo principal do dialog. Quando o popup chega à altura do `Dialog.Viewport`, só o `Body`\n * rola, e `Header` e `Footer` continuam visíveis.\n \n O padding de uma área que rola rola junto com o conteúdo. Por isso o `Body` tem só 8px em cima\n * e embaixo, e o resto do espaço entre as partes fica no `Header` (8px embaixo) e no `Footer`\n * (8px em cima), que não rolam: parado, o espaço é de 16px; rolando, o conteúdo some 8px antes\n * do título e dos botões. Sem `Header` antes ou sem `Footer` depois, o `Body` fecha o respiro do\n * dialog daquele lado.\n \n Cópia de `CardBody` ~~(tabela no README de `display`).~~ As diferenças: lê `--dialog-padding`, rola\n * por dentro (`min-h-0`, `overflow-y-auto`) e divide o espaço vertical com `Header` e `Footer`.\n \n Origem do `AlertDialog.Body` e do `Drawer.Body`, que copiam estas classes\n * ~~(tabela~~ no ~~README~~ de ~~`overlays`,~~ ~~com as diferenças)~~. Uma mudança aqui vale para as cópias na\n * ~~mesma~~ rodada.\n */\nexport const DialogBody = (props: DialogBodyProps) => {\n const { render, className, ...rest } = props;\n\n const baseProps = {\n 'data-component': 'Dialog.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-(--dialog-padding)',\n 'py-2',\n 'first:pt-(--dialog-padding)',\n // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n \"[&:not(:has(~[data-component='Dialog.Footer']))]:pb-(--dialog-padding)\",\n ],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDialogBody.displayName = 'Dialog.Body';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;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,WAAW,cAAc"}
1	+ {"version":3,"file":"dialog-body.js","names":[],"sources":["../../../../src/components/overlays/dialog/dialog-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DialogBodyProps = useRender.ComponentProps<'div'>;\n\n/*\n Conteúdo principal do dialog. Quando o popup chega à altura do `Dialog.Viewport`, só o `Body`\n * rola, e `Header` e `Footer` continuam visíveis.\n \n O padding de uma área que rola rola junto com o conteúdo. Por isso o `Body` tem só 8px em cima\n * e embaixo, e o resto do espaço entre as partes fica no `Header` (8px embaixo) e no `Footer`\n * (8px em cima), que não rolam: parado, o espaço é de 16px; rolando, o conteúdo some 8px antes\n * do título e dos botões. Sem `Header` antes ou sem `Footer` depois, o `Body` fecha o respiro do\n * dialog daquele lado.\n \n Cópia de `CardBody`. As diferenças: lê `--dialog-padding`, rola por dentro (`min-h-0`,\n * `overflow-y-auto`) e divide o espaço vertical com `Header` e `Footer`.\n \n Origem do `AlertDialog.Body` e do `Drawer.Body`, que copiam estas classes, cada um com as suas\n * diferenças, explicadas no JSDoc de cada cópia. Uma mudança aqui vale para as cópias na mesma\n * rodada.\n */\nexport const DialogBody = (props: DialogBodyProps) => {\n const { render, className, ...rest } = props;\n\n const baseProps = {\n 'data-component': 'Dialog.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-(--dialog-padding)',\n 'py-2',\n 'first:pt-(--dialog-padding)',\n // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n \"[&:not(:has(~[data-component='Dialog.Footer']))]:pb-(--dialog-padding)\",\n ],\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDialogBody.displayName = 'Dialog.Body';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;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,WAAW,cAAc"}

package/dist/components/overlays/dialog/dialog-description.d.ts CHANGED Viewed

@@ -5,11 +5,11 @@ export type DialogDescriptionState = Dialog.Description.State;
 /**
  * Texto de apoio do dialog, abaixo do título, ligado ao popup por `aria-describedby`.
  *
- * Cópia de `CardDescription` (tabela no README de `display`), com as mesmas classes.
+ * Cópia de `CardDescription`, com as mesmas classes.
  *
- * Origem do `AlertDialog.Description` e do `Drawer.Description`, que copiam estas classes
- * (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na
- * mesma rodada.
+ * Origem do `AlertDialog.Description` e do `Drawer.Description`, que copiam estas classes, cada um com as suas
+ * diferenças, explicadas no JSDoc de cada cópia. Uma mudança aqui vale para as cópias na mesma
+ * rodada.
  */
 export declare const DialogDescription: {
   (props: DialogDescriptionProps): import("react").JSX.Element;

package/dist/components/overlays/dialog/dialog-description.js CHANGED Viewed

@@ -5,11 +5,11 @@ import { Dialog } from "@base-ui/react/dialog";
 /**
 * Texto de apoio do dialog, abaixo do título, ligado ao popup por `aria-describedby`.
 *
-* Cópia de `CardDescription` (tabela no README de `display`), com as mesmas classes.
+* Cópia de `CardDescription`, com as mesmas classes.
 *
-* Origem do `AlertDialog.Description` e do `Drawer.Description`, que copiam estas classes
-* (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na
-* mesma rodada.
+* Origem do `AlertDialog.Description` e do `Drawer.Description`, que copiam estas classes, cada um com as suas
+* diferenças, explicadas no JSDoc de cada cópia. Uma mudança aqui vale para as cópias na mesma
+* rodada.
 */
 const DialogDescription = (props) => {
 	const { className, ...rest } = props;