beez-ui 2.7.0 → 3.0.0

package/dist/components/popover.js

@@ -1,325 +1,40 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-/**
-* Arc's Popover (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a raised panel with Arc's panel radius
-* and floating shadow that starts a few pixels toward its trigger and settles on a spring, leaving faster than it
-* arrives. It keeps the Radix composition and adds Arc's `PopoverClose`.
-*/
-import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
-import { ArcFloatingSlot } from "../motion/arc-floating-slot.js";
-import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
-import { cn } from "../lib/utils.js";
-import { POPOVER_COLLISION_PADDING_PX, POPOVER_MOTION, POPOVER_SIDE_OFFSET_PX } from "../constants/popover.js";
+import { Popover, PopoverClose, PopoverContent as PopoverContentPrimitive, PopoverTrigger } from "./primitives/popover.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function Popover(t0) {
-	const $ = _c(9);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
-	let t1;
-	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
-		t1 = /* @__PURE__ */ _jsx(PopoverPrimitive.Root, {
-			"data-slot": "popover",
-			...props,
-			open: motionOpen,
-			onOpenChange: setMotionOpen
-		});
-		$[2] = motionOpen;
-		$[3] = props;
-		$[4] = setMotionOpen;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] !== motionOpen || $[7] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
-			scope: "popover",
-			open: motionOpen,
-			children: t1
-		});
-		$[6] = motionOpen;
-		$[7] = t1;
-		$[8] = t2;
-	} else {
-		t2 = $[8];
-	}
-	return t2;
-}
-function PopoverTrigger(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(PopoverPrimitive.Trigger, {
-			"data-slot": "popover-trigger",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-/** Closes the popover that contains it, such as a "Listo" or "Cancelar" button inside the panel. */
-function PopoverClose(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(PopoverPrimitive.Close, {
-			"data-slot": "popover-close",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-/** Every popover enters and leaves on the same path. */
-function resolvePopoverMotion() {
-	return POPOVER_MOTION;
-}
 /**
-* Renders Arc's panel: raised surface, hairline border, panel radius and floating shadow, kept inside the viewport.
-* Content taller than the room left on the placed side scrolls inside the panel instead of running off screen.
-* @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 6px and `collisionPadding`
-*   to 10px.
-* @returns The portaled panel.
+* Renders the portaled panel anchored to the trigger, kept inside the viewport; content taller than the room left
+* scrolls inside the panel.
+* @param props - Radix content properties. Arc's defaults: `align="start"`, a 6px `sideOffset` and a 10px
+*   `collisionPadding`.
+* @returns The panel.
 */
 function PopoverContent(t0) {
-	const $ = _c(17);
-	let className;
+	const $ = _c(6);
 	let props;
 	let t1;
-	let t2;
-	let t3;
 	if ($[0] !== t0) {
-		({className, align: t1, sideOffset: t2, collisionPadding: t3, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
-	}
-	const align = t1 === undefined ? "center" : t1;
-	const sideOffset = t2 === undefined ? POPOVER_SIDE_OFFSET_PX : t2;
-	const collisionPadding = t3 === undefined ? POPOVER_COLLISION_PADDING_PX : t3;
-	const t4 = props.forceMount;
-	let t5;
-	if ($[6] !== className) {
-		t5 = cn("z-50 flex max-h-(--radix-popover-content-available-height) w-72 max-w-[calc(100vw-20px)] origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 overflow-y-auto overscroll-contain *:shrink-0 rounded-(--radius-panel) border border-border bg-surface-raised p-(--space-4) text-sm leading-(--leading-body) text-foreground shadow-(--shadow-floating) outline-hidden", className);
-		$[6] = className;
-		$[7] = t5;
-	} else {
-		t5 = $[7];
-	}
-	let t6;
-	if ($[8] !== align || $[9] !== collisionPadding || $[10] !== props || $[11] !== sideOffset || $[12] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(ArcFloatingSlot, {
-			motion: resolvePopoverMotion,
-			children: /* @__PURE__ */ _jsx(PopoverPrimitive.Content, {
-				forceMount: true,
-				"data-slot": "popover-content",
-				align,
-				sideOffset,
-				collisionPadding,
-				className: t5,
-				...props
-			})
-		});
-		$[8] = align;
-		$[9] = collisionPadding;
-		$[10] = props;
-		$[11] = sideOffset;
-		$[12] = t5;
-		$[13] = t6;
-	} else {
-		t6 = $[13];
-	}
-	let t7;
-	if ($[14] !== props.forceMount || $[15] !== t6) {
-		t7 = /* @__PURE__ */ _jsx(PopoverPrimitive.Portal, {
-			forceMount: true,
-			children: /* @__PURE__ */ _jsx(MotionPresence, {
-				scope: "popover",
-				forceMount: t4,
-				children: t6
-			})
-		});
-		$[14] = props.forceMount;
-		$[15] = t6;
-		$[16] = t7;
-	} else {
-		t7 = $[16];
-	}
-	return t7;
-}
-function PopoverAnchor(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
+		({align: t1, ...props} = t0);
 		$[0] = t0;
 		$[1] = props;
+		$[2] = t1;
 	} else {
 		props = $[1];
+		t1 = $[2];
 	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(PopoverPrimitive.Anchor, {
-			"data-slot": "popover-anchor",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-/**
-* Groups popover headings with compact spacing.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
-*/
-function PopoverHeader(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("flex flex-col gap-0.5 text-sm", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "popover-header",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function PopoverTitle(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("font-medium", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "popover-title",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function PopoverDescription(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("text-muted-foreground", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
+	const align = t1 === undefined ? "start" : t1;
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("p", {
-			"data-slot": "popover-description",
-			className: t1,
+	if ($[3] !== align || $[4] !== props) {
+		t2 = /* @__PURE__ */ _jsx(PopoverContentPrimitive, {
+			align,
 			...props
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[3] = align;
+		$[4] = props;
+		$[5] = t2;
 	} else {
-		t2 = $[7];
+		t2 = $[5];
 	}
 	return t2;
 }
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/{alert-dialog.d.ts → primitives/alert-dialog.d.ts}

@@ -1,11 +1,13 @@
 /**
- * Confirmation dialog on Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): the same
- * overlay, raised panel, title and description type and dialog transition as `Dialog`, so both read as one family. It
- * keeps beez-ui's media slot and Arc `Button` actions.
+ * Internal confirmation composition on Arc's Dialog surface (https://uiarc.dev, MIT License, see
+ * THIRD_PARTY_NOTICES.md): Radix's alert dialog parts on the same overlay, raised panel, title and description type as
+ * the dialog primitive, so both read as one family, with Arc's dialog transition, media slot and Arc `Button`
+ * actions. Not exported from the package: the public `Dialog` uses it for its `alert` mode.
  */
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-import { Button } from "./button.js";
+import { Button } from "../button.js";
+import { type DialogCloseButtonPlacement } from "../dialog-surface.js";
 declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
@@ -13,10 +15,20 @@ declare function AlertDialogOverlay({ className, ...props }: React.ComponentProp
 /**
  * Renders a compact confirmation while preserving the shared theme and viewport bound.
  * @param props - Primitive properties and optional consumer overrides.
+ * @param props.showCloseButton - Whether the confirmation renders a close button, which cancels it. Off by default:
+ * a confirmation is answered with its actions.
+ * @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner; `content` (default)
+ * keeps it in the panel.
+ * @param props.closeLabel - Accessible name of the close button.
+ * @param props.closeButtonRef - Ref of the close button, when it is rendered.
  * @returns The styled primitive with its original interaction contract.
  */
-declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+declare function AlertDialogContent({ className, size, children, showCloseButton, closeButtonPlacement, closeLabel, closeButtonRef, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
     size?: "default" | "sm";
+    showCloseButton?: boolean;
+    closeButtonPlacement?: DialogCloseButtonPlacement;
+    closeLabel?: string;
+    closeButtonRef?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 /**
  * Aligns confirmation headings and media with compact spacing.

package/dist/components/{alert-dialog.js → primitives/alert-dialog.js}

@@ -1,17 +1,18 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 /**
-* Confirmation dialog on Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): the same
-* overlay, raised panel, title and description type and dialog transition as `Dialog`, so both read as one family. It
-* keeps beez-ui's media slot and Arc `Button` actions.
+* Internal confirmation composition on Arc's Dialog surface (https://uiarc.dev, MIT License, see
+* THIRD_PARTY_NOTICES.md): Radix's alert dialog parts on the same overlay, raised panel, title and description type as
+* the dialog primitive, so both read as one family, with Arc's dialog transition, media slot and Arc `Button`
+* actions. Not exported from the package: the public `Dialog` uses it for its `alert` mode.
 */
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } 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 { Button } from "./button.js";
-import { withDialogSwapText, dialogDescriptionClassName, dialogFooterClassName, dialogOverlayClassName, dialogSurfaceClassName, dialogTitleClassName } from "./dialog-surface.js";
+import { MotionSlot } from "../../motion/motion-slot.js";
+import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../../motion/presence.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button.js";
+import { DialogSurfaceCloseButton, withDialogSwapText, dialogDescriptionClassName, dialogFooterClassName, dialogOverlayClassName, dialogSurfaceClassName, dialogTitleClassName } from "../dialog-surface.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AlertDialog(t0) {
 	const $ = _c(9);
@@ -139,80 +140,127 @@ function AlertDialogOverlay(t0) {
 /**
 * Renders a compact confirmation while preserving the shared theme and viewport bound.
 * @param props - Primitive properties and optional consumer overrides.
+* @param props.showCloseButton - Whether the confirmation renders a close button, which cancels it. Off by default:
+* a confirmation is answered with its actions.
+* @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner; `content` (default)
+* keeps it in the panel.
+* @param props.closeLabel - Accessible name of the close button.
+* @param props.closeButtonRef - Ref of the close button, when it is rendered.
 * @returns The styled primitive with its original interaction contract.
 */
 function AlertDialogContent(t0) {
-	const $ = _c(14);
+	const $ = _c(28);
+	let children;
 	let className;
+	let closeButtonRef;
+	let closeLabel;
 	let props;
 	let t1;
+	let t2;
+	let t3;
 	if ($[0] !== t0) {
-		({className, size: t1, ...props} = t0);
+		({className, size: t1, children, showCloseButton: t2, closeButtonPlacement: t3, closeLabel, closeButtonRef, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
+		$[1] = children;
+		$[2] = className;
+		$[3] = closeButtonRef;
+		$[4] = closeLabel;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
+		children = $[1];
+		className = $[2];
+		closeButtonRef = $[3];
+		closeLabel = $[4];
+		props = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
 	}
 	const size = t1 === undefined ? "default" : t1;
-	const t2 = props.forceMount;
-	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+	const showCloseButton = t2 === undefined ? false : t2;
+	const closeButtonPlacement = t3 === undefined ? "content" : t3;
+	const t4 = props.forceMount;
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "overlay",
 			children: /* @__PURE__ */ _jsx(AlertDialogOverlay, { forceMount: true })
 		});
-		$[4] = t3;
-	} else {
-		t3 = $[4];
-	}
-	let t4;
-	if ($[5] !== className) {
-		t4 = cn(dialogSurfaceClassName, "group/alert-dialog-content fixed top-1/2 left-1/2 grid max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain w-full -translate-x-1/2 -translate-y-1/2 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", className);
-		$[5] = className;
-		$[6] = t4;
+		$[9] = t5;
+	} else {
+		t5 = $[9];
+	}
+	const t6 = showCloseButton ? closeButtonPlacement : undefined;
+	const t7 = showCloseButton && closeButtonPlacement === "viewport" ? "inset-0 m-auto h-fit" : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+	let t8;
+	if ($[10] !== className || $[11] !== t7) {
+		t8 = cn(dialogSurfaceClassName, "group/alert-dialog-content fixed grid max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain w-full data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", t7, className);
+		$[10] = className;
+		$[11] = t7;
+		$[12] = t8;
+	} else {
+		t8 = $[12];
+	}
+	let t9;
+	if ($[13] !== closeButtonPlacement || $[14] !== closeButtonRef || $[15] !== closeLabel || $[16] !== showCloseButton) {
+		t9 = showCloseButton && /* @__PURE__ */ _jsx(DialogSurfaceCloseButton, {
+			kind: "alert",
+			placement: closeButtonPlacement,
+			label: closeLabel,
+			buttonRef: closeButtonRef
+		});
+		$[13] = closeButtonPlacement;
+		$[14] = closeButtonRef;
+		$[15] = closeLabel;
+		$[16] = showCloseButton;
+		$[17] = t9;
 	} else {
-		t4 = $[6];
+		t9 = $[17];
 	}
-	let t5;
-	if ($[7] !== props || $[8] !== size || $[9] !== t4) {
-		t5 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t3, /* @__PURE__ */ _jsx(MotionSlot, {
+	let t10;
+	if ($[18] !== children || $[19] !== props || $[20] !== size || $[21] !== t6 || $[22] !== t8 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t5, /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "dialog",
-			children: /* @__PURE__ */ _jsx(AlertDialogPrimitive.Content, {
+			children: /* @__PURE__ */ _jsxs(AlertDialogPrimitive.Content, {
 				forceMount: true,
 				"data-slot": "alert-dialog-content",
 				"data-size": size,
-				className: t4,
-				...props
+				"data-close-button-placement": t6,
+				className: t8,
+				...props,
+				children: [children, t9]
 			})
 		})] });
-		$[7] = props;
-		$[8] = size;
-		$[9] = t4;
-		$[10] = t5;
-	} else {
-		t5 = $[10];
-	}
-	let t6;
-	if ($[11] !== props.forceMount || $[12] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(AlertDialogPortal, {
+		$[18] = children;
+		$[19] = props;
+		$[20] = size;
+		$[21] = t6;
+		$[22] = t8;
+		$[23] = t9;
+		$[24] = t10;
+	} else {
+		t10 = $[24];
+	}
+	let t11;
+	if ($[25] !== props.forceMount || $[26] !== t10) {
+		t11 = /* @__PURE__ */ _jsx(AlertDialogPortal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "alert-dialog",
-				forceMount: t2,
-				children: t5
+				forceMount: t4,
+				children: t10
 			})
 		});
-		$[11] = props.forceMount;
-		$[12] = t5;
-		$[13] = t6;
+		$[25] = props.forceMount;
+		$[26] = t10;
+		$[27] = t11;
 	} else {
-		t6 = $[13];
+		t11 = $[27];
 	}
-	return t6;
+	return t11;
 }
 /**
 * Aligns confirmation headings and media with compact spacing.
@@ -234,7 +282,7 @@ function AlertDialogHeader(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("grid grid-rows-[auto_1fr] place-items-center gap-(--space-2) text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className);
+		t1 = cn("grid grid-rows-[auto_1fr] place-items-center gap-(--space-2) text-center in-data-[close-button-placement=content]:pr-[calc(var(--space-8)+var(--space-5))] has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/primitives/avatar.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Internal composition behind Arc's Avatar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a compact
+ * identity marker on Arc's tokens, with a hairline border, a muted fill behind the initials and an optional presence
+ * dot that pops in and out. Loading, failure and fallback stay on the Base UI avatar primitive. Not part of the public
+ * API: consumers use the closed `Avatar` from `../avatar.js`, while beez-ui components such as the account menu compose
+ * these parts directly.
+ */
+import type { ComponentProps } from "react";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import type { AvatarSize, AvatarStatus } from "../../constants/avatar.js";
+/** Accepts native image props and nullable image sources from application results. */
+export type AvatarImageProps = Omit<ComponentProps<"img">, "src"> & {
+    src?: string | null;
+};
+export type AvatarRootProps = AvatarPrimitive.Root.Props & {
+    /** Diameter: 24px (`sm`), 32px (`md`, default), 40px (`lg`) or Arc's 88px profile size (`xl`). */
+    size?: AvatarSize;
+    /** Shows Arc's presence dot in the bottom corner, or the top corner when an `AvatarBadge` holds the bottom one. */
+    status?: AvatarStatus;
+};
+/**
+ * The avatar circle with its optional presence dot.
+ * @param props - Size, optional presence and the Base UI avatar root props.
+ * @returns The avatar root.
+ */
+declare function AvatarRoot({ className, size, status, children, ...props }: AvatarRootProps): import("react").JSX.Element;
+/**
+ * The photo. Delegates loading, failure and fallback synchronization to the avatar primitive and renders through the
+ * provider's `Image` adapter; loaded images develop in place.
+ * @param props - Native image props with a nullable source.
+ * @returns The image, mounted while it loads so the fallback can stay until it is ready.
+ */
+declare function AvatarImage({ alt, className, src, ...props }: AvatarImageProps): import("react").JSX.Element;
+/**
+ * Initials or another stand-in, shown until the photo loads or when it fails.
+ * @param props - Base UI fallback props.
+ * @returns The fallback.
+ */
+declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): import("react").JSX.Element;
+/**
+ * A custom corner badge, drawn with the same ring as Arc's presence dot.
+ * @param props - Native span props.
+ * @returns The badge.
+ */
+declare function AvatarBadge({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export { AvatarRoot, AvatarImage, AvatarFallback, AvatarBadge };