beez-ui 2.7.0 → 3.0.0

package/dist/components/data-table.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { ColumnDef, OnChangeFn, SortingState, VisibilityState } from "@tanstack/react-table";
 import { type AppliedFilter, type FilterQualifierConfig } from "./filter-query-grammar.js";
+import { type DropdownItem } from "./primitives/dropdown-menu-items.js";
 export type { DataTableColumnFilterValue } from "../types/data-table.js";
 /**
  * Controles imperativos de la barra unificada que la tabla expone vía
@@ -93,10 +94,10 @@ export interface DataTableProps<TData, TValue> {
     columnVisibilityButtonLabel?: string;
     columnVisibilityMenuLabel?: string;
     /**
-     * Ítems extra al tope del menú de columnas (p. ej. preferencias de vista);
-     * se separan de la sección de columnas con un separador.
+     * Ítems extra al tope del menú de columnas (p. ej. preferencias de vista), con la
+     * forma de los `items` de `DropdownMenu`; se separan de la sección de columnas con un separador.
      */
-    columnVisibilityMenuExtraContent?: React.ReactNode;
+    columnVisibilityMenuExtraItems?: DropdownItem[];
     sortingBadgeLabelOverrides?: Record<string, string>;
     /**
      * Ids de columnas de orden "internas" (p. ej. la posición de grupo) que el
@@ -114,4 +115,4 @@ export interface DataTableColumnMeta {
     isClickable?: boolean;
     onHeaderClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
 }
-export declare function DataTable<TData, TValue>({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel, filterPlaceholder, filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder, excludeFilterLabel, excludeFilterToggleLabel, excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle, columnVisibilityButtonLabel, columnVisibilityMenuLabel, columnVisibilityMenuExtraContent, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel, deselectAllColumnsLabel, hideableColumnsDefaultVisibility, }: DataTableProps<TData, TValue>): React.JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel, filterPlaceholder, filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder, excludeFilterLabel, excludeFilterToggleLabel, excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle, columnVisibilityButtonLabel, columnVisibilityMenuLabel, columnVisibilityMenuExtraItems, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel, deselectAllColumnsLabel, hideableColumnsDefaultVisibility, }: DataTableProps<TData, TValue>): React.JSX.Element;

package/dist/components/data-table.js

@@ -9,7 +9,8 @@ import { ControlButton } from "./control-button.js";
 import { Badge } from "./badge.js";
 import { FilterQueryBar } from "./filter-query-bar.js";
 import { parseFilterQuery, serializeFilterQuery } from "./filter-query-grammar.js";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
+import { DropdownMenuItems } from "./primitives/dropdown-menu-items.js";
 import { Input } from "./input.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -102,7 +103,7 @@ function areAdvancedFilterMapsEqual(leftMap, rightMap) {
 		return rightValue != null && areColumnFilterValuesEqual(leftMap[key], rightValue);
 	});
 }
-export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel = "Filtrar", filterPlaceholder = "Filtrar...", filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle = false, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder = "Excluir por descripción", excludeFilterLabel = "Filtro de exclusión", excludeFilterToggleLabel = "Mostrar filtros de exclusión", excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle = false, columnVisibilityButtonLabel = "Columnas", columnVisibilityMenuLabel = "Mostrar columnas", columnVisibilityMenuExtraContent, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel = "Mostrar todas", deselectAllColumnsLabel = "Ocultar todas", hideableColumnsDefaultVisibility }) {
+export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel = "Filtrar", filterPlaceholder = "Filtrar...", filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle = false, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder = "Excluir por descripción", excludeFilterLabel = "Filtro de exclusión", excludeFilterToggleLabel = "Mostrar filtros de exclusión", excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle = false, columnVisibilityButtonLabel = "Columnas", columnVisibilityMenuLabel = "Mostrar columnas", columnVisibilityMenuExtraItems, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel = "Mostrar todas", deselectAllColumnsLabel = "Ocultar todas", hideableColumnsDefaultVisibility }) {
 	const [uncontrolledSorting, setUncontrolledSorting] = React.useState([]);
 	const [columnFilters, setColumnFilters] = React.useState([]);
 	const [uncontrolledFilterValue, setUncontrolledFilterValue] = React.useState("");
@@ -449,7 +450,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 	const sortingBadgeNode = shouldShowSortingBadge ? /* @__PURE__ */ _jsxs(Badge, {
 		"aria-live": "polite",
 		className: "inline-flex w-fit items-center gap-1.5",
-		variant: "secondary",
+		tone: "neutral",
 		children: [
 			/* @__PURE__ */ _jsx("span", { children: `Ordenado por: ${activeSortingColumnLabel} ${activeSortingDirectionSymbol}` }),
 			/* @__PURE__ */ _jsx("span", {
@@ -744,7 +745,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 							children: [excludeFilterUniqueRowsCount != null ? /* @__PURE__ */ _jsxs(Badge, {
 								"aria-label": `Total de filas excluidas únicas: ${excludeFilterUniqueRowsCount}`,
 								className: "inline-flex h-6 items-center gap-1.5 px-2.5",
-								variant: "destructive",
+								tone: "danger",
 								children: [
 									/* @__PURE__ */ _jsx("span", { children: `${EXCLUDED_ROWS_SUMMARY_LABEL}:` }),
 									/* @__PURE__ */ _jsx("span", {
@@ -766,7 +767,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 								const excludedRowsCount = excludeFilterRowsCountByValue?.[excludeFilterValue];
 								return /* @__PURE__ */ _jsxs(Badge, {
 									className: "inline-flex h-6 items-center gap-1.5 px-2.5",
-									variant: "destructive",
+									tone: "danger",
 									children: [
 										/* @__PURE__ */ _jsx("span", { children: `− ${excludeFilterValue}` }),
 										excludedRowsCount != null ? /* @__PURE__ */ _jsx("span", {
@@ -821,7 +822,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 					}), /* @__PURE__ */ _jsxs(DropdownMenuContent, {
 						align: "end",
 						children: [
-							columnVisibilityMenuExtraContent ? /* @__PURE__ */ _jsxs(_Fragment, { children: [columnVisibilityMenuExtraContent, /* @__PURE__ */ _jsx(DropdownMenuSeparator, {})] }) : null,
+							columnVisibilityMenuExtraItems?.length ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(DropdownMenuItems, { items: columnVisibilityMenuExtraItems }), /* @__PURE__ */ _jsx(DropdownMenuSeparator, {})] }) : null,
 							/* @__PURE__ */ _jsx(DropdownMenuLabel, { children: columnVisibilityMenuLabel }),
 							/* @__PURE__ */ _jsx(DropdownMenuItem, {
 								disabled: areHideableColumnsAtDefaultVisibility,

package/dist/components/dialog-surface.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, Ref } from "react";
 /** Arc's overlay: a near-black scrim at 46% with a 7px backdrop blur where the engine supports it. */
 export declare const dialogOverlayClassName = "fixed inset-0 isolate z-50 bg-[oklch(10%_0_0/0.46)] supports-backdrop-filter:backdrop-blur-[7px]";
 /**
@@ -17,6 +17,28 @@ export declare const dialogDescriptionClassName = "text-sm leading-(--leading-bo
  * from `ControlButton`.
  */
 export declare const dialogCloseButtonClassName = "size-(--space-8) rounded-(--radius-control) border-border bg-surface-muted/50 text-text-secondary hover-fine:bg-surface-muted hover-fine:text-foreground [&_svg:not([class*='size-'])]:size-4";
+/** Where the dialog close button sits: inside the panel or pinned to the viewport corner. */
+export type DialogCloseButtonPlacement = "content" | "viewport";
+/** Which Radix family owns the close button: a regular dialog closes, an alert dialog cancels. */
+export type DialogSurfaceKind = "dialog" | "alert";
+/**
+ * Arc's bordered close button for both dialog families. Pinned to the viewport corner it stays hidden while the panel
+ * enters, because the entrance transform would otherwise carry it along with the panel, fades in once the panel settles and hides
+ * at once when the dialog starts closing; while hidden it is also `visibility: hidden`, so the initial focus and the
+ * keyboard never land on a control that cannot be seen. Inside the panel it pops in after the panel.
+ * @param props - The Radix family, the placement and the accessible name.
+ * @param props.kind - `alert` renders Radix's `AlertDialog.Cancel`, `dialog` its `Dialog.Close`.
+ * @param props.placement - `viewport` pins it to the viewport corner; `content` keeps it in the panel.
+ * @param props.label - Accessible name of the icon-only button.
+ * @returns The close control.
+ */
+export declare function DialogSurfaceCloseButton({ kind, placement, label, buttonRef, }: {
+    kind: DialogSurfaceKind;
+    placement: DialogCloseButtonPlacement;
+    label?: string;
+    /** Ref of the close button element. */
+    buttonRef?: Ref<HTMLButtonElement>;
+}): import("react").JSX.Element;
 /**
  * Arc's text swap: when a dialog's title or description text changes while it is open, the new copy rises in and the
  * old copy lifts out. The first render is static, so server HTML and the opening frame never animate the copy.

package/dist/components/dialog-surface.js

@@ -2,15 +2,20 @@
 import { c as _c } from "react/compiler-runtime";
 /**
 * Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md), shared by `Dialog` and
-* `AlertDialog`: the dimmed, blurred overlay, the raised panel with Arc's surface radius, border and floating shadow,
+* its `alert` mode: the dimmed, blurred overlay, the raised panel with Arc's surface radius, border and floating shadow,
 * the title and description type, the bordered close button and the text swap that animates a title or description
 * changed while the dialog is open. Internal: the panel's entrance and exit are Arc's, played by `MotionSlot`.
 */
+import { XIcon } from "lucide-react";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
-import { DIALOG_TEXT_SWAP_OFFSET_EM } from "../constants/dialog.js";
+import { AlertDialog as AlertDialogPrimitive, Dialog as DialogPrimitive } from "radix-ui";
+import { DIALOG_DEFAULT_COPY, DIALOG_TEXT_SWAP_OFFSET_EM } from "../constants/dialog.js";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
 import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { ControlButton } from "./control-button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Arc's overlay: a near-black scrim at 46% with a 7px backdrop blur where the engine supports it. */
 export const dialogOverlayClassName = "fixed inset-0 isolate z-50 bg-[oklch(10%_0_0/0.46)] supports-backdrop-filter:backdrop-blur-[7px]";
 /**
@@ -29,6 +34,97 @@ export const dialogDescriptionClassName = "text-sm leading-(--leading-body) text
 * from `ControlButton`.
 */
 export const dialogCloseButtonClassName = "size-(--space-8) rounded-(--radius-control) border-border bg-surface-muted/50 text-text-secondary hover-fine:bg-surface-muted hover-fine:text-foreground [&_svg:not([class*='size-'])]:size-4";
+/** Classes of a close button pinned to the viewport corner while the panel enters and closes. */
+const viewportCloseButtonClassName = "fixed top-4 right-4 transition-opacity duration-200 ease-out in-data-motion-entering:invisible in-data-motion-entering:opacity-0 in-data-motion-entering:transition-none in-data-[state=closed]:invisible in-data-[state=closed]:opacity-0 in-data-[state=closed]:transition-none motion-reduce:transition-none";
+/** Classes of a close button centred on the first line of an 18px title, as in Arc's header row. */
+const contentCloseButtonClassName = "absolute top-[calc(var(--space-6)+(var(--text-lg)*var(--leading-body)-var(--space-8))/2)] right-(--space-6)";
+/**
+* Arc's bordered close button for both dialog families. Pinned to the viewport corner it stays hidden while the panel
+* enters, because the entrance transform would otherwise carry it along with the panel, fades in once the panel settles and hides
+* at once when the dialog starts closing; while hidden it is also `visibility: hidden`, so the initial focus and the
+* keyboard never land on a control that cannot be seen. Inside the panel it pops in after the panel.
+* @param props - The Radix family, the placement and the accessible name.
+* @param props.kind - `alert` renders Radix's `AlertDialog.Cancel`, `dialog` its `Dialog.Close`.
+* @param props.placement - `viewport` pins it to the viewport corner; `content` keeps it in the panel.
+* @param props.label - Accessible name of the icon-only button.
+* @returns The close control.
+*/
+export function DialogSurfaceCloseButton(t0) {
+	const $ = _c(15);
+	const { kind, placement, label: t1, buttonRef } = t0;
+	const label = t1 === undefined ? DIALOG_DEFAULT_COPY.closeLabel : t1;
+	const Close = kind === "alert" ? AlertDialogPrimitive.Cancel : DialogPrimitive.Close;
+	const t2 = placement === "viewport" ? viewportCloseButtonClassName : contentCloseButtonClassName;
+	let t3;
+	if ($[0] !== t2) {
+		t3 = cn(dialogCloseButtonClassName, t2);
+		$[0] = t2;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ _jsx(XIcon, { "aria-hidden": "true" });
+		$[2] = t4;
+	} else {
+		t4 = $[2];
+	}
+	let t5;
+	if ($[3] !== label) {
+		t5 = /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: label
+		});
+		$[3] = label;
+		$[4] = t5;
+	} else {
+		t5 = $[4];
+	}
+	let t6;
+	if ($[5] !== buttonRef || $[6] !== t3 || $[7] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs(ControlButton, {
+			ref: buttonRef,
+			variant: "ghost",
+			size: "icon-sm",
+			className: t3,
+			children: [t4, t5]
+		});
+		$[5] = buttonRef;
+		$[6] = t3;
+		$[7] = t5;
+		$[8] = t6;
+	} else {
+		t6 = $[8];
+	}
+	const button = t6;
+	let t7;
+	if ($[9] !== button || $[10] !== placement) {
+		t7 = placement === "viewport" ? button : /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "delayed-pop",
+			children: button
+		});
+		$[9] = button;
+		$[10] = placement;
+		$[11] = t7;
+	} else {
+		t7 = $[11];
+	}
+	let t8;
+	if ($[12] !== Close || $[13] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(Close, {
+			"data-slot": "dialog-close",
+			asChild: true,
+			children: t7
+		});
+		$[12] = Close;
+		$[13] = t7;
+		$[14] = t8;
+	} else {
+		t8 = $[14];
+	}
+	return t8;
+}
 /**
 * One version of the copy. While it lifts out it turns inert and hidden from assistive technology, so the dialog's
 * accessible name never reads the old and the new copy together.

package/dist/components/dialog.d.ts

@@ -1,57 +1,92 @@
 /**
  * Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a focused surface for decisions that need
- * attention, on Arc's overlay, raised panel, title and description type and bordered close button, with Arc's swap of
- * a title or description changed while open, and Arc's dialog transition: the panel rises and scales in on the smooth
- * spring and leaves quickly. It keeps beez-ui's composable parts and the viewport close button placement instead of
- * Arc's single `title`/`description` content.
+ * attention. Arc's API (`Dialog`, `DialogTrigger`, `DialogContent` with its `title`, `description` and built-in close
+ * button, `DialogClose`) on Arc's overlay, raised panel, text swap and dialog transition. beez-ui
+ * extends it with a footer slot, a hidden title, the viewport close button placement, Spanish copy and an `alert` mode
+ * that replaces the former `AlertDialog`.
  */
-import * as React from "react";
-import { Dialog as DialogPrimitive } from "radix-ui";
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
-declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
-declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
-declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
-declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-/** Where the dialog close button sits: inside the panel or pinned to the viewport corner. */
-type DialogCloseButtonPlacement = "content" | "viewport";
+import { type ComponentProps, type ReactNode, type Ref } from "react";
+import { type Dialog as DialogRadix } from "radix-ui";
+import type { DialogCloseButtonPlacement } from "./dialog-surface.js";
+export type { DialogCloseButtonPlacement } from "./dialog-surface.js";
+/** Props of `Dialog`: Radix's root contract plus beez-ui's `alert` mode. */
+export type DialogProps = ComponentProps<typeof DialogRadix.Root> & {
+    /**
+     * Gives the dialog alert dialog semantics: `role="alertdialog"`, a press outside never closes it, it opens with the
+     * focus on the first `DialogClose` (the least destructive answer) and `DialogContent` hides its close button by
+     * default. `Escape` still cancels it. `modal` does not apply: an alert dialog is always modal.
+     */
+    alert?: boolean;
+};
 /**
- * Renders compact dialog content with viewport-safe scrolling. The panel rises 8px and scales
- * from 0.96 on Arc's smooth spring while it fades in, and leaves with a short drop and fade.
- * @param props - Primitive properties and optional consumer overrides.
- * @param props.showCloseButton - Whether the dialog renders its own close button.
- * @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner
- * and shows it only once the panel has settled; `content` (default) keeps it in the panel.
- * @returns The styled primitive with its original interaction contract.
+ * Root that tracks the open state so the content can animate out. Controlled (`open`, `onOpenChange`) or uncontrolled
+ * (`defaultOpen`).
+ * @param props - Radix root props and `alert`.
+ * @returns The dialog root.
  */
-declare function DialogContent({ className, children, showCloseButton, closeButtonPlacement, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-    showCloseButton?: boolean;
-    closeButtonPlacement?: DialogCloseButtonPlacement;
-}): React.JSX.Element;
+declare function Dialog({ alert, modal, ...props }: DialogProps): import("react").JSX.Element;
+/** Props of `DialogTrigger`: Radix's trigger contract, including `asChild`. */
+export type DialogTriggerProps = ComponentProps<typeof DialogRadix.Trigger>;
 /**
- * Stacks the title and description. While the panel shows its own close button, the header keeps Arc's gap to it so
- * long copy never runs under the button.
- * @param props - Native div properties and optional consumer overrides.
- * @returns The header block.
+ * Opens the dialog. Use `asChild` to render your own button.
+ * @param props - Radix trigger props.
+ * @returns The trigger.
  */
-declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogTrigger(props: DialogTriggerProps): import("react").JSX.Element;
+/** Props of `DialogClose`: Radix's close contract, including `asChild`. */
+export type DialogCloseProps = ComponentProps<typeof DialogRadix.Close>;
 /**
- * Separates dialog actions with an edge-to-edge footer under a hairline, bleeding through the panel padding.
- * @param props - Primitive properties and optional consumer overrides.
- * @returns The styled primitive with its original interaction contract.
+ * Closes the dialog from a custom control, such as a cancel button. In `alert` mode it cancels the confirmation, and
+ * the first one receives the focus when the dialog opens.
+ * @param props - Radix close props.
+ * @returns The close control.
  */
-declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+declare function DialogClose(props: DialogCloseProps): import("react").JSX.Element;
+/** Props of `DialogContent`: Arc's titled panel, beez-ui's extensions and Radix's content props. */
+export type DialogContentProps = Omit<ComponentProps<typeof DialogRadix.Content>, "title" | "children"> & {
+    /** Heading of the dialog and its accessible name. Plain text that changes while open crossfades in place. */
+    title: ReactNode;
+    /** Supporting line under the title, wired to `aria-describedby`. */
+    description?: ReactNode;
+    /** Body of the dialog, usually a form or actions. */
+    children?: ReactNode;
+    /** Edge-to-edge action row under a hairline at the bottom of the panel, usually the dialog's buttons. */
+    footer?: ReactNode;
+    /** Keeps the title as the accessible name but shows it only to screen readers. */
+    hideTitle?: boolean;
+    /** Whether the panel renders its close button. Defaults to `true`, or `false` in `alert` mode. */
     showCloseButton?: boolean;
-}): React.JSX.Element;
-/**
- * Renders the dialog heading in Arc's title type. Plain text that changes while open swaps with Arc's rise.
- * @param props - Primitive properties and optional consumer overrides.
- * @returns The styled primitive with its original interaction contract.
- */
-declare function DialogTitle({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+    /**
+     * `content` (default) places the close button in the panel header; `viewport` pins it to the viewport corner and
+     * shows it once the panel has settled.
+     */
+    closeButtonPlacement?: DialogCloseButtonPlacement;
+    /** Accessible name of the close button. Defaults to "Cerrar diálogo". */
+    closeLabel?: string;
+    /**
+     * Ref of the built-in close button, while it is rendered. To open the dialog with the focus on it, call
+     * `event.preventDefault()` in `onOpenAutoFocus` and focus `closeButtonRef.current`.
+     */
+    closeButtonRef?: Ref<HTMLButtonElement>;
+    /**
+     * Extra content of the header, rendered after the title and before the description but outside the title, such as
+     * type or status badges. The dialog keeps the title alone as its accessible name.
+     */
+    headerContent?: ReactNode;
+    /** Classes of the block that holds the title, the header content and the description. */
+    headerClassName?: string;
+    /** Classes of the title. */
+    titleClassName?: string;
+    /** Classes of the description. */
+    descriptionClassName?: string;
+    /** Classes of the footer. */
+    footerClassName?: string;
+};
 /**
- * Renders the dialog description in Arc's secondary text. Plain text that changes while open swaps with Arc's rise.
- * @param props - Primitive properties and optional consumer overrides.
- * @returns The styled primitive with its original interaction contract.
+ * The portaled overlay and panel with a titled header, the body, an optional footer and the built-in close button.
+ * @param props - Title, header content, description, body, footer, close button options and ref, part classes and
+ *   Radix content props.
+ * @returns The dialog panel.
  */
-declare function DialogDescription({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+declare function DialogContent({ title, description, children, footer, hideTitle, showCloseButton, closeButtonPlacement, closeLabel, closeButtonRef, headerContent, headerClassName, titleClassName, descriptionClassName, footerClassName, onOpenAutoFocus, ...props }: DialogContentProps): import("react").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogTrigger };