@astra-kit/ui 0.0.0-stage → 0.0.0

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

@@ -0,0 +1,49 @@
+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]";
+/**
+ * Arc's panel: raised surface, hairline border, surface radius and floating shadow, padded on Arc's 24px step.
+ * Placement, width and scrolling stay with each dialog.
+ */
+export declare const dialogSurfaceClassName = "z-50 gap-(--space-5) rounded-(--radius-surface) border border-border bg-surface-raised p-(--space-6) text-sm leading-(--leading-body) text-foreground shadow-(--shadow-floating) outline-none";
+/** Edge-to-edge action row: bleeds through the panel padding and sits under a hairline like Arc's header divider. */
+export declare const dialogFooterClassName = "-mx-(--space-6) -mb-(--space-6) flex flex-col-reverse gap-(--space-2) rounded-b-[calc(var(--radius-surface)-1px)] border-t border-border bg-surface-muted/50 px-(--space-6) py-(--space-4) sm:flex-row sm:justify-end";
+/** Arc's title: body font at 18px, medium weight, body leading so a heading reset never shrinks it. */
+export declare const dialogTitleClassName = "font-sans text-lg leading-(--leading-body) font-medium tracking-(--tracking-body) [overflow-wrap:anywhere]";
+/** Arc's description: secondary text at 14px on body leading. */
+export declare const dialogDescriptionClassName = "text-sm leading-(--leading-body) text-text-secondary [overflow-wrap:anywhere] *:[a]:underline *:[a]:underline-offset-3 hover-fine:*:[a]:text-foreground";
+/**
+ * Arc's compact close button: 32px, bordered, half-tinted, quiet until a fine pointer hovers it. Press feedback comes
+ * 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.
+ * @param children - Copy of the title or description. Only plain text and numbers animate when they change.
+ * @param asChild - Whether the primitive renders the consumer's element, which must then receive it untouched.
+ * @returns The copy, wrapped for the swap when it is plain text.
+ */
+export declare function withDialogSwapText(children: ReactNode, asChild?: boolean): ReactNode;

package/dist/components/dialog-surface.js

@@ -0,0 +1,220 @@
+"use client";
+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
+* 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 { 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 { 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]";
+/**
+* Arc's panel: raised surface, hairline border, surface radius and floating shadow, padded on Arc's 24px step.
+* Placement, width and scrolling stay with each dialog.
+*/
+export const dialogSurfaceClassName = "z-50 gap-(--space-5) rounded-(--radius-surface) border border-border bg-surface-raised p-(--space-6) text-sm leading-(--leading-body) text-foreground shadow-(--shadow-floating) outline-none";
+/** Edge-to-edge action row: bleeds through the panel padding and sits under a hairline like Arc's header divider. */
+export const dialogFooterClassName = "-mx-(--space-6) -mb-(--space-6) flex flex-col-reverse gap-(--space-2) rounded-b-[calc(var(--radius-surface)-1px)] border-t border-border bg-surface-muted/50 px-(--space-6) py-(--space-4) sm:flex-row sm:justify-end";
+/** Arc's title: body font at 18px, medium weight, body leading so a heading reset never shrinks it. */
+export const dialogTitleClassName = "font-sans text-lg leading-(--leading-body) font-medium tracking-(--tracking-body) [overflow-wrap:anywhere]";
+/** Arc's description: secondary text at 14px on body leading. */
+export const dialogDescriptionClassName = "text-sm leading-(--leading-body) text-text-secondary [overflow-wrap:anywhere] *:[a]:underline *:[a]:underline-offset-3 hover-fine:*:[a]:text-foreground";
+/**
+* Arc's compact close button: 32px, bordered, half-tinted, quiet until a fine pointer hovers it. Press feedback comes
+* 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(12);
+	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] !== Close || $[10] !== button) {
+		t7 = /* @__PURE__ */ _jsx(Close, {
+			"data-slot": "dialog-close",
+			asChild: true,
+			children: button
+		});
+		$[9] = Close;
+		$[10] = button;
+		$[11] = t7;
+	} else {
+		t7 = $[11];
+	}
+	return t7;
+}
+/**
+* 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.
+* @param props - The copy to render and the ref `AnimatePresence` injects to pop the leaving copy out of layout.
+* @returns The animated copy.
+*/
+function DialogSwapTextItem(t0) {
+	const $ = _c(13);
+	const { children, ref } = t0;
+	const isPresent = useIsPresent();
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const t1 = isPresent ? undefined : true;
+	const t2 = !isPresent || undefined;
+	let t3;
+	if ($[0] !== shouldReduceMotion) {
+		t3 = shouldReduceMotion ? false : {
+			opacity: 0,
+			y: `${DIALOG_TEXT_SWAP_OFFSET_EM.enter}em`,
+			filter: `blur(${ARC_BLUR.soft}px)`
+		};
+		$[0] = shouldReduceMotion;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			opacity: 1,
+			y: 0,
+			filter: "blur(0px)"
+		};
+		$[2] = t4;
+	} else {
+		t4 = $[2];
+	}
+	let t5;
+	if ($[3] !== shouldReduceMotion) {
+		t5 = shouldReduceMotion ? {
+			opacity: 0,
+			transition: { duration: 0 }
+		} : {
+			opacity: 0,
+			y: `${DIALOG_TEXT_SWAP_OFFSET_EM.exit}em`,
+			filter: `blur(${ARC_BLUR.subtle}px)`,
+			transition: {
+				duration: ARC_DURATION.fast,
+				ease: [...ARC_EASE.standard]
+			}
+		};
+		$[3] = shouldReduceMotion;
+		$[4] = t5;
+	} else {
+		t5 = $[4];
+	}
+	let t6;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
+			duration: ARC_DURATION.standard,
+			ease: [...ARC_EASE.enter]
+		};
+		$[5] = t6;
+	} else {
+		t6 = $[5];
+	}
+	let t7;
+	if ($[6] !== children || $[7] !== ref || $[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t5) {
+		t7 = /* @__PURE__ */ _jsx(motion.span, {
+			ref,
+			"data-slot": "dialog-swap-text",
+			className: "block",
+			"aria-hidden": t1,
+			inert: t2,
+			initial: t3,
+			animate: t4,
+			exit: t5,
+			transition: t6,
+			children
+		});
+		$[6] = children;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t7;
+	} else {
+		t7 = $[12];
+	}
+	return t7;
+}
+/**
+* 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.
+* @param children - Copy of the title or description. Only plain text and numbers animate when they change.
+* @param asChild - Whether the primitive renders the consumer's element, which must then receive it untouched.
+* @returns The copy, wrapped for the swap when it is plain text.
+*/
+export function withDialogSwapText(children, asChild = false) {
+	if (asChild || typeof children !== "string" && typeof children !== "number") return children;
+	return /* @__PURE__ */ _jsx(AnimatePresence, {
+		mode: "popLayout",
+		initial: false,
+		children: /* @__PURE__ */ _jsx(DialogSwapTextItem, { children }, String(children))
+	});
+}

