@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/dialog/dialog-sheet.mjs

@@ -0,0 +1,194 @@
+import { cn } from "../../cn.mjs";
+import { Button } from "../button/button.mjs";
+import { DialogSheetContext, dialogSheet, useDialogSheet } from "./dialog-sheet-context.mjs";
+import { DialogContent } from "./dialog.mjs";
+import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/dialog/dialog-sheet.tsx
+/**
+* DialogContent for a dialog with several fields, a long list or steps. On a
+* desktop and a tablet it is DialogContent, the same DOM and classes. Below
+* 768px it is a sheet: docked to the bottom, 90% of the screen tall, sliding
+* up over its scrim; `DialogHeader` becomes a pushed page's head (× at the
+* start, the title, the `DialogCommit` button at the end), `DialogFooter` is
+* hidden (× is Cancel) and `DialogBody` scrolls on the phone's 16px margin
+* above the home indicator. Base UI keeps Esc, focus and close.
+*/
+function DialogSheetContent({ className, overlay, style, ref, children, ...props }) {
+	const phone = useMobileViewport();
+	const [commitSlot, setCommitSlot] = useState(null);
+	const [bodyEndSlot, setBodyEndSlot] = useState(null);
+	const [popup, setPopup] = useState(null);
+	const keyboardBox = useSheetKeyboardBox(phone);
+	useRevealNewProblems(phone ? popup : null);
+	const state = useMemo(() => ({
+		sheet: phone,
+		commitSlot: phone ? commitSlot : null,
+		setCommitSlot,
+		bodyEndSlot: phone ? bodyEndSlot : null,
+		setBodyEndSlot
+	}), [
+		phone,
+		commitSlot,
+		bodyEndSlot
+	]);
+	const setRef = useCallback((element) => {
+		setPopup(element);
+		assignRef(ref, element);
+	}, [ref]);
+	const sheet = dialogSheet();
+	const sheetOverlay = useMemo(() => overlay === false ? false : {
+		...typeof overlay === "object" ? overlay : null,
+		className: cn(dialogSheet().overlay(), typeof overlay === "object" ? overlay.className : ""),
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "absolute inset-0"
+		})
+	}, [overlay]);
+	const sheetStyle = useMemo(() => keyboardBox ? {
+		...style,
+		...keyboardBox
+	} : style, [style, keyboardBox]);
+	return /* @__PURE__ */ jsx(DialogContent, {
+		...props,
+		ref: setRef,
+		overlay: phone ? sheetOverlay : overlay,
+		className: phone ? cn(className, sheet.content()) : className,
+		style: phone ? sheetStyle : style,
+		"data-sheet": phone ? "" : void 0,
+		children: /* @__PURE__ */ jsx(DialogSheetContext.Provider, {
+			value: state,
+			children
+		})
+	});
+}
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* The dialog's one commit button: a `Button`, written where it goes on a
+* desktop (the end of `DialogFooter`). In a `DialogSheetContent` below 768px
+* it is drawn at the end of the sheet's head instead, the same button (color,
+* words, disabled and loading state) at `size="md"`. In a flow of steps, write
+* each step's button as one (Next, then the last step's action).
+*
+* A submit button stays its form's default button in the head: it is tied to
+* the form it was written in by the form's `id` (the `form` attribute), so a
+* click and Enter in a field submit, and neither does while it is disabled.
+* Give that form an `id`, or pass `form`. Without one a click still submits
+* the form, but Enter in a field doesn't.
+*/
+function DialogCommit({ size, form, onClick, ...props }) {
+	const { commitSlot } = useDialogSheet();
+	const anchorRef = useRef(null);
+	const [writtenIn, setWrittenIn] = useState(null);
+	useLayoutEffect(() => {
+		if (!commitSlot || form) return;
+		const found = anchorRef.current?.closest("form") ?? null;
+		setWrittenIn(found);
+		if (process.env.NODE_ENV === "production" || props.type !== "submit" || found?.id) return;
+		console.warn(found ? "raft-ui: a submit DialogCommit is drawn in a phone sheet's head, outside its form, and the form has no id, so Enter in a field doesn't submit it (a click still does). Give the form an id, or pass `form` to DialogCommit." : "raft-ui: a submit DialogCommit in a phone sheet isn't inside a form and has no `form`, so it submits nothing. Pass `form` with the form's id.");
+	}, [
+		commitSlot,
+		form,
+		props.type
+	]);
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented && props.type === "submit" && writtenIn && !writtenIn.id) {
+			event.preventDefault();
+			writtenIn.requestSubmit();
+		}
+	}, [
+		onClick,
+		props.type,
+		writtenIn
+	]);
+	if (!commitSlot) return /* @__PURE__ */ jsx(Button, {
+		size,
+		form,
+		onClick,
+		...props
+	});
+	const linkedForm = form ?? (writtenIn?.id || void 0);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		ref: anchorRef,
+		hidden: true
+	}), createPortal(/* @__PURE__ */ jsx(Button, {
+		size: "md",
+		form: linkedForm,
+		onClick: handleClick,
+		...props
+	}), commitSlot)] });
+}
+/**
+* The sheet's box while the on-screen keyboard is up: docked to the top of the
+* keyboard, as tall as the visual viewport allows up to its usual 90% of the
+* window. With the keyboard up the visual viewport is shorter than that, so
+* the sheet fills it: the head stays in view and the body scrolls above the
+* keyboard. `undefined` otherwise (the CSS box).
+*/
+function useSheetKeyboardBox(active) {
+	const [box, setBox] = useState(void 0);
+	useEffect(() => {
+		const viewport = typeof window === "undefined" ? void 0 : window.visualViewport;
+		if (!active || !viewport) return;
+		const update = () => {
+			const focused = document.activeElement;
+			const keyboardUp = (focused instanceof HTMLInputElement || focused instanceof HTMLTextAreaElement || focused instanceof HTMLElement && focused.isContentEditable) && window.innerHeight - viewport.height > 100;
+			const height = Math.round(Math.min(viewport.height, window.innerHeight * .9));
+			const top = Math.round(Math.max(viewport.offsetTop, 0) + viewport.height - height);
+			setBox((previous) => {
+				if (!keyboardUp) return void 0;
+				return previous?.top === `${top}px` && previous?.height === `${height}px` ? previous : {
+					top: `${top}px`,
+					bottom: "auto",
+					height: `${height}px`
+				};
+			});
+		};
+		viewport.addEventListener("resize", update);
+		viewport.addEventListener("scroll", update, { passive: true });
+		document.addEventListener("focusin", update);
+		document.addEventListener("focusout", update);
+		return () => {
+			viewport.removeEventListener("resize", update);
+			viewport.removeEventListener("scroll", update);
+			document.removeEventListener("focusin", update);
+			document.removeEventListener("focusout", update);
+		};
+	}, [active]);
+	return active ? box : void 0;
+}
+/**
+* The commit is at the top of a sheet, so an error a failed commit adds near
+* the bottom of a long form would appear out of sight. A problem added after
+* the sheet opens (an alert, or a warning or destructive Banner) is scrolled
+* into view.
+*/
+const PROBLEM_SELECTOR = "[role=alert], [data-slot=banner][data-status=warning], [data-slot=banner][data-status=destructive]";
+function useRevealNewProblems(popup) {
+	useEffect(() => {
+		if (!popup || typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver((records) => {
+			for (const record of records) for (const node of record.addedNodes) {
+				if (!(node instanceof Element)) continue;
+				const problem = node.matches(PROBLEM_SELECTOR) ? node : node.querySelector(PROBLEM_SELECTOR);
+				if (problem) {
+					problem.scrollIntoView?.({ block: "nearest" });
+					return;
+				}
+			}
+		});
+		observer.observe(popup, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [popup]);
+}
+//#endregion
+export { DialogCommit, DialogSheetContent };

package/dist/components/dialog/dialog.d.mts

@@ -0,0 +1,85 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { PanelActionProps } from "../panel/panel-action.mjs";
+import { Dialog } from "@base-ui/react/dialog";
+import { ComponentPropsWithRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/dialog/dialog.d.ts
+export type DialogProps = Dialog.Root.Props;
+declare function Dialog$1({ children, ...props }: DialogProps): import("react").JSX.Element;
+export type DialogTriggerProps = Dialog.Trigger.Props;
+export declare function DialogTrigger(props: DialogTriggerProps): import("react").JSX.Element;
+export type DialogPortalProps = Dialog.Portal.Props;
+export declare function DialogPortal(props: DialogPortalProps): import("react").JSX.Element;
+export type DialogOverlayProps = StyledProps<Dialog.Backdrop.Props> & {
+  layer?: 0 | 1;
+};
+export declare function DialogOverlay({ className, layer, ...props }: DialogOverlayProps): import("react").JSX.Element;
+export type DialogContentProps = StyledProps<Dialog.Popup.Props> & {
+  portalProps?: DialogPortalProps;
+  overlay?: false | DialogOverlayProps;
+  size?: "sm" | "md" | "lg" | "wide";
+  layer?: 0 | 1;
+};
+export declare function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }: DialogContentProps): import("react").JSX.Element;
+export type DialogCloseProps = Dialog.Close.Props & Pick<ButtonProps, "variant" | "size"> & {
+  className?: string;
+  children?: ReactNode;
+};
+export declare function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }: DialogCloseProps): import("react").JSX.Element;
+export type DialogSheetBackProps = PanelActionProps;
+/**
+ * Back, in a later step of a flow drawn as a phone sheet: it takes the head's
+ * start in place of × (stdrc, 2026-10-22). The sheet is a stack of steps, and
+ * Back undoes one, as on a pushed page; Esc still closes. Put it in
+ * `DialogHeader` beside the `DialogClose`, from the second step on; it draws
+ * nothing outside a sheet, where Back stays in the footer. Its icon is
+ * `arrow-left`, as every Back (Alignment, "The ends of a header").
+ */
+export declare function DialogSheetBack({ className, children, "aria-label": ariaLabel, ...props }: DialogSheetBackProps): import("react").JSX.Element | null;
+export type DialogHeaderProps = ComponentPropsWithRef<"div"> & {
+  /** A pinned bar of a scrolling (`size="wide"`) dialog. */
+  bar?: boolean;
+};
+export declare function DialogHeader({ className, bar, children, ...props }: DialogHeaderProps): import("react").JSX.Element;
+export type DialogBodyProps = ComponentPropsWithRef<"div"> & {
+  /** A pinned bar of a scrolling (`size="wide"`) dialog. */
+  bar?: boolean;
+};
+export declare function DialogBody({ className, bar, children, ...props }: DialogBodyProps): import("react").JSX.Element;
+export type DialogFooterProps = ComponentPropsWithRef<"div"> & {
+  /** A pinned bar of a scrolling (`size="wide"`) dialog. */
+  bar?: boolean;
+};
+export declare function DialogFooter({ className, bar, hidden, children, ref, ...props }: DialogFooterProps): import("react").JSX.Element;
+export type DialogFooterNoteProps = ComponentPropsWithRef<"p">;
+/**
+ * One short line at the start of `DialogFooter` that says what the commit
+ * button will do ("You'll be billed $8 per member each month"). Muted footnote
+ * text, start-aligned and never cut. Only in a `lg` or `wide` dialog, and at
+ * most 40 characters: on a desktop it is one line beside the buttons and never
+ * wraps; on a phone it goes above the buttons when they don't fit beside it,
+ * and may wrap to 2 lines. In a phone sheet, which has no footer, it moves
+ * to the end of the body. Longer copy belongs in the body. A footer holds a note or a `TextLink`,
+ * never both.
+ */
+export declare function DialogFooterNote({ className, children, ...props }: DialogFooterNoteProps): import("react").JSX.Element | null;
+export type DialogTitleProps = StyledProps<Dialog.Title.Props>;
+export declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+export type DialogDescriptionProps = StyledProps<Dialog.Description.Props>;
+export declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+export type DialogSurfaceProps = useRender.ComponentProps<"div">;
+/**
+ * The dialog's frame — the popover layer, the dialog radius, the seam ring
+ * and the float shadow — for a centred modal whose lifecycle the app owns
+ * (its own backdrop, Escape and focus handling). It neither positions nor
+ * animates itself: the host centres it, and a centred modal has no motion.
+ * DialogContent draws the same frame for a Base UI dialog.
+ */
+export declare function DialogSurface({ className, render, children, ...props }: DialogSurfaceProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DialogNavProps = useRender.ComponentProps<"nav">;
+/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
+export declare function DialogNav({ className, render, ...props }: DialogNavProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Dialog$1 as Dialog };

package/dist/components/dialog/dialog.mjs

@@ -0,0 +1,371 @@
+import { cn } from "../../cn.mjs";
+import { decisionWidth } from "../../lib/decision-width.mjs";
+import { headEdgePull } from "../../lib/head-edges.mjs";
+import { stackedActions, useStackedActions } from "../../lib/stacked-actions.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
+import { Button } from "../button/button.mjs";
+import { DialogSheetHeadContext, DialogSheetReset, dialogSheet, useDialogSheet, useInDialogSheetHead } from "./dialog-sheet-context.mjs";
+import { TextLink } from "../text-link/text-link.mjs";
+import { PanelAction } from "../panel/panel-action.mjs";
+import { Dialog } from "@base-ui/react/dialog";
+import { ArrowLeft, X } from "lucide-react";
+import { Children, createContext, isValidElement, useContext, useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { createPortal } from "react-dom";
+//#region src/components/dialog/dialog.tsx
+const dialog = tv({
+	slots: {
+		overlay: ["fixed inset-0 z-50 bg-layer-backdrop"],
+		content: [
+			"fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
+			"max-h-[calc(100dvh-2rem)] outline-none",
+			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		header: [
+			"grid shrink-0 grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0",
+			"gap-2 px-5 pt-5",
+			headEdgePull
+		],
+		body: [
+			"min-w-0 flex-1 overflow-y-auto",
+			"px-5 pt-1.5 pb-5 first:pt-5",
+			"font-sans text-subhead text-foreground-muted"
+		],
+		footer: [
+			"flex shrink-0 items-center justify-end",
+			...stackedActions,
+			"gap-2 px-5 pb-5 first:pt-5 [[data-slot=dialog-header]+&]:pt-5",
+			"*:data-[slot=text-link]:text-footnote"
+		],
+		footerNote: ["m-0 md:me-2 md:flex-1", "text-start font-sans text-footnote text-pretty text-foreground-muted md:whitespace-nowrap"],
+		footerActions: [
+			"ms-auto flex shrink-0 items-center justify-end gap-2",
+			...stackedActions,
+			"data-stacked:ms-0 data-stacked:w-full"
+		],
+		title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
+		description: ["m-0", "font-sans text-subhead text-foreground-muted"]
+	},
+	variants: {
+		size: {
+			sm: { content: [decisionWidth] },
+			md: { content: ["max-w-md"] },
+			lg: { content: ["max-w-160"] },
+			wide: { content: ["max-w-4xl h-[min(760px,calc(100dvh-2rem))]"] }
+		},
+		bar: {
+			false: {},
+			true: {
+				header: ["flex h-14 shrink-0 items-center gap-2 border-b px-5 py-0", "border-line-seam pt-0 [&>[data-slot=dialog-close]]:my-0"],
+				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "px-0 pt-0 pb-0 first:pt-0 text-foreground"],
+				footer: ["shrink-0 border-t px-5 py-3", "border-line-seam pt-3 pb-3 first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
+			}
+		},
+		layer: {
+			0: {
+				overlay: [],
+				content: []
+			},
+			1: {
+				overlay: ["z-60"],
+				content: ["z-60"]
+			}
+		},
+		nested: {
+			false: {},
+			true: { overlay: ["bg-layer-backdrop-nested"] }
+		},
+		start: {
+			false: {},
+			true: { footer: ["flex-wrap justify-between"] }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		bar: false
+	}
+});
+function Dialog$1({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		...props,
+		children: withOverlayLayer("dialog", props.modal !== false, children)
+	});
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function DialogOverlay({ className, layer, ...props }) {
+	const nested = useParentOverlayKind() != null;
+	const { overlay } = dialog({
+		layer,
+		nested
+	});
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		"data-nested": nested ? "" : void 0,
+		forceRender: true,
+		className: overlay({ className }),
+		...props
+	});
+}
+const DialogSizeContext = createContext(void 0);
+function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }) {
+	const { content } = dialog({
+		size,
+		layer
+	});
+	const overlayProps = typeof overlay === "object" ? overlay : {};
+	return /* @__PURE__ */ jsxs(DialogPortal, {
+		...portalProps,
+		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, {
+			layer,
+			...overlayProps
+		}), /* @__PURE__ */ jsx(Dialog.Popup, {
+			"data-slot": "dialog-content",
+			className: content({ className }),
+			...props,
+			children: /* @__PURE__ */ jsx(DialogSizeContext.Provider, {
+				value: size ?? (/(^|\s)max-w-/.test(className ?? "") ? void 0 : "md"),
+				children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
+			})
+		})]
+	});
+}
+function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
+	const inSheetHead = useInDialogSheetHead();
+	if (render) return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		render,
+		"aria-label": ariaLabel,
+		...props,
+		children
+	});
+	if (inSheetHead) return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		render: /* @__PURE__ */ jsx(PanelAction, {
+			"aria-label": ariaLabel ?? "Close",
+			className
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {})
+	});
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: variant ?? "ghost",
+			size: size ?? "icon-md",
+			"aria-label": ariaLabel ?? "Close",
+			className: cn("-my-1.5", className)
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })
+	});
+}
+/**
+* Back, in a later step of a flow drawn as a phone sheet: it takes the head's
+* start in place of × (stdrc, 2026-10-22). The sheet is a stack of steps, and
+* Back undoes one, as on a pushed page; Esc still closes. Put it in
+* `DialogHeader` beside the `DialogClose`, from the second step on; it draws
+* nothing outside a sheet, where Back stays in the footer. Its icon is
+* `arrow-left`, as every Back (Alignment, "The ends of a header").
+*/
+function DialogSheetBack({ className, children, "aria-label": ariaLabel, ...props }) {
+	if (!useInDialogSheetHead()) return null;
+	return /* @__PURE__ */ jsx(PanelAction, {
+		activateOnTouchEnd: true,
+		"data-slot": "dialog-sheet-back",
+		"aria-label": ariaLabel ?? "Back",
+		className,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowLeft, {})
+	});
+}
+function DialogHeader({ className, bar = false, children, ...props }) {
+	const { sheet, setCommitSlot } = useDialogSheet();
+	const items = sheet ? Children.toArray(children) : [];
+	const backs = items.filter((item) => isValidElement(item) && item.type === DialogSheetBack);
+	const closes = items.filter((item) => isValidElement(item) && item.type === DialogClose);
+	const missingLeading = sheet && backs.length === 0 && closes.length === 0;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !missingLeading) return;
+		console.warn("raft-ui: a DialogHeader drawn as a phone sheet has no DialogClose (or DialogSheetBack) as a direct child, so the sheet has no × at the start of its head. Put DialogClose directly in DialogHeader, not inside a Tooltip, a Fragment or a component of your own.");
+	}, [missingLeading]);
+	if (sheet) {
+		const rest = items.filter((item) => !backs.includes(item) && !closes.includes(item));
+		const head = dialogSheet();
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "dialog-header",
+			"data-sheet": "",
+			className: dialog({ bar: false }).header({ className: cn(head.header(), className) }),
+			...props,
+			children: [/* @__PURE__ */ jsxs(DialogSheetHeadContext.Provider, {
+				value: true,
+				children: [backs.length > 0 ? backs : closes, rest]
+			}), /* @__PURE__ */ jsx("div", {
+				ref: setCommitSlot,
+				"data-slot": "dialog-commit-slot",
+				className: head.commitSlot()
+			})]
+		});
+	}
+	const { header } = dialog({ bar });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: header({ className }),
+		...props,
+		children
+	});
+}
+function DialogBody({ className, bar = false, children, ...props }) {
+	const { sheet, setBodyEndSlot } = useDialogSheet();
+	const { body } = dialog({ bar });
+	const sheetBody = sheet ? cn(bar && dialogSheet().barBody(), dialogSheet().body()) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-body",
+		className: body({ className: sheetBody ? cn(sheetBody, className) : className }),
+		...props,
+		children: [children, sheet ? /* @__PURE__ */ jsx("div", {
+			ref: setBodyEndSlot,
+			"data-slot": "dialog-sheet-body-end",
+			className: dialogSheet().bodyEnd()
+		}) : null]
+	});
+}
+function DialogFooter({ className, bar = false, hidden, children, ref, ...props }) {
+	const { sheet, bodyEndSlot } = useDialogSheet();
+	const items = Children.toArray(children);
+	const start = items.find((item) => isValidElement(item) && item.type === DialogFooterNote && hasNoteContent(item.props.children)) ?? (isValidElement(items[0]) && items[0].type === TextLink ? items[0] : void 0);
+	const [stacked, rowRef] = useStackedActions(start == null ? ref : void 0, start != null);
+	const { footer, footerActions } = dialog({
+		bar,
+		start: start != null
+	});
+	const stackedProps = stacked ? { "data-stacked": "" } : {};
+	if (start == null) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		ref: rowRef,
+		className: footer({ className }),
+		hidden: sheet || hidden,
+		...stackedProps,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [sheet && bodyEndSlot ? createPortal(start, bodyEndSlot) : null, /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		ref,
+		className: footer({ className }),
+		hidden: sheet || hidden,
+		...props,
+		children: [sheet ? null : start, /* @__PURE__ */ jsx("div", {
+			"data-slot": "dialog-footer-actions",
+			ref: rowRef,
+			className: footerActions(),
+			...stackedProps,
+			children: items.filter((item) => item !== start)
+		})]
+	})] });
+}
+/**
+* Whether a note has anything to show: not only null, false or "", but also
+* whitespace and an empty array (`{items.map(...)}` of nothing). Numbers,
+* 0 included, and elements count.
+*/
+function hasNoteContent(children) {
+	return Children.toArray(children).some((child) => typeof child !== "string" || child.trim() !== "");
+}
+/**
+* One short line at the start of `DialogFooter` that says what the commit
+* button will do ("You'll be billed $8 per member each month"). Muted footnote
+* text, start-aligned and never cut. Only in a `lg` or `wide` dialog, and at
+* most 40 characters: on a desktop it is one line beside the buttons and never
+* wraps; on a phone it goes above the buttons when they don't fit beside it,
+* and may wrap to 2 lines. In a phone sheet, which has no footer, it moves
+* to the end of the body. Longer copy belongs in the body. A footer holds a note or a `TextLink`,
+* never both.
+*/
+function DialogFooterNote({ className, children, ...props }) {
+	const { footerNote } = dialog();
+	const size = useContext(DialogSizeContext);
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (size === "sm" || size === "md") console.warn(`raft-ui: a DialogFooterNote is in a size="${size}" dialog. A footer note fits beside the buttons only in a size="lg" or size="wide" dialog; put the sentence in DialogBody instead.`);
+	}, [size]);
+	if (!hasNoteContent(children)) return null;
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "dialog-footer-note",
+		className: footerNote({ className }),
+		...props,
+		children
+	});
+}
+function DialogTitle({ className, ...props }) {
+	const inSheetHead = useInDialogSheetHead();
+	const { title } = dialog();
+	const classes = inSheetHead ? cn(dialogSheet().title(), className) : className;
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: title({ className: classes }),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	const { description } = dialog();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: description({ className }),
+		...props
+	});
+}
+const dialogSurface = tv({ slots: { root: [
+	"flex min-w-0 flex-col outline-none",
+	"overflow-clip rounded-dialog bg-layer-popover text-foreground",
+	"shadow-float ring-1 ring-line-seam"
+] } });
+/**
+* The dialog's frame — the popover layer, the dialog radius, the seam ring
+* and the float shadow — for a centred modal whose lifecycle the app owns
+* (its own backdrop, Escape and focus handling). It neither positions nor
+* animates itself: the host centres it, and a centred modal has no motion.
+* DialogContent draws the same frame for a Base UI dialog.
+*/
+function DialogSurface({ className, render, children, ...props }) {
+	const { root } = dialogSurface();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "dialog-surface",
+			className: root({ className })
+		}, props, { children: /* @__PURE__ */ jsx(DialogSheetReset, { children }) })
+	});
+}
+const dialogNav = tv({ slots: { root: ["flex shrink-0 flex-col overflow-y-auto", "w-52 gap-0.5 border-r border-line-seam py-2 max-md:hidden"] } });
+/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
+function DialogNav({ className, render, ...props }) {
+	const { root } = dialogNav();
+	return useRender({
+		defaultTagName: "nav",
+		render,
+		props: mergeProps({
+			"data-slot": "dialog-nav",
+			className: root({ className })
+		}, props)
+	});
+}
+//#endregion
+export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFooterNote, DialogHeader, DialogNav, DialogOverlay, DialogPortal, DialogSheetBack, DialogSurface, DialogTitle, DialogTrigger };

package/dist/components/dialog/index.d.mts

@@ -0,0 +1,3 @@
+import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterNote, DialogFooterNoteProps, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogNav, DialogNavProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogProps, DialogSheetBack, DialogSheetBackProps, DialogSurface, DialogSurfaceProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./dialog.mjs";
+import { DialogCommit, DialogCommitProps, DialogSheetContent, DialogSheetContentProps } from "./dialog-sheet.mjs";
+export { Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogCommit, type DialogCommitProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, DialogFooterNote, type DialogFooterNoteProps, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogNav, type DialogNavProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, DialogSurface, type DialogSurfaceProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps };