@lucasbernardosn/react-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,28 @@
+import { alertDialogStore } from "./alert-dialog-store.js";
+import { useEffect, useSyncExternalStore } from "react";
+//#region src/components/overlays/alert-dialog/alert-dialog-outlet.tsx
+/**
+* Onde aparecem os alertas abertos por `AlertDialog.alert` e `AlertDialog.confirm`. Monte um só,
+* perto da raiz do app, abaixo dos providers globais (tema, tradução): os alertas só enxergam os
+* providers acima dele, não os de quem os abriu. Não renderiza elemento próprio.
+*
+* Se ele desmontar com um alerta aberto, a promise resolve como dispensada.
+*
+* @example
+* ```tsx
+* <ThemeProvider>
+*   <App />
+*   <AlertDialog.Outlet />
+* </ThemeProvider>
+* ```
+*/
+const AlertDialogOutlet = () => {
+	const entries = useSyncExternalStore(alertDialogStore.subscribe, alertDialogStore.getSnapshot, alertDialogStore.getSnapshot);
+	useEffect(() => alertDialogStore.registerOutlet(), []);
+	return entries.map((entry) => entry.element);
+};
+AlertDialogOutlet.displayName = "AlertDialog.Outlet";
+//#endregion
+export { AlertDialogOutlet };
+
+//# sourceMappingURL=alert-dialog-outlet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-outlet.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-outlet.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useSyncExternalStore } from 'react';\nimport { alertDialogStore } from './alert-dialog-store';\n\n/**\n * Onde aparecem os alertas abertos por `AlertDialog.alert` e `AlertDialog.confirm`. Monte um só,\n * perto da raiz do app, abaixo dos providers globais (tema, tradução): os alertas só enxergam os\n * providers acima dele, não os de quem os abriu. Não renderiza elemento próprio.\n *\n * Se ele desmontar com um alerta aberto, a promise resolve como dispensada.\n *\n * @example\n * ```tsx\n * <ThemeProvider>\n *   <App />\n *   <AlertDialog.Outlet />\n * </ThemeProvider>\n * ```\n */\nexport const AlertDialogOutlet = (): React.ReactNode => {\n  const entries = useSyncExternalStore(\n    alertDialogStore.subscribe,\n    alertDialogStore.getSnapshot,\n    alertDialogStore.getSnapshot,\n  );\n\n  useEffect(() => alertDialogStore.registerOutlet(), []);\n\n  return entries.map((entry) => entry.element);\n};\n\nAlertDialogOutlet.displayName = 'AlertDialog.Outlet';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAa,0BAA2C;CACtD,MAAM,UAAU,qBACd,iBAAiB,WACjB,iBAAiB,aACjB,iBAAiB,WACnB;CAEA,gBAAgB,iBAAiB,eAAe,GAAG,CAAC,CAAC;CAErD,OAAO,QAAQ,KAAK,UAAU,MAAM,OAAO;AAC7C;AAEA,kBAAkB,cAAc"}

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

@@ -6,18 +6,18 @@ import { cva } from "class-variance-authority";
 * largura pelo `size`, respiro e tipografia fixos e aninhamento estão explicados lá.
 */
 const alertDialogPopupVariants = cva([
-	"[--alert-dialog-padding:--spacing(6)]",
+	"[--alert-dialog-padding:--spacing(4)]",
 	"relative",
 	"flex",
 	"flex-col",
 	"w-full",
 	"max-h-full",
-	"rounded-lg",
+	"rounded-md",
 	"corner-squircle",
 	"outline-1",
 	"outline-gray-6",
-	"bg-white",
-	"dark:bg-gray-2",
+	"bg-gray-1",
+	"dark:bg-gray-1",
 	"shadow-lg",
 	"shadow-black/12",
 	"dark:shadow-none",

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(6)]',\n\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'w-full',\n    'max-h-full',\n\n    'rounded-lg',\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: 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`, 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"}

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

@@ -1,5 +1,5 @@
 import { AlertDialogVariants } from "./use-alert-dialog-context.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/components/overlays/alert-dialog/alert-dialog-root.d.ts
 export type AlertDialogRootProps<Payload = unknown> = MergeOverride<AlertDialog.Root.Props<Payload>, AlertDialogVariants>;

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

@@ -1,5 +1,5 @@
 import { AlertDialogContextProvider } from "./use-alert-dialog-context.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/components/overlays/alert-dialog/alert-dialog-root.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-root.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-root.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport {\n  type AnyType,\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/utils';\nimport {\n  AlertDialogContextProvider,\n  type AlertDialogVariants,\n} from './use-alert-dialog-context';\n\nexport type AlertDialogRootProps<Payload = unknown> = MergeOverride<\n  BaseAlertDialog.Root.Props<Payload>,\n  AlertDialogVariants\n>;\n\nexport type AlertDialogRootState = BaseAlertDialog.Root.State;\n\nexport type AlertDialogRootActions = BaseAlertDialog.Root.Actions;\n\nexport type AlertDialogRootChangeEventDetails =\n  BaseAlertDialog.Root.ChangeEventDetails;\n\nexport type AlertDialogRootChangeEventReason =\n  BaseAlertDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<AlertDialogVariants>();\n\n/**\n * Estado do alert dialog. Não renderiza elemento.\n *\n * Pede uma resposta antes de seguir: é sempre modal, e o clique fora não fecha. Fecha pelo\n * `Close` e pelo `Esc`. Para um formulário ou um conteúdo que se pode dispensar, use o `Dialog`.\n *\n * @example\n * ```tsx\n * <AlertDialog.Root>\n *   <AlertDialog.Trigger render={<Button />}>Excluir pedido</AlertDialog.Trigger>\n *   <AlertDialog.Portal>\n *     <AlertDialog.Backdrop />\n *     <AlertDialog.Viewport>\n *       <AlertDialog.Popup>\n *         <AlertDialog.Header>\n *           <AlertDialog.Title>Excluir o pedido 4821?</AlertDialog.Title>\n *           <AlertDialog.Description>Os itens voltam para o estoque.</AlertDialog.Description>\n *         </AlertDialog.Header>\n *         <AlertDialog.Footer>\n *           <AlertDialog.Close render={<Button variant=\"outline\" />}>Cancelar</AlertDialog.Close>\n *           <Button colorScheme=\"red\">Excluir</Button>\n *         </AlertDialog.Footer>\n *       </AlertDialog.Popup>\n *     </AlertDialog.Viewport>\n *   </AlertDialog.Portal>\n * </AlertDialog.Root>\n * ```\n */\nexport const AlertDialogRoot = <Payload extends AnyType = unknown>(\n  props: AlertDialogRootProps<Payload>,\n) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  return (\n    <AlertDialogContextProvider value={variantProps}>\n      <BaseAlertDialog.Root {...elementProps} />\n    </AlertDialogContextProvider>\n  );\n};\n\nAlertDialogRoot.displayName = 'AlertDialog.Root';\n"],"mappings":";;;;;AA0BA,MAAM,oBAAoB,iBAAsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BhE,MAAa,mBACX,UACG;CACH,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,OACE,oBAAC,4BAAD;EAA4B,OAAO;EACjC,UAAA,oBAACA,YAAgB,MAAjB,EAAsB,GAAI,aAAe,CAAA;CACf,CAAA;AAEhC;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"alert-dialog-root.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-root.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport {\n  type AnyType,\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport {\n  AlertDialogContextProvider,\n  type AlertDialogVariants,\n} from './use-alert-dialog-context';\n\nexport type AlertDialogRootProps<Payload = unknown> = MergeOverride<\n  BaseAlertDialog.Root.Props<Payload>,\n  AlertDialogVariants\n>;\n\nexport type AlertDialogRootState = BaseAlertDialog.Root.State;\n\nexport type AlertDialogRootActions = BaseAlertDialog.Root.Actions;\n\nexport type AlertDialogRootChangeEventDetails =\n  BaseAlertDialog.Root.ChangeEventDetails;\n\nexport type AlertDialogRootChangeEventReason =\n  BaseAlertDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<AlertDialogVariants>();\n\n/**\n * Estado do alert dialog. Não renderiza elemento.\n *\n * Pede uma resposta antes de seguir: é sempre modal, e o clique fora não fecha. Fecha pelo\n * `Close` e pelo `Esc`. Para um formulário ou um conteúdo que se pode dispensar, use o `Dialog`.\n *\n * @example\n * ```tsx\n * <AlertDialog.Root>\n *   <AlertDialog.Trigger render={<Button />}>Excluir pedido</AlertDialog.Trigger>\n *   <AlertDialog.Portal>\n *     <AlertDialog.Backdrop />\n *     <AlertDialog.Viewport>\n *       <AlertDialog.Popup>\n *         <AlertDialog.Header>\n *           <AlertDialog.Title>Excluir o pedido 4821?</AlertDialog.Title>\n *           <AlertDialog.Description>Os itens voltam para o estoque.</AlertDialog.Description>\n *         </AlertDialog.Header>\n *         <AlertDialog.Footer>\n *           <AlertDialog.Close render={<Button variant=\"outline\" />}>Cancelar</AlertDialog.Close>\n *           <Button colorScheme=\"red\">Excluir</Button>\n *         </AlertDialog.Footer>\n *       </AlertDialog.Popup>\n *     </AlertDialog.Viewport>\n *   </AlertDialog.Portal>\n * </AlertDialog.Root>\n * ```\n */\nexport const AlertDialogRoot = <Payload extends AnyType = unknown>(\n  props: AlertDialogRootProps<Payload>,\n) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  return (\n    <AlertDialogContextProvider value={variantProps}>\n      <BaseAlertDialog.Root {...elementProps} />\n    </AlertDialogContextProvider>\n  );\n};\n\nAlertDialogRoot.displayName = 'AlertDialog.Root';\n"],"mappings":";;;;;AA0BA,MAAM,oBAAoB,iBAAsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BhE,MAAa,mBACX,UACG;CACH,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,OACE,oBAAC,4BAAD;EAA4B,OAAO;EACjC,UAAA,oBAACA,YAAgB,MAAjB,EAAsB,GAAI,aAAe,CAAA;CACf,CAAA;AAEhC;AAEA,gBAAgB,cAAc"}

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

