@lucasbernardosn/react-ui 0.3.0 → 0.4.0

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

@@ -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`, sem diferenças (tabela no README de `overlays`): superfície,\n * largura pelo `size`, respiro e tipografia fixos e aninhamento estão explicados lá.\n */\nexport const alertDialogPopupVariants = cva(\n  [\n    '[--alert-dialog-padding:--spacing(4)]',\n\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'w-full',\n    'max-h-full',\n\n    'rounded-md',\n    'corner-squircle',\n    'outline-1',\n    'outline-gray-6',\n\n    'bg-gray-1',\n    'dark:bg-gray-1',\n\n    'shadow-lg',\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.05*var(--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":";;;;;;;AAOA,MAAa,2BAA2B,IACtC;CACE;CAEA;CAEA;CACA;CAEA;CACA;CAEA;CACA;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"}
+{"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.05*var(--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-popup.d.ts

@@ -7,7 +7,8 @@ export type AlertDialogPopupState = AlertDialog.Popup.State;
  *
  * Ao abrir, o foco vai para o primeiro elemento focável: com só os botões no `Footer`, o primeiro
  * deles. Ponha a ação que não destrói ("Cancelar") antes da destrutiva, para um `Enter` dado sem
- * ler não confirmar.
+ * ler não confirmar. Com algo focável antes dos botões (um `Collapsible` no `Header`), passe um ref
+ * do botão em `initialFocus` para o foco abrir nele.
  */
 export declare const AlertDialogPopup: {
   (props: AlertDialogPopupProps): import("react").JSX.Element;

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

@@ -9,7 +9,8 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 *
 * Ao abrir, o foco vai para o primeiro elemento focável: com só os botões no `Footer`, o primeiro
 * deles. Ponha a ação que não destrói ("Cancelar") antes da destrutiva, para um `Enter` dado sem
-* ler não confirmar.
+* ler não confirmar. Com algo focável antes dos botões (um `Collapsible` no `Header`), passe um ref
+* do botão em `initialFocus` para o foco abrir nele.
 */
 const AlertDialogPopup = (props) => {
 	const { className, ...rest } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-popup.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-popup.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\nimport { alertDialogPopupVariants } from './alert-dialog-popup-variants';\nimport { useAlertDialogContext } from './use-alert-dialog-context';\n\nexport type AlertDialogPopupProps = BaseAlertDialog.Popup.Props;\n\nexport type AlertDialogPopupState = BaseAlertDialog.Popup.State;\n\n/**\n * Caixa do alert dialog, com `role=\"alertdialog\"`, na largura do `size` do `AlertDialog.Root`.\n *\n * Ao abrir, o foco vai para o primeiro elemento focável: com só os botões no `Footer`, o primeiro\n * deles. Ponha a ação que não destrói (\"Cancelar\") antes da destrutiva, para um `Enter` dado sem\n * ler não confirmar.\n */\nexport const AlertDialogPopup = (props: AlertDialogPopupProps) => {\n  const { className, ...rest } = props;\n\n  const { size } = useAlertDialogContext();\n\n  return (\n    <BaseAlertDialog.Popup\n      data-component=\"AlertDialog.Popup\"\n      className={mergeStateClassNames(\n        alertDialogPopupVariants({ size }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogPopup.displayName = 'AlertDialog.Popup';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,EAAE,SAAS,sBAAsB;CAEvC,OACE,oBAACA,YAAgB,OAAjB;EACE,kBAAe;EACf,WAAW,qBACT,yBAAyB,EAAE,KAAK,CAAC,GACjC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"alert-dialog-popup.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-popup.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\nimport { alertDialogPopupVariants } from './alert-dialog-popup-variants';\nimport { useAlertDialogContext } from './use-alert-dialog-context';\n\nexport type AlertDialogPopupProps = BaseAlertDialog.Popup.Props;\n\nexport type AlertDialogPopupState = BaseAlertDialog.Popup.State;\n\n/**\n * Caixa do alert dialog, com `role=\"alertdialog\"`, na largura do `size` do `AlertDialog.Root`.\n *\n * Ao abrir, o foco vai para o primeiro elemento focável: com só os botões no `Footer`, o primeiro\n * deles. Ponha a ação que não destrói (\"Cancelar\") antes da destrutiva, para um `Enter` dado sem\n * ler não confirmar. Com algo focável antes dos botões (um `Collapsible` no `Header`), passe um ref\n * do botão em `initialFocus` para o foco abrir nele.\n */\nexport const AlertDialogPopup = (props: AlertDialogPopupProps) => {\n  const { className, ...rest } = props;\n\n  const { size } = useAlertDialogContext();\n\n  return (\n    <BaseAlertDialog.Popup\n      data-component=\"AlertDialog.Popup\"\n      className={mergeStateClassNames(\n        alertDialogPopupVariants({ size }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogPopup.displayName = 'AlertDialog.Popup';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,EAAE,SAAS,sBAAsB;CAEvC,OACE,oBAACA,YAAgB,OAAjB;EACE,kBAAe;EACf,WAAW,qBACT,yBAAyB,EAAE,KAAK,CAAC,GACjC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

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

@@ -1,18 +1,34 @@
 import React from "react";
 //#region src/components/overlays/alert-dialog/alert-dialog-store.d.ts
+/**
+ * Em que ponto da vida está um alerta: `open` (na tela, inclusive durante o `onConfirm`),
+ * `closing` (a transição de saída roda) e `exited` (saiu da tela, mas a entrada fica por ter
+ * alertas aninhados).
+ */
+type AlertDialogEntryStatus = 'open' | 'closing' | 'exited';
 /** Um alerta aberto por `AlertDialog.alert` ou `AlertDialog.confirm`, à espera do `Outlet`. */
-type AlertDialogEntry = {
+export type AlertDialogEntry = {
   readonly id: number;
-  /** O alerta pronto, com as opções e a resolução da promise presas no elemento. */
-  readonly element: React.ReactNode;
+  /** O `id` do alerta em que este está aninhado, ou `null` se está na raiz. Fixo desde a abertura. */
+  readonly parentId: number | null;
+  readonly status: AlertDialogEntryStatus;
+  /**
+   * Monta o alerta com os aninhados dentro dele (`nested`) e diz se o pai ainda está aberto
+   * (`isParentOpen`, sempre `true` na raiz). As opções e a resolução da promise ficam presas na
+   * função, e o store não precisa conhecer o tipo delas.
+   */
+  readonly render: (nested: React.ReactNode, isParentOpen: boolean) => React.ReactNode;
   /** Resolve a promise como dispensada. Não faz nada se ela já resolveu. */
   readonly dismiss: () => void;
 };
+/** O que `open` informa ao store; o `parentId` e o `status` são decididos por ele. */
+type AlertDialogEntryInput = Pick<AlertDialogEntry, 'id' | 'render' | 'dismiss'>;
 export declare const alertDialogStore: {
   subscribe: (listener: () => void) => () => void;
   getSnapshot: () => readonly AlertDialogEntry[];
   createId: () => number;
-  add: (entry: AlertDialogEntry) => void;
+  add: (input: AlertDialogEntryInput) => void;
+  markClosing: (id: number) => void;
   remove: (id: number) => void;
   registerOutlet: () => () => void;
 };

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

@@ -1,7 +1,18 @@
 //#region src/components/overlays/alert-dialog/alert-dialog-store.ts
 /**
-* Os alertas abertos, renderizados pelo `AlertDialog.Outlet`. Cada entrada guarda o elemento já
-* montado: o tipo das opções e da resposta fica no elemento, e o store não precisa conhecê-lo.
+* Os alertas abertos, renderizados pelo `AlertDialog.Outlet`. O store é dono do aninhamento.
+*
+* O Base UI só escreve o efeito de pilha (`data-nested-dialog-open`, `--nested-dialogs`) num
+* dialog cujo `Root` está abaixo do `Root` de outro na árvore do React. Por isso cada entrada fixa
+* o `parentId` ao abrir: o último alerta ainda `open`, ou `null` se não houver. O pai não muda
+* depois, porque mudar de lugar na árvore remontaria o alerta (perde o estado e reanima a
+* entrada). Um alerta aberto com o de trás já `closing` vai para a raiz, e não fica preso a um
+* pai que está saindo.
+*
+* O pai pode sair antes do filho (um `alert` aberto dentro do `onConfirm`, antes de ele
+* resolver). A entrada dele passa a `exited` e fica como lugar do filho na árvore, sem nada
+* visível, até o último filho sair; aí é removida, em cascata pelos ancestrais na mesma situação.
+*
 * Cada mudança troca o array, para o `useSyncExternalStore` renderizar de novo.
 */
 const createAlertDialogStore = () => {
@@ -23,7 +34,13 @@ const createAlertDialogStore = () => {
 		nextId += 1;
 		return nextId;
 	};
-	const add = (entry) => {
+	const add = (input) => {
+		const parent = entries.findLast((candidate) => candidate.status === "open");
+		const entry = {
+			...input,
+			parentId: parent?.id ?? null,
+			status: "open"
+		};
 		entries = [...entries, entry];
 		emit();
 		/**
@@ -32,11 +49,36 @@ const createAlertDialogStore = () => {
 		* em produção também: ele só aparece com o app montado errado.
 		*/
 		queueMicrotask(() => {
-			if (outletCount === 0 && entries.includes(entry)) console.error("AlertDialog: um alerta foi aberto sem nenhum <AlertDialog.Outlet /> montado, e ele não vai aparecer. Monte um <AlertDialog.Outlet /> perto da raiz do app.");
+			if (outletCount === 0 && entries.some((candidate) => candidate.id === entry.id)) console.error("AlertDialog: um alerta foi aberto sem nenhum <AlertDialog.Outlet /> montado, e ele não vai aparecer. Monte um <AlertDialog.Outlet /> perto da raiz do app.");
 		});
 	};
+	/** Marca que o alerta começou a fechar: ele deixa de ser candidato a pai de um alerta novo. */
+	const markClosing = (id) => {
+		if (entries.find((candidate) => candidate.id === id)?.status !== "open") return;
+		entries = entries.map((candidate) => candidate.id === id ? {
+			...candidate,
+			status: "closing"
+		} : candidate);
+		emit();
+	};
+	/**
+	* Chamado quando o alerta terminou de sair. Se ainda tem alertas aninhados, a entrada fica como
+	* `exited`; se não, é removida junto com os ancestrais `exited` que ficaram sem filhos.
+	*/
 	const remove = (id) => {
-		entries = entries.filter((entry) => entry.id !== id);
+		if (!entries.some((entry) => entry.id === id)) return;
+		let remaining = entries.map((entry) => entry.id === id ? {
+			...entry,
+			status: "exited"
+		} : entry);
+		let hasPrunable = true;
+		while (hasPrunable) {
+			const parentIds = new Set(remaining.map((entry) => entry.parentId));
+			const pruned = remaining.filter((entry) => entry.status !== "exited" || parentIds.has(entry.id));
+			hasPrunable = pruned.length !== remaining.length;
+			remaining = pruned;
+		}
+		entries = remaining;
 		emit();
 	};
 	/**
@@ -64,6 +106,7 @@ const createAlertDialogStore = () => {
 		getSnapshot,
 		createId,
 		add,
+		markClosing,
 		remove,
 		registerOutlet
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-store.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-store.ts"],"sourcesContent":["import type React from 'react';\n\n/** Um alerta aberto por `AlertDialog.alert` ou `AlertDialog.confirm`, à espera do `Outlet`. */\ntype AlertDialogEntry = {\n  readonly id: number;\n  /** O alerta pronto, com as opções e a resolução da promise presas no elemento. */\n  readonly element: React.ReactNode;\n  /** Resolve a promise como dispensada. Não faz nada se ela já resolveu. */\n  readonly dismiss: () => void;\n};\n\n/**\n * Os alertas abertos, renderizados pelo `AlertDialog.Outlet`. Cada entrada guarda o elemento já\n * montado: o tipo das opções e da resposta fica no elemento, e o store não precisa conhecê-lo.\n * Cada mudança troca o array, para o `useSyncExternalStore` renderizar de novo.\n */\nconst createAlertDialogStore = () => {\n  let entries: readonly AlertDialogEntry[] = [];\n  let outletCount = 0;\n  let nextId = 0;\n\n  const listeners = new Set<() => void>();\n\n  const emit = () => {\n    for (const listener of listeners) {\n      listener();\n    }\n  };\n\n  const subscribe = (listener: () => void) => {\n    listeners.add(listener);\n\n    return () => {\n      listeners.delete(listener);\n    };\n  };\n\n  const getSnapshot = () => entries;\n\n  const createId = () => {\n    nextId += 1;\n\n    return nextId;\n  };\n\n  const add = (entry: AlertDialogEntry) => {\n    entries = [...entries, entry];\n    emit();\n\n    /**\n     * Abrir um alerta e montar o `Outlet` podem cair no mesmo commit, e o `Outlet` só se registra\n     * no efeito. Conferir depois de um microtask evita avisar num app montado certo. O aviso vale\n     * em produção também: ele só aparece com o app montado errado.\n     */\n    queueMicrotask(() => {\n      if (outletCount === 0 && entries.includes(entry)) {\n        console.error(\n          'AlertDialog: um alerta foi aberto sem nenhum <AlertDialog.Outlet /> montado, e ele não ' +\n            'vai aparecer. Monte um <AlertDialog.Outlet /> perto da raiz do app.',\n        );\n      }\n    });\n  };\n\n  const remove = (id: number) => {\n    entries = entries.filter((entry) => entry.id !== id);\n    emit();\n  };\n\n  /**\n   * Registra um `Outlet` montado e devolve o cleanup. Quando o último sai, os alertas pendentes\n   * resolvem como dispensados: sem isso, a promise de quem abriu nunca resolveria. A conferência\n   * espera um microtask porque o StrictMode desmonta e remonta o efeito no mesmo commit, e\n   * dispensar na hora fecharia todo alerta assim que abrisse.\n   */\n  const registerOutlet = () => {\n    outletCount += 1;\n\n    if (outletCount > 1) {\n      console.error(\n        'AlertDialog: mais de um <AlertDialog.Outlet /> está montado, e cada alerta vai aparecer ' +\n          'em todos. Monte um só, perto da raiz do app.',\n      );\n    }\n\n    return () => {\n      outletCount -= 1;\n\n      queueMicrotask(() => {\n        if (outletCount > 0 || entries.length === 0) {\n          return;\n        }\n\n        const dismissed = entries;\n\n        entries = [];\n        emit();\n\n        for (const entry of dismissed) {\n          entry.dismiss();\n        }\n      });\n    };\n  };\n\n  return { subscribe, getSnapshot, createId, add, remove, registerOutlet };\n};\n\nexport const alertDialogStore = createAlertDialogStore();\n"],"mappings":";;;;;;AAgBA,MAAM,+BAA+B;CACnC,IAAI,UAAuC,CAAC;CAC5C,IAAI,cAAc;CAClB,IAAI,SAAS;CAEb,MAAM,4BAAY,IAAI,IAAgB;CAEtC,MAAM,aAAa;EACjB,KAAK,MAAM,YAAY,WACrB,SAAS;CAEb;CAEA,MAAM,aAAa,aAAyB;EAC1C,UAAU,IAAI,QAAQ;EAEtB,aAAa;GACX,UAAU,OAAO,QAAQ;EAC3B;CACF;CAEA,MAAM,oBAAoB;CAE1B,MAAM,iBAAiB;EACrB,UAAU;EAEV,OAAO;CACT;CAEA,MAAM,OAAO,UAA4B;EACvC,UAAU,CAAC,GAAG,SAAS,KAAK;EAC5B,KAAK;;;;;;EAOL,qBAAqB;GACnB,IAAI,gBAAgB,KAAK,QAAQ,SAAS,KAAK,GAC7C,QAAQ,MACN,4JAEF;EAEJ,CAAC;CACH;CAEA,MAAM,UAAU,OAAe;EAC7B,UAAU,QAAQ,QAAQ,UAAU,MAAM,OAAO,EAAE;EACnD,KAAK;CACP;;;;;;;CAQA,MAAM,uBAAuB;EAC3B,eAAe;EAEf,IAAI,cAAc,GAChB,QAAQ,MACN,sIAEF;EAGF,aAAa;GACX,eAAe;GAEf,qBAAqB;IACnB,IAAI,cAAc,KAAK,QAAQ,WAAW,GACxC;IAGF,MAAM,YAAY;IAElB,UAAU,CAAC;IACX,KAAK;IAEL,KAAK,MAAM,SAAS,WAClB,MAAM,QAAQ;GAElB,CAAC;EACH;CACF;CAEA,OAAO;EAAE;EAAW;EAAa;EAAU;EAAK;EAAQ;CAAe;AACzE;AAEA,MAAa,mBAAmB,uBAAuB"}
+{"version":3,"file":"alert-dialog-store.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-store.ts"],"sourcesContent":["import type React from 'react';\n\n/**\n * Em que ponto da vida está um alerta: `open` (na tela, inclusive durante o `onConfirm`),\n * `closing` (a transição de saída roda) e `exited` (saiu da tela, mas a entrada fica por ter\n * alertas aninhados).\n */\ntype AlertDialogEntryStatus = 'open' | 'closing' | 'exited';\n\n/** Um alerta aberto por `AlertDialog.alert` ou `AlertDialog.confirm`, à espera do `Outlet`. */\nexport type AlertDialogEntry = {\n  readonly id: number;\n  /** O `id` do alerta em que este está aninhado, ou `null` se está na raiz. Fixo desde a abertura. */\n  readonly parentId: number | null;\n  readonly status: AlertDialogEntryStatus;\n  /**\n   * Monta o alerta com os aninhados dentro dele (`nested`) e diz se o pai ainda está aberto\n   * (`isParentOpen`, sempre `true` na raiz). As opções e a resolução da promise ficam presas na\n   * função, e o store não precisa conhecer o tipo delas.\n   */\n  readonly render: (\n    nested: React.ReactNode,\n    isParentOpen: boolean,\n  ) => React.ReactNode;\n  /** Resolve a promise como dispensada. Não faz nada se ela já resolveu. */\n  readonly dismiss: () => void;\n};\n\n/** O que `open` informa ao store; o `parentId` e o `status` são decididos por ele. */\ntype AlertDialogEntryInput = Pick<\n  AlertDialogEntry,\n  'id' | 'render' | 'dismiss'\n>;\n\n/**\n * Os alertas abertos, renderizados pelo `AlertDialog.Outlet`. O store é dono do aninhamento.\n *\n * O Base UI só escreve o efeito de pilha (`data-nested-dialog-open`, `--nested-dialogs`) num\n * dialog cujo `Root` está abaixo do `Root` de outro na árvore do React. Por isso cada entrada fixa\n * o `parentId` ao abrir: o último alerta ainda `open`, ou `null` se não houver. O pai não muda\n * depois, porque mudar de lugar na árvore remontaria o alerta (perde o estado e reanima a\n * entrada). Um alerta aberto com o de trás já `closing` vai para a raiz, e não fica preso a um\n * pai que está saindo.\n *\n * O pai pode sair antes do filho (um `alert` aberto dentro do `onConfirm`, antes de ele\n * resolver). A entrada dele passa a `exited` e fica como lugar do filho na árvore, sem nada\n * visível, até o último filho sair; aí é removida, em cascata pelos ancestrais na mesma situação.\n *\n * Cada mudança troca o array, para o `useSyncExternalStore` renderizar de novo.\n */\nconst createAlertDialogStore = () => {\n  let entries: readonly AlertDialogEntry[] = [];\n  let outletCount = 0;\n  let nextId = 0;\n\n  const listeners = new Set<() => void>();\n\n  const emit = () => {\n    for (const listener of listeners) {\n      listener();\n    }\n  };\n\n  const subscribe = (listener: () => void) => {\n    listeners.add(listener);\n\n    return () => {\n      listeners.delete(listener);\n    };\n  };\n\n  const getSnapshot = () => entries;\n\n  const createId = () => {\n    nextId += 1;\n\n    return nextId;\n  };\n\n  const add = (input: AlertDialogEntryInput) => {\n    const parent = entries.findLast((candidate) => candidate.status === 'open');\n\n    const entry: AlertDialogEntry = {\n      ...input,\n      parentId: parent?.id ?? null,\n      status: 'open',\n    };\n\n    entries = [...entries, entry];\n    emit();\n\n    /**\n     * Abrir um alerta e montar o `Outlet` podem cair no mesmo commit, e o `Outlet` só se registra\n     * no efeito. Conferir depois de um microtask evita avisar num app montado certo. O aviso vale\n     * em produção também: ele só aparece com o app montado errado.\n     */\n    queueMicrotask(() => {\n      if (\n        outletCount === 0 &&\n        entries.some((candidate) => candidate.id === entry.id)\n      ) {\n        console.error(\n          'AlertDialog: um alerta foi aberto sem nenhum <AlertDialog.Outlet /> montado, e ele não ' +\n            'vai aparecer. Monte um <AlertDialog.Outlet /> perto da raiz do app.',\n        );\n      }\n    });\n  };\n\n  /** Marca que o alerta começou a fechar: ele deixa de ser candidato a pai de um alerta novo. */\n  const markClosing = (id: number) => {\n    const entry = entries.find((candidate) => candidate.id === id);\n\n    if (entry?.status !== 'open') {\n      return;\n    }\n\n    entries = entries.map(\n      (candidate): AlertDialogEntry =>\n        candidate.id === id ? { ...candidate, status: 'closing' } : candidate,\n    );\n    emit();\n  };\n\n  /**\n   * Chamado quando o alerta terminou de sair. Se ainda tem alertas aninhados, a entrada fica como\n   * `exited`; se não, é removida junto com os ancestrais `exited` que ficaram sem filhos.\n   */\n  const remove = (id: number) => {\n    if (!entries.some((entry) => entry.id === id)) {\n      return;\n    }\n\n    let remaining = entries.map(\n      (entry): AlertDialogEntry =>\n        entry.id === id ? { ...entry, status: 'exited' } : entry,\n    );\n\n    let hasPrunable = true;\n\n    while (hasPrunable) {\n      const parentIds = new Set(remaining.map((entry) => entry.parentId));\n\n      const pruned = remaining.filter(\n        (entry) => entry.status !== 'exited' || parentIds.has(entry.id),\n      );\n\n      hasPrunable = pruned.length !== remaining.length;\n      remaining = pruned;\n    }\n\n    entries = remaining;\n    emit();\n  };\n\n  /**\n   * Registra um `Outlet` montado e devolve o cleanup. Quando o último sai, os alertas pendentes\n   * resolvem como dispensados: sem isso, a promise de quem abriu nunca resolveria. A conferência\n   * espera um microtask porque o StrictMode desmonta e remonta o efeito no mesmo commit, e\n   * dispensar na hora fecharia todo alerta assim que abrisse.\n   */\n  const registerOutlet = () => {\n    outletCount += 1;\n\n    if (outletCount > 1) {\n      console.error(\n        'AlertDialog: mais de um <AlertDialog.Outlet /> está montado, e cada alerta vai aparecer ' +\n          'em todos. Monte um só, perto da raiz do app.',\n      );\n    }\n\n    return () => {\n      outletCount -= 1;\n\n      queueMicrotask(() => {\n        if (outletCount > 0 || entries.length === 0) {\n          return;\n        }\n\n        const dismissed = entries;\n\n        entries = [];\n        emit();\n\n        for (const entry of dismissed) {\n          entry.dismiss();\n        }\n      });\n    };\n  };\n\n  return {\n    subscribe,\n    getSnapshot,\n    createId,\n    add,\n    markClosing,\n    remove,\n    registerOutlet,\n  };\n};\n\nexport const alertDialogStore = createAlertDialogStore();\n"],"mappings":";;;;;;;;;;;;;;;;;AAkDA,MAAM,+BAA+B;CACnC,IAAI,UAAuC,CAAC;CAC5C,IAAI,cAAc;CAClB,IAAI,SAAS;CAEb,MAAM,4BAAY,IAAI,IAAgB;CAEtC,MAAM,aAAa;EACjB,KAAK,MAAM,YAAY,WACrB,SAAS;CAEb;CAEA,MAAM,aAAa,aAAyB;EAC1C,UAAU,IAAI,QAAQ;EAEtB,aAAa;GACX,UAAU,OAAO,QAAQ;EAC3B;CACF;CAEA,MAAM,oBAAoB;CAE1B,MAAM,iBAAiB;EACrB,UAAU;EAEV,OAAO;CACT;CAEA,MAAM,OAAO,UAAiC;EAC5C,MAAM,SAAS,QAAQ,UAAU,cAAc,UAAU,WAAW,MAAM;EAE1E,MAAM,QAA0B;GAC9B,GAAG;GACH,UAAU,QAAQ,MAAM;GACxB,QAAQ;EACV;EAEA,UAAU,CAAC,GAAG,SAAS,KAAK;EAC5B,KAAK;;;;;;EAOL,qBAAqB;GACnB,IACE,gBAAgB,KAChB,QAAQ,MAAM,cAAc,UAAU,OAAO,MAAM,EAAE,GAErD,QAAQ,MACN,4JAEF;EAEJ,CAAC;CACH;;CAGA,MAAM,eAAe,OAAe;EAGlC,IAFc,QAAQ,MAAM,cAAc,UAAU,OAAO,EAEnD,CAAC,EAAE,WAAW,QACpB;EAGF,UAAU,QAAQ,KACf,cACC,UAAU,OAAO,KAAK;GAAE,GAAG;GAAW,QAAQ;EAAU,IAAI,SAChE;EACA,KAAK;CACP;;;;;CAMA,MAAM,UAAU,OAAe;EAC7B,IAAI,CAAC,QAAQ,MAAM,UAAU,MAAM,OAAO,EAAE,GAC1C;EAGF,IAAI,YAAY,QAAQ,KACrB,UACC,MAAM,OAAO,KAAK;GAAE,GAAG;GAAO,QAAQ;EAAS,IAAI,KACvD;EAEA,IAAI,cAAc;EAElB,OAAO,aAAa;GAClB,MAAM,YAAY,IAAI,IAAI,UAAU,KAAK,UAAU,MAAM,QAAQ,CAAC;GAElE,MAAM,SAAS,UAAU,QACtB,UAAU,MAAM,WAAW,YAAY,UAAU,IAAI,MAAM,EAAE,CAChE;GAEA,cAAc,OAAO,WAAW,UAAU;GAC1C,YAAY;EACd;EAEA,UAAU;EACV,KAAK;CACP;;;;;;;CAQA,MAAM,uBAAuB;EAC3B,eAAe;EAEf,IAAI,cAAc,GAChB,QAAQ,MACN,sIAEF;EAGF,aAAa;GACX,eAAe;GAEf,qBAAqB;IACnB,IAAI,cAAc,KAAK,QAAQ,WAAW,GACxC;IAGF,MAAM,YAAY;IAElB,UAAU,CAAC;IACX,KAAK;IAEL,KAAK,MAAM,SAAS,WAClB,MAAM,QAAQ;GAElB,CAAC;EACH;CACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;AAEA,MAAa,mBAAmB,uBAAuB"}

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

@@ -6,8 +6,9 @@ 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`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogTitle` (tabela no README de `overlays`; 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.
  */
 export declare const AlertDialogTitle: {
   (props: AlertDialogTitleProps): import("react").JSX.Element;

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

@@ -6,8 +6,9 @@ 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`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogTitle` (tabela no README de `overlays`; 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.
 */
 const AlertDialogTitle = (props) => {
 	const { className, ...rest } = props;
@@ -16,7 +17,7 @@ const AlertDialogTitle = (props) => {
 		className: mergeStateClassNames([
 			"text-base",
 			"leading-6",
-			"font-medium",
+			"font-semibold",
 			"text-gray-12",
 			"text-balance"
 		], className),

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

@@ -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`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\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-medium',\n          'text-gray-12',\n          'text-balance',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogTitle.displayName = 'AlertDialog.Title';\n"],"mappings":";;;;;;;;;;;AAcA,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"}
+{"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"}

package/dist/components/overlays/alert-dialog/index.parts.d.ts

@@ -5,7 +5,8 @@ import { AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogDescrip
 import { AlertDialogFooter, AlertDialogFooterProps } from "./alert-dialog-footer.js";
 import { AlertDialogHeader, AlertDialogHeaderProps } from "./alert-dialog-header.js";
 import { AlertDialogVariants } from "./use-alert-dialog-context.js";
-import { AlertDialogAlertOptions, AlertDialogButtonOptions, AlertDialogConfirmOptions, alertDialogAlert, alertDialogConfirm } from "./alert-dialog-imperative.js";
+import { AlertDialogAlertOptions, AlertDialogConfirmOptions, alertDialogAlert, alertDialogConfirm } from "./alert-dialog-imperative.js";
+import { AlertDialogIndicator, AlertDialogIndicatorProps } from "./alert-dialog-indicator.js";
 import { AlertDialogOutlet } from "./alert-dialog-outlet.js";
 import { AlertDialogPopup, AlertDialogPopupProps, AlertDialogPopupState } from "./alert-dialog-popup.js";
 import { AlertDialogPortal, AlertDialogPortalProps, AlertDialogPortalState } from "./alert-dialog-portal.js";
@@ -15,8 +16,8 @@ import { AlertDialogTrigger, AlertDialogTriggerProps, AlertDialogTriggerState }
 import { AlertDialogViewport, AlertDialogViewportProps, AlertDialogViewportState } from "./alert-dialog-viewport.js";
 import { AlertDialogHandle, createAlertDialogHandle } from "./create-handle.js";
 declare namespace index_parts_d_exports {
-  export { AlertDialogAlertOptions as AlertOptions, AlertDialogBackdrop as Backdrop, AlertDialogBackdropProps as BackdropProps, AlertDialogBackdropState as BackdropState, AlertDialogBody as Body, AlertDialogBodyProps as BodyProps, AlertDialogButtonOptions as ButtonOptions, AlertDialogClose as Close, AlertDialogCloseProps as CloseProps, AlertDialogCloseState as CloseState, AlertDialogConfirmOptions as ConfirmOptions, AlertDialogDescription as Description, AlertDialogDescriptionProps as DescriptionProps, AlertDialogDescriptionState as DescriptionState, AlertDialogFooter as Footer, AlertDialogFooterProps as FooterProps, AlertDialogHandle as Handle, AlertDialogHeader as Header, AlertDialogHeaderProps as HeaderProps, AlertDialogOutlet as Outlet, AlertDialogPopup as Popup, AlertDialogPopupProps as PopupProps, AlertDialogPopupState as PopupState, AlertDialogPortal as Portal, AlertDialogPortalProps as PortalProps, AlertDialogPortalState as PortalState, AlertDialogRoot as Root, AlertDialogRootActions as RootActions, AlertDialogRootChangeEventDetails as RootChangeEventDetails, AlertDialogRootChangeEventReason as RootChangeEventReason, AlertDialogRootProps as RootProps, AlertDialogRootState as RootState, AlertDialogTitle as Title, AlertDialogTitleProps as TitleProps, AlertDialogTitleState as TitleState, AlertDialogTrigger as Trigger, AlertDialogTriggerProps as TriggerProps, AlertDialogTriggerState as TriggerState, AlertDialogVariants as Variants, AlertDialogViewport as Viewport, AlertDialogViewportProps as ViewportProps, AlertDialogViewportState as ViewportState, alertDialogAlert as alert, alertDialogConfirm as confirm, createAlertDialogHandle as createHandle };
+  export { AlertDialogAlertOptions as AlertOptions, AlertDialogBackdrop as Backdrop, AlertDialogBackdropProps as BackdropProps, AlertDialogBackdropState as BackdropState, AlertDialogBody as Body, AlertDialogBodyProps as BodyProps, AlertDialogClose as Close, AlertDialogCloseProps as CloseProps, AlertDialogCloseState as CloseState, AlertDialogConfirmOptions as ConfirmOptions, AlertDialogDescription as Description, AlertDialogDescriptionProps as DescriptionProps, AlertDialogDescriptionState as DescriptionState, AlertDialogFooter as Footer, AlertDialogFooterProps as FooterProps, AlertDialogHandle as Handle, AlertDialogHeader as Header, AlertDialogHeaderProps as HeaderProps, AlertDialogIndicator as Indicator, AlertDialogIndicatorProps as IndicatorProps, AlertDialogOutlet as Outlet, AlertDialogPopup as Popup, AlertDialogPopupProps as PopupProps, AlertDialogPopupState as PopupState, AlertDialogPortal as Portal, AlertDialogPortalProps as PortalProps, AlertDialogPortalState as PortalState, AlertDialogRoot as Root, AlertDialogRootActions as RootActions, AlertDialogRootChangeEventDetails as RootChangeEventDetails, AlertDialogRootChangeEventReason as RootChangeEventReason, AlertDialogRootProps as RootProps, AlertDialogRootState as RootState, AlertDialogTitle as Title, AlertDialogTitleProps as TitleProps, AlertDialogTitleState as TitleState, AlertDialogTrigger as Trigger, AlertDialogTriggerProps as TriggerProps, AlertDialogTriggerState as TriggerState, AlertDialogVariants as Variants, AlertDialogViewport as Viewport, AlertDialogViewportProps as ViewportProps, AlertDialogViewportState as ViewportState, alertDialogAlert as alert, alertDialogConfirm as confirm, createAlertDialogHandle as createHandle };
 }
 //#endregion
-export { type AlertDialogAlertOptions as AlertOptions, AlertDialogBackdrop as Backdrop, type AlertDialogBackdropProps as BackdropProps, type AlertDialogBackdropState as BackdropState, AlertDialogBody as Body, type AlertDialogBodyProps as BodyProps, type AlertDialogButtonOptions as ButtonOptions, AlertDialogClose as Close, type AlertDialogCloseProps as CloseProps, type AlertDialogCloseState as CloseState, type AlertDialogConfirmOptions as ConfirmOptions, AlertDialogDescription as Description, type AlertDialogDescriptionProps as DescriptionProps, type AlertDialogDescriptionState as DescriptionState, AlertDialogFooter as Footer, type AlertDialogFooterProps as FooterProps, type AlertDialogHandle as Handle, AlertDialogHeader as Header, type AlertDialogHeaderProps as HeaderProps, AlertDialogOutlet as Outlet, AlertDialogPopup as Popup, type AlertDialogPopupProps as PopupProps, type AlertDialogPopupState as PopupState, AlertDialogPortal as Portal, type AlertDialogPortalProps as PortalProps, type AlertDialogPortalState as PortalState, AlertDialogRoot as Root, type AlertDialogRootActions as RootActions, type AlertDialogRootChangeEventDetails as RootChangeEventDetails, type AlertDialogRootChangeEventReason as RootChangeEventReason, type AlertDialogRootProps as RootProps, type AlertDialogRootState as RootState, AlertDialogTitle as Title, type AlertDialogTitleProps as TitleProps, type AlertDialogTitleState as TitleState, AlertDialogTrigger as Trigger, type AlertDialogTriggerProps as TriggerProps, type AlertDialogTriggerState as TriggerState, type AlertDialogVariants as Variants, AlertDialogViewport as Viewport, type AlertDialogViewportProps as ViewportProps, type AlertDialogViewportState as ViewportState, alertDialogAlert as alert, alertDialogConfirm as confirm, createAlertDialogHandle as createHandle, index_parts_d_exports };
+export { type AlertDialogAlertOptions as AlertOptions, AlertDialogBackdrop as Backdrop, type AlertDialogBackdropProps as BackdropProps, type AlertDialogBackdropState as BackdropState, AlertDialogBody as Body, type AlertDialogBodyProps as BodyProps, AlertDialogClose as Close, type AlertDialogCloseProps as CloseProps, type AlertDialogCloseState as CloseState, type AlertDialogConfirmOptions as ConfirmOptions, AlertDialogDescription as Description, type AlertDialogDescriptionProps as DescriptionProps, type AlertDialogDescriptionState as DescriptionState, AlertDialogFooter as Footer, type AlertDialogFooterProps as FooterProps, type AlertDialogHandle as Handle, AlertDialogHeader as Header, type AlertDialogHeaderProps as HeaderProps, AlertDialogIndicator as Indicator, type AlertDialogIndicatorProps as IndicatorProps, AlertDialogOutlet as Outlet, AlertDialogPopup as Popup, type AlertDialogPopupProps as PopupProps, type AlertDialogPopupState as PopupState, AlertDialogPortal as Portal, type AlertDialogPortalProps as PortalProps, type AlertDialogPortalState as PortalState, AlertDialogRoot as Root, type AlertDialogRootActions as RootActions, type AlertDialogRootChangeEventDetails as RootChangeEventDetails, type AlertDialogRootChangeEventReason as RootChangeEventReason, type AlertDialogRootProps as RootProps, type AlertDialogRootState as RootState, AlertDialogTitle as Title, type AlertDialogTitleProps as TitleProps, type AlertDialogTitleState as TitleState, AlertDialogTrigger as Trigger, type AlertDialogTriggerProps as TriggerProps, type AlertDialogTriggerState as TriggerState, type AlertDialogVariants as Variants, AlertDialogViewport as Viewport, type AlertDialogViewportProps as ViewportProps, type AlertDialogViewportState as ViewportState, alertDialogAlert as alert, alertDialogConfirm as confirm, createAlertDialogHandle as createHandle, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

package/dist/components/overlays/alert-dialog/index.parts.js

@@ -5,6 +5,7 @@ import { AlertDialogClose } from "./alert-dialog-close.js";
 import { AlertDialogDescription } from "./alert-dialog-description.js";
 import { AlertDialogFooter } from "./alert-dialog-footer.js";
 import { AlertDialogHeader } from "./alert-dialog-header.js";
+import { AlertDialogIndicator } from "./alert-dialog-indicator.js";
 import { AlertDialogPopup } from "./alert-dialog-popup.js";
 import { AlertDialogPortal } from "./alert-dialog-portal.js";
 import { AlertDialogRoot } from "./alert-dialog-root.js";
@@ -22,6 +23,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Description: () => AlertDialogDescription,
 	Footer: () => AlertDialogFooter,
 	Header: () => AlertDialogHeader,
+	Indicator: () => AlertDialogIndicator,
 	Outlet: () => AlertDialogOutlet,
 	Popup: () => AlertDialogPopup,
 	Portal: () => AlertDialogPortal,
@@ -34,6 +36,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	createHandle: () => createAlertDialogHandle
 });
 //#endregion
-export { AlertDialogBackdrop as Backdrop, AlertDialogBody as Body, AlertDialogClose as Close, AlertDialogDescription as Description, AlertDialogFooter as Footer, AlertDialogHeader as Header, AlertDialogOutlet as Outlet, AlertDialogPopup as Popup, AlertDialogPortal as Portal, AlertDialogRoot as Root, AlertDialogTitle as Title, AlertDialogTrigger as Trigger, AlertDialogViewport as Viewport, alertDialogAlert as alert, alertDialogConfirm as confirm, createAlertDialogHandle as createHandle, index_parts_exports };
+export { AlertDialogBackdrop as Backdrop, AlertDialogBody as Body, AlertDialogClose as Close, AlertDialogDescription as Description, AlertDialogFooter as Footer, AlertDialogHeader as Header, AlertDialogIndicator as Indicator, AlertDialogOutlet as Outlet, AlertDialogPopup as Popup, AlertDialogPortal as Portal, AlertDialogRoot as Root, AlertDialogTitle as Title, AlertDialogTrigger as Trigger, AlertDialogViewport as Viewport, alertDialogAlert as alert, alertDialogConfirm as confirm, createAlertDialogHandle as createHandle, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

package/dist/components/overlays/alert-dialog/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/index.parts.ts"],"sourcesContent":["export { AlertDialogBackdrop as Backdrop } from './alert-dialog-backdrop';\nexport { AlertDialogBody as Body } from './alert-dialog-body';\nexport { AlertDialogClose as Close } from './alert-dialog-close';\nexport { AlertDialogDescription as Description } from './alert-dialog-description';\nexport { AlertDialogFooter as Footer } from './alert-dialog-footer';\nexport { AlertDialogHeader as Header } from './alert-dialog-header';\nexport {\n  alertDialogAlert as alert,\n  alertDialogConfirm as confirm,\n} from './alert-dialog-imperative';\nexport { AlertDialogOutlet as Outlet } from './alert-dialog-outlet';\nexport { AlertDialogPopup as Popup } from './alert-dialog-popup';\nexport { AlertDialogPortal as Portal } from './alert-dialog-portal';\nexport { AlertDialogRoot as Root } from './alert-dialog-root';\nexport { AlertDialogTitle as Title } from './alert-dialog-title';\nexport { AlertDialogTrigger as Trigger } from './alert-dialog-trigger';\nexport { AlertDialogViewport as Viewport } from './alert-dialog-viewport';\nexport { createAlertDialogHandle as createHandle } from './create-handle';\n\n/* types */\n\nexport type {\n  AlertDialogBackdropProps as BackdropProps,\n  AlertDialogBackdropState as BackdropState,\n} from './alert-dialog-backdrop';\nexport type { AlertDialogBodyProps as BodyProps } from './alert-dialog-body';\nexport type {\n  AlertDialogCloseProps as CloseProps,\n  AlertDialogCloseState as CloseState,\n} from './alert-dialog-close';\nexport type {\n  AlertDialogDescriptionProps as DescriptionProps,\n  AlertDialogDescriptionState as DescriptionState,\n} from './alert-dialog-description';\nexport type { AlertDialogFooterProps as FooterProps } from './alert-dialog-footer';\nexport type { AlertDialogHeaderProps as HeaderProps } from './alert-dialog-header';\nexport type {\n  AlertDialogAlertOptions as AlertOptions,\n  AlertDialogButtonOptions as ButtonOptions,\n  AlertDialogConfirmOptions as ConfirmOptions,\n} from './alert-dialog-imperative';\nexport type {\n  AlertDialogPopupProps as PopupProps,\n  AlertDialogPopupState as PopupState,\n} from './alert-dialog-popup';\nexport type {\n  AlertDialogPortalProps as PortalProps,\n  AlertDialogPortalState as PortalState,\n} from './alert-dialog-portal';\nexport type {\n  AlertDialogRootActions as RootActions,\n  AlertDialogRootChangeEventDetails as RootChangeEventDetails,\n  AlertDialogRootChangeEventReason as RootChangeEventReason,\n  AlertDialogRootProps as RootProps,\n  AlertDialogRootState as RootState,\n} from './alert-dialog-root';\nexport type {\n  AlertDialogTitleProps as TitleProps,\n  AlertDialogTitleState as TitleState,\n} from './alert-dialog-title';\nexport type {\n  AlertDialogTriggerProps as TriggerProps,\n  AlertDialogTriggerState as TriggerState,\n} from './alert-dialog-trigger';\nexport type {\n  AlertDialogViewportProps as ViewportProps,\n  AlertDialogViewportState as ViewportState,\n} from './alert-dialog-viewport';\nexport type { AlertDialogHandle as Handle } from './create-handle';\nexport type { AlertDialogVariants as Variants } from './use-alert-dialog-context';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/index.parts.ts"],"sourcesContent":["export { AlertDialogBackdrop as Backdrop } from './alert-dialog-backdrop';\nexport { AlertDialogBody as Body } from './alert-dialog-body';\nexport { AlertDialogClose as Close } from './alert-dialog-close';\nexport { AlertDialogDescription as Description } from './alert-dialog-description';\nexport { AlertDialogFooter as Footer } from './alert-dialog-footer';\nexport { AlertDialogHeader as Header } from './alert-dialog-header';\nexport {\n  alertDialogAlert as alert,\n  alertDialogConfirm as confirm,\n} from './alert-dialog-imperative';\nexport { AlertDialogIndicator as Indicator } from './alert-dialog-indicator';\nexport { AlertDialogOutlet as Outlet } from './alert-dialog-outlet';\nexport { AlertDialogPopup as Popup } from './alert-dialog-popup';\nexport { AlertDialogPortal as Portal } from './alert-dialog-portal';\nexport { AlertDialogRoot as Root } from './alert-dialog-root';\nexport { AlertDialogTitle as Title } from './alert-dialog-title';\nexport { AlertDialogTrigger as Trigger } from './alert-dialog-trigger';\nexport { AlertDialogViewport as Viewport } from './alert-dialog-viewport';\nexport { createAlertDialogHandle as createHandle } from './create-handle';\n\n/* types */\n\nexport type {\n  AlertDialogBackdropProps as BackdropProps,\n  AlertDialogBackdropState as BackdropState,\n} from './alert-dialog-backdrop';\nexport type { AlertDialogBodyProps as BodyProps } from './alert-dialog-body';\nexport type {\n  AlertDialogCloseProps as CloseProps,\n  AlertDialogCloseState as CloseState,\n} from './alert-dialog-close';\nexport type {\n  AlertDialogDescriptionProps as DescriptionProps,\n  AlertDialogDescriptionState as DescriptionState,\n} from './alert-dialog-description';\nexport type { AlertDialogFooterProps as FooterProps } from './alert-dialog-footer';\nexport type { AlertDialogHeaderProps as HeaderProps } from './alert-dialog-header';\nexport type {\n  AlertDialogAlertOptions as AlertOptions,\n  AlertDialogConfirmOptions as ConfirmOptions,\n} from './alert-dialog-imperative';\nexport type { AlertDialogIndicatorProps as IndicatorProps } from './alert-dialog-indicator';\nexport type {\n  AlertDialogPopupProps as PopupProps,\n  AlertDialogPopupState as PopupState,\n} from './alert-dialog-popup';\nexport type {\n  AlertDialogPortalProps as PortalProps,\n  AlertDialogPortalState as PortalState,\n} from './alert-dialog-portal';\nexport type {\n  AlertDialogRootActions as RootActions,\n  AlertDialogRootChangeEventDetails as RootChangeEventDetails,\n  AlertDialogRootChangeEventReason as RootChangeEventReason,\n  AlertDialogRootProps as RootProps,\n  AlertDialogRootState as RootState,\n} from './alert-dialog-root';\nexport type {\n  AlertDialogTitleProps as TitleProps,\n  AlertDialogTitleState as TitleState,\n} from './alert-dialog-title';\nexport type {\n  AlertDialogTriggerProps as TriggerProps,\n  AlertDialogTriggerState as TriggerState,\n} from './alert-dialog-trigger';\nexport type {\n  AlertDialogViewportProps as ViewportProps,\n  AlertDialogViewportState as ViewportState,\n} from './alert-dialog-viewport';\nexport type { AlertDialogHandle as Handle } from './create-handle';\nexport type { AlertDialogVariants as Variants } from './use-alert-dialog-context';\n"],"mappings":""}

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

@@ -26,6 +26,7 @@ const DialogBody = (props) => {
 			"flex",
 			"flex-1",
 			"flex-col",
+			"gap-4",
 			"min-h-0",
 			"overflow-y-auto",
 			"px-(--dialog-padding)",

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

@@ -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        // 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;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"}
+{"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"}

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

@@ -4,7 +4,7 @@
  * cor do texto e animação estão explicados (tabela no README de `overlays`). As diferenças:
  * - sem positioner: o `Dialog.Viewport` centraliza o popup, que cresce a partir do centro;
  * - largura pelo `size` e altura até a do viewport, com o `Body` rolando;
- * - `rounded-md` e `shadow-lg`;
+ * - `rounded-lg`, sem `corner-squircle`, e `shadow-lg`;
  * - o aninhamento, abaixo.
  *
  * O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 16px, como o

package/dist/components/overlays/dialog/dialog-popup-variants.js

@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
 * cor do texto e animação estão explicados (tabela no README de `overlays`). As diferenças:
 * - sem positioner: o `Dialog.Viewport` centraliza o popup, que cresce a partir do centro;
 * - largura pelo `size` e altura até a do viewport, com o `Body` rolando;
-* - `rounded-md` e `shadow-lg`;
+* - `rounded-lg`, sem `corner-squircle`, e `shadow-lg`;
 * - o aninhamento, abaixo.
 *
 * O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 16px, como o
@@ -29,8 +29,7 @@ const dialogPopupVariants = cva([
 	"flex-col",
 	"w-full",
 	"max-h-full",
-	"rounded-md",
-	"corner-squircle",
+	"rounded-lg",
 	"outline-1",
 	"outline-gray-6",
 	"bg-white",

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/dialog/dialog-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dialogDefaultVariants } from './use-dialog-context';\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra,\n * cor do texto e animação estão explicados (tabela no README de `overlays`). As diferenças:\n * - sem positioner: o `Dialog.Viewport` centraliza o popup, que cresce a partir do centro;\n * - largura pelo `size` e altura até a do viewport, com o `Body` rolando;\n * - `rounded-md` e `shadow-lg`;\n * - o aninhamento, abaixo.\n *\n * O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 16px, como o\n * título e a descrição: o `size` do Dialog é a largura, e um Dialog largo não ganha título maior.\n *\n * Com outro Dialog aberto sobre ele, o Base UI marca o popup com `data-nested-dialog-open` e\n * escreve em `--nested-dialogs` quantos estão abertos à frente. O popup de trás encolhe, sobe 24px\n * por nível e escurece (pelo `::after`), porque o Dialog aninhado não renderiza backdrop: cada\n * nível aparece como uma faixa acima do da frente. Um Dialog da frente mais alto que o de trás o\n * cobre por inteiro, porque os dois ficam centralizados.\n *\n * Origem do `AlertDialog.Popup` e do `Drawer.Popup`, 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 dialogPopupVariants = cva(\n  [\n    '[--dialog-padding:--spacing(4)]',\n\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'w-full',\n    'max-h-full',\n\n    'rounded-md',\n    'corner-squircle',\n    'outline-1',\n    'outline-gray-6',\n\n    'bg-white',\n    'dark:bg-gray-2',\n\n    'shadow-lg',\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.05*var(--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: dialogDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,sBAAsB,IACjC;CACE;CAEA;CAEA;CACA;CAEA;CACA;CAEA;CACA;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,sBAAsB,KAC9B;AACF,CACF"}
+{"version":3,"file":"dialog-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/dialog/dialog-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dialogDefaultVariants } from './use-dialog-context';\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra,\n * cor do texto e animação estão explicados (tabela no README de `overlays`). As diferenças:\n * - sem positioner: o `Dialog.Viewport` centraliza o popup, que cresce a partir do centro;\n * - largura pelo `size` e altura até a do viewport, com o `Body` rolando;\n * - `rounded-lg`, sem `corner-squircle`, e `shadow-lg`;\n * - o aninhamento, abaixo.\n *\n * O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 16px, como o\n * título e a descrição: o `size` do Dialog é a largura, e um Dialog largo não ganha título maior.\n *\n * Com outro Dialog aberto sobre ele, o Base UI marca o popup com `data-nested-dialog-open` e\n * escreve em `--nested-dialogs` quantos estão abertos à frente. O popup de trás encolhe, sobe 24px\n * por nível e escurece (pelo `::after`), porque o Dialog aninhado não renderiza backdrop: cada\n * nível aparece como uma faixa acima do da frente. Um Dialog da frente mais alto que o de trás o\n * cobre por inteiro, porque os dois ficam centralizados.\n *\n * Origem do `AlertDialog.Popup` e do `Drawer.Popup`, 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 dialogPopupVariants = cva(\n  [\n    '[--dialog-padding:--spacing(4)]',\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-white',\n    'dark:bg-gray-2',\n\n    'shadow-lg',\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.05*var(--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: dialogDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,sBAAsB,IACjC;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,sBAAsB,KAC9B;AACF,CACF"}

package/dist/components/overlays/drawer/drawer-body.js

@@ -19,6 +19,7 @@ const DrawerBody = (props) => {
 			"flex",
 			"flex-1",
 			"flex-col",
+			"gap-4",
 			"min-h-0",
 			"overflow-y-auto",
 			"overscroll-contain",

package/dist/components/overlays/drawer/drawer-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-body.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-body.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerBodyProps = BaseDrawer.Content.Props;\n\nexport type DrawerBodyState = BaseDrawer.Content.State;\n\n/**\n * Conteúdo principal do drawer, sobre o `Drawer.Content` do Base UI: com o mouse, o texto dele se\n * seleciona sem disparar o arrasto. Ocupa o espaço que sobra e rola por dentro; `Header` e `Footer`\n * continuam visíveis.\n *\n * Cópia de `DialogBody` (tabela no README de `overlays`), onde a divisão do espaço vertical está\n * explicada. As diferenças: é o `Drawer.Content`, o respiro vem de `--drawer-padding`, e a rolagem\n * não passa para a página no fim da lista (`overscroll-contain`).\n */\nexport const DrawerBody = (props: DrawerBodyProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.Content\n      data-component=\"Drawer.Body\"\n      className={mergeStateClassNames(\n        [\n          'flex',\n          'flex-1',\n          'flex-col',\n          // Sem o `min-h-0`, o item flex não encolhe abaixo do conteúdo, e o popup vaza da tela.\n          'min-h-0',\n          'overflow-y-auto',\n          'overscroll-contain',\n\n          'px-(--drawer-padding)',\n          'py-2',\n          'first:pt-(--drawer-padding)',\n          // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n          \"[&:not(:has(~[data-component='Drawer.Footer']))]:pb-(--drawer-padding)\",\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerBody.displayName = 'Drawer.Body';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,SAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}
+{"version":3,"file":"drawer-body.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-body.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerBodyProps = BaseDrawer.Content.Props;\n\nexport type DrawerBodyState = BaseDrawer.Content.State;\n\n/**\n * Conteúdo principal do drawer, sobre o `Drawer.Content` do Base UI: com o mouse, o texto dele se\n * seleciona sem disparar o arrasto. Ocupa o espaço que sobra e rola por dentro; `Header` e `Footer`\n * continuam visíveis.\n *\n * Cópia de `DialogBody` (tabela no README de `overlays`), onde a divisão do espaço vertical está\n * explicada. As diferenças: é o `Drawer.Content`, o respiro vem de `--drawer-padding`, e a rolagem\n * não passa para a página no fim da lista (`overscroll-contain`).\n */\nexport const DrawerBody = (props: DrawerBodyProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.Content\n      data-component=\"Drawer.Body\"\n      className={mergeStateClassNames(\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          'overscroll-contain',\n\n          'px-(--drawer-padding)',\n          'py-2',\n          'first:pt-(--drawer-padding)',\n          // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n          \"[&:not(:has(~[data-component='Drawer.Footer']))]:pb-(--drawer-padding)\",\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerBody.displayName = 'Drawer.Body';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,SAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/typography/link/index.d.ts

@@ -0,0 +1,3 @@
+import { LinkVariants } from "./link-variants.js";
+import { Link, LinkProps } from "./link.js";
+export { Link, type LinkProps, type LinkVariants };

package/dist/components/typography/link/index.js

@@ -0,0 +1,2 @@
+import { Link } from "./link.js";
+export { Link };

package/dist/components/typography/link/link-variants.d.ts

@@ -0,0 +1,33 @@
+import { ColorSchemeSemantic } from "../../../types/color-scheme.js";
+//#region src/components/typography/link/link-variants.d.ts
+export type LinkVariants = {
+  /**
+   * Cor do texto e do sublinhado.
+   *
+   * @default 'brand'
+   */
+  colorScheme?: ColorSchemeSemantic;
+  /**
+   * Sublinhado: `underline` sempre sublinhado, o caso do texto corrido, em que o link não depende só
+   * da cor; `plain` sublinha só no hover, para listas e tabelas em que o contexto já mostra que é
+   * link.
+   *
+   * @default 'underline'
+   */
+  variant?: 'underline' | 'plain';
+};
+export declare const linkDefaultVariants: Required<LinkVariants>;
+/**
+ * O `colorScheme` só declara `--link-fg` (passo 11), `--link-fg-hover` (passo 12) e
+ * `--link-decoration` (alpha 7), e as classes base as consomem. Assim uma cor nova é um bloco de
+ * variáveis, e a `variant` só decide se o sublinhado aparece sempre ou no hover.
+ *
+ * Desabilitado (`disabled` ou `aria-disabled="true"`), o link vai para o gray e perde a mudança de
+ * hover.
+ */
+export declare const linkVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  variant?: "plain" | "underline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=link-variants.d.ts.map

package/dist/components/typography/link/link-variants.js

@@ -0,0 +1,91 @@
+import { cva } from "class-variance-authority";
+//#region src/components/typography/link/link-variants.ts
+const linkDefaultVariants = {
+	colorScheme: "brand",
+	variant: "underline"
+};
+/**
+* O `colorScheme` só declara `--link-fg` (passo 11), `--link-fg-hover` (passo 12) e
+* `--link-decoration` (alpha 7), e as classes base as consomem. Assim uma cor nova é um bloco de
+* variáveis, e a `variant` só decide se o sublinhado aparece sempre ou no hover.
+*
+* Desabilitado (`disabled` ou `aria-disabled="true"`), o link vai para o gray e perde a mudança de
+* hover.
+*/
+const linkVariants = cva([
+	"text-(--link-fg)",
+	"underline-offset-2",
+	"decoration-(--link-decoration)",
+	"hover:text-(--link-fg-hover)",
+	"hover:decoration-(--link-fg-hover)",
+	"focus-ring-outside",
+	"rounded-xs",
+	"cursor-pointer",
+	"text-start",
+	"not-motion-reduced:transition-colors",
+	"not-motion-reduced:ease-out",
+	"disabled:cursor-not-allowed",
+	"disabled:text-gray-11",
+	"disabled:hover:text-gray-11",
+	"aria-disabled:cursor-not-allowed",
+	"aria-disabled:text-gray-11",
+	"aria-disabled:hover:text-gray-11"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--link-fg:var(--color-gray-11)]",
+				"[--link-fg-hover:var(--color-gray-12)]",
+				"[--link-decoration:var(--color-gray-alpha-7)]"
+			],
+			brand: [
+				"[--link-fg:var(--color-brand-11)]",
+				"[--link-fg-hover:var(--color-brand-12)]",
+				"[--link-decoration:var(--color-brand-alpha-7)]"
+			],
+			red: [
+				"[--link-fg:var(--color-red-11)]",
+				"[--link-fg-hover:var(--color-red-12)]",
+				"[--link-decoration:var(--color-red-alpha-7)]"
+			],
+			green: [
+				"[--link-fg:var(--color-green-11)]",
+				"[--link-fg-hover:var(--color-green-12)]",
+				"[--link-decoration:var(--color-green-alpha-7)]"
+			],
+			amber: [
+				"[--link-fg:var(--color-amber-11)]",
+				"[--link-fg-hover:var(--color-amber-12)]",
+				"[--link-decoration:var(--color-amber-alpha-7)]"
+			],
+			blue: [
+				"[--link-fg:var(--color-blue-11)]",
+				"[--link-fg-hover:var(--color-blue-12)]",
+				"[--link-decoration:var(--color-blue-alpha-7)]"
+			]
+		},
+		variant: {
+			underline: [
+				"underline",
+				"disabled:decoration-gray-alpha-7",
+				"disabled:hover:decoration-gray-alpha-7",
+				"aria-disabled:decoration-gray-alpha-7",
+				"aria-disabled:hover:decoration-gray-alpha-7"
+			],
+			plain: [
+				"no-underline",
+				"hover:underline",
+				"disabled:hover:no-underline",
+				"aria-disabled:hover:no-underline"
+			]
+		}
+	},
+	defaultVariants: {
+		colorScheme: linkDefaultVariants.colorScheme,
+		variant: linkDefaultVariants.variant
+	}
+});
+//#endregion
+export { linkDefaultVariants, linkVariants };
+
+//# sourceMappingURL=link-variants.js.map

package/dist/components/typography/link/link-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-variants.js","names":[],"sources":["../../../../src/components/typography/link/link-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type LinkVariants = {\n  /**\n   * Cor do texto e do sublinhado.\n   *\n   * @default 'brand'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Sublinhado: `underline` sempre sublinhado, o caso do texto corrido, em que o link não depende só\n   * da cor; `plain` sublinha só no hover, para listas e tabelas em que o contexto já mostra que é\n   * link.\n   *\n   * @default 'underline'\n   */\n  variant?: 'underline' | 'plain';\n};\n\nexport const linkDefaultVariants: Required<LinkVariants> = {\n  colorScheme: 'brand',\n  variant: 'underline',\n};\n\n/**\n * O `colorScheme` só declara `--link-fg` (passo 11), `--link-fg-hover` (passo 12) e\n * `--link-decoration` (alpha 7), e as classes base as consomem. Assim uma cor nova é um bloco de\n * variáveis, e a `variant` só decide se o sublinhado aparece sempre ou no hover.\n *\n * Desabilitado (`disabled` ou `aria-disabled=\"true\"`), o link vai para o gray e perde a mudança de\n * hover.\n */\nexport const linkVariants = cva(\n  [\n    'text-(--link-fg)',\n    'underline-offset-2',\n    'decoration-(--link-decoration)',\n\n    'hover:text-(--link-fg-hover)',\n    'hover:decoration-(--link-fg-hover)',\n\n    'focus-ring-outside',\n    'rounded-xs',\n\n    // Como `<button>`, o link precisa do cursor e do alinhamento à esquerda; no `<a>` não muda nada.\n    'cursor-pointer',\n    'text-start',\n\n    // Troca de cor, não movimento: usa o `ease-out` do Tailwind e não um token `ease-*` do tema.\n    'not-motion-reduced:transition-colors',\n    'not-motion-reduced:ease-out',\n\n    'disabled:cursor-not-allowed',\n    'disabled:text-gray-11',\n    'disabled:hover:text-gray-11',\n    'aria-disabled:cursor-not-allowed',\n    'aria-disabled:text-gray-11',\n    'aria-disabled:hover:text-gray-11',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--link-fg:var(--color-gray-11)]',\n          '[--link-fg-hover:var(--color-gray-12)]',\n          '[--link-decoration:var(--color-gray-alpha-7)]',\n        ],\n        brand: [\n          '[--link-fg:var(--color-brand-11)]',\n          '[--link-fg-hover:var(--color-brand-12)]',\n          '[--link-decoration:var(--color-brand-alpha-7)]',\n        ],\n        red: [\n          '[--link-fg:var(--color-red-11)]',\n          '[--link-fg-hover:var(--color-red-12)]',\n          '[--link-decoration:var(--color-red-alpha-7)]',\n        ],\n        green: [\n          '[--link-fg:var(--color-green-11)]',\n          '[--link-fg-hover:var(--color-green-12)]',\n          '[--link-decoration:var(--color-green-alpha-7)]',\n        ],\n        amber: [\n          '[--link-fg:var(--color-amber-11)]',\n          '[--link-fg-hover:var(--color-amber-12)]',\n          '[--link-decoration:var(--color-amber-alpha-7)]',\n        ],\n        blue: [\n          '[--link-fg:var(--color-blue-11)]',\n          '[--link-fg-hover:var(--color-blue-12)]',\n          '[--link-decoration:var(--color-blue-alpha-7)]',\n        ],\n      },\n      variant: {\n        underline: [\n          'underline',\n\n          'disabled:decoration-gray-alpha-7',\n          'disabled:hover:decoration-gray-alpha-7',\n          'aria-disabled:decoration-gray-alpha-7',\n          'aria-disabled:hover:decoration-gray-alpha-7',\n        ],\n        plain: [\n          'no-underline',\n          'hover:underline',\n\n          'disabled:hover:no-underline',\n          'aria-disabled:hover:no-underline',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: linkDefaultVariants.colorScheme,\n      variant: linkDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAoBA,MAAa,sBAA8C;CACzD,aAAa;CACb,SAAS;AACX;;;;;;;;;AAUA,MAAa,eAAe,IAC1B;CACE;CACA;CACA;CAEA;CACA;CAEA;CACA;CAGA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,WAAW;IACT;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,oBAAoB;EACjC,SAAS,oBAAoB;CAC/B;AACF,CACF"}