@lucasbernardosn/react-ui 0.1.0 → 0.3.0

package/dist/components/layout/splitter/splitter-resize-trigger.d.ts

@@ -1,4 +1,4 @@
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/splitter-resize-trigger.d.ts

package/dist/components/layout/splitter/splitter-resize-trigger.js

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { useSplitterContext } from "./use-splitter-context.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/splitter-resize-trigger.tsx

package/dist/components/layout/splitter/splitter-resize-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter-resize-trigger.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-resize-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { useSplitterContext } from './use-splitter-context';\n\n/**\n * Props do `Splitter.ResizeTrigger`: o `id` do par de painéis, o `disabled` e\n * as props do elemento renderizado.\n */\nexport type SplitterResizeTriggerProps = MergeOverride<\n  useRender.ComponentProps<'button'>,\n  ZagSplitter.ResizeTriggerProps\n>;\n\nconst splitResizeTriggerProps =\n  createSplitProps<ZagSplitter.ResizeTriggerProps>();\n\n/**\n * Puxador entre dois painéis.\n *\n * O `id` nomeia o par no formato `antes:depois` (ex.: `nav:content`). Arrasto,\n * setas (1% por tecla, 10% com `Shift`), `Home`/`End` e `F6` entre puxadores\n * vêm do Zag. O rótulo acessível padrão é genérico: passe um `aria-label` que\n * diga o que é redimensionado.\n *\n * **Não ocupa espaço no layout.** A linha de 1px é pintada sobre a última\n * coluna do painel anterior, e a área de toque, de 9px, fica centrada nela: 4px\n * de cada lado, por cima dos dois painéis. Com largura própria, os painéis\n * dividiriam o espaço menos a do puxador, e um tamanho pedido em px sairia\n * menor na tela. Uma barra de rolagem encostada na divisa fica sob a área de\n * toque: afaste-a com padding no painel.\n *\n * Em repouso, só o cursor indica o puxador; o tom aparece no arrasto e no foco\n * pelo teclado, e no foco a linha ganha a cor do anel de foco. O hover não\n * muda nada, e ganha tom por classe no uso.\n */\nexport const SplitterResizeTrigger = (props: SplitterResizeTriggerProps) => {\n  const [triggerProps, elementProps] = splitResizeTriggerProps(\n    props,\n    ZagSplitter.resizeTriggerProps,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitterContext();\n\n  const zagProps = splitter.getResizeTriggerProps(triggerProps);\n\n  const baseProps = {\n    'data-component': 'Splitter.ResizeTrigger',\n    // Sem `type`, um `button` dentro de `form` envia o formulário no clique.\n    type: 'button' as const,\n    'aria-label': 'Redimensionar painéis',\n    className: mergeTwClassNames(\n      [\n        'relative',\n        // Por cima dos painéis, inclusive dos filhos posicionados deles: a área\n        // de toque invade os dois lados da divisa.\n        'z-10',\n        'outline-none',\n\n        'data-[orientation=horizontal]:w-0',\n        'data-[orientation=vertical]:h-0',\n\n        // LINHA — 1px sobre a última coluna (ou linha) do painel anterior.\n        'after:absolute',\n        \"after:content-['']\",\n        'after:bg-gray-6',\n\n        'data-[orientation=horizontal]:after:inset-y-0',\n        'data-[orientation=horizontal]:after:-inset-s-px',\n        'data-[orientation=horizontal]:after:w-px',\n\n        'data-[orientation=vertical]:after:inset-x-0',\n        'data-[orientation=vertical]:after:-top-px',\n        'data-[orientation=vertical]:after:h-px',\n\n        // ÁREA DE TOQUE — centrada na linha, não na divisa: a linha está na coluna\n        // antes dela, e 4px + 1px + 4px exigem largura ímpar. Tingida no arrasto e\n        // no foco.\n        'before:absolute',\n        \"before:content-['']\",\n        'before:transition-colors',\n\n        'data-[orientation=horizontal]:before:inset-y-0',\n        'data-[orientation=horizontal]:before:-inset-s-1.25',\n        'data-[orientation=horizontal]:before:w-2.25',\n\n        'data-[orientation=vertical]:before:inset-x-0',\n        'data-[orientation=vertical]:before:-top-1.25',\n        'data-[orientation=vertical]:before:h-2.25',\n\n        // Sem tom no hover: a área de toque cobre a borda dos dois painéis, e\n        // passar o mouse por ali não deve acender nada. O Zag foca o puxador no\n        // clique sem `focus-visible`, então o tom de foco só vem do teclado.\n        'focus-visible:before:bg-gray-6/50',\n        // O tom da área sozinho tem pouco contraste: a linha marca o foco.\n        'focus-visible:after:bg-gray-9',\n        'data-dragging:before:bg-gray-6',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nSplitterResizeTrigger.displayName = 'Splitter.ResizeTrigger';\n"],"mappings":";;;;;;AAeA,MAAM,0BACJ,iBAAiD;;;;;;;;;;;;;;;;;;;;AAqBnD,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,CAAC,cAAc,gBAAgB,wBACnC,OACA,YAAY,kBACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,sBAAsB,YAAY;CAE5D,MAAM,YAAY;EAChB,kBAAkB;EAElB,MAAM;EACN,cAAc;EACd,WAAW,kBACT;GACE;GAGA;GACA;GAEA;GACA;GAGA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,sBAAsB,cAAc"}
+{"version":3,"file":"splitter-resize-trigger.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-resize-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { useSplitterContext } from './use-splitter-context';\n\n/**\n * Props do `Splitter.ResizeTrigger`: o `id` do par de painéis, o `disabled` e\n * as props do elemento renderizado.\n */\nexport type SplitterResizeTriggerProps = MergeOverride<\n  useRender.ComponentProps<'button'>,\n  ZagSplitter.ResizeTriggerProps\n>;\n\nconst splitResizeTriggerProps =\n  createSplitProps<ZagSplitter.ResizeTriggerProps>();\n\n/**\n * Puxador entre dois painéis.\n *\n * O `id` nomeia o par no formato `antes:depois` (ex.: `nav:content`). Arrasto,\n * setas (1% por tecla, 10% com `Shift`), `Home`/`End` e `F6` entre puxadores\n * vêm do Zag. O rótulo acessível padrão é genérico: passe um `aria-label` que\n * diga o que é redimensionado.\n *\n * **Não ocupa espaço no layout.** A linha de 1px é pintada sobre a última\n * coluna do painel anterior, e a área de toque, de 9px, fica centrada nela: 4px\n * de cada lado, por cima dos dois painéis. Com largura própria, os painéis\n * dividiriam o espaço menos a do puxador, e um tamanho pedido em px sairia\n * menor na tela. Uma barra de rolagem encostada na divisa fica sob a área de\n * toque: afaste-a com padding no painel.\n *\n * Em repouso, só o cursor indica o puxador; o tom aparece no arrasto e no foco\n * pelo teclado, e no foco a linha ganha a cor do anel de foco. O hover não\n * muda nada, e ganha tom por classe no uso.\n */\nexport const SplitterResizeTrigger = (props: SplitterResizeTriggerProps) => {\n  const [triggerProps, elementProps] = splitResizeTriggerProps(\n    props,\n    ZagSplitter.resizeTriggerProps,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitterContext();\n\n  const zagProps = splitter.getResizeTriggerProps(triggerProps);\n\n  const baseProps = {\n    'data-component': 'Splitter.ResizeTrigger',\n    // Sem `type`, um `button` dentro de `form` envia o formulário no clique.\n    type: 'button' as const,\n    'aria-label': 'Redimensionar painéis',\n    className: mergeTwClassNames(\n      [\n        'relative',\n        // Por cima dos painéis, inclusive dos filhos posicionados deles: a área\n        // de toque invade os dois lados da divisa.\n        'z-10',\n        'outline-none',\n\n        'data-[orientation=horizontal]:w-0',\n        'data-[orientation=vertical]:h-0',\n\n        // LINHA — 1px sobre a última coluna (ou linha) do painel anterior.\n        'after:absolute',\n        \"after:content-['']\",\n        'after:bg-gray-6',\n\n        'data-[orientation=horizontal]:after:inset-y-0',\n        'data-[orientation=horizontal]:after:-inset-s-px',\n        'data-[orientation=horizontal]:after:w-px',\n\n        'data-[orientation=vertical]:after:inset-x-0',\n        'data-[orientation=vertical]:after:-top-px',\n        'data-[orientation=vertical]:after:h-px',\n\n        // ÁREA DE TOQUE — centrada na linha, não na divisa: a linha está na coluna\n        // antes dela, e 4px + 1px + 4px exigem largura ímpar. Tingida no arrasto e\n        // no foco.\n        'before:absolute',\n        \"before:content-['']\",\n        'before:transition-colors',\n\n        'data-[orientation=horizontal]:before:inset-y-0',\n        'data-[orientation=horizontal]:before:-inset-s-1.25',\n        'data-[orientation=horizontal]:before:w-2.25',\n\n        'data-[orientation=vertical]:before:inset-x-0',\n        'data-[orientation=vertical]:before:-top-1.25',\n        'data-[orientation=vertical]:before:h-2.25',\n\n        // Sem tom no hover: a área de toque cobre a borda dos dois painéis, e\n        // passar o mouse por ali não deve acender nada. O Zag foca o puxador no\n        // clique sem `focus-visible`, então o tom de foco só vem do teclado.\n        'focus-visible:before:bg-gray-6/50',\n        // O tom da área sozinho tem pouco contraste: a linha marca o foco.\n        'focus-visible:after:bg-gray-9',\n        'data-dragging:before:bg-gray-6',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nSplitterResizeTrigger.displayName = 'Splitter.ResizeTrigger';\n"],"mappings":";;;;;;AAkBA,MAAM,0BACJ,iBAAiD;;;;;;;;;;;;;;;;;;;;AAqBnD,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,CAAC,cAAc,gBAAgB,wBACnC,OACA,YAAY,kBACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,sBAAsB,YAAY;CAE5D,MAAM,YAAY;EAChB,kBAAkB;EAElB,MAAM;EACN,cAAc;EACd,WAAW,kBACT;GACE;GAGA;GACA;GAEA;GACA;GAGA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,sBAAsB,cAAc"}

package/dist/components/layout/splitter/splitter-root-provider.d.ts

@@ -1,5 +1,5 @@
 import { UseSplitterReturn } from "./use-splitter.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/layout/splitter/splitter-root-provider.d.ts
 type RootProviderProps = {

package/dist/components/layout/splitter/splitter-root-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter-root-provider.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport type { UseSplitterReturn } from './use-splitter';\nimport { SplitterContextProvider } from './use-splitter-context';\n\ntype RootProviderProps = {\n  /**\n   * Instância do Splitter criada com o hook `useSplitter`.\n   */\n  value: UseSplitterReturn;\n};\n\n/**\n * Props do `Splitter.RootProvider`: a instância do Splitter e as props do\n * elemento renderizado.\n */\nexport type SplitterRootProviderProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  RootProviderProps\n>;\n\n/**\n * Raiz do Splitter alimentada por uma instância criada fora dela.\n *\n * Recebe em `value` o retorno de `useSplitter`, o que permite ler os tamanhos\n * e comandar os painéis de componentes irmãos — um botão que restaura o\n * layout, ou um indicador da largura atual. Os estilos inline da raiz são os\n * mesmos do `Splitter.Root`.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({ panels: [{ id: 'a' }, { id: 'b' }] });\n *\n * return (\n *   <Splitter.RootProvider value={splitter}>\n *     <Splitter.Panel id=\"a\">A</Splitter.Panel>\n *     <Splitter.ResizeTrigger id=\"a:b\" />\n *     <Splitter.Panel id=\"b\">B</Splitter.Panel>\n *   </Splitter.RootProvider>\n * );\n * ```\n */\nexport const SplitterRootProvider = (props: SplitterRootProviderProps) => {\n  const { value: splitter, render, className, ...rest } = props;\n\n  const zagProps = splitter.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Splitter.RootProvider',\n    className: mergeTwClassNames([], className),\n  };\n\n  return (\n    <SplitterContextProvider value={splitter}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </SplitterContextProvider>\n  );\n};\n\nSplitterRootProvider.displayName = 'Splitter.RootProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,OAAO,UAAU,QAAQ,WAAW,GAAG,SAAS;CAExD,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACsB,CAAA;AAE7B;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"splitter-root-provider.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport type { UseSplitterReturn } from './use-splitter';\nimport { SplitterContextProvider } from './use-splitter-context';\n\ntype RootProviderProps = {\n  /**\n   * Instância do Splitter criada com o hook `useSplitter`.\n   */\n  value: UseSplitterReturn;\n};\n\n/**\n * Props do `Splitter.RootProvider`: a instância do Splitter e as props do\n * elemento renderizado.\n */\nexport type SplitterRootProviderProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  RootProviderProps\n>;\n\n/**\n * Raiz do Splitter alimentada por uma instância criada fora dela.\n *\n * Recebe em `value` o retorno de `useSplitter`, o que permite ler os tamanhos\n * e comandar os painéis de componentes irmãos — um botão que restaura o\n * layout, ou um indicador da largura atual. Os estilos inline da raiz são os\n * mesmos do `Splitter.Root`.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({ panels: [{ id: 'a' }, { id: 'b' }] });\n *\n * return (\n *   <Splitter.RootProvider value={splitter}>\n *     <Splitter.Panel id=\"a\">A</Splitter.Panel>\n *     <Splitter.ResizeTrigger id=\"a:b\" />\n *     <Splitter.Panel id=\"b\">B</Splitter.Panel>\n *   </Splitter.RootProvider>\n * );\n * ```\n */\nexport const SplitterRootProvider = (props: SplitterRootProviderProps) => {\n  const { value: splitter, render, className, ...rest } = props;\n\n  const zagProps = splitter.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Splitter.RootProvider',\n    className: mergeTwClassNames([], className),\n  };\n\n  return (\n    <SplitterContextProvider value={splitter}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </SplitterContextProvider>\n  );\n};\n\nSplitterRootProvider.displayName = 'Splitter.RootProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,OAAO,UAAU,QAAQ,WAAW,GAAG,SAAS;CAExD,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACsB,CAAA;AAE7B;AAEA,qBAAqB,cAAc"}

package/dist/components/layout/splitter/splitter-root.d.ts

@@ -1,5 +1,5 @@
 import { UseSplitterProps } from "./use-splitter.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/layout/splitter/splitter-root.d.ts
 /**

package/dist/components/layout/splitter/splitter-root.js

@@ -1,7 +1,7 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { SplitterContextProvider } from "./use-splitter-context.js";
 import { useSplitter } from "./use-splitter.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import { jsx } from "react/jsx-runtime";
 import * as ZagSplitter from "@zag-js/splitter";

package/dist/components/layout/splitter/splitter-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter-root.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { type UseSplitterProps, useSplitter } from './use-splitter';\nimport { SplitterContextProvider } from './use-splitter-context';\n\n/**\n * Props do `Splitter.Root`: as opções do Splitter e as props do elemento\n * renderizado.\n */\nexport type SplitterRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  UseSplitterProps\n>;\n\nconst splitRootProps = createSplitProps<UseSplitterProps>();\n\n/**\n * Raiz do Splitter.\n *\n * Cria a máquina de redimensionamento e disponibiliza os tamanhos e os\n * comandos para as partes aninhadas. Em `panels` ficam as restrições de cada\n * painel; `minSize`, `maxSize` e `defaultSize` aceitam número (%) ou texto com\n * unidade (`'240px'`, `'20rem'`), convertido para % a cada medida da raiz.\n *\n * O Zag escreve inline `display: flex`, a direção, `width`/`height: 100%` e\n * `overflow: hidden` — classe nenhuma muda isso. Numa coluna flex, a raiz\n * encolhe para caber ao lado dos irmãos: o `overflow: hidden` zera o mínimo\n * automático, e o `height: 100%` vira só a base.\n *\n * Use o `Splitter.RootProvider` no lugar deste componente quando os tamanhos\n * precisarem ser lidos ou comandados de fora da própria subárvore.\n *\n * @example\n * ```tsx\n * <Splitter.Root\n *   panels={[{ id: 'a', minSize: 20 }, { id: 'b', minSize: 20 }]}\n *   defaultSize={[40, 60]}\n * >\n *   <Splitter.Panel id=\"a\">A</Splitter.Panel>\n *   <Splitter.ResizeTrigger id=\"a:b\" />\n *   <Splitter.Panel id=\"b\">B</Splitter.Panel>\n * </Splitter.Root>\n * ```\n */\nexport const SplitterRoot = (props: SplitterRootProps) => {\n  const [useSplitterProps, elementProps] = splitRootProps(\n    props,\n    ZagSplitter.props,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitter(useSplitterProps);\n\n  const zagProps = splitter.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Splitter.Root',\n    className: mergeTwClassNames([], className),\n  };\n\n  return (\n    <SplitterContextProvider value={splitter}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </SplitterContextProvider>\n  );\n};\n\nSplitterRoot.displayName = 'Splitter.Root';\n"],"mappings":";;;;;;;;AAgBA,MAAM,iBAAiB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B1D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,kBAAkB,gBAAgB,eACvC,OACA,YAAY,KACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,YAAY,gBAAgB;CAE7C,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}
+{"version":3,"file":"splitter-root.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { type UseSplitterProps, useSplitter } from './use-splitter';\nimport { SplitterContextProvider } from './use-splitter-context';\n\n/**\n * Props do `Splitter.Root`: as opções do Splitter e as props do elemento\n * renderizado.\n */\nexport type SplitterRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  UseSplitterProps\n>;\n\nconst splitRootProps = createSplitProps<UseSplitterProps>();\n\n/**\n * Raiz do Splitter.\n *\n * Cria a máquina de redimensionamento e disponibiliza os tamanhos e os\n * comandos para as partes aninhadas. Em `panels` ficam as restrições de cada\n * painel; `minSize`, `maxSize` e `defaultSize` aceitam número (%) ou texto com\n * unidade (`'240px'`, `'20rem'`), convertido para % a cada medida da raiz.\n *\n * O Zag escreve inline `display: flex`, a direção, `width`/`height: 100%` e\n * `overflow: hidden` — classe nenhuma muda isso. Numa coluna flex, a raiz\n * encolhe para caber ao lado dos irmãos: o `overflow: hidden` zera o mínimo\n * automático, e o `height: 100%` vira só a base.\n *\n * Use o `Splitter.RootProvider` no lugar deste componente quando os tamanhos\n * precisarem ser lidos ou comandados de fora da própria subárvore.\n *\n * @example\n * ```tsx\n * <Splitter.Root\n *   panels={[{ id: 'a', minSize: 20 }, { id: 'b', minSize: 20 }]}\n *   defaultSize={[40, 60]}\n * >\n *   <Splitter.Panel id=\"a\">A</Splitter.Panel>\n *   <Splitter.ResizeTrigger id=\"a:b\" />\n *   <Splitter.Panel id=\"b\">B</Splitter.Panel>\n * </Splitter.Root>\n * ```\n */\nexport const SplitterRoot = (props: SplitterRootProps) => {\n  const [useSplitterProps, elementProps] = splitRootProps(\n    props,\n    ZagSplitter.props,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitter(useSplitterProps);\n\n  const zagProps = splitter.getRootProps();\n\n  const baseProps = {\n    'data-component': 'Splitter.Root',\n    className: mergeTwClassNames([], className),\n  };\n\n  return (\n    <SplitterContextProvider value={splitter}>\n      {useRender({\n        render,\n        defaultTagName: 'div',\n        props: mergeProps(baseProps, zagProps, rest),\n      })}\n    </SplitterContextProvider>\n  );\n};\n\nSplitterRoot.displayName = 'Splitter.Root';\n"],"mappings":";;;;;;;;AAmBA,MAAM,iBAAiB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B1D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,kBAAkB,gBAAgB,eACvC,OACA,YAAY,KACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,YAAY,gBAAgB;CAE7C,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,UAAU,IAAI;EAC7C,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}

package/dist/components/layout/splitter/use-splitter.d.ts

@@ -1,4 +1,4 @@
-import { Optional } from "@lucasbernardosn/utils";
+import { Optional } from "@lucasbernardosn/ts-utils";
 import { PropTypes } from "@zag-js/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/use-splitter.d.ts

package/dist/components/layout/splitter/use-splitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-splitter.js","names":[],"sources":["../../../../src/components/layout/splitter/use-splitter.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/utils';\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { useId } from 'react';\n\n/**\n * Propriedades do hook `useSplitter`.\n *\n * São as mesmas opções aceitas pelo `Splitter.Root`, com o `id` opcional — um\n * id único é gerado quando ele não é informado.\n */\nexport type UseSplitterProps = Optional<ZagSplitter.Props, 'id'>;\n\n/**\n * Retorno do hook `useSplitter`: a API completa do Splitter, com os tamanhos\n * atuais, o estado de arrasto, os comandos (`setSizes`, `resetSizes`,\n * `collapsePanel`…) e as props de cada parte.\n */\nexport type UseSplitterReturn = ZagSplitter.Api<PropTypes>;\n\n/**\n * Cria e gerencia o estado de um Splitter.\n *\n * Use junto do `Splitter.RootProvider` quando for preciso ler ou comandar os\n * tamanhos de fora da subárvore do componente. Nos casos comuns prefira o\n * `Splitter.Root`, que chama este hook internamente.\n *\n * O componente que chama o hook re-renderiza a cada quadro do arrasto. Quando\n * ele monta uma árvore grande, prefira o `Splitter.Root` e leia a API com\n * `useSplitterContext` num componente pequeno, só onde ela é usada.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({\n *   panels: [{ id: 'a' }, { id: 'b' }],\n *   defaultSize: [50, 50],\n * });\n *\n * return (\n *   <>\n *     <button onClick={() => splitter.resetSizes()}>Restaurar</button>\n *\n *     <Splitter.RootProvider value={splitter}>…</Splitter.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const useSplitter = (props: UseSplitterProps): UseSplitterReturn => {\n  // Id de fallback: só é usado quando `props.id` não é informado.\n  const id = useId();\n\n  const service = useMachine(ZagSplitter.machine, { id, ...props });\n\n  return ZagSplitter.connect(service, normalizeProps);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,eAAe,UAA+C;CAEzE,MAAM,KAAK,MAAM;CAEjB,MAAM,UAAU,WAAW,YAAY,SAAS;EAAE;EAAI,GAAG;CAAM,CAAC;CAEhE,OAAO,YAAY,QAAQ,SAAS,cAAc;AACpD"}
+{"version":3,"file":"use-splitter.js","names":[],"sources":["../../../../src/components/layout/splitter/use-splitter.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/ts-utils';\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { useId } from 'react';\n\n/**\n * Propriedades do hook `useSplitter`.\n *\n * São as mesmas opções aceitas pelo `Splitter.Root`, com o `id` opcional — um\n * id único é gerado quando ele não é informado.\n */\nexport type UseSplitterProps = Optional<ZagSplitter.Props, 'id'>;\n\n/**\n * Retorno do hook `useSplitter`: a API completa do Splitter, com os tamanhos\n * atuais, o estado de arrasto, os comandos (`setSizes`, `resetSizes`,\n * `collapsePanel`…) e as props de cada parte.\n */\nexport type UseSplitterReturn = ZagSplitter.Api<PropTypes>;\n\n/**\n * Cria e gerencia o estado de um Splitter.\n *\n * Use junto do `Splitter.RootProvider` quando for preciso ler ou comandar os\n * tamanhos de fora da subárvore do componente. Nos casos comuns prefira o\n * `Splitter.Root`, que chama este hook internamente.\n *\n * O componente que chama o hook re-renderiza a cada quadro do arrasto. Quando\n * ele monta uma árvore grande, prefira o `Splitter.Root` e leia a API com\n * `useSplitterContext` num componente pequeno, só onde ela é usada.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({\n *   panels: [{ id: 'a' }, { id: 'b' }],\n *   defaultSize: [50, 50],\n * });\n *\n * return (\n *   <>\n *     <button onClick={() => splitter.resetSizes()}>Restaurar</button>\n *\n *     <Splitter.RootProvider value={splitter}>…</Splitter.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const useSplitter = (props: UseSplitterProps): UseSplitterReturn => {\n  // Id de fallback: só é usado quando `props.id` não é informado.\n  const id = useId();\n\n  const service = useMachine(ZagSplitter.machine, { id, ...props });\n\n  return ZagSplitter.connect(service, normalizeProps);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,eAAe,UAA+C;CAEzE,MAAM,KAAK,MAAM;CAEjB,MAAM,UAAU,WAAW,YAAY,SAAS;EAAE;EAAI,GAAG;CAAM,CAAC;CAEhE,OAAO,YAAY,QAAQ,SAAS,cAAc;AACpD"}

package/dist/components/layout/stack/stack.d.ts

@@ -1,5 +1,5 @@
 import { StackVariants } from "./stack-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/layout/stack/stack.d.ts
 export type StackProps = MergeOverride<useRender.ComponentProps<'div'>, StackVariants>;

package/dist/components/layout/stack/stack.js

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { stackVariants } from "./stack-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/layout/stack/stack.tsx
 const splitVariantProps = createSplitProps();

package/dist/components/layout/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type StackVariants, stackVariants } from './stack-variants';\n\nexport type StackProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  StackVariants\n>;\n\nconst splitVariantProps = createSplitProps<StackVariants>();\n\n/**\n * Empilha os itens numa direção, com espaçamento entre eles.\n */\nexport const Stack = (props: StackProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['direction']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Stack',\n    className: mergeTwClassNames(stackVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nStack.displayName = 'Stack';\n"],"mappings":";;;;;AAUA,MAAM,oBAAoB,iBAAgC;;;;AAK1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type StackVariants, stackVariants } from './stack-variants';\n\nexport type StackProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  StackVariants\n>;\n\nconst splitVariantProps = createSplitProps<StackVariants>();\n\n/**\n * Empilha os itens numa direção, com espaçamento entre eles.\n */\nexport const Stack = (props: StackProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['direction']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Stack',\n    className: mergeTwClassNames(stackVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nStack.displayName = 'Stack';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAgC;;;;AAK1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}

package/dist/components/overlays/action-bar/action-bar-popup-variants.d.ts

@@ -4,7 +4,7 @@
  * e cor do texto estão explicados. As diferenças:
  * - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de
  *   tamanho;
- * - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-lg` e `shadow-lg`;
+ * - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-md` e `shadow-lg`;
  * - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.
  *
  * A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular

package/dist/components/overlays/action-bar/action-bar-popup-variants.js

@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
 * e cor do texto estão explicados. As diferenças:
 * - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de
 *   tamanho;
-* - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-lg` e `shadow-lg`;
+* - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-md` e `shadow-lg`;
 * - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.
 *
 * A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular
@@ -23,9 +23,9 @@ const actionBarPopupVariants = cva([
 	"items-center",
 	"gap-3",
 	"max-w-[calc(100dvw-2*var(--action-bar-offset))]",
-	"px-3",
-	"py-2.5",
-	"rounded-lg",
+	"px-4",
+	"py-2",
+	"rounded-md",
 	"corner-squircle",
 	"outline-1",
 	"outline-gray-6",

package/dist/components/overlays/action-bar/action-bar-popup-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { actionBarDefaultVariants } from './use-action-bar-context';\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra\n * e cor do texto estão explicados. As diferenças:\n * - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de\n *   tamanho;\n * - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-lg` e `shadow-lg`;\n * - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.\n *\n * A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular\n * embaixo.\n *\n * No `bottom`, o `-translate-x-1/2` centraliza e a animação de entrada mexe no `translate-y`: no\n * Tailwind os dois eixos compõem a mesma propriedade `translate`, então um não anula o outro.\n */\nexport const actionBarPopupVariants = cva(\n  [\n    '[--action-bar-offset:--spacing(4)]',\n\n    'fixed',\n    'bottom-[calc(env(safe-area-inset-bottom)+var(--action-bar-offset))]',\n\n    'flex',\n    'items-center',\n    'gap-3',\n\n    'max-w-[calc(100dvw-2*var(--action-bar-offset))]',\n\n    'px-3',\n    'py-2.5',\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    // A barra 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]',\n    'not-motion-reduced:ease-enter',\n    'not-motion-reduced:duration-150',\n\n    'not-motion-reduced:data-starting-style:translate-y-4',\n    'not-motion-reduced:data-ending-style:translate-y-4',\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  {\n    variants: {\n      placement: {\n        bottom: ['left-1/2', '-translate-x-1/2'],\n        'bottom-start': ['left-(--action-bar-offset)'],\n        'bottom-end': ['right-(--action-bar-offset)'],\n      },\n    },\n    defaultVariants: {\n      placement: actionBarDefaultVariants.placement,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAa,yBAAyB,IACpC;CACE;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,WAAW;EACT,QAAQ,CAAC,YAAY,kBAAkB;EACvC,gBAAgB,CAAC,4BAA4B;EAC7C,cAAc,CAAC,6BAA6B;CAC9C,EACF;CACA,iBAAiB,EACf,WAAW,yBAAyB,UACtC;AACF,CACF"}
+{"version":3,"file":"action-bar-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { actionBarDefaultVariants } from './use-action-bar-context';\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra\n * e cor do texto estão explicados. As diferenças:\n * - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de\n *   tamanho;\n * - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-md` e `shadow-lg`;\n * - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.\n *\n * A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular\n * embaixo.\n *\n * No `bottom`, o `-translate-x-1/2` centraliza e a animação de entrada mexe no `translate-y`: no\n * Tailwind os dois eixos compõem a mesma propriedade `translate`, então um não anula o outro.\n */\nexport const actionBarPopupVariants = cva(\n  [\n    '[--action-bar-offset:--spacing(4)]',\n\n    'fixed',\n    'bottom-[calc(env(safe-area-inset-bottom)+var(--action-bar-offset))]',\n\n    'flex',\n    'items-center',\n    'gap-3',\n\n    'max-w-[calc(100dvw-2*var(--action-bar-offset))]',\n\n    'px-4',\n    'py-2',\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    // A barra 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]',\n    'not-motion-reduced:ease-enter',\n    'not-motion-reduced:duration-150',\n\n    'not-motion-reduced:data-starting-style:translate-y-4',\n    'not-motion-reduced:data-ending-style:translate-y-4',\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  {\n    variants: {\n      placement: {\n        bottom: ['left-1/2', '-translate-x-1/2'],\n        'bottom-start': ['left-(--action-bar-offset)'],\n        'bottom-end': ['right-(--action-bar-offset)'],\n      },\n    },\n    defaultVariants: {\n      placement: actionBarDefaultVariants.placement,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAa,yBAAyB,IACpC;CACE;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,WAAW;EACT,QAAQ,CAAC,YAAY,kBAAkB;EACvC,gBAAgB,CAAC,4BAA4B;EAC7C,cAAc,CAAC,6BAA6B;CAC9C,EACF;CACA,iBAAiB,EACf,WAAW,yBAAyB,UACtC;AACF,CACF"}

package/dist/components/overlays/action-bar/action-bar-root.d.ts

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

package/dist/components/overlays/action-bar/action-bar-root.js

@@ -1,5 +1,5 @@
 import { ActionBarContextProvider } from "./use-action-bar-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/action-bar/action-bar-root.tsx

package/dist/components/overlays/action-bar/action-bar-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport {\n  ActionBarContextProvider,\n  type ActionBarVariants,\n} from './use-action-bar-context';\n\nexport type ActionBarRootProps = MergeOverride<\n  BaseDialog.Root.Props,\n  ActionBarVariants\n>;\n\nexport type ActionBarRootState = BaseDialog.Root.State;\n\nexport type ActionBarRootActions = BaseDialog.Root.Actions;\n\nexport type ActionBarRootChangeEventDetails =\n  BaseDialog.Root.ChangeEventDetails;\n\nexport type ActionBarRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<ActionBarVariants>();\n\n/**\n * Estado da barra de ações. Não renderiza elemento.\n *\n * É um dialog não modal do Base UI, sem trigger: a barra abre pelo `open`, ligado à seleção de\n * quem usa. Fecha só pelo `Esc` e pelo `Close`; o clique fora e o foco saindo da barra não\n * fecham (`disablePointerDismissal`), porque selecionar outra linha é um clique fora.\n *\n * A barra continua montada durante a animação de saída. Um texto derivado da seleção (\"3\n * selecionados\") vira \"0 selecionados\" enquanto ela some, e a largura muda junto: mostre a\n * última contagem maior que zero.\n *\n * @example\n * ```tsx\n * <ActionBar.Root\n *   open={selected.length > 0}\n *   onOpenChange={(open) => !open && clearSelection()}\n * >\n *   <ActionBar.Portal>\n *     <ActionBar.Popup>\n *       <ActionBar.SelectionTrigger>\n *         {selected.length} selecionados\n *       </ActionBar.SelectionTrigger>\n *       <ActionBar.Separator />\n *       <Button size=\"sm\">Excluir</Button>\n *       <ActionBar.Close render={<IconButton aria-label=\"Fechar\" />} />\n *     </ActionBar.Popup>\n *   </ActionBar.Portal>\n * </ActionBar.Root>\n * ```\n */\nexport const ActionBarRoot = (props: ActionBarRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['placement']);\n\n  return (\n    <ActionBarContextProvider value={variantProps}>\n      <BaseDialog.Root\n        modal={false}\n        disablePointerDismissal={true}\n        {...elementProps}\n      />\n    </ActionBarContextProvider>\n  );\n};\n\nActionBarRoot.displayName = 'ActionBar.Root';\n"],"mappings":";;;;;AAqBA,MAAM,oBAAoB,iBAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC9D,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAACA,OAAW,MAAZ;GACE,OAAO;GACP,yBAAyB;GACzB,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAEA,cAAc,cAAc"}
+{"version":3,"file":"action-bar-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport {\n  ActionBarContextProvider,\n  type ActionBarVariants,\n} from './use-action-bar-context';\n\nexport type ActionBarRootProps = MergeOverride<\n  BaseDialog.Root.Props,\n  ActionBarVariants\n>;\n\nexport type ActionBarRootState = BaseDialog.Root.State;\n\nexport type ActionBarRootActions = BaseDialog.Root.Actions;\n\nexport type ActionBarRootChangeEventDetails =\n  BaseDialog.Root.ChangeEventDetails;\n\nexport type ActionBarRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<ActionBarVariants>();\n\n/**\n * Estado da barra de ações. Não renderiza elemento.\n *\n * É um dialog não modal do Base UI, sem trigger: a barra abre pelo `open`, ligado à seleção de\n * quem usa. Fecha só pelo `Esc` e pelo `Close`; o clique fora e o foco saindo da barra não\n * fecham (`disablePointerDismissal`), porque selecionar outra linha é um clique fora.\n *\n * A barra continua montada durante a animação de saída. Um texto derivado da seleção (\"3\n * selecionados\") vira \"0 selecionados\" enquanto ela some, e a largura muda junto: mostre a\n * última contagem maior que zero.\n *\n * @example\n * ```tsx\n * <ActionBar.Root\n *   open={selected.length > 0}\n *   onOpenChange={(open) => !open && clearSelection()}\n * >\n *   <ActionBar.Portal>\n *     <ActionBar.Popup>\n *       <ActionBar.SelectionTrigger>\n *         {selected.length} selecionados\n *       </ActionBar.SelectionTrigger>\n *       <ActionBar.Separator />\n *       <Button size=\"sm\">Excluir</Button>\n *       <ActionBar.Close render={<IconButton aria-label=\"Fechar\" />} />\n *     </ActionBar.Popup>\n *   </ActionBar.Portal>\n * </ActionBar.Root>\n * ```\n */\nexport const ActionBarRoot = (props: ActionBarRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['placement']);\n\n  return (\n    <ActionBarContextProvider value={variantProps}>\n      <BaseDialog.Root\n        modal={false}\n        disablePointerDismissal={true}\n        {...elementProps}\n      />\n    </ActionBarContextProvider>\n  );\n};\n\nActionBarRoot.displayName = 'ActionBar.Root';\n"],"mappings":";;;;;AAwBA,MAAM,oBAAoB,iBAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC9D,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAACA,OAAW,MAAZ;GACE,OAAO;GACP,yBAAyB;GACzB,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAEA,cAAc,cAAc"}

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

@@ -17,10 +17,9 @@ const AlertDialogFooter = (props) => {
 			"justify-end",
 			"gap-2",
 			"px-(--alert-dialog-padding)",
-			"pt-4",
+			"pt-2",
 			"pb-(--alert-dialog-padding)",
-			"first:pt-(--alert-dialog-padding)",
-			"[[data-component='AlertDialog.Header']+&]:pt-2"
+			"first:pt-(--alert-dialog-padding)"
 		], className)
 	};
 	return useRender({

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-footer.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do alert dialog, alinhadas à direita.\n *\n * Cópia de `DialogFooter`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogFooter = (props: AlertDialogFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--alert-dialog-padding)',\n        'pt-4',\n        'pb-(--alert-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-(--alert-dialog-padding)',\n        \"[[data-component='AlertDialog.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\nAlertDialogFooter.displayName = 'AlertDialog.Footer';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAGA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"alert-dialog-footer.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do alert dialog, alinhadas à direita.\n *\n * Cópia de `DialogFooter`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogFooter = (props: AlertDialogFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--alert-dialog-padding)',\n        'pt-2',\n        'pb-(--alert-dialog-padding)',\n        // Abrindo o dialog, fecha o respiro de cima.\n        'first:pt-(--alert-dialog-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -17,7 +17,7 @@ const AlertDialogHeader = (props) => {
 			"gap-0.5",
 			"px-(--alert-dialog-padding)",
 			"pt-(--alert-dialog-padding)",
-			"pb-4",
+			"pb-2",
 			"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)"
 		], className)
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-header.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do alert dialog, onde ficam título e descrição.\n *\n * Cópia de `DialogHeader`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogHeader = (props: AlertDialogHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--alert-dialog-padding)',\n        'pt-(--alert-dialog-padding)',\n        'pb-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='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogHeader.displayName = 'AlertDialog.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAGA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"alert-dialog-header.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do alert dialog, onde ficam título e descrição.\n *\n * Cópia de `DialogHeader`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogHeader = (props: AlertDialogHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--alert-dialog-padding)',\n        'pt-(--alert-dialog-padding)',\n        'pb-2',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do dialog embaixo. Por irmão, e não por\n        // `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogHeader.displayName = 'AlertDialog.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAGA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -0,0 +1,78 @@
+import { ButtonProps } from "../../buttons/button/button.js";
+import "../../buttons/button/index.js";
+import { AlertDialogVariants } from "./use-alert-dialog-context.js";
+import React from "react";
+//#region src/components/overlays/alert-dialog/alert-dialog-imperative.d.ts
+/**
+ * Rótulo e visual de um botão do alerta, no vocabulário do `Button`. Clique, `loading` e
+ * `disabled` ficam com o alerta.
+ */
+export type AlertDialogButtonOptions = Pick<ButtonProps, 'children' | 'colorScheme' | 'variant'>;
+export type AlertDialogAlertOptions = {
+  /** Título do alerta. */
+  title: React.ReactNode;
+  /**
+   * Texto de apoio. Só para exibição: renderiza no `AlertDialog.Outlet`, sem o contexto de quem
+   * abriu, e não muda depois de aberto.
+   */
+  description?: React.ReactNode;
+  /**
+   * Largura do popup, repassada ao `AlertDialog.Root`.
+   *
+   * @default 'md'
+   */
+  size?: AlertDialogVariants['size'];
+  /**
+   * Botão que fecha o alerta: no `alert`, o único; no `confirm`, o de confirmar.
+   *
+   * @default { children: 'OK' } no `alert`, { children: 'Confirmar' } no `confirm`
+   */
+  confirmButton?: AlertDialogButtonOptions;
+};
+export type AlertDialogConfirmOptions = AlertDialogAlertOptions & {
+  /**
+   * Botão de cancelar, antes do de confirmar: é o que recebe o foco ao abrir.
+   *
+   * @default { children: 'Cancelar', variant: 'outline' }
+   */
+  cancelButton?: AlertDialogButtonOptions;
+  /**
+   * Ação executada ao confirmar. Enquanto ela roda, o botão de confirmar fica em `loading` e o
+   * alerta não fecha (nem pelo `Esc`, nem pelo cancelar). No sucesso, fecha e resolve `true`. Se
+   * ela lançar, o alerta continua aberto com o erro (o `message`, quando é um `Error`), para tentar
+   * de novo ou cancelar. Sem ela, o alerta só pergunta.
+   */
+  onConfirm?: () => unknown;
+};
+/**
+ * Abre um alerta com um botão só e resolve quando ele fecha, por esse botão ou pelo `Esc`. Pode
+ * ser chamado de qualquer lugar, inclusive de fora do React, mas só aparece com um
+ * `AlertDialog.Outlet` montado.
+ *
+ * @example
+ * ```ts
+ * await AlertDialog.alert({ title: 'Sessão expirada', description: 'Entre de novo para continuar.' });
+ * ```
+ */
+export declare const alertDialogAlert: (options: AlertDialogAlertOptions) => Promise<void>;
+/**
+ * Abre um alerta de confirmação e resolve `true` se o usuário confirmar, `false` se cancelar ou
+ * fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. Pode ser chamado de qualquer
+ * lugar, inclusive de fora do React, mas só aparece com um `AlertDialog.Outlet` montado.
+ *
+ * Para um campo, uma escolha ou um terceiro botão, que não cabem na resposta `boolean`, monte o
+ * AlertDialog com as partes e abra pelo `AlertDialog.createHandle`.
+ *
+ * @example
+ * ```ts
+ * const confirmed = await AlertDialog.confirm({
+ *   title: 'Excluir a nota 4821?',
+ *   description: 'A exclusão não pode ser desfeita.',
+ *   confirmButton: { children: 'Excluir', colorScheme: 'red' },
+ *   onConfirm: () => deleteInvoice(4821),
+ * });
+ * ```
+ */
+export declare const alertDialogConfirm: (options: AlertDialogConfirmOptions) => Promise<boolean>;
+//#endregion
+//# sourceMappingURL=alert-dialog-imperative.d.ts.map

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

@@ -0,0 +1,172 @@
+import { Button } from "../../buttons/button/button.js";
+import { AlertContent } from "../../feedback/alert/alert-content.js";
+import { AlertDescription } from "../../feedback/alert/alert-description.js";
+import { AlertIndicator } from "../../feedback/alert/alert-indicator.js";
+import { AlertRoot } from "../../feedback/alert/alert-root.js";
+import { AlertTitle } from "../../feedback/alert/alert-title.js";
+import { AlertDialogBackdrop } from "./alert-dialog-backdrop.js";
+import { AlertDialogBody } from "./alert-dialog-body.js";
+import { AlertDialogClose } from "./alert-dialog-close.js";
+import { AlertDialogDescription } from "./alert-dialog-description.js";
+import { AlertDialogFooter } from "./alert-dialog-footer.js";
+import { AlertDialogHeader } from "./alert-dialog-header.js";
+import { AlertDialogPopup } from "./alert-dialog-popup.js";
+import { AlertDialogPortal } from "./alert-dialog-portal.js";
+import { AlertDialogRoot } from "./alert-dialog-root.js";
+import { alertDialogStore } from "./alert-dialog-store.js";
+import { AlertDialogTitle } from "./alert-dialog-title.js";
+import { AlertDialogViewport } from "./alert-dialog-viewport.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIsoLayoutEffect } from "@base-ui/utils/useIsoLayoutEffect";
+//#region src/components/overlays/alert-dialog/alert-dialog-imperative.tsx
+/**
+* Abre um alerta com um botão só e resolve quando ele fecha, por esse botão ou pelo `Esc`. Pode
+* ser chamado de qualquer lugar, inclusive de fora do React, mas só aparece com um
+* `AlertDialog.Outlet` montado.
+*
+* @example
+* ```ts
+* await AlertDialog.alert({ title: 'Sessão expirada', description: 'Entre de novo para continuar.' });
+* ```
+*/
+const alertDialogAlert = (options) => {
+	const { promise, resolve } = Promise.withResolvers();
+	open({
+		options,
+		hasCancel: false,
+		onSettle: () => resolve()
+	});
+	return promise;
+};
+/**
+* Abre um alerta de confirmação e resolve `true` se o usuário confirmar, `false` se cancelar ou
+* fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. Pode ser chamado de qualquer
+* lugar, inclusive de fora do React, mas só aparece com um `AlertDialog.Outlet` montado.
+*
+* Para um campo, uma escolha ou um terceiro botão, que não cabem na resposta `boolean`, monte o
+* AlertDialog com as partes e abra pelo `AlertDialog.createHandle`.
+*
+* @example
+* ```ts
+* const confirmed = await AlertDialog.confirm({
+*   title: 'Excluir a nota 4821?',
+*   description: 'A exclusão não pode ser desfeita.',
+*   confirmButton: { children: 'Excluir', colorScheme: 'red' },
+*   onConfirm: () => deleteInvoice(4821),
+* });
+* ```
+*/
+const alertDialogConfirm = (options) => {
+	const { promise, resolve } = Promise.withResolvers();
+	open({
+		options,
+		hasCancel: true,
+		onSettle: resolve
+	});
+	return promise;
+};
+/**
+* Põe o alerta no store. A resolução passa por `settle`, que só vale na primeira chamada: o
+* alerta pode fechar pelo botão e, depois, ser dispensado pelo `Outlet` que desmonta.
+*/
+const open = (args) => {
+	const { options, hasCancel, onSettle } = args;
+	const id = alertDialogStore.createId();
+	let isSettled = false;
+	const settle = (confirmed) => {
+		if (isSettled) return;
+		isSettled = true;
+		onSettle(confirmed);
+	};
+	alertDialogStore.add({
+		id,
+		element: /* @__PURE__ */ jsx(ImperativeAlertDialog, {
+			options,
+			hasCancel,
+			onSettle: settle,
+			onExited: () => alertDialogStore.remove(id)
+		}, id),
+		dismiss: () => settle(false)
+	});
+};
+const ImperativeAlertDialog = (props) => {
+	const { options, hasCancel, onSettle, onExited } = props;
+	const { title, description, size, confirmButton, cancelButton, onConfirm } = options;
+	const { children: confirmLabel, ...confirmButtonProps } = confirmButton ?? {};
+	const { children: cancelLabel = "Cancelar", ...cancelButtonProps } = cancelButton ?? {};
+	const [isOpen, setIsOpen] = useState(false);
+	const [isPending, setIsPending] = useState(false);
+	const [hasFailed, setHasFailed] = useState(false);
+	const [errorMessage, setErrorMessage] = useState();
+	/**
+	* Monta fechado e abre no commit seguinte: o popup só anima a entrada quando vê o `open` passar
+	* de `false` para `true`, e montar já aberto pularia a transição.
+	*/
+	useIsoLayoutEffect(() => {
+		setIsOpen(true);
+	}, []);
+	const close = (confirmed) => {
+		onSettle(confirmed);
+		setIsOpen(false);
+	};
+	const handleOpenChange = (open, eventDetails) => {
+		if (open) return;
+		if (isPending) {
+			eventDetails.cancel();
+			return;
+		}
+		close(false);
+	};
+	const handleOpenChangeComplete = (open) => {
+		if (!open) onExited();
+	};
+	const handleConfirm = async () => {
+		if (!onConfirm) {
+			close(true);
+			return;
+		}
+		setHasFailed(false);
+		setIsPending(true);
+		try {
+			await onConfirm();
+			close(true);
+		} catch (caught) {
+			setHasFailed(true);
+			setErrorMessage(caught instanceof Error && caught.message !== "" ? caught.message : void 0);
+		} finally {
+			setIsPending(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(AlertDialogRoot, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		onOpenChangeComplete: handleOpenChangeComplete,
+		size,
+		children: /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, { children: /* @__PURE__ */ jsxs(AlertDialogPopup, { children: [
+			/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), description !== void 0 && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }),
+			hasFailed && /* @__PURE__ */ jsx(AlertDialogBody, { children: /* @__PURE__ */ jsxs(AlertRoot, {
+				status: "error",
+				role: "alert",
+				children: [/* @__PURE__ */ jsx(AlertIndicator, {}), /* @__PURE__ */ jsxs(AlertContent, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Não foi possível concluir a ação." }), errorMessage !== void 0 && /* @__PURE__ */ jsx(AlertDescription, { children: errorMessage })] })]
+			}) }),
+			/* @__PURE__ */ jsxs(AlertDialogFooter, { children: [hasCancel && /* @__PURE__ */ jsx(AlertDialogClose, {
+				disabled: isPending,
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					...cancelButtonProps
+				}),
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				loading: isPending,
+				onClick: handleConfirm,
+				...confirmButtonProps,
+				children: confirmLabel ?? (hasCancel ? "Confirmar" : "OK")
+			})] })
+		] }) })] })
+	});
+};
+//#endregion
+export { alertDialogAlert, alertDialogConfirm };
+
+//# sourceMappingURL=alert-dialog-imperative.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-imperative.js","names":["Alert.Root","Alert.Indicator","Alert.Content","Alert.Title","Alert.Description"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-imperative.tsx"],"sourcesContent":["import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { Alert } from '#components/feedback/alert';\nimport { AlertDialogBackdrop } from './alert-dialog-backdrop';\nimport { AlertDialogBody } from './alert-dialog-body';\nimport { AlertDialogClose } from './alert-dialog-close';\nimport { AlertDialogDescription } from './alert-dialog-description';\nimport { AlertDialogFooter } from './alert-dialog-footer';\nimport { AlertDialogHeader } from './alert-dialog-header';\nimport { AlertDialogPopup } from './alert-dialog-popup';\nimport { AlertDialogPortal } from './alert-dialog-portal';\nimport {\n  AlertDialogRoot,\n  type AlertDialogRootChangeEventDetails,\n} from './alert-dialog-root';\nimport { alertDialogStore } from './alert-dialog-store';\nimport { AlertDialogTitle } from './alert-dialog-title';\nimport { AlertDialogViewport } from './alert-dialog-viewport';\nimport type { AlertDialogVariants } from './use-alert-dialog-context';\n\n/**\n * Rótulo e visual de um botão do alerta, no vocabulário do `Button`. Clique, `loading` e\n * `disabled` ficam com o alerta.\n */\nexport type AlertDialogButtonOptions = Pick<\n  ButtonProps,\n  'children' | 'colorScheme' | 'variant'\n>;\n\nexport type AlertDialogAlertOptions = {\n  /** Título do alerta. */\n  title: React.ReactNode;\n  /**\n   * Texto de apoio. Só para exibição: renderiza no `AlertDialog.Outlet`, sem o contexto de quem\n   * abriu, e não muda depois de aberto.\n   */\n  description?: React.ReactNode;\n  /**\n   * Largura do popup, repassada ao `AlertDialog.Root`.\n   *\n   * @default 'md'\n   */\n  size?: AlertDialogVariants['size'];\n  /**\n   * Botão que fecha o alerta: no `alert`, o único; no `confirm`, o de confirmar.\n   *\n   * @default { children: 'OK' } no `alert`, { children: 'Confirmar' } no `confirm`\n   */\n  confirmButton?: AlertDialogButtonOptions;\n};\n\nexport type AlertDialogConfirmOptions = AlertDialogAlertOptions & {\n  /**\n   * Botão de cancelar, antes do de confirmar: é o que recebe o foco ao abrir.\n   *\n   * @default { children: 'Cancelar', variant: 'outline' }\n   */\n  cancelButton?: AlertDialogButtonOptions;\n  /**\n   * Ação executada ao confirmar. Enquanto ela roda, o botão de confirmar fica em `loading` e o\n   * alerta não fecha (nem pelo `Esc`, nem pelo cancelar). No sucesso, fecha e resolve `true`. Se\n   * ela lançar, o alerta continua aberto com o erro (o `message`, quando é um `Error`), para tentar\n   * de novo ou cancelar. Sem ela, o alerta só pergunta.\n   */\n  onConfirm?: () => unknown;\n};\n\n/**\n * Abre um alerta com um botão só e resolve quando ele fecha, por esse botão ou pelo `Esc`. Pode\n * ser chamado de qualquer lugar, inclusive de fora do React, mas só aparece com um\n * `AlertDialog.Outlet` montado.\n *\n * @example\n * ```ts\n * await AlertDialog.alert({ title: 'Sessão expirada', description: 'Entre de novo para continuar.' });\n * ```\n */\nexport const alertDialogAlert = (\n  options: AlertDialogAlertOptions,\n): Promise<void> => {\n  const { promise, resolve } = Promise.withResolvers<void>();\n\n  open({\n    options,\n    hasCancel: false,\n    onSettle: () => resolve(),\n  });\n\n  return promise;\n};\n\n/**\n * Abre um alerta de confirmação e resolve `true` se o usuário confirmar, `false` se cancelar ou\n * fechar pelo `Esc`. Com `onConfirm`, executa a ação antes de fechar. Pode ser chamado de qualquer\n * lugar, inclusive de fora do React, mas só aparece com um `AlertDialog.Outlet` montado.\n *\n * Para um campo, uma escolha ou um terceiro botão, que não cabem na resposta `boolean`, monte o\n * AlertDialog com as partes e abra pelo `AlertDialog.createHandle`.\n *\n * @example\n * ```ts\n * const confirmed = await AlertDialog.confirm({\n *   title: 'Excluir a nota 4821?',\n *   description: 'A exclusão não pode ser desfeita.',\n *   confirmButton: { children: 'Excluir', colorScheme: 'red' },\n *   onConfirm: () => deleteInvoice(4821),\n * });\n * ```\n */\nexport const alertDialogConfirm = (\n  options: AlertDialogConfirmOptions,\n): Promise<boolean> => {\n  const { promise, resolve } = Promise.withResolvers<boolean>();\n\n  open({\n    options,\n    hasCancel: true,\n    onSettle: resolve,\n  });\n\n  return promise;\n};\n\ntype OpenArgs = {\n  options: AlertDialogConfirmOptions;\n  hasCancel: boolean;\n  onSettle: (confirmed: boolean) => void;\n};\n\n/**\n * Põe o alerta no store. A resolução passa por `settle`, que só vale na primeira chamada: o\n * alerta pode fechar pelo botão e, depois, ser dispensado pelo `Outlet` que desmonta.\n */\nconst open = (args: OpenArgs) => {\n  const { options, hasCancel, onSettle } = args;\n\n  const id = alertDialogStore.createId();\n\n  let isSettled = false;\n\n  const settle = (confirmed: boolean) => {\n    if (isSettled) {\n      return;\n    }\n\n    isSettled = true;\n    onSettle(confirmed);\n  };\n\n  alertDialogStore.add({\n    id,\n    element: (\n      <ImperativeAlertDialog\n        key={id}\n        options={options}\n        hasCancel={hasCancel}\n        onSettle={settle}\n        onExited={() => alertDialogStore.remove(id)}\n      />\n    ),\n    dismiss: () => settle(false),\n  });\n};\n\ntype ImperativeAlertDialogProps = {\n  options: AlertDialogConfirmOptions;\n  hasCancel: boolean;\n  onSettle: (confirmed: boolean) => void;\n  onExited: () => void;\n};\n\nconst ImperativeAlertDialog = (props: ImperativeAlertDialogProps) => {\n  const { options, hasCancel, onSettle, onExited } = props;\n\n  const { title, description, size, confirmButton, cancelButton, onConfirm } =\n    options;\n\n  const { children: confirmLabel, ...confirmButtonProps } = confirmButton ?? {};\n  const { children: cancelLabel = 'Cancelar', ...cancelButtonProps } =\n    cancelButton ?? {};\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isPending, setIsPending] = useState(false);\n  const [hasFailed, setHasFailed] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string>();\n\n  /**\n   * Monta fechado e abre no commit seguinte: o popup só anima a entrada quando vê o `open` passar\n   * de `false` para `true`, e montar já aberto pularia a transição.\n   */\n  useIsoLayoutEffect(() => {\n    setIsOpen(true);\n  }, []);\n\n  const close = (confirmed: boolean) => {\n    onSettle(confirmed);\n    setIsOpen(false);\n  };\n\n  const handleOpenChange = (\n    open: boolean,\n    eventDetails: AlertDialogRootChangeEventDetails,\n  ) => {\n    if (open) {\n      return;\n    }\n\n    if (isPending) {\n      eventDetails.cancel();\n      return;\n    }\n\n    close(false);\n  };\n\n  const handleOpenChangeComplete = (open: boolean) => {\n    if (!open) {\n      onExited();\n    }\n  };\n\n  const handleConfirm = async () => {\n    if (!onConfirm) {\n      close(true);\n      return;\n    }\n\n    setHasFailed(false);\n    setIsPending(true);\n\n    try {\n      await onConfirm();\n      close(true);\n    } catch (caught) {\n      setHasFailed(true);\n      setErrorMessage(\n        caught instanceof Error && caught.message !== ''\n          ? caught.message\n          : undefined,\n      );\n    } finally {\n      setIsPending(false);\n    }\n  };\n\n  return (\n    <AlertDialogRoot\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      onOpenChangeComplete={handleOpenChangeComplete}\n      size={size}\n    >\n      <AlertDialogPortal>\n        <AlertDialogBackdrop />\n        <AlertDialogViewport>\n          <AlertDialogPopup>\n            <AlertDialogHeader>\n              <AlertDialogTitle>{title}</AlertDialogTitle>\n              {description !== undefined && (\n                <AlertDialogDescription>{description}</AlertDialogDescription>\n              )}\n            </AlertDialogHeader>\n\n            {hasFailed && (\n              <AlertDialogBody>\n                <Alert.Root\n                  status=\"error\"\n                  role=\"alert\"\n                >\n                  <Alert.Indicator />\n                  <Alert.Content>\n                    <Alert.Title>Não foi possível concluir a ação.</Alert.Title>\n                    {errorMessage !== undefined && (\n                      <Alert.Description>{errorMessage}</Alert.Description>\n                    )}\n                  </Alert.Content>\n                </Alert.Root>\n              </AlertDialogBody>\n            )}\n\n            <AlertDialogFooter>\n              {hasCancel && (\n                <AlertDialogClose\n                  disabled={isPending}\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      {...cancelButtonProps}\n                    />\n                  }\n                >\n                  {cancelLabel}\n                </AlertDialogClose>\n              )}\n\n              <Button\n                loading={isPending}\n                onClick={handleConfirm}\n                {...confirmButtonProps}\n              >\n                {confirmLabel ?? (hasCancel ? 'Confirmar' : 'OK')}\n              </Button>\n            </AlertDialogFooter>\n          </AlertDialogPopup>\n        </AlertDialogViewport>\n      </AlertDialogPortal>\n    </AlertDialogRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,MAAa,oBACX,YACkB;CAClB,MAAM,EAAE,SAAS,YAAY,QAAQ,cAAoB;CAEzD,KAAK;EACH;EACA,WAAW;EACX,gBAAgB,QAAQ;CAC1B,CAAC;CAED,OAAO;AACT;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,sBACX,YACqB;CACrB,MAAM,EAAE,SAAS,YAAY,QAAQ,cAAuB;CAE5D,KAAK;EACH;EACA,WAAW;EACX,UAAU;CACZ,CAAC;CAED,OAAO;AACT;;;;;AAYA,MAAM,QAAQ,SAAmB;CAC/B,MAAM,EAAE,SAAS,WAAW,aAAa;CAEzC,MAAM,KAAK,iBAAiB,SAAS;CAErC,IAAI,YAAY;CAEhB,MAAM,UAAU,cAAuB;EACrC,IAAI,WACF;EAGF,YAAY;EACZ,SAAS,SAAS;CACpB;CAEA,iBAAiB,IAAI;EACnB;EACA,SACE,oBAAC,uBAAD;GAEW;GACE;GACX,UAAU;GACV,gBAAgB,iBAAiB,OAAO,EAAE;EAC3C,GALM,EAKN;EAEH,eAAe,OAAO,KAAK;CAC7B,CAAC;AACH;AASA,MAAM,yBAAyB,UAAsC;CACnE,MAAM,EAAE,SAAS,WAAW,UAAU,aAAa;CAEnD,MAAM,EAAE,OAAO,aAAa,MAAM,eAAe,cAAc,cAC7D;CAEF,MAAM,EAAE,UAAU,cAAc,GAAG,uBAAuB,iBAAiB,CAAC;CAC5E,MAAM,EAAE,UAAU,cAAc,YAAY,GAAG,sBAC7C,gBAAgB,CAAC;CAEnB,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,cAAc,mBAAmB,SAAiB;;;;;CAMzD,yBAAyB;EACvB,UAAU,IAAI;CAChB,GAAG,CAAC,CAAC;CAEL,MAAM,SAAS,cAAuB;EACpC,SAAS,SAAS;EAClB,UAAU,KAAK;CACjB;CAEA,MAAM,oBACJ,MACA,iBACG;EACH,IAAI,MACF;EAGF,IAAI,WAAW;GACb,aAAa,OAAO;GACpB;EACF;EAEA,MAAM,KAAK;CACb;CAEA,MAAM,4BAA4B,SAAkB;EAClD,IAAI,CAAC,MACH,SAAS;CAEb;CAEA,MAAM,gBAAgB,YAAY;EAChC,IAAI,CAAC,WAAW;GACd,MAAM,IAAI;GACV;EACF;EAEA,aAAa,KAAK;EAClB,aAAa,IAAI;EAEjB,IAAI;GACF,MAAM,UAAU;GAChB,MAAM,IAAI;EACZ,SAAS,QAAQ;GACf,aAAa,IAAI;GACjB,gBACE,kBAAkB,SAAS,OAAO,YAAY,KAC1C,OAAO,UACP,KAAA,CACN;EACF,UAAU;GACR,aAAa,KAAK;EACpB;CACF;CAEA,OACE,oBAAC,iBAAD;EACE,MAAM;EACN,cAAc;EACd,sBAAsB;EAChB;EAEN,UAAA,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,CAAsB,CAAA,GACtB,oBAAC,qBAAD,EAAA,UACE,qBAAC,kBAAD,EAAA,UAAA;GACE,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UAAmB,MAAwB,CAAA,GAC1C,gBAAgB,KAAA,KACf,oBAAC,wBAAD,EAAA,UAAyB,YAAoC,CAAA,CAE9C,EAAA,CAAA;GAElB,aACC,oBAAC,iBAAD,EAAA,UACE,qBAACA,WAAD;IACE,QAAO;IACP,MAAK;IAFP,UAAA,CAIE,oBAACC,gBAAD,CAAkB,CAAA,GAClB,qBAACC,cAAD,EAAA,UAAA,CACE,oBAACC,YAAD,EAAA,UAAa,oCAA8C,CAAA,GAC1D,iBAAiB,KAAA,KAChB,oBAACC,kBAAD,EAAA,UAAoB,aAAgC,CAAA,CAEzC,EAAA,CAAA,CACL;GACG,CAAA,EAAA,CAAA;GAGnB,qBAAC,mBAAD,EAAA,UAAA,CACG,aACC,oBAAC,kBAAD;IACE,UAAU;IACV,QACE,oBAAC,QAAD;KACE,SAAQ;KACR,GAAI;IACL,CAAA;IAGF,UAAA;GACe,CAAA,GAGpB,oBAAC,QAAD;IACE,SAAS;IACT,SAAS;IACT,GAAI;IAEH,UAAA,iBAAiB,YAAY,cAAc;GACtC,CAAA,CACS,EAAA,CAAA;EACH,EAAA,CAAA,EACC,CAAA,CACJ,EAAA,CAAA;CACJ,CAAA;AAErB"}

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

@@ -0,0 +1,23 @@
+import React from "react";
+//#region src/components/overlays/alert-dialog/alert-dialog-outlet.d.ts
+/**
+ * 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>
+ * ```
+ */
+export declare const AlertDialogOutlet: {
+  (): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=alert-dialog-outlet.d.ts.map