package/dist/components/dialog.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a focused surface for decisions that need
+ * 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. @astra-kit/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 { 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 @astra-kit/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;
+};
+/**
+ * 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 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>;
+/**
+ * Opens the dialog. Use `asChild` to render your own button.
+ * @param props - Radix trigger props.
+ * @returns The trigger.
+ */
+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>;
+/**
+ * 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 DialogClose(props: DialogCloseProps): import("react").JSX.Element;
+/** Props of `DialogContent`: Arc's titled panel, @astra-kit/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;
+    /**
+     * `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;
+};
+/**
+ * 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 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 };

package/dist/components/dialog.js

@@ -0,0 +1,320 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a focused surface for decisions that need
+* 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. @astra-kit/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 { createContext, useContext } from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+import { AlertDialog as AlertDialogRoot, AlertDialogContent as AlertDialogContentPrimitive, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
+import { Dialog as DialogRoot, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive, DialogDescription as DialogDescriptionPrimitive, DialogFooter as DialogFooterPrimitive, DialogHeader as DialogHeaderPrimitive, DialogTitle as DialogTitlePrimitive, DialogTrigger as DialogTriggerPrimitive } from "./primitives/dialog.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Marks the consumer's close controls, so an alert dialog can focus the first one when it opens. */
+const DIALOG_CLOSE_ACTION_ATTRIBUTE = "data-dialog-close-action";
+/** Whether the surrounding `Dialog` runs in `alert` mode. */
+const DialogAlertContext = createContext(false);
+/**
+* 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.
+*/
+function Dialog(t0) {
+	const $ = _c(11);
+	let modal;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({alert: t1, modal, ...props} = t0);
+		$[0] = t0;
+		$[1] = modal;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		modal = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const alert = t1 === undefined ? false : t1;
+	let t2;
+	if ($[4] !== alert || $[5] !== modal || $[6] !== props) {
+		t2 = alert ? /* @__PURE__ */ _jsx(AlertDialogRoot, { ...props }) : /* @__PURE__ */ _jsx(DialogRoot, {
+			modal,
+			...props
+		});
+		$[4] = alert;
+		$[5] = modal;
+		$[6] = props;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	let t3;
+	if ($[8] !== alert || $[9] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(DialogAlertContext.Provider, {
+			value: alert,
+			children: t2
+		});
+		$[8] = alert;
+		$[9] = t2;
+		$[10] = t3;
+	} else {
+		t3 = $[10];
+	}
+	return t3;
+}
+/**
+* Opens the dialog. Use `asChild` to render your own button.
+* @param props - Radix trigger props.
+* @returns The trigger.
+*/
+function DialogTrigger(props) {
+	return useContext(DialogAlertContext) ? /* @__PURE__ */ _jsx(AlertDialogTrigger, { ...props }) : /* @__PURE__ */ _jsx(DialogTriggerPrimitive, { ...props });
+}
+/**
+* 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.
+*/
+function DialogClose(props) {
+	const $ = _c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { [DIALOG_CLOSE_ACTION_ATTRIBUTE]: "" };
+		$[0] = t0;
+	} else {
+		t0 = $[0];
+	}
+	const closeActionProps = t0;
+	return useContext(DialogAlertContext) ? /* @__PURE__ */ _jsx(AlertDialogPrimitive.Cancel, {
+		"data-slot": "dialog-close",
+		...closeActionProps,
+		...props
+	}) : /* @__PURE__ */ _jsx(DialogClosePrimitive, {
+		...closeActionProps,
+		...props
+	});
+}
+/**
+* Focuses the first consumer close control of an alert dialog when it opens, or the panel when there is none.
+* @param event - Radix's open auto-focus event, already handed to the consumer's handler.
+*/
+function focusFirstCloseAction(event) {
+	if (event.defaultPrevented) return;
+	const panel = event.currentTarget ?? event.target;
+	if (!(panel instanceof HTMLElement)) return;
+	event.preventDefault();
+	const firstCloseAction = panel.querySelector(`[${DIALOG_CLOSE_ACTION_ATTRIBUTE}]`);
+	(firstCloseAction ?? panel).focus({ preventScroll: true });
+}
+/**
+* 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.
+*/
+function DialogContent(t0) {
+	const $ = _c(60);
+	let children;
+	let closeButtonRef;
+	let closeLabel;
+	let description;
+	let descriptionClassName;
+	let footer;
+	let footerClassName;
+	let headerClassName;
+	let headerContent;
+	let onOpenAutoFocus;
+	let props;
+	let showCloseButton;
+	let t1;
+	let t2;
+	let title;
+	let titleClassName;
+	if ($[0] !== t0) {
+		({title, description, children, footer, hideTitle: t1, showCloseButton, closeButtonPlacement: t2, closeLabel, closeButtonRef, headerContent, headerClassName, titleClassName, descriptionClassName, footerClassName, onOpenAutoFocus, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = closeButtonRef;
+		$[3] = closeLabel;
+		$[4] = description;
+		$[5] = descriptionClassName;
+		$[6] = footer;
+		$[7] = footerClassName;
+		$[8] = headerClassName;
+		$[9] = headerContent;
+		$[10] = onOpenAutoFocus;
+		$[11] = props;
+		$[12] = showCloseButton;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = title;
+		$[16] = titleClassName;
+	} else {
+		children = $[1];
+		closeButtonRef = $[2];
+		closeLabel = $[3];
+		description = $[4];
+		descriptionClassName = $[5];
+		footer = $[6];
+		footerClassName = $[7];
+		headerClassName = $[8];
+		headerContent = $[9];
+		onOpenAutoFocus = $[10];
+		props = $[11];
+		showCloseButton = $[12];
+		t1 = $[13];
+		t2 = $[14];
+		title = $[15];
+		titleClassName = $[16];
+	}
+	const hideTitle = t1 === undefined ? false : t1;
+	const closeButtonPlacement = t2 === undefined ? "content" : t2;
+	const alert = useContext(DialogAlertContext);
+	const Content = alert ? AlertDialogContentPrimitive : DialogContentPrimitive;
+	const Header = alert ? AlertDialogHeader : DialogHeaderPrimitive;
+	const Title = alert ? AlertDialogTitle : DialogTitlePrimitive;
+	const Description = alert ? AlertDialogDescription : DialogDescriptionPrimitive;
+	const Footer = alert ? AlertDialogFooter : DialogFooterPrimitive;
+	const hasDescription = description !== undefined && description !== null && description !== false;
+	const hasHeaderContent = headerContent !== undefined && headerContent !== null && headerContent !== false;
+	let t3;
+	if ($[17] !== hasDescription || $[18] !== props) {
+		t3 = hasDescription || "aria-describedby" in props ? {} : { "aria-describedby": undefined };
+		$[17] = hasDescription;
+		$[18] = props;
+		$[19] = t3;
+	} else {
+		t3 = $[19];
+	}
+	const describedBy = t3;
+	const t4 = hideTitle && "sr-only";
+	let t5;
+	if ($[20] !== t4 || $[21] !== titleClassName) {
+		t5 = cn(t4, titleClassName);
+		$[20] = t4;
+		$[21] = titleClassName;
+		$[22] = t5;
+	} else {
+		t5 = $[22];
+	}
+	let t6;
+	if ($[23] !== Title || $[24] !== t5 || $[25] !== title) {
+		t6 = /* @__PURE__ */ _jsx(Title, {
+			className: t5,
+			children: title
+		});
+		$[23] = Title;
+		$[24] = t5;
+		$[25] = title;
+		$[26] = t6;
+	} else {
+		t6 = $[26];
+	}
+	const titleElement = t6;
+	let t7;
+	if ($[27] !== Description || $[28] !== description || $[29] !== descriptionClassName || $[30] !== hasDescription) {
+		t7 = hasDescription ? /* @__PURE__ */ _jsx(Description, {
+			className: descriptionClassName,
+			children: description
+		}) : null;
+		$[27] = Description;
+		$[28] = description;
+		$[29] = descriptionClassName;
+		$[30] = hasDescription;
+		$[31] = t7;
+	} else {
+		t7 = $[31];
+	}
+	const descriptionElement = t7;
+	const t8 = showCloseButton ?? !alert;
+	let t9;
+	if ($[32] !== alert || $[33] !== onOpenAutoFocus) {
+		t9 = (event) => {
+			onOpenAutoFocus?.(event);
+			if (alert) {
+				focusFirstCloseAction(event);
+			}
+		};
+		$[32] = alert;
+		$[33] = onOpenAutoFocus;
+		$[34] = t9;
+	} else {
+		t9 = $[34];
+	}
+	const t10 = hideTitle ? titleElement : null;
+	let t11;
+	if ($[35] !== Header || $[36] !== descriptionElement || $[37] !== hasHeaderContent || $[38] !== headerClassName || $[39] !== headerContent || $[40] !== hideTitle || $[41] !== titleElement) {
+		t11 = !hideTitle || descriptionElement || hasHeaderContent ? /* @__PURE__ */ _jsxs(Header, {
+			className: headerClassName,
+			children: [
+				hideTitle ? null : titleElement,
+				hasHeaderContent ? headerContent : null,
+				descriptionElement
+			]
+		}) : null;
+		$[35] = Header;
+		$[36] = descriptionElement;
+		$[37] = hasHeaderContent;
+		$[38] = headerClassName;
+		$[39] = headerContent;
+		$[40] = hideTitle;
+		$[41] = titleElement;
+		$[42] = t11;
+	} else {
+		t11 = $[42];
+	}
+	let t12;
+	if ($[43] !== Footer || $[44] !== footer || $[45] !== footerClassName) {
+		t12 = footer === undefined || footer === null || footer === false ? null : /* @__PURE__ */ _jsx(Footer, {
+			className: footerClassName,
+			children: footer
+		});
+		$[43] = Footer;
+		$[44] = footer;
+		$[45] = footerClassName;
+		$[46] = t12;
+	} else {
+		t12 = $[46];
+	}
+	let t13;
+	if ($[47] !== Content || $[48] !== children || $[49] !== closeButtonPlacement || $[50] !== closeButtonRef || $[51] !== closeLabel || $[52] !== describedBy || $[53] !== props || $[54] !== t10 || $[55] !== t11 || $[56] !== t12 || $[57] !== t8 || $[58] !== t9) {
+		t13 = /* @__PURE__ */ _jsxs(Content, {
+			...describedBy,
+			...props,
+			showCloseButton: t8,
+			closeButtonPlacement,
+			closeLabel,
+			closeButtonRef,
+			onOpenAutoFocus: t9,
+			children: [
+				t10,
+				t11,
+				children,
+				t12
+			]
+		});
+		$[47] = Content;
+		$[48] = children;
+		$[49] = closeButtonPlacement;
+		$[50] = closeButtonRef;
+		$[51] = closeLabel;
+		$[52] = describedBy;
+		$[53] = props;
+		$[54] = t10;
+		$[55] = t11;
+		$[56] = t12;
+		$[57] = t8;
+		$[58] = t9;
+		$[59] = t13;
+	} else {
+		t13 = $[59];
+	}
+	return t13;
+}
+export { Dialog, DialogClose, DialogContent, DialogTrigger };