@@ -0,0 +1,20 @@
+import React from "react";
+//#region src/components/overlays/alert-dialog/alert-dialog-store.d.ts
+/** Um alerta aberto por `AlertDialog.alert` ou `AlertDialog.confirm`, à espera do `Outlet`. */
+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;
+  /** Resolve a promise como dispensada. Não faz nada se ela já resolveu. */
+  readonly dismiss: () => void;
+};
+export declare const alertDialogStore: {
+  subscribe: (listener: () => void) => () => void;
+  getSnapshot: () => readonly AlertDialogEntry[];
+  createId: () => number;
+  add: (entry: AlertDialogEntry) => void;
+  remove: (id: number) => void;
+  registerOutlet: () => () => void;
+};
+//#endregion
+//# sourceMappingURL=alert-dialog-store.d.ts.map

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

@@ -0,0 +1,75 @@
+//#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.
+* Cada mudança troca o array, para o `useSyncExternalStore` renderizar de novo.
+*/
+const createAlertDialogStore = () => {
+	let entries = [];
+	let outletCount = 0;
+	let nextId = 0;
+	const listeners = /* @__PURE__ */ new Set();
+	const emit = () => {
+		for (const listener of listeners) listener();
+	};
+	const subscribe = (listener) => {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	};
+	const getSnapshot = () => entries;
+	const createId = () => {
+		nextId += 1;
+		return nextId;
+	};
+	const add = (entry) => {
+		entries = [...entries, entry];
+		emit();
+		/**
+		* Abrir um alerta e montar o `Outlet` podem cair no mesmo commit, e o `Outlet` só se registra
+		* no efeito. Conferir depois de um microtask evita avisar num app montado certo. O aviso vale
+		* 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.");
+		});
+	};
+	const remove = (id) => {
+		entries = entries.filter((entry) => entry.id !== id);
+		emit();
+	};
+	/**
+	* Registra um `Outlet` montado e devolve o cleanup. Quando o último sai, os alertas pendentes
+	* resolvem como dispensados: sem isso, a promise de quem abriu nunca resolveria. A conferência
+	* espera um microtask porque o StrictMode desmonta e remonta o efeito no mesmo commit, e
+	* dispensar na hora fecharia todo alerta assim que abrisse.
+	*/
+	const registerOutlet = () => {
+		outletCount += 1;
+		if (outletCount > 1) console.error("AlertDialog: mais de um <AlertDialog.Outlet /> está montado, e cada alerta vai aparecer em todos. Monte um só, perto da raiz do app.");
+		return () => {
+			outletCount -= 1;
+			queueMicrotask(() => {
+				if (outletCount > 0 || entries.length === 0) return;
+				const dismissed = entries;
+				entries = [];
+				emit();
+				for (const entry of dismissed) entry.dismiss();
+			});
+		};
+	};
+	return {
+		subscribe,
+		getSnapshot,
+		createId,
+		add,
+		remove,
+		registerOutlet
+	};
+};
+const alertDialogStore = createAlertDialogStore();
+//#endregion
+export { alertDialogStore };
+
+//# sourceMappingURL=alert-dialog-store.js.map

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

@@ -0,0 +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"}

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-trigger.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-trigger.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport type { AnyType } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogTriggerProps<Payload = unknown> =\n  BaseAlertDialog.Trigger.Props<Payload>;\n\nexport type AlertDialogTriggerState = BaseAlertDialog.Trigger.State;\n\n/**\n * Elemento que abre o alert dialog. Sem estilo próprio; passe um botão da lib em `render`.\n */\nexport const AlertDialogTrigger = <Payload extends AnyType = unknown>(\n  props: AlertDialogTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-component=\"AlertDialog.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger';\n"],"mappings":";;;;;;;AAYA,MAAa,sBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,SAAjB;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"alert-dialog-trigger.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-trigger.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport type { AnyType } from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogTriggerProps<Payload = unknown> =\n  BaseAlertDialog.Trigger.Props<Payload>;\n\nexport type AlertDialogTriggerState = BaseAlertDialog.Trigger.State;\n\n/**\n * Elemento que abre o alert dialog. Sem estilo próprio; passe um botão da lib em `render`.\n */\nexport const AlertDialogTrigger = <Payload extends AnyType = unknown>(\n  props: AlertDialogTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-component=\"AlertDialog.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger';\n"],"mappings":";;;;;;;AAYA,MAAa,sBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,SAAjB;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc"}

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

@@ -4,17 +4,19 @@ import { AlertDialogClose, AlertDialogCloseProps, AlertDialogCloseState } from "
 import { AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogDescriptionState } from "./alert-dialog-description.js";
 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 { AlertDialogOutlet } from "./alert-dialog-outlet.js";
 import { AlertDialogPopup, AlertDialogPopupProps, AlertDialogPopupState } from "./alert-dialog-popup.js";
 import { AlertDialogPortal, AlertDialogPortalProps, AlertDialogPortalState } from "./alert-dialog-portal.js";
-import { AlertDialogVariants } from "./use-alert-dialog-context.js";
 import { AlertDialogRoot, AlertDialogRootActions, AlertDialogRootChangeEventDetails, AlertDialogRootChangeEventReason, AlertDialogRootProps, AlertDialogRootState } from "./alert-dialog-root.js";
 import { AlertDialogTitle, AlertDialogTitleProps, AlertDialogTitleState } from "./alert-dialog-title.js";
 import { AlertDialogTrigger, AlertDialogTriggerProps, AlertDialogTriggerState } from "./alert-dialog-trigger.js";
 import { AlertDialogViewport, AlertDialogViewportProps, AlertDialogViewportState } from "./alert-dialog-viewport.js";
 import { AlertDialogHandle, createAlertDialogHandle } from "./create-handle.js";
 declare namespace index_parts_d_exports {
-  export { AlertDialogBackdrop as Backdrop, AlertDialogBackdropProps as BackdropProps, AlertDialogBackdropState as BackdropState, AlertDialogBody as Body, AlertDialogBodyProps as BodyProps, AlertDialogClose as Close, AlertDialogCloseProps as CloseProps, AlertDialogCloseState as CloseState, AlertDialogDescription as Description, AlertDialogDescriptionProps as DescriptionProps, AlertDialogDescriptionState as DescriptionState, AlertDialogFooter as Footer, AlertDialogFooterProps as FooterProps, AlertDialogHandle as Handle, AlertDialogHeader as Header, AlertDialogHeaderProps as HeaderProps, 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, createAlertDialogHandle as createHandle };
+  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 };
 }
 //#endregion
