beez-ui 2.5.0 → 2.6.1

package/dist/components/dialog.js

@@ -1,13 +1,21 @@
 "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, 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";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
+import { keepOpenOnToastInteraction } from "../lib/toast-layer.js";
 import { Button } from "./button.js";
 import { ControlButton } from "./control-button.js";
 import { XIcon } from "lucide-react";
+import { withDialogSwapText, dialogCloseButtonClassName, dialogDescriptionClassName, dialogFooterClassName, dialogOverlayClassName, dialogSurfaceClassName, dialogTitleClassName } from "./dialog-surface.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Dialog(t0) {
 	const $ = _c(9);
@@ -134,7 +142,7 @@ function DialogOverlay(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-md ", className);
+		t1 = cn(dialogOverlayClassName, className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -164,15 +172,22 @@ function DialogOverlay(t0) {
 * @returns The close control for wide layouts that keep the panel clear of controls.
 */
 function DialogViewportCloseButton() {
-	const $ = _c(1);
+	const $ = _c(2);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
+		t0 = cn(dialogCloseButtonClassName, "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");
+		$[0] = t0;
+	} else {
+		t0 = $[0];
+	}
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
 			"data-slot": "dialog-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsxs(ControlButton, {
 				variant: "ghost",
-				className: "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",
+				className: t0,
 				size: "icon-sm",
 				children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
 					className: "sr-only",
@@ -180,11 +195,11 @@ function DialogViewportCloseButton() {
 				})]
 			})
 		});
-		$[0] = t0;
+		$[1] = t1;
 	} else {
-		t0 = $[0];
+		t1 = $[1];
 	}
-	return t0;
+	return t1;
 }
 /**
 * Renders compact dialog content with viewport-safe scrolling. The panel unfolds from its
@@ -196,7 +211,7 @@ function DialogViewportCloseButton() {
 * @returns The styled primitive with its original interaction contract.
 */
 function DialogContent(t0) {
-	const $ = _c(25);
+	const $ = _c(29);
 	let children;
 	let className;
 	let props;
@@ -230,35 +245,44 @@ function DialogContent(t0) {
 	} else {
 		t4 = $[6];
 	}
-	const t5 = closeButtonPlacement === "viewport" ? "inset-0 m-auto h-fit" : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
-	let t6;
-	if ($[7] !== className || $[8] !== t5) {
-		t6 = cn("fixed z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] gap-4 overflow-y-auto rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 outline-none sm:max-w-sm ", t5, className);
+	const t5 = showCloseButton ? closeButtonPlacement : undefined;
+	const t6 = closeButtonPlacement === "viewport" ? "inset-0 m-auto h-fit" : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+	let t7;
+	if ($[7] !== className || $[8] !== t6) {
+		t7 = cn(dialogSurfaceClassName, "fixed grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain sm:max-w-[440px]", t6, className);
 		$[7] = className;
-		$[8] = t5;
-		$[9] = t6;
+		$[8] = t6;
+		$[9] = t7;
 	} else {
-		t6 = $[9];
+		t7 = $[9];
 	}
-	let t7;
-	if ($[10] !== closeButtonPlacement || $[11] !== showCloseButton) {
-		t7 = showCloseButton && closeButtonPlacement === "viewport" && /* @__PURE__ */ _jsx(DialogViewportCloseButton, {});
-		$[10] = closeButtonPlacement;
-		$[11] = showCloseButton;
-		$[12] = t7;
+	let t8;
+	if ($[10] !== props.onInteractOutside) {
+		t8 = keepOpenOnToastInteraction(props.onInteractOutside);
+		$[10] = props.onInteractOutside;
+		$[11] = t8;
 	} else {
-		t7 = $[12];
+		t8 = $[11];
 	}
-	let t8;
-	if ($[13] !== closeButtonPlacement || $[14] !== showCloseButton) {
-		t8 = showCloseButton && closeButtonPlacement === "content" && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
+	let t9;
+	if ($[12] !== closeButtonPlacement || $[13] !== showCloseButton) {
+		t9 = showCloseButton && closeButtonPlacement === "viewport" && /* @__PURE__ */ _jsx(DialogViewportCloseButton, {});
+		$[12] = closeButtonPlacement;
+		$[13] = showCloseButton;
+		$[14] = t9;
+	} else {
+		t9 = $[14];
+	}
+	let t10;
+	if ($[15] !== closeButtonPlacement || $[16] !== showCloseButton) {
+		t10 = showCloseButton && closeButtonPlacement === "content" && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
 			"data-slot": "dialog-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
 				kind: "delayed-pop",
 				children: /* @__PURE__ */ _jsxs(ControlButton, {
 					variant: "ghost",
-					className: "absolute top-2 right-2",
+					className: cn(dialogCloseButtonClassName, "absolute top-[calc(var(--space-6)+(var(--text-lg)*var(--leading-body)-var(--space-8))/2)] right-(--space-6)"),
 					size: "icon-sm",
 					children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
 						className: "sr-only",
@@ -267,55 +291,65 @@ function DialogContent(t0) {
 				})
 			})
 		});
-		$[13] = closeButtonPlacement;
-		$[14] = showCloseButton;
-		$[15] = t8;
+		$[15] = closeButtonPlacement;
+		$[16] = showCloseButton;
+		$[17] = t10;
 	} else {
-		t8 = $[15];
+		t10 = $[17];
 	}
-	let t9;
-	if ($[16] !== children || $[17] !== props || $[18] !== t6 || $[19] !== t7 || $[20] !== t8) {
-		t9 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
+	let t11;
+	if ($[18] !== children || $[19] !== props || $[20] !== t10 || $[21] !== t5 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "center-morph",
 			children: /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
 				forceMount: true,
 				"data-slot": "dialog-content",
-				className: t6,
+				"data-close-button-placement": t5,
+				className: t7,
 				...props,
+				onInteractOutside: t8,
 				children: [
 					children,
-					t7,
-					t8
+					t9,
+					t10
 				]
 			})
 		})] });
