beez-ui 0.6.2 → 0.8.0

package/dist/components/animated-list-item.js

@@ -0,0 +1,132 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { motion, useIsPresent } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_ITEM_ENTER_SCALE, MOTION_LIST_ITEM_DISTANCE, MOTION_TIMING, SPRING_LAYOUT } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ANIMATED_LIST_ITEM_ELEMENTS = {
+	li: motion.li,
+	div: motion.div,
+	article: motion.article
+};
+const LIST_ITEM_TRANSITION = {
+	duration: MOTION_TIMING.panel,
+	ease: MOTION_EASE,
+	layout: SPRING_LAYOUT
+};
+const LIST_ITEM_EXIT_TRANSITION = {
+	duration: MOTION_TIMING.exit,
+	ease: MOTION_EASE
+};
+/** Reduced motion keeps enter/exit semantics (inert while leaving) but without travel or delay. */
+const INSTANT_TRANSITION = { duration: 0 };
+/**
+* Wrap the list in `<AnimatePresence initial={false}>` so only items added after the
+* first render animate in, and removed items animate out before leaving the DOM.
+* A leaving item turns inert and hidden from assistive technology, so it can no
+* longer be focused, clicked or announced during its exit.
+* @param props - Native attributes, element type and content.
+* @returns The animated item.
+*/
+export function AnimatedListItem(t0) {
+	const $ = _c(22);
+	let children;
+	let className;
+	let elementProps;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, as: t1, layout: t2, className, ...elementProps} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = elementProps;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		elementProps = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const as = t1 === undefined ? "li" : t1;
+	const layout = t2 === undefined ? true : t2;
+	const MotionElement = ANIMATED_LIST_ITEM_ELEMENTS[as];
+	const isPresent = useIsPresent();
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const t3 = isPresent ? elementProps["aria-hidden"] : true;
+	const t4 = !isPresent || undefined;
+	let t5;
+	if ($[6] !== className) {
+		t5 = cn("min-w-0", className);
+		$[6] = className;
+		$[7] = t5;
+	} else {
+		t5 = $[7];
+	}
+	const t6 = layout && !shouldReduceMotion ? "position" : false;
+	let t7;
+	let t8;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
+			opacity: 0,
+			y: MOTION_LIST_ITEM_DISTANCE,
+			scale: MOTION_ITEM_ENTER_SCALE
+		};
+		t8 = {
+			opacity: 1,
+			y: 0,
+			scale: 1
+		};
+		$[8] = t7;
+		$[9] = t8;
+	} else {
+		t7 = $[8];
+		t8 = $[9];
+	}
+	const t9 = shouldReduceMotion ? INSTANT_TRANSITION : LIST_ITEM_EXIT_TRANSITION;
+	let t10;
+	if ($[10] !== t9) {
+		t10 = {
+			opacity: 0,
+			scale: MOTION_ITEM_ENTER_SCALE,
+			transition: t9
+		};
+		$[10] = t9;
+		$[11] = t10;
+	} else {
+		t10 = $[11];
+	}
+	const t11 = shouldReduceMotion ? INSTANT_TRANSITION : LIST_ITEM_TRANSITION;
+	let t12;
+	if ($[12] !== MotionElement || $[13] !== children || $[14] !== elementProps || $[15] !== t10 || $[16] !== t11 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
+		t12 = /* @__PURE__ */ _jsx(MotionElement, {
+			"data-slot": "animated-list-item",
+			...elementProps,
+			"aria-hidden": t3,
+			inert: t4,
+			className: t5,
+			layout: t6,
+			initial: t7,
+			animate: t8,
+			exit: t10,
+			transition: t11,
+			children
+		});
+		$[12] = MotionElement;
+		$[13] = children;
+		$[14] = elementProps;
+		$[15] = t10;
+		$[16] = t11;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t12;
+	} else {
+		t12 = $[21];
+	}
+	return t12;
+}

package/dist/components/avatar.d.ts

@@ -7,10 +7,11 @@ export type AvatarImageProps = Omit<React.ComponentProps<"img">, "src"> & {
 declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
     size?: "default" | "sm" | "lg";
 }): React.JSX.Element;