-export { 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, 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, 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, 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, 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 };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -9,8 +9,10 @@ import { AlertDialogPopup } from "./alert-dialog-popup.js";
 import { AlertDialogPortal } from "./alert-dialog-portal.js";
 import { AlertDialogRoot } from "./alert-dialog-root.js";
 import { AlertDialogTitle } from "./alert-dialog-title.js";
-import { AlertDialogTrigger } from "./alert-dialog-trigger.js";
 import { AlertDialogViewport } from "./alert-dialog-viewport.js";
+import { alertDialogAlert, alertDialogConfirm } from "./alert-dialog-imperative.js";
+import { AlertDialogOutlet } from "./alert-dialog-outlet.js";
+import { AlertDialogTrigger } from "./alert-dialog-trigger.js";
 import { createAlertDialogHandle } from "./create-handle.js";
 //#region src/components/overlays/alert-dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
@@ -20,15 +22,18 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Description: () => AlertDialogDescription,
 	Footer: () => AlertDialogFooter,
 	Header: () => AlertDialogHeader,
+	Outlet: () => AlertDialogOutlet,
 	Popup: () => AlertDialogPopup,
 	Portal: () => AlertDialogPortal,
 	Root: () => AlertDialogRoot,
 	Title: () => AlertDialogTitle,
 	Trigger: () => AlertDialogTrigger,
 	Viewport: () => AlertDialogViewport,
+	alert: () => alertDialogAlert,
+	confirm: () => alertDialogConfirm,
 	createHandle: () => createAlertDialogHandle
 });
 //#endregion
