@lucasbernardosn/react-ui 0.2.0 → 0.3.0

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

@@ -16,8 +16,8 @@ const alertDialogPopupVariants = cva([
 	"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(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: 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-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

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport {\n  type AnyType,\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/utils';\nimport {\n  DialogContextProvider,\n  type DialogVariants,\n} from './use-dialog-context';\n\nexport type DialogRootProps<Payload = unknown> = MergeOverride<\n  BaseDialog.Root.Props<Payload>,\n  DialogVariants\n>;\n\nexport type DialogRootState = BaseDialog.Root.State;\n\nexport type DialogRootActions = BaseDialog.Root.Actions;\n\nexport type DialogRootChangeEventDetails = BaseDialog.Root.ChangeEventDetails;\n\nexport type DialogRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<DialogVariants>();\n\n/**\n * Estado do dialog. Não renderiza elemento.\n *\n * Modal por padrão: o foco fica preso no popup, a rolagem da página trava, e o clique fora, no\n * backdrop ou no viewport, fecha o dialog.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={<Button />}>Editar cliente</Dialog.Trigger>\n *   <Dialog.Portal>\n *     <Dialog.Backdrop />\n *     <Dialog.Viewport>\n *       <Dialog.Popup>\n *         <Dialog.Header>\n *           <Dialog.Title>Editar cliente</Dialog.Title>\n *           <Dialog.Description>Os dados valem para os próximos pedidos.</Dialog.Description>\n *         </Dialog.Header>\n *         <Dialog.Body>…</Dialog.Body>\n *         <Dialog.Footer>\n *           <Dialog.Close render={<Button variant=\"outline\" />}>Cancelar</Dialog.Close>\n *           <Button>Salvar</Button>\n *         </Dialog.Footer>\n *       </Dialog.Popup>\n *     </Dialog.Viewport>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nexport const DialogRoot = <Payload extends AnyType = unknown>(\n  props: DialogRootProps<Payload>,\n) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  return (\n    <DialogContextProvider value={variantProps}>\n      <BaseDialog.Root {...elementProps} />\n    </DialogContextProvider>\n  );\n};\n\nDialogRoot.displayName = 'Dialog.Root';\n"],"mappings":";;;;;AAwBA,MAAM,oBAAoB,iBAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+B3D,MAAa,cACX,UACG;CACH,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAACA,OAAW,MAAZ,EAAiB,GAAI,aAAe,CAAA;CACf,CAAA;AAE3B;AAEA,WAAW,cAAc"}
+{"version":3,"file":"dialog-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport {\n  type AnyType,\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport {\n  DialogContextProvider,\n  type DialogVariants,\n} from './use-dialog-context';\n\nexport type DialogRootProps<Payload = unknown> = MergeOverride<\n  BaseDialog.Root.Props<Payload>,\n  DialogVariants\n>;\n\nexport type DialogRootState = BaseDialog.Root.State;\n\nexport type DialogRootActions = BaseDialog.Root.Actions;\n\nexport type DialogRootChangeEventDetails = BaseDialog.Root.ChangeEventDetails;\n\nexport type DialogRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<DialogVariants>();\n\n/**\n * Estado do dialog. Não renderiza elemento.\n *\n * Modal por padrão: o foco fica preso no popup, a rolagem da página trava, e o clique fora, no\n * backdrop ou no viewport, fecha o dialog.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={<Button />}>Editar cliente</Dialog.Trigger>\n *   <Dialog.Portal>\n *     <Dialog.Backdrop />\n *     <Dialog.Viewport>\n *       <Dialog.Popup>\n *         <Dialog.Header>\n *           <Dialog.Title>Editar cliente</Dialog.Title>\n *           <Dialog.Description>Os dados valem para os próximos pedidos.</Dialog.Description>\n *         </Dialog.Header>\n *         <Dialog.Body>…</Dialog.Body>\n *         <Dialog.Footer>\n *           <Dialog.Close render={<Button variant=\"outline\" />}>Cancelar</Dialog.Close>\n *           <Button>Salvar</Button>\n *         </Dialog.Footer>\n *       </Dialog.Popup>\n *     </Dialog.Viewport>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nexport const DialogRoot = <Payload extends AnyType = unknown>(\n  props: DialogRootProps<Payload>,\n) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  return (\n    <DialogContextProvider value={variantProps}>\n      <BaseDialog.Root {...elementProps} />\n    </DialogContextProvider>\n  );\n};\n\nDialogRoot.displayName = 'Dialog.Root';\n"],"mappings":";;;;;AAwBA,MAAM,oBAAoB,iBAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+B3D,MAAa,cACX,UACG;CACH,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAACA,OAAW,MAAZ,EAAiB,GAAI,aAAe,CAAA;CACf,CAAA;AAE3B;AAEA,WAAW,cAAc"}

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

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

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

@@ -24,10 +24,9 @@ const DrawerBackdrop = (props) => {
 			"bg-black/40",
 			"opacity-[calc(1-var(--drawer-swipe-progress,0))]",
 			"not-motion-reduced:transition-opacity",
+			"not-motion-reduced:duration-450",
 			"not-motion-reduced:ease-enter-emphasized",
-			"not-motion-reduced:duration-400",
-			"not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*300ms)]",
-			"not-motion-reduced:data-ending-style:ease-exit-emphasized",
+			"not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]",
 			"data-swiping:duration-0",
 			"data-ending-style:opacity-0",
 			"data-starting-style:opacity-0"

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-backdrop.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-backdrop.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerBackdropProps = BaseDrawer.Backdrop.Props;\n\nexport type DrawerBackdropState = BaseDrawer.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página. Num drawer aninhado, o Base UI não a\n * renderiza: quem escurece é o popup de trás.\n *\n * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups (tabela no README de `overlays`).\n * As diferenças: clareia enquanto o drawer é arrastado para fechar (`--drawer-swipe-progress`,\n * de 0 a 1), sem transição durante o arrasto, e usa as durações do `Drawer.Popup`. Com\n * `snapPoints`, fica transparente no ponto mais baixo e escurece conforme o drawer sobe: parado\n * embaixo, a página continua à vista.\n */\nexport const DrawerBackdrop = (props: DrawerBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.Backdrop\n      data-component=\"Drawer.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n          'opacity-[calc(1-var(--drawer-swipe-progress,0))]',\n\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:ease-enter-emphasized',\n          // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n          'not-motion-reduced:duration-400',\n          'not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*300ms)]',\n          'not-motion-reduced:data-ending-style:ease-exit-emphasized',\n          'data-swiping:duration-0',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerBackdrop.displayName = 'Drawer.Backdrop';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,UAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"drawer-backdrop.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-backdrop.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerBackdropProps = BaseDrawer.Backdrop.Props;\n\nexport type DrawerBackdropState = BaseDrawer.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página. Num drawer aninhado, o Base UI não a\n * renderiza: quem escurece é o popup de trás.\n *\n * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups (tabela no README de `overlays`).\n * As diferenças: clareia enquanto o drawer é arrastado para fechar (`--drawer-swipe-progress`,\n * de 0 a 1), sem transição durante o arrasto, e usa as durações do `Drawer.Popup`. Com\n * `snapPoints`, fica transparente no ponto mais baixo e escurece conforme o drawer sobe: parado\n * embaixo, a página continua à vista.\n */\nexport const DrawerBackdrop = (props: DrawerBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.Backdrop\n      data-component=\"Drawer.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n          'opacity-[calc(1-var(--drawer-swipe-progress,0))]',\n\n          'not-motion-reduced:transition-opacity',\n          // Os tempos do `Popup` em cada sentido, para os dois sumirem juntos (ver\n          // `drawerPopupVariants`).\n          'not-motion-reduced:duration-450',\n          'not-motion-reduced:ease-enter-emphasized',\n          'not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]',\n          'data-swiping:duration-0',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerBackdrop.displayName = 'Drawer.Backdrop';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,UAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GAGA;GACA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/drawer/drawer-indent-background.d.ts

@@ -0,0 +1,17 @@
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/overlays/drawer/drawer-indent-background.d.ts
+export type DrawerIndentBackgroundProps = Drawer.IndentBackground.Props;
+export type DrawerIndentBackgroundState = Drawer.IndentBackground.State;
+/**
+ * Fundo que aparece atrás da página recuada, nos cantos que o `Drawer.Indent` arredonda e na faixa
+ * que abre em cima. Vai antes do `Indent`, preenchendo o mesmo contêiner (ver `Drawer.Indent`).
+ *
+ * Preto nos dois temas, como o sheet do iOS: no escuro, o contraste com a página (`gray-1`) é
+ * pequeno e desenha os cantos sem chamar atenção.
+ */
+export declare const DrawerIndentBackground: {
+  (props: DrawerIndentBackgroundProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=drawer-indent-background.d.ts.map

package/dist/components/overlays/drawer/drawer-indent-background.js

@@ -0,0 +1,28 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/overlays/drawer/drawer-indent-background.tsx
+/**
+* Fundo que aparece atrás da página recuada, nos cantos que o `Drawer.Indent` arredonda e na faixa
+* que abre em cima. Vai antes do `Indent`, preenchendo o mesmo contêiner (ver `Drawer.Indent`).
+*
+* Preto nos dois temas, como o sheet do iOS: no escuro, o contraste com a página (`gray-1`) é
+* pequeno e desenha os cantos sem chamar atenção.
+*/
+const DrawerIndentBackground = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Drawer.IndentBackground, {
+		"data-component": "Drawer.IndentBackground",
+		className: mergeStateClassNames([
+			"absolute",
+			"inset-0",
+			"bg-black"
+		], className),
+		...rest
+	});
+};
+DrawerIndentBackground.displayName = "Drawer.IndentBackground";
+//#endregion
+export { DrawerIndentBackground };
+
+//# sourceMappingURL=drawer-indent-background.js.map

package/dist/components/overlays/drawer/drawer-indent-background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-indent-background.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-indent-background.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerIndentBackgroundProps = BaseDrawer.IndentBackground.Props;\n\nexport type DrawerIndentBackgroundState = BaseDrawer.IndentBackground.State;\n\n/**\n * Fundo que aparece atrás da página recuada, nos cantos que o `Drawer.Indent` arredonda e na faixa\n * que abre em cima. Vai antes do `Indent`, preenchendo o mesmo contêiner (ver `Drawer.Indent`).\n *\n * Preto nos dois temas, como o sheet do iOS: no escuro, o contraste com a página (`gray-1`) é\n * pequeno e desenha os cantos sem chamar atenção.\n */\nexport const DrawerIndentBackground = (props: DrawerIndentBackgroundProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.IndentBackground\n      data-component=\"Drawer.IndentBackground\"\n      className={mergeStateClassNames(\n        ['absolute', 'inset-0', 'bg-black'],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerIndentBackground.displayName = 'Drawer.IndentBackground';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,kBAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAY;GAAW;EAAU,GAClC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,uBAAuB,cAAc"}

package/dist/components/overlays/drawer/drawer-indent.d.ts

@@ -0,0 +1,31 @@
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/overlays/drawer/drawer-indent.d.ts
+export type DrawerIndentProps = Drawer.Indent.Props;
+export type DrawerIndentState = Drawer.Indent.State;
+/**
+ * Envolve o conteúdo do app e o faz recuar quando um drawer abre: encolhe um pouco, desce 8px e
+ * arredonda os cantos de cima, e volta com o arrasto de fechar (`--drawer-swipe-progress`). Vai
+ * dentro do `Drawer.Provider`, depois do `Drawer.IndentBackground`, num contêiner `relative` com
+ * `overflow-hidden`, que é onde o fundo aparece.
+ *
+ * Atenção: o `transform` do recuo faz do `Indent` o referencial dos elementos `position: fixed`
+ * dentro dele, que passam a se posicionar em relação ao `Indent`, e não à tela.
+ *
+ * Tem o fundo da página (`gray-1`): sem ele, o `IndentBackground` apareceria através do conteúdo.
+ *
+ * @example
+ * ```tsx
+ * <Drawer.Provider>
+ *   <div className="relative overflow-hidden">
+ *     <Drawer.IndentBackground />
+ *     <Drawer.Indent>…o app…</Drawer.Indent>
+ *   </div>
+ * </Drawer.Provider>
+ * ```
+ */
+export declare const DrawerIndent: {
+  (props: DrawerIndentProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=drawer-indent.d.ts.map

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

@@ -0,0 +1,49 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/overlays/drawer/drawer-indent.tsx
+/**
+* Envolve o conteúdo do app e o faz recuar quando um drawer abre: encolhe um pouco, desce 8px e
+* arredonda os cantos de cima, e volta com o arrasto de fechar (`--drawer-swipe-progress`). Vai
+* dentro do `Drawer.Provider`, depois do `Drawer.IndentBackground`, num contêiner `relative` com
+* `overflow-hidden`, que é onde o fundo aparece.
+*
+* Atenção: o `transform` do recuo faz do `Indent` o referencial dos elementos `position: fixed`
+* dentro dele, que passam a se posicionar em relação ao `Indent`, e não à tela.
+*
+* Tem o fundo da página (`gray-1`): sem ele, o `IndentBackground` apareceria através do conteúdo.
+*
+* @example
+* ```tsx
+* <Drawer.Provider>
+*   <div className="relative overflow-hidden">
+*     <Drawer.IndentBackground />
+*     <Drawer.Indent>…o app…</Drawer.Indent>
+*   </div>
+* </Drawer.Provider>
+* ```
+*/
+const DrawerIndent = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Drawer.Indent, {
+		"data-component": "Drawer.Indent",
+		className: mergeStateClassNames([
+			"[--indent-radius:calc(--spacing(4)*(1-var(--drawer-swipe-progress,0)))]",
+			"[--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress,0)*100000),1))]",
+			"relative",
+			"origin-top",
+			"bg-gray-1",
+			"not-motion-reduced:transition-[transform,border-radius]",
+			"not-motion-reduced:ease-enter-emphasized",
+			"not-motion-reduced:duration-[calc(var(--indent-transition)*400ms),calc(var(--indent-transition)*250ms)]",
+			"data-active:[transform:scale(calc(0.98+0.02*var(--drawer-swipe-progress,0)))_translateY(calc(--spacing(2)*(1-var(--drawer-swipe-progress,0))))]",
+			"data-active:rounded-t-(--indent-radius)"
+		], className),
+		...rest
+	});
+};
+DrawerIndent.displayName = "Drawer.Indent";
+//#endregion
+export { DrawerIndent };
+
+//# sourceMappingURL=drawer-indent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-indent.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-indent.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerIndentProps = BaseDrawer.Indent.Props;\n\nexport type DrawerIndentState = BaseDrawer.Indent.State;\n\n/**\n * Envolve o conteúdo do app e o faz recuar quando um drawer abre: encolhe um pouco, desce 8px e\n * arredonda os cantos de cima, e volta com o arrasto de fechar (`--drawer-swipe-progress`). Vai\n * dentro do `Drawer.Provider`, depois do `Drawer.IndentBackground`, num contêiner `relative` com\n * `overflow-hidden`, que é onde o fundo aparece.\n *\n * Atenção: o `transform` do recuo faz do `Indent` o referencial dos elementos `position: fixed`\n * dentro dele, que passam a se posicionar em relação ao `Indent`, e não à tela.\n *\n * Tem o fundo da página (`gray-1`): sem ele, o `IndentBackground` apareceria através do conteúdo.\n *\n * @example\n * ```tsx\n * <Drawer.Provider>\n *   <div className=\"relative overflow-hidden\">\n *     <Drawer.IndentBackground />\n *     <Drawer.Indent>…o app…</Drawer.Indent>\n *   </div>\n * </Drawer.Provider>\n * ```\n */\nexport const DrawerIndent = (props: DrawerIndentProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.Indent\n      data-component=\"Drawer.Indent\"\n      className={mergeStateClassNames(\n        [\n          '[--indent-radius:calc(--spacing(4)*(1-var(--drawer-swipe-progress,0)))]',\n          // Sem arrasto, o progresso é 0 e a transição roda inteira; durante o arrasto o\n          // progresso passa de 0 e a duração cai a 0, para o recuo seguir o dedo.\n          '[--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress,0)*100000),1))]',\n\n          'relative',\n          'origin-top',\n          'bg-gray-1',\n\n          'not-motion-reduced:transition-[transform,border-radius]',\n          'not-motion-reduced:ease-enter-emphasized',\n          'not-motion-reduced:duration-[calc(var(--indent-transition)*400ms),calc(var(--indent-transition)*250ms)]',\n\n          'data-active:[transform:scale(calc(0.98+0.02*var(--drawer-swipe-progress,0)))_translateY(calc(--spacing(2)*(1-var(--drawer-swipe-progress,0))))]',\n          'data-active:rounded-t-(--indent-radius)',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerIndent.displayName = 'Drawer.Indent';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,QAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAGA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

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

@@ -1,32 +1,8 @@
 //#region src/components/overlays/drawer/drawer-popup-variants.d.ts
-/**
- * Cópia de `dialogPopupVariants`, a superfície e o respiro de uma janela modal (tabela no README
- * de `overlays`). As diferenças:
- * - preso à borda do `side`, sem arredondar o lado da borda; nos lados, ocupa a altura da tela e
- *   tem a largura do `size` (em `--drawer-size`); em cima e embaixo, a altura do conteúdo até 85%
- *   da tela;
- * - entra e sai deslizando da borda, em 400ms; a saída dura menos quanto mais forte o gesto
- *   (`--drawer-swipe-strength`), e durante o arrasto não há transição, para o popup seguir o dedo;
- * - o aninhamento, a folga e a alça, abaixo.
- *
- * O deslocamento soma as variáveis que o Base UI escreve: o arrasto (`--drawer-swipe-movement-x`
- * ou `-y`) e, embaixo, o snap point (`--drawer-snap-point-offset`). Embaixo, o `padding-bottom`
- * cresce junto com o deslocamento, para o fim do conteúdo ficar na parte visível do popup.
- *
- * Folga: arrastando para dentro, o popup se afasta da borda. O `::after`, da cor do popup, se
- * estende 3rem além da borda e cobre o vão.
- *
- * Aninhamento: com outro drawer aberto à frente, o de trás recua 24px por nível
- * (`--nested-drawers`) para dentro da tela, encolhe 5% e escurece por `brightness`, já que o
- * `::after` está ocupado pela folga. O encolhimento parte da borda de dentro, para os 24px
- * aparecerem inteiros; o vão que abre na borda da tela fica coberto pela folga.
- *
- * Embaixo, um `::before` desenha a alça no topo, que só indica o gesto: o arrasto vale no popup
- * inteiro.
- */
 export declare const drawerPopupVariants: (props?: ({
-  side?: "bottom" | "right" | "left" | "top" | null | undefined;
+  side?: "bottom" | "top" | "right" | "left" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | null | undefined;
+  snapPoints?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=drawer-popup-variants.d.ts.map