-		$[16] = children;
-		$[17] = props;
-		$[18] = t6;
-		$[19] = t7;
-		$[20] = t8;
-		$[21] = t9;
-	} else {
-		t9 = $[21];
-	}
-	let t10;
-	if ($[22] !== props.forceMount || $[23] !== t9) {
-		t10 = /* @__PURE__ */ _jsx(DialogPortal, {
+		$[18] = children;
+		$[19] = props;
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+		$[25] = t11;
+	} else {
+		t11 = $[25];
+	}
+	let t12;
+	if ($[26] !== props.forceMount || $[27] !== t11) {
+		t12 = /* @__PURE__ */ _jsx(DialogPortal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "dialog",
 				forceMount: t3,
-				children: t9
+				children: t11
 			})
 		});
-		$[22] = props.forceMount;
-		$[23] = t9;
-		$[24] = t10;
+		$[26] = props.forceMount;
+		$[27] = t11;
+		$[28] = t12;
 	} else {
-		t10 = $[24];
+		t12 = $[28];
 	}
-	return t10;
+	return t12;
 }
+/**
+* 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.
+*/
 function DialogHeader(t0) {
 	const $ = _c(8);
 	let className;
@@ -331,7 +365,7 @@ function DialogHeader(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("flex flex-col gap-2", className);
+		t1 = cn("flex flex-col gap-(--space-2) in-data-[close-button-placement=content]:pr-[calc(var(--space-8)+var(--space-5))]", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -353,7 +387,7 @@ function DialogHeader(t0) {
 	return t2;
 }
 /**
-* 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.
 */
@@ -379,7 +413,7 @@ function DialogFooter(t0) {
 	const showCloseButton = t1 === undefined ? false : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className);
+		t2 = cn(dialogFooterClassName, className);
 		$[5] = className;
 		$[6] = t2;
 	} else {
@@ -418,80 +452,113 @@ function DialogFooter(t0) {
 	return t4;
 }
 /**
-* 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.
 */
 function DialogTitle(t0) {
-	const $ = _c(8);
+	const $ = _c(13);
+	let children;
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
 	} else {
-		className = $[1];
-		props = $[2];
+		children = $[1];
+		className = $[2];
+		props = $[3];
 	}
 	let t1;
-	if ($[3] !== className) {
-		t1 = cn("font-heading text-base leading-none font-medium", className);
-		$[3] = className;
-		$[4] = t1;
+	if ($[4] !== className) {
+		t1 = cn(dialogTitleClassName, className);
+		$[4] = className;
+		$[5] = t1;
 	} else {
-		t1 = $[4];
+		t1 = $[5];
 	}
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(DialogPrimitive.Title, {
+	if ($[6] !== children || $[7] !== props.asChild) {
+		t2 = withDialogSwapText(children, props.asChild);
+		$[6] = children;
+		$[7] = props.asChild;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(DialogPrimitive.Title, {
 			"data-slot": "dialog-title",
 			className: t1,
-			...props
+			...props,
+			children: t2
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
 	} else {
-		t2 = $[7];
+		t3 = $[12];
 	}
-	return t2;
+	return t3;
 }
+/**
+* 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.
+*/
 function DialogDescription(t0) {
-	const $ = _c(8);
+	const $ = _c(13);
+	let children;
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
 	} else {
-		className = $[1];
-		props = $[2];
+		children = $[1];
+		className = $[2];
+		props = $[3];
 	}
 	let t1;
-	if ($[3] !== className) {
-		t1 = cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className);
-		$[3] = className;
-		$[4] = t1;
+	if ($[4] !== className) {
+		t1 = cn(dialogDescriptionClassName, className);
+		$[4] = className;
+		$[5] = t1;
 	} else {
-		t1 = $[4];
+		t1 = $[5];
 	}
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(DialogPrimitive.Description, {
+	if ($[6] !== children || $[7] !== props.asChild) {
+		t2 = withDialogSwapText(children, props.asChild);
+		$[6] = children;
+		$[7] = props.asChild;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(DialogPrimitive.Description, {
 			"data-slot": "dialog-description",
 			className: t1,
-			...props
+			...props,
+			children: t2
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
 	} else {
-		t2 = $[7];
+		t3 = $[12];
 	}
-	return t2;
+	return t3;
 }
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/dropdown-menu.d.ts

@@ -1,14 +1,27 @@
+/**
+ * Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as beez-ui's composable Radix
+ * menu: Arc's raised panel, item rows, danger tone, separators, placement defaults and staggered item entrance on its
+ * tokens, keeping every subcomponent, prop and `data-slot` of the previous API. The surface keeps beez-ui's reveal
+ * from the trigger edge and the highlight that glides between items with the keyboard.
+ */
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
 declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
 declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
-/** Sizes action menus by their content instead of narrowing them to an icon trigger. */
-declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+/**
+ * Arc's menu panel. It sizes action menus by their content, at least 12rem unless the viewport is narrower, instead
+ * of narrowing them to an icon trigger.
+ * @param props - Primitive properties. Arc's defaults: `align="start"`, a 6px `sideOffset`, a 12px
+ *   `collisionPadding` and `loop`, so arrow keys wrap from the last item to the first.
+ * @returns The portaled menu, animated in and out with its open state.
+ */
+declare function DropdownMenuContent({ className, align, sideOffset, collisionPadding, loop, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
 declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
 /**
- * Renders an action with compact spacing and preserved disabled/destructive states.
- * @param props - Primitive properties and optional consumer overrides.
+ * Renders an action row. `destructive` draws Arc's danger tone: danger text and icon over a faint danger fill when
+ * highlighted.
+ * @param props - Primitive properties, `inset` to align with rows that carry an icon, and the `variant`.
  * @returns The styled primitive with its original interaction contract.
  */
 declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
@@ -16,8 +29,8 @@ declare function DropdownMenuItem({ className, inset, variant, ...props }: React
     variant?: "default" | "destructive";
 }): React.JSX.Element;
 /**
- * Renders a compact selectable checkbox action.
- * @param props - Primitive properties and optional consumer overrides.
+ * Renders a selectable checkbox action with its check at the end of the row.
+ * @param props - Primitive properties and `inset` to align with rows that carry an icon.
  * @returns The styled primitive with its original interaction contract.
  */
 declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
@@ -25,16 +38,16 @@ declare function DropdownMenuCheckboxItem({ className, children, checked, inset,
 }): React.JSX.Element;
 declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
 /**
- * Renders a compact mutually exclusive action.
- * @param props - Primitive properties and optional consumer overrides.
+ * Renders a mutually exclusive action with its check at the end of the row.
+ * @param props - Primitive properties and `inset` to align with rows that carry an icon.
  * @returns The styled primitive with its original interaction contract.
  */
 declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
     inset?: boolean;
 }): React.JSX.Element;
 /**
- * Renders a compact menu group label.
- * @param props - Primitive properties and optional consumer overrides.
+ * Renders a muted group label aligned with the item text.
+ * @param props - Primitive properties and `inset` to align with rows that carry an icon.
  * @returns The styled primitive with its original interaction contract.
  */
 declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
@@ -44,17 +57,18 @@ declare function DropdownMenuSeparator({ className, ...props }: React.ComponentP
 declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
 /**
- * Renders a compact trigger for a nested menu.
- * @param props - Primitive properties and optional consumer overrides.
+ * Renders the row that opens a nested menu. It keeps the highlight fill while its submenu is open and nudges its
+ * chevron toward it.
+ * @param props - Primitive properties and `inset` to align with rows that carry an icon.
  * @returns The styled primitive with its original interaction contract.
  */
 declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
 }): React.JSX.Element;
 /**
- * Preserves readable submenu width with the shared translucent theme.
- * @param props - Primitive properties and optional consumer overrides.
- * @returns The styled primitive with its original interaction contract.
+ * Renders a nested menu on the same raised panel, at least 12rem wide.
+ * @param props - Primitive properties. Arc's defaults: a 12px `collisionPadding` and `loop`.
+ * @returns The submenu, animated in and out with its open state.
  */
-declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, collisionPadding, loop, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };