beez-ui 2.5.0 → 2.6.1

package/dist/components/checkbox.d.ts

@@ -1,4 +1,15 @@
-import * as React from "react";
+import type { ComponentProps } from "react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
-declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> & {
+    /** Visible label beside the box, tied to it with `htmlFor`. */
+    label?: string;
+    /** Helper copy under the label, linked through `aria-describedby`. */
+    description?: string;
+};
+/**
+ * A choice that can be on, off or indeterminate, controlled or uncontrolled like Radix's checkbox.
+ * @param checkboxProps - Every Radix checkbox prop, including `ref`, plus optional Arc `label` and `description`.
+ * @returns The labelled field when `label` or `description` is passed, otherwise the bare control.
+ */
+declare function Checkbox({ className, label, description, id, checked, defaultChecked, onCheckedChange, "aria-describedby": ariaDescribedBy, ...props }: CheckboxProps): import("react").JSX.Element;
 export { Checkbox };

package/dist/components/checkbox.js

@@ -1,64 +1,324 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import * as React from "react";
+/**
+* Arc's Checkbox (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): an 18px square whose fill springs in
+* while the check draws itself, and whose check morphs into the dash of the indeterminate state instead of swapping.
+* Only the square answers a press, so the hit area and the label never move. With a `label` or `description` it renders
+* Arc's labelled field; without them it renders the bare control, for rows, tables and forms that place their own
+* label.
+*/
+import { useId, useState } from "react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { CheckIcon } from "lucide-react";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { motion } from "motion/react";
+import { CHECKBOX_DESCRIPTION_ID_SUFFIX, CHECKBOX_FILL_HIDDEN_SCALE, CHECKBOX_MARK_PATH, CHECKBOX_MARK_STROKE_WIDTH, CHECKBOX_MARK_VIEW_BOX } from "../constants/checkbox.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Arc's control recipe. The bare box keeps its 18px layout box and widens its hit area to 44px with a pseudo-element,
+* so existing rows keep their spacing; the labelled field gives the box Arc's full control height instead. The square
+* dips on press, hover answers only on hover-capable fine pointers, and keyboard focus uses the theme's outline.
+*/
+const checkboxClassName = "peer group/checkbox relative grid shrink-0 cursor-pointer place-items-center rounded-(--radius-control) border-0 bg-transparent p-0 text-(--control-glyph) [-webkit-tap-highlight-color:transparent] group-has-disabled/field:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 not-data-[labelled]:size-[18px] not-data-[labelled]:rounded-[5px] not-data-[labelled]:after:absolute not-data-[labelled]:after:-inset-[13px] data-[labelled]:size-(--control-height-md) hover-fine:data-[state=unchecked]:not-disabled:[&_[data-slot=checkbox-visual]]:border-text-muted active:not-disabled:[&_[data-slot=checkbox-visual]]:scale-95 active:not-disabled:[&_[data-slot=checkbox-visual]]:[transition:border-color_var(--duration-fast)_var(--ease-standard),scale_var(--duration-instant)_var(--ease-standard)] data-[state=checked]:[&_[data-slot=checkbox-visual]]:border-(--control-on) data-[state=indeterminate]:[&_[data-slot=checkbox-visual]]:border-(--control-on) aria-invalid:data-[state=unchecked]:[&_[data-slot=checkbox-visual]]:border-danger motion-reduce:[&_[data-slot=checkbox-visual]]:scale-100 motion-reduce:[&_[data-slot=checkbox-visual]]:transition-none";
+/** The square: a border on the surface that the fill covers when checked. */
+const visualClassName = "relative block size-[18px] rounded-[5px] border border-border-strong bg-surface [transition:border-color_var(--duration-fast)_var(--ease-standard),scale_var(--duration-spring)_var(--ease-spring)]";
+/**
+* A choice that can be on, off or indeterminate, controlled or uncontrolled like Radix's checkbox.
+* @param checkboxProps - Every Radix checkbox prop, including `ref`, plus optional Arc `label` and `description`.
+* @returns The labelled field when `label` or `description` is passed, otherwise the bare control.
+*/
 function Checkbox(t0) {
-	const $ = _c(9);
+	const $ = _c(65);
+	let ariaDescribedBy;
+	let checked;
 	let className;
+	let defaultChecked;
+	let description;
+	let id;
+	let label;
+	let onCheckedChange;
 	let props;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, label, description, id, checked, defaultChecked, onCheckedChange, "aria-describedby": ariaDescribedBy, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-[color,background-color,border-color,box-shadow] outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className);
+		$[1] = ariaDescribedBy;
+		$[2] = checked;
 		$[3] = className;
-		$[4] = t1;
+		$[4] = defaultChecked;
+		$[5] = description;
+		$[6] = id;
+		$[7] = label;
+		$[8] = onCheckedChange;
+		$[9] = props;
 	} else {
-		t1 = $[4];
+		ariaDescribedBy = $[1];
+		checked = $[2];
+		className = $[3];
+		defaultChecked = $[4];
+		description = $[5];
+		id = $[6];
+		label = $[7];
+		onCheckedChange = $[8];
+		props = $[9];
 	}