-export { AlertDialogBackdrop as Backdrop, AlertDialogBody as Body, AlertDialogClose as Close, AlertDialogDescription as Description, AlertDialogFooter as Footer, AlertDialogHeader as Header, AlertDialogPopup as Popup, AlertDialogPortal as Portal, AlertDialogRoot as Root, AlertDialogTitle as Title, AlertDialogTrigger as Trigger, AlertDialogViewport as Viewport, 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, 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 { 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  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 { 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":""}

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

@@ -6,8 +6,8 @@ export type DialogBodyProps = useRender.ComponentProps<'div'>;
  * rola, e `Header` e `Footer` continuam visíveis.
  *
  * O padding de uma área que rola rola junto com o conteúdo. Por isso o `Body` tem só 8px em cima
- * e embaixo, e o resto do espaço entre as partes fica no `Header` (16px embaixo) e no `Footer`
- * (16px em cima), que não rolam: parado, o espaço é de 24px; rolando, o conteúdo some 16px antes
+ * e embaixo, e o resto do espaço entre as partes fica no `Header` (8px embaixo) e no `Footer`
+ * (8px em cima), que não rolam: parado, o espaço é de 16px; rolando, o conteúdo some 8px antes
  * do título e dos botões. Sem `Header` antes ou sem `Footer` depois, o `Body` fecha o respiro do
  * dialog daquele lado.
  *

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

@@ -6,8 +6,8 @@ import { mergeProps, useRender } from "@base-ui/react";
 * rola, e `Header` e `Footer` continuam visíveis.
 *
 * O padding de uma área que rola rola junto com o conteúdo. Por isso o `Body` tem só 8px em cima
-* e embaixo, e o resto do espaço entre as partes fica no `Header` (16px embaixo) e no `Footer`
-* (16px em cima), que não rolam: parado, o espaço é de 24px; rolando, o conteúdo some 16px antes
+* e embaixo, e o resto do espaço entre as partes fica no `Header` (8px embaixo) e no `Footer`
+* (8px em cima), que não rolam: parado, o espaço é de 16px; rolando, o conteúdo some 8px antes
 * do título e dos botões. Sem `Header` antes ou sem `Footer` depois, o `Body` fecha o respiro do
 * dialog daquele lado.
 *

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` (16px embaixo) e no `Footer`\n * (16px em cima), que não rolam: parado, o espaço é de 24px; rolando, o conteúdo some 16px 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        // 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"}

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

@@ -5,8 +5,7 @@ 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`). A diferença: tamanho e entrelinha
- * fixos no `sm` da escala (ver `dialogPopupVariants`).
+ * Cópia de `CardDescription` (tabela no README de `display`), 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

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

@@ -5,8 +5,7 @@ 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`). A diferença: tamanho e entrelinha
-* fixos no `sm` da escala (ver `dialogPopupVariants`).
+* Cópia de `CardDescription` (tabela no README de `display`), 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

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-description.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-description.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DialogDescriptionProps = BaseDialog.Description.Props;\n\nexport type DialogDescriptionState = BaseDialog.Description.State;\n\n/**\n * Texto de apoio do dialog, abaixo do título, ligado ao popup por `aria-describedby`.\n *\n * Cópia de `CardDescription` (tabela no README de `display`). A diferença: tamanho e entrelinha\n * fixos no `sm` da escala (ver `dialogPopupVariants`).\n *\n * Origem do `AlertDialog.Description` e do `Drawer.Description`, 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 DialogDescription = (props: DialogDescriptionProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDialog.Description\n      data-component=\"Dialog.Description\"\n      className={mergeStateClassNames(\n        ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDialogDescription.displayName = 'Dialog.Description';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,aAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"dialog-description.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-description.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DialogDescriptionProps = BaseDialog.Description.Props;\n\nexport type DialogDescriptionState = BaseDialog.Description.State;\n\n/**\n * Texto de apoio do dialog, abaixo do título, ligado ao popup por `aria-describedby`.\n *\n * Cópia de `CardDescription` (tabela no README de `display`), com as mesmas classes.\n *\n * Origem do `AlertDialog.Description` e do `Drawer.Description`, 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 DialogDescription = (props: DialogDescriptionProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDialog.Description\n      data-component=\"Dialog.Description\"\n      className={mergeStateClassNames(\n        ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDialogDescription.displayName = 'Dialog.Description';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,aAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

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

@@ -5,7 +5,7 @@ export type DialogFooterProps = useRender.ComponentProps<'div'>;
  * Linha de ações na base do dialog, alinhadas à direita.
  *
  * Cópia de `CardFooter` (tabela no README de `display`). As diferenças: lê `--dialog-padding`,
- * alinha as ações à direita (`justify-end`) e declara 16px em cima, que não rolam com o `Body`
+ * alinha as ações à direita (`justify-end`) e declara 8px em cima, que não rolam com o `Body`
  * (ver `DialogBody`).
  *
  * Origem do `AlertDialog.Footer` e do `Drawer.Footer`, que copiam estas classes

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

@@ -5,7 +5,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 * Linha de ações na base do dialog, alinhadas à direita.
 *
 * Cópia de `CardFooter` (tabela no README de `display`). As diferenças: lê `--dialog-padding`,
-* alinha as ações à direita (`justify-end`) e declara 16px em cima, que não rolam com o `Body`
+* alinha as ações à direita (`justify-end`) e declara 8px em cima, que não rolam com o `Body`
 * (ver `DialogBody`).
 *
 * Origem do `AlertDialog.Footer` e do `Drawer.Footer`, que copiam estas classes
@@ -22,10 +22,9 @@ const DialogFooter = (props) => {
 			"justify-end",
 			"gap-2",
 			"px-(--dialog-padding)",
-			"pt-4",
+			"pt-2",
 			"pb-(--dialog-padding)",
-			"first:pt-(--dialog-padding)",
-			"[[data-component='Dialog.Header']+&]:pt-2"
+			"first:pt-(--dialog-padding)"
 		], className)
 	};
 	return useRender({

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-footer.js","names":[],"sources":["../../../../src/components/overlays/dialog/dialog-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DialogFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do dialog, alinhadas à direita.\n *\n * Cópia de `CardFooter` (tabela no README de `display`). As diferenças: lê `--dialog-padding`,\n * alinha as ações à direita (`justify-end`) e declara 16px em cima, que não rolam com o `Body`\n * (ver `DialogBody`).\n *\n * Origem do `AlertDialog.Footer` e do `Drawer.Footer`, 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 DialogFooter = (props: DialogFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Dialog.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--dialog-padding)',\n        'pt-4',\n        'pb-(--dialog-padding)',\n        // Abrindo o dialog, fecha o respiro de cima; logo depois do `Header`, completa os 16px\n        // dele até os 24px, sem somar os dois.\n        'first:pt-(--dialog-padding)',\n        \"[[data-component='Dialog.Header']+&]:pt-2\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDialogFooter.displayName = 'Dialog.Footer';\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAGA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}
+{"version":3,"file":"dialog-footer.js","names":[],"sources":["../../../../src/components/overlays/dialog/dialog-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DialogFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do dialog, alinhadas à direita.\n *\n * Cópia de `CardFooter` (tabela no README de `display`). As diferenças: lê `--dialog-padding`,\n * alinha as ações à direita (`justify-end`) e declara 8px em cima, que não rolam com o `Body`\n * (ver `DialogBody`).\n *\n * Origem do `AlertDialog.Footer` e do `Drawer.Footer`, 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 DialogFooter = (props: DialogFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Dialog.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--dialog-padding)',\n        'pt-2',\n        'pb-(--dialog-padding)',\n        // Abrindo o dialog, fecha o respiro de cima.\n        'first:pt-(--dialog-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDialogFooter.displayName = 'Dialog.Footer';\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -4,10 +4,9 @@ export type DialogHeaderProps = useRender.ComponentProps<'div'>;
 /**
  * Topo do dialog, onde ficam título e descrição.
  *
- * Cópia de `CardHeader`, a origem do cabeçalho com a escala de título e descrição (tabela no
- * README de `display`). As diferenças: o espaço entre título e descrição fica fixo no `sm` da
- * escala, o respiro vem de `--dialog-padding`, e o `Header` declara 16px embaixo, que não rolam
- * com o `Body` (ver `DialogBody`).
+ * Cópia de `CardHeader` (tabela no README de `display`). As diferenças: o respiro vem de
+ * `--dialog-padding`, e o `Header` declara 8px embaixo, que não rolam com o `Body` (ver
+ * `DialogBody`).
  *
  * Origem do `AlertDialog.Header` e do `Drawer.Header`, que copiam estas classes
  * (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na

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

@@ -4,10 +4,9 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Topo do dialog, onde ficam título e descrição.
 *
-* Cópia de `CardHeader`, a origem do cabeçalho com a escala de título e descrição (tabela no
-* README de `display`). As diferenças: o espaço entre título e descrição fica fixo no `sm` da
-* escala, o respiro vem de `--dialog-padding`, e o `Header` declara 16px embaixo, que não rolam
-* com o `Body` (ver `DialogBody`).
+* Cópia de `CardHeader` (tabela no README de `display`). As diferenças: o respiro vem de
+* `--dialog-padding`, e o `Header` declara 8px embaixo, que não rolam com o `Body` (ver
+* `DialogBody`).
 *
 * Origem do `AlertDialog.Header` e do `Drawer.Header`, que copiam estas classes
 * (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na
@@ -23,7 +22,7 @@ const DialogHeader = (props) => {
 			"gap-0.5",
 			"px-(--dialog-padding)",
 			"pt-(--dialog-padding)",
-			"pb-4",
+			"pb-2",
 			"[&:not(:has(~[data-component='Dialog.Body'],~[data-component='Dialog.Footer']))]:pb-(--dialog-padding)"
 		], className)
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-header.js","names":[],"sources":["../../../../src/components/overlays/dialog/dialog-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DialogHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do dialog, onde ficam título e descrição.\n *\n * Cópia de `CardHeader`, a origem do cabeçalho com a escala de título e descrição (tabela no\n * README de `display`). As diferenças: o espaço entre título e descrição fica fixo no `sm` da\n * escala, o respiro vem de `--dialog-padding`, e o `Header` declara 16px embaixo, que não rolam\n * com o `Body` (ver `DialogBody`).\n *\n * Origem do `AlertDialog.Header` e do `Drawer.Header`, 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 DialogHeader = (props: DialogHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Dialog.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--dialog-padding)',\n        'pt-(--dialog-padding)',\n        'pb-4',\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='Dialog.Body'],~[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\nDialogHeader.displayName = 'Dialog.Header';\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAGA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}
+{"version":3,"file":"dialog-header.js","names":[],"sources":["../../../../src/components/overlays/dialog/dialog-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DialogHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do dialog, onde ficam título e descrição.\n *\n * Cópia de `CardHeader` (tabela no README de `display`). As diferenças: o respiro vem de\n * `--dialog-padding`, e o `Header` declara 8px embaixo, que não rolam com o `Body` (ver\n * `DialogBody`).\n *\n * Origem do `AlertDialog.Header` e do `Drawer.Header`, 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 DialogHeader = (props: DialogHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Dialog.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--dialog-padding)',\n        'pt-(--dialog-padding)',\n        'pb-2',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do dialog embaixo. Por irmão, e não por\n        // `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='Dialog.Body'],~[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\nDialogHeader.displayName = 'Dialog.Header';\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAGA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -4,12 +4,11 @@
  * 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-lg` e `shadow-lg`;
+ * - `rounded-md` e `shadow-lg`;
  * - o aninhamento, abaixo.
  *
- * O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 24px, como o
- * título e a descrição, que ficam no `sm` da escala: o `size` do Dialog é a largura, e um Dialog
- * largo não ganha título maior.
+ * O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 16px, como o
+ * título e a descrição: o `size` do Dialog é a largura, e um Dialog largo não ganha título maior.
  *
  * Com outro Dialog aberto sobre ele, o Base UI marca o popup com `data-nested-dialog-open` e
  * escreve em `--nested-dialogs` quantos estão abertos à frente. O popup de trás encolhe, sobe 24px

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

@@ -6,12 +6,11 @@ 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-lg` e `shadow-lg`;
+* - `rounded-md` e `shadow-lg`;
 * - o aninhamento, abaixo.
 *
-* O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 24px, como o
-* título e a descrição, que ficam no `sm` da escala: o `size` do Dialog é a largura, e um Dialog
-* largo não ganha título maior.
+* O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 16px, como o
+* título e a descrição: o `size` do Dialog é a largura, e um Dialog largo não ganha título maior.
 *
 * Com outro Dialog aberto sobre ele, o Base UI marca o popup com `data-nested-dialog-open` e
 * escreve em `--nested-dialogs` quantos estão abertos à frente. O popup de trás encolhe, sobe 24px
@@ -24,13 +23,13 @@ import { cva } from "class-variance-authority";
 * mesma rodada.
 */
 const dialogPopupVariants = cva([
-	"[--dialog-padding:--spacing(6)]",
+	"[--dialog-padding:--spacing(4)]",
 	"relative",
 	"flex",
 	"flex-col",
 	"w-full",
 	"max-h-full",
-	"rounded-lg",
+	"rounded-md",
 	"corner-squircle",
 	"outline-1",
 	"outline-gray-6",

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-lg` e `shadow-lg`;\n * - o aninhamento, abaixo.\n *\n * O respiro de `Header`, `Body` e `Footer` fica em `--dialog-padding`, fixo em 24px, como o\n * título e a descrição, que ficam no `sm` da escala: o `size` do Dialog é a largura, e um Dialog\n * 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(6)]',\n\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'w-full',\n    'max-h-full',\n\n    'rounded-lg',\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,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-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"}

package/dist/components/overlays/dialog/dialog-root.d.ts

@@ -1,5 +1,5 @@
 import { DialogVariants } from "./use-dialog-context.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/overlays/dialog/dialog-root.d.ts
 export type DialogRootProps<Payload = unknown> = MergeOverride<Dialog.Root.Props<Payload>, DialogVariants>;

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

@@ -1,5 +1,5 @@
 import { DialogContextProvider } from "./use-dialog-context.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/overlays/dialog/dialog-root.tsx