-/** Delegates loading, failure and fallback synchronization to the avatar primitive. */
+/** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
 declare function AvatarImage({ alt, className, src, ...props }: AvatarImageProps): React.JSX.Element;
 declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/avatar.js

@@ -51,7 +51,7 @@ function Avatar(t0) {
 	}
 	return t3;
 }
-/** Delegates loading, failure and fallback synchronization to the avatar primitive. */
+/** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
 function AvatarImage(t0) {
 	const $ = _c(15);
 	let className;
@@ -94,7 +94,7 @@ function AvatarImage(t0) {
 	let t6;
 	if ($[9] !== alt || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
 		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
+			kind: "reveal",
 			children: /* @__PURE__ */ _jsx(AvatarPrimitive.Image, {
 				render: t3,
 				keepMounted: true,
@@ -190,6 +190,7 @@ function AvatarBadge(t0) {
 	}
 	return t2;
 }
+/** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
 function AvatarGroup(t0) {
 	const $ = _c(8);
 	let className;
@@ -205,7 +206,7 @@ function AvatarGroup(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className);
+		t1 = cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:transition-[translate] *:data-[slot=avatar]:duration-200 *:data-[slot=avatar]:ease-out *:data-[slot=avatar]:hover:z-10 *:data-[slot=avatar]:hover:-translate-y-0.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/bouncing-dots-loader.d.ts

@@ -0,0 +1,19 @@
+/** Animated three-dot bouncing loader with synchronized floor shadows. */
+import type { HTMLAttributes } from "react";
+export type BouncingDotsLoaderSize = "sm" | "md";
+export type BouncingDotsLoaderProps = Omit<HTMLAttributes<HTMLDivElement>, "aria-label" | "role"> & {
+    /**
+     * Accessible label announced by assistive technologies. Also rendered as visually hidden text
+     * so screen readers can read it independently of the `aria-label`.
+     */
+    label?: string;
+    /** Use `"sm"` for inline or compact contexts and `"md"` (default) for standalone loading panels. */
+    size?: BouncingDotsLoaderSize;
+};
+/**
+ * Renders the loader as a `role="status"` region. It fades in after a short delay, so loads that
+ * finish quickly never flash it. Reduced motion stops the bounce through the shared fallback.
+ * @param props - Label, size and native attributes.
+ * @returns The loader.
+ */
+export declare function BouncingDotsLoader({ label, size, className, ...rest }: BouncingDotsLoaderProps): import("react").JSX.Element;

package/dist/components/bouncing-dots-loader.js

@@ -0,0 +1,47 @@
+import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LOADING_LABEL = "Cargando...";
+/** Stage, dot and shadow geometry per size; the keyframes in `keyframes.css` match these values. */
+const LOADER_SIZE_CLASS_NAMES = {
+	md: {
+		stage: "h-[3.75rem] w-[12.5rem]",
+		dot: "size-5 animate-[beez-bouncing-dot-md_0.5s_ease_infinite_alternate]",
+		shadow: "top-[3.875rem] h-1 w-5"
+	},
+	sm: {
+		stage: "h-[1.875rem] w-[6.5rem]",
+		dot: "size-2.5 animate-[beez-bouncing-dot-sm_0.5s_ease_infinite_alternate]",
+		shadow: "top-[1.9375rem] h-[0.1875rem] w-2.5"
+	}
+};
+/** Horizontal slot and phase of each dot: the middle and right dots trail the left one. */
+const DOT_POSITION_CLASS_NAMES = [
+	"left-[15%]",
+	"left-[45%] delay-200",
+	"right-[15%] delay-300"
+];
+/**
+* Renders the loader as a `role="status"` region. It fades in after a short delay, so loads that
+* finish quickly never flash it. Reduced motion stops the bounce through the shared fallback.
+* @param props - Label, size and native attributes.
+* @returns The loader.
+*/
+export function BouncingDotsLoader({ label = DEFAULT_LOADING_LABEL, size = "md", className, ...rest }) {
+	const sizeClassNames = LOADER_SIZE_CLASS_NAMES[size];
+	return /* @__PURE__ */ _jsxs("div", {
+		"data-slot": "bouncing-dots-loader",
+		"data-size": size,
+		...rest,
+		"aria-label": label,
+		role: "status",
+		className: cn("flex w-full items-center justify-center animate-in fade-in fill-mode-both delay-120 duration-300", className),
+		children: [/* @__PURE__ */ _jsxs("div", {
+			"aria-hidden": "true",
+			className: cn("relative z-[1]", sizeClassNames.stage),
+			children: [DOT_POSITION_CLASS_NAMES.map((positionClassName) => /* @__PURE__ */ _jsx("span", { className: cn("absolute top-0 origin-bottom rounded-full bg-foreground", sizeClassNames.dot, positionClassName) }, `dot-${positionClassName}`)), DOT_POSITION_CLASS_NAMES.map((positionClassName) => /* @__PURE__ */ _jsx("span", { className: cn("absolute -z-[1] rounded-full bg-foreground/35 blur-[1px] animate-[beez-bouncing-dot-shadow_0.5s_ease_infinite_alternate]", sizeClassNames.shadow, positionClassName) }, `shadow-${positionClassName}`))]
+		}), /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}

package/dist/components/calendar.js

@@ -3,6 +3,9 @@ import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { es } from "react-day-picker/locale";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { animate, frame } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MOTION_EASE, MOTION_MONTH_DISTANCE, MOTION_TIMING } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
 import { Button, buttonVariants } from "./button.js";
 import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
@@ -173,6 +176,7 @@ function Calendar(t0) {
 			Root: _temp,
 			Chevron: _temp2,
 			DayButton: t34,
+			Month: CalendarMonth,
 			WeekNumber: _temp3,
 			...components
 		};
@@ -247,6 +251,104 @@ function _temp(t0) {
 		...props_0
 	});
 }
+/**
+* Renders one displayed month and slides it in from the side the user navigated from.
+* DayPicker keys months by display position, so this instance survives navigation and can
+* compare the new month with the previous one. The first render and reduced motion stay static.
+* @param props - DayPicker month properties, including the month being displayed.
+* @returns The month container with its caption and grid.
+*/
+function CalendarMonth(t0) {
+	const $ = _c(13);
+	let calendarMonth;
+	let children;
+	let displayIndex;
+	let props;
+	if ($[0] !== t0) {
+		({calendarMonth, displayIndex, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = calendarMonth;
+		$[2] = children;
+		$[3] = displayIndex;
+		$[4] = props;
+	} else {
+		calendarMonth = $[1];
+		children = $[2];
+		displayIndex = $[3];
+		props = $[4];
+	}
+	const monthRef = React.useRef(null);
+	const monthTime = calendarMonth.date.getTime();
+	const previousMonthTimeRef = React.useRef(monthTime);
+	const reduceMotion = usePrefersReducedMotion();
+	let t1;
+	let t2;
+	if ($[5] !== monthTime || $[6] !== reduceMotion) {
+		t1 = () => {
+			const previousMonthTime = previousMonthTimeRef.current;
+			previousMonthTimeRef.current = monthTime;
+			const element = monthRef.current;
+			if (!element || reduceMotion || previousMonthTime === monthTime) {
+				return;
+			}
+			const isForward = monthTime > previousMonthTime;
+			const isRightToLeft = getComputedStyle(element).direction === "rtl";
+			const direction = isForward !== isRightToLeft ? 1 : -1;
+			const original = {
+				opacity: element.style.opacity,
+				transform: element.style.transform
+			};
+			const restore = () => {
+				element.style.opacity = original.opacity;
+				element.style.transform = original.transform;
+			};
+			const animation = animate(element, {
+				opacity: [0, 1],
+				transform: [`translateX(${direction * MOTION_MONTH_DISTANCE}px)`, "translateX(0px)"]
+			}, {
+				duration: MOTION_TIMING.monthSwap,
+				ease: [...MOTION_EASE]
+			});
+			let isActive = true;
+			animation.then(() => frame.postRender(() => {
+				if (isActive) {
+					restore();
+				}
+			}));
+			return () => {
+				isActive = false;
+				animation.cancel();
+				restore();
+			};
+		};
+		t2 = [monthTime, reduceMotion];
+		$[5] = monthTime;
+		$[6] = reduceMotion;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t1 = $[7];
+		t2 = $[8];
+	}
+	React.useLayoutEffect(t1, t2);
+	let t3;
+	if ($[9] !== children || $[10] !== displayIndex || $[11] !== props) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			ref: monthRef,
+			"data-slot": "calendar-month",
+			"data-display-index": displayIndex,
+			...props,
+			children
+		});
+		$[9] = children;
+		$[10] = displayIndex;
+		$[11] = props;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	return t3;
+}
 function CalendarDayButton(t0) {
 	const $ = _c(21);
 	let className;

package/dist/components/carousel.js

@@ -7,6 +7,17 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Arrow keys that move to the previous and next slide along each axis. */
+const CAROUSEL_KEYS = {
+	horizontal: {
+		previous: "ArrowLeft",
+		next: "ArrowRight"
+	},
+	vertical: {
+		previous: "ArrowUp",
+		next: "ArrowDown"
+	}
+};
 const CarouselContext = React.createContext(null);
 function useCarousel() {
 	const context = React.useContext(CarouselContext);
@@ -16,7 +27,7 @@ function useCarousel() {
 	return context;
 }
 function Carousel(t0) {
-	const $ = _c(47);
+	const $ = _c(48);
 	let children;
 	let className;
 	let opts;
@@ -100,28 +111,30 @@ function Carousel(t0) {
 	}
 	const scrollNext = t6;
 	let t7;
-	if ($[18] !== scrollNext || $[19] !== scrollPrev) {
+	if ($[18] !== orientation || $[19] !== scrollNext || $[20] !== scrollPrev) {
 		t7 = (event) => {
-			if (event.key === "ArrowLeft") {
+			const keys = CAROUSEL_KEYS[orientation];
+			if (event.key === keys.previous) {
 				event.preventDefault();
 				scrollPrev();
 			} else {
-				if (event.key === "ArrowRight") {
+				if (event.key === keys.next) {
 					event.preventDefault();
 					scrollNext();
 				}
 			}
 		};
-		$[18] = scrollNext;
-		$[19] = scrollPrev;
-		$[20] = t7;
+		$[18] = orientation;
+		$[19] = scrollNext;
+		$[20] = scrollPrev;
+		$[21] = t7;
 	} else {
-		t7 = $[20];
+		t7 = $[21];
 	}
 	const handleKeyDown = t7;
 	let t8;
 	let t9;
-	if ($[21] !== api || $[22] !== setApi) {
+	if ($[22] !== api || $[23] !== setApi) {
 		t8 = () => {
 			if (!api || !setApi) {
 				return;
@@ -129,18 +142,18 @@ function Carousel(t0) {
 			setApi(api);
 		};
 		t9 = [api, setApi];
-		$[21] = api;
-		$[22] = setApi;
-		$[23] = t8;
-		$[24] = t9;
+		$[22] = api;
+		$[23] = setApi;
+		$[24] = t8;
+		$[25] = t9;
 	} else {
-		t8 = $[23];
-		t9 = $[24];
+		t8 = $[24];
+		t9 = $[25];
 	}
 	React.useEffect(t8, t9);
 	let t10;
 	let t11;
-	if ($[25] !== api) {
+	if ($[26] !== api) {
 		t10 = () => {
 			if (!api) {
 				return;
@@ -160,17 +173,17 @@ function Carousel(t0) {
 			};
 		};
 		t11 = [api, onSelect];
-		$[25] = api;
-		$[26] = t10;
-		$[27] = t11;
+		$[26] = api;
+		$[27] = t10;
+		$[28] = t11;
 	} else {
-		t10 = $[26];
-		t11 = $[27];
+		t10 = $[27];
+		t11 = $[28];
 	}
 	React.useEffect(t10, t11);
 	const t12 = orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
 	let t13;
-	if ($[28] !== api || $[29] !== canScrollNext || $[30] !== canScrollPrev || $[31] !== carouselRef || $[32] !== opts || $[33] !== scrollNext || $[34] !== scrollPrev || $[35] !== t12) {
+	if ($[29] !== api || $[30] !== canScrollNext || $[31] !== canScrollPrev || $[32] !== carouselRef || $[33] !== opts || $[34] !== scrollNext || $[35] !== scrollPrev || $[36] !== t12) {
 		t13 = {
 			carouselRef,
 			api,
@@ -181,28 +194,28 @@ function Carousel(t0) {
 			canScrollPrev,
 			canScrollNext
 		};
-		$[28] = api;
-		$[29] = canScrollNext;
-		$[30] = canScrollPrev;
-		$[31] = carouselRef;
-		$[32] = opts;
-		$[33] = scrollNext;
-		$[34] = scrollPrev;
-		$[35] = t12;
-		$[36] = t13;
+		$[29] = api;
+		$[30] = canScrollNext;
+		$[31] = canScrollPrev;
+		$[32] = carouselRef;
+		$[33] = opts;
+		$[34] = scrollNext;
+		$[35] = scrollPrev;
+		$[36] = t12;
+		$[37] = t13;
 	} else {
-		t13 = $[36];
+		t13 = $[37];
 	}
 	let t14;
-	if ($[37] !== className) {
+	if ($[38] !== className) {
 		t14 = cn("relative", className);
-		$[37] = className;
-		$[38] = t14;
+		$[38] = className;
+		$[39] = t14;
 	} else {
-		t14 = $[38];
+		t14 = $[39];
 	}
 	let t15;
-	if ($[39] !== children || $[40] !== handleKeyDown || $[41] !== props || $[42] !== t14) {
+	if ($[40] !== children || $[41] !== handleKeyDown || $[42] !== props || $[43] !== t14) {
 		t15 = /* @__PURE__ */ _jsx("div", {
 			onKeyDownCapture: handleKeyDown,
 			className: t14,
@@ -212,25 +225,25 @@ function Carousel(t0) {
 			...props,
 			children
 		});
-		$[39] = children;
-		$[40] = handleKeyDown;
-		$[41] = props;
-		$[42] = t14;
-		$[43] = t15;
+		$[40] = children;
+		$[41] = handleKeyDown;
+		$[42] = props;
+		$[43] = t14;
+		$[44] = t15;
 	} else {
-		t15 = $[43];
+		t15 = $[44];
 	}
 	let t16;
-	if ($[44] !== t13 || $[45] !== t15) {
+	if ($[45] !== t13 || $[46] !== t15) {
 		t16 = /* @__PURE__ */ _jsx(CarouselContext.Provider, {
 			value: t13,
 			children: t15
 		});
-		$[44] = t13;
-		$[45] = t15;
-		$[46] = t16;
+		$[45] = t13;
+		$[46] = t15;
+		$[47] = t16;
 	} else {
-		t16 = $[46];
+		t16 = $[47];
 	}
 	return t16;
 }

package/dist/components/checkbox.js

@@ -21,7 +21,7 @@ function Checkbox(t0) {
 	}
 	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-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);
+		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);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/confirm-delete-button.d.ts

@@ -0,0 +1,29 @@
+/** Row action menu whose destructive item asks for an inline confirmation before running. */
+import { type ReactNode } from "react";
+export interface ConfirmDeleteButtonLabels {
+    /** Dismisses the confirmation. */
+    cancel?: string;
+    /** Runs `onConfirm`. */
+    confirm?: string;
+    /** Destructive menu item that opens the confirmation. */
+    delete?: string;
+    /** Accessible name of the icon-only menu trigger. */
+    menu?: string;
+}
+export interface ConfirmDeleteButtonProps {
+    /** Question shown in the confirmation, also used as its accessible name. */
+    message: string;
+    onConfirm: () => void;
+    /** Extra menu items (for example Edit), rendered before the delete item. */
+    extraMenuItems?: ReactNode;
+    labels?: ConfirmDeleteButtonLabels;
+    className?: string;
+}
+/**
+ * Renders an icon menu with a destructive item. Choosing it opens a confirmation anchored to
+ * the trigger; only its confirm button runs `onConfirm`. Escape, an outside click or Cancel
+ * dismiss it without side effects.
+ * @param props - Confirmation copy, callback, extra items and optional labels.
+ * @returns The menu trigger with its confirmation.
+ */
+export declare function ConfirmDeleteButton({ message, onConfirm, extraMenuItems, labels, className, }: ConfirmDeleteButtonProps): import("react").JSX.Element;