+	const generatedId = useId();
+	const controlId = id ?? generatedId;
+	const descriptionId = `${controlId}-${CHECKBOX_DESCRIPTION_ID_SUFFIX}`;
+	const reduceMotion = usePrefersReducedMotion();
+	const [uncontrolledState, setUncontrolledState] = useState(defaultChecked ?? false);
+	const state = checked ?? uncontrolledState;
+	const isOn = state !== false;
+	const isField = Boolean(label || description);
+	const t1 = isOn ? ARC_DURATION.instant : ARC_DURATION.fast;
 	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "check",
-			children: /* @__PURE__ */ _jsx(CheckboxPrimitive.Indicator, {
-				forceMount: true,
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = [...ARC_EASE.standard];
+		$[10] = t2;
+	} else {
+		t2 = $[10];
+	}
+	let t3;
+	if ($[11] !== t1) {
+		t3 = {
+			duration: t1,
+			ease: t2
+		};
+		$[11] = t1;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	const fade = t3;
+	let t4;
+	if ($[13] !== ariaDescribedBy || $[14] !== description || $[15] !== descriptionId) {
+		t4 = [ariaDescribedBy, description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined;
+		$[13] = ariaDescribedBy;
+		$[14] = description;
+		$[15] = descriptionId;
+		$[16] = t4;
+	} else {
+		t4 = $[16];
+	}
+	const describedBy = t4;
+	const t5 = isField ? "" : undefined;
+	let t6;
+	if ($[17] !== className) {
+		t6 = cn(checkboxClassName, className);
+		$[17] = className;
+		$[18] = t6;
+	} else {
+		t6 = $[18];
+	}
+	const t7 = isField ? controlId : id;
+	let t8;
+	if ($[19] !== checked || $[20] !== onCheckedChange) {
+		t8 = (nextState) => {
+			if (checked === undefined) {
+				setUncontrolledState(nextState);
+			}
+			onCheckedChange?.(nextState);
+		};
+		$[19] = checked;
+		$[20] = onCheckedChange;
+		$[21] = t8;
+	} else {
+		t8 = $[21];
+	}
+	const t9 = isOn ? 1 : 0;
+	const t10 = isOn ? 1 : CHECKBOX_FILL_HIDDEN_SCALE;
+	let t11;
+	if ($[22] !== t10 || $[23] !== t9) {
+		t11 = {
+			opacity: t9,
+			scale: t10
+		};
+		$[22] = t10;
+		$[23] = t9;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	let t12;
+	if ($[25] !== fade || $[26] !== reduceMotion) {
+		t12 = reduceMotion ? { duration: 0 } : {
+			scale: ARC_SPRING_SNAPPY,
+			opacity: fade
+		};
+		$[25] = fade;
+		$[26] = reduceMotion;
+		$[27] = t12;
+	} else {
+		t12 = $[27];
+	}
+	let t13;
+	if ($[28] !== t11 || $[29] !== t12) {
+		t13 = /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute -inset-px rounded-[inherit] bg-(--control-on)",
+			initial: false,
+			animate: t11,
+			transition: t12
+		});
+		$[28] = t11;
+		$[29] = t12;
+		$[30] = t13;
+	} else {
+		t13 = $[30];
+	}
+	const t14 = state === "indeterminate" ? CHECKBOX_MARK_PATH.dash : CHECKBOX_MARK_PATH.check;
+	const t15 = isOn ? 1 : 0;
+	const t16 = isOn ? 1 : 0;
+	let t17;
+	if ($[31] !== t14 || $[32] !== t15 || $[33] !== t16) {
+		t17 = {
+			d: t14,
+			pathLength: t15,
+			opacity: t16
+		};
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+	} else {
+		t17 = $[34];
+	}
+	let t18;
+	if ($[35] !== fade || $[36] !== reduceMotion) {
+		t18 = reduceMotion ? { duration: 0 } : {
+			d: ARC_SPRING_MORPH,
+			pathLength: ARC_SPRING_SNAPPY,
+			opacity: fade
+		};
+		$[35] = fade;
+		$[36] = reduceMotion;
+		$[37] = t18;
+	} else {
+		t18 = $[37];
+	}
+	let t19;
+	if ($[38] !== t17 || $[39] !== t18) {
+		t19 = /* @__PURE__ */ _jsx(CheckboxPrimitive.Indicator, {
+			forceMount: true,
+			asChild: true,
+			children: /* @__PURE__ */ _jsx("svg", {
 				"data-slot": "checkbox-indicator",
-				className: "grid place-content-center text-current transition-none data-unchecked:opacity-0 [&>svg]:size-3.5",
-				children: /* @__PURE__ */ _jsx(CheckIcon, {})
+				className: "absolute -inset-px size-[18px] overflow-visible",
+				viewBox: CHECKBOX_MARK_VIEW_BOX,
+				fill: "none",
+				focusable: "false",
+				children: /* @__PURE__ */ _jsx(motion.path, {
+					initial: false,
+					animate: t17,
+					transition: t18,
+					stroke: "currentColor",
+					strokeWidth: CHECKBOX_MARK_STROKE_WIDTH,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
 			})
 		});
-		$[5] = t2;
+		$[38] = t17;
+		$[39] = t18;
+		$[40] = t19;
 	} else {
-		t2 = $[5];
+		t19 = $[40];
 	}
-	let t3;
-	if ($[6] !== props || $[7] !== t1) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "toggle",
-			children: /* @__PURE__ */ _jsx(CheckboxPrimitive.Root, {
-				"data-slot": "checkbox",
-				className: t1,
-				...props,
-				children: t2
-			})
+	let t20;
+	if ($[41] !== t13 || $[42] !== t19) {
+		t20 = /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "checkbox-visual",
+			className: visualClassName,
+			"aria-hidden": "true",
+			children: [t13, t19]
+		});
+		$[41] = t13;
+		$[42] = t19;
+		$[43] = t20;
+	} else {
+		t20 = $[43];
+	}
+	let t21;
+	if ($[44] !== describedBy || $[45] !== props || $[46] !== state || $[47] !== t20 || $[48] !== t5 || $[49] !== t6 || $[50] !== t7 || $[51] !== t8) {
+		t21 = /* @__PURE__ */ _jsx(CheckboxPrimitive.Root, {
+			"data-slot": "checkbox",
+			"data-labelled": t5,
+			className: t6,
+			...props,
+			id: t7,
+			checked: state,
+			"aria-describedby": describedBy,
+			onCheckedChange: t8,
+			children: t20
+		});
+		$[44] = describedBy;
+		$[45] = props;
+		$[46] = state;
+		$[47] = t20;
+		$[48] = t5;
+		$[49] = t6;
+		$[50] = t7;
+		$[51] = t8;
+		$[52] = t21;
+	} else {
+		t21 = $[52];
+	}
+	const control = t21;
+	if (!isField) {
+		return control;
+	}
+	let t22;
+	if ($[53] !== controlId || $[54] !== label) {
+		t22 = label ? /* @__PURE__ */ _jsx("label", {
+			htmlFor: controlId,
+			"data-slot": "checkbox-label",
+			className: "cursor-pointer text-sm leading-(--leading-body) font-medium text-foreground",
+			children: label
+		}) : null;
+		$[53] = controlId;
+		$[54] = label;
+		$[55] = t22;
+	} else {
+		t22 = $[55];
+	}
+	let t23;
+	if ($[56] !== description || $[57] !== descriptionId) {
+		t23 = description ? /* @__PURE__ */ _jsx("span", {
+			id: descriptionId,
+			"data-slot": "checkbox-description",
+			className: "text-xs leading-(--leading-body) text-text-muted",
+			children: description
+		}) : null;
+		$[56] = description;
+		$[57] = descriptionId;
+		$[58] = t23;
+	} else {
+		t23 = $[58];
+	}
+	let t24;
+	if ($[59] !== t22 || $[60] !== t23) {
+		t24 = /* @__PURE__ */ _jsxs("div", {
+			className: "ml-px grid min-w-0 gap-0.5 pt-[calc((var(--control-height-md)-var(--text-sm)*var(--leading-body))/2)]",
+			children: [t22, t23]
+		});
+		$[59] = t22;
+		$[60] = t23;
+		$[61] = t24;
+	} else {
+		t24 = $[61];
+	}
+	let t25;
+	if ($[62] !== control || $[63] !== t24) {
+		t25 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "checkbox-field",
+			className: "inline-flex min-w-0 items-start",
+			children: [control, t24]
 		});
-		$[6] = props;
-		$[7] = t1;
-		$[8] = t3;
+		$[62] = control;
+		$[63] = t24;
+		$[64] = t25;
 	} else {
-		t3 = $[8];
+		t25 = $[64];
 	}
-	return t3;
+	return t25;
 }
 export { Checkbox };

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

@@ -0,0 +1,27 @@
+import type { ReactNode } 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";
+/**
+ * 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,137 @@
+"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
+* `AlertDialog`: 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 entrance stays beez-ui's center morph, not Arc's rise.
+*/
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { DIALOG_TEXT_SWAP_OFFSET_EM } from "../constants/dialog.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
+import { jsx as _jsx } 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";
+/**
+* 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

@@ -1,3 +1,9 @@
+/**
+ * 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. It keeps beez-ui's composable parts, the center morph entrance and the
+ * viewport close button placement instead of Arc's single `title`/`description` content and rise entrance.
+ */
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
@@ -20,9 +26,15 @@ declare function DialogContent({ className, children, showCloseButton, closeButt
     showCloseButton?: boolean;
     closeButtonPlacement?: DialogCloseButtonPlacement;
 }): React.JSX.Element;
+/**
+ * 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.
+ */
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 /**
- * Separates dialog actions with a bordered footer matching the content padding.
+ * 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.
  */
@@ -30,10 +42,15 @@ declare function DialogFooter({ className, showCloseButton, children, ...props }
     showCloseButton?: boolean;
 }): React.JSX.Element;
 /**
- * Renders dialog headings with the shared font at the compact default size.
+ * 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;
+/**
+ * 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.
  */
-declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
-declